6 Replies Latest reply on Apr 27, 2009 2:55 AM by Ruben Jorge

    Datatable re-rendering problem

    Ruben Jorge Newbie

      Hello everyone,

      I'm new to JSF and I'm trying to make a few small tests using Richface's datatable component.

      I have a managed bean with an ArrayList called "HeaderList" and I'm trying to use the values in that array as the header's column names in a datatable.

      The datatable uses those values fine initially, but if I dynamically change one of them (or add another) using a button action function, the datatable does not re-render itself with the new values. Do I need to do something else so that it reloads the new values?

      I know the values in the managed bean are updated, so it's not a Java coding problem.

      Here is my .jsp source:

      <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
      <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
      <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
      <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
      <f:view>
       <html>
       <head>
       <meta http-equiv="Content-Type"
       content="text/html; charset=windows-1252"/>
       <title>table3</title>
       </head>
       <body>
       <h:form>
       <rich:dataTable id="taskList" value="#{TaskListBean.headerList}" var="dataItem" reRender="true">
       <f:facet name="header">
       <rich:columnGroup>
       <rich:column>
       <a4j:repeat value="#{TaskListBean.headerList}" var="dataHeader">
       <rich:column style="text-align:center">
       <h:outputText value="#{dataHeader.headerName}"/>
       </rich:column>
       </a4j:repeat>
       </rich:column>
       </rich:columnGroup>
       </f:facet>
       </rich:dataTable>
      
       <h:commandButton value="commandButton1" action="#{TaskListBean.commandButton_action}"/>
       </h:form>
       </body>
       </html>
      </f:view>
      



      Thanks in advance,
      ~Ruben

        • 1. Re: Datatable re-rendering problem
          Ilya Shaikovsky Master

          Starting from the beggining we could not talk about reRender if h:commandButton used.
          And what you wanted to achieve by using reRender=true?
          And why you not using rich:columns component if wants to achieve dynamic columns generation?

          It seems like trying to use some kind of magic..

          • 2. Re: Datatable re-rendering problem
            Ruben Jorge Newbie

            Thank you for your reply. Nevermind the reRender=true, I was just trying it, removed now.

            The purpose of the button is to call a function that changes the data structure associated with the datatable, which it does.

            I just don't know how to reload the datatable with the new values that were changed.

            Yes, I want to use dynamic column generation, if there is an easier way, can you please direct me to a manual/tutorial?

            Thank you again.

            • 3. Re: Datatable re-rendering problem
              Ilya Shaikovsky Master

              1) http://livedemo.exadel.com/richfaces-demo/richfaces/columns.jsf?c=columns&tab=usage

              2) currently it is not a problem of RF reRender because actually as I told you h:commandButton reloads all the page and no reREnder there. So there are back-end problems for sure.

              • 4. Re: Datatable re-rendering problem
                Ruben Jorge Newbie

                I tried using rich:columns and I can create the headers using the data in my managed bean. I don't know if this component allows colspan management as in http://livedemo.exadel.com/richfaces-demo/richfaces/dataTable.jsf?c=columnGroup&tab=usage as I will need to create nested headers. This is why I was using columnGroup.

                Regarding the data updates in the datatable, I still can't do it. You say the command button reloads the whole page, in that case shouldn't the datatable be realoaded with the updated values in the bean? Those values are changed when the button action is executed, but the datatable presents the old values.

                My .jsp source code (using rich:columns):

                <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                "http://www.w3.org/TR/html4/loose.dtd">
                <%@ page contentType="text/html;charset=windows-1252"%>
                <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
                <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
                <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
                <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
                <f:view>
                 <html>
                 <head>
                 <meta http-equiv="Content-Type"
                 content="text/html; charset=windows-1252"/>
                 <title>columns</title>
                 </head>
                 <body>
                 <rich:dataTable value="" var="model" width="750">
                
                 <f:facet name="header">
                 <h:outputText value="Testing"></h:outputText>
                 </f:facet>
                
                 <rich:columns value="#{TaskListBean.headerList}" var="columns" index="ind">
                 <f:facet name="header">
                 <h:outputText value="#{columns.headerName}" />
                 </f:facet>
                
                 <h:outputText value="test" />
                 </rich:columns>
                
                 </rich:dataTable>
                
                 <h:commandButton value="commandButton1" action="#{TaskListBean.commandButton_action}"/>
                 </body>
                 </html>
                </f:view>
                



                My managed bean:

                package project1;
                
                import java.util.ArrayList;
                import java.util.List;
                
                public class TaskListBean {
                
                 private ArrayList headerList;
                
                 public void loadHeader() {
                 headerList = new ArrayList();
                
                 HeadersData data3 = new HeadersData();
                 data3.setHeaderName("header1");
                
                 HeadersData data4 = new HeadersData();
                 data4.setHeaderName("header2");
                
                 HeadersData data5 = new HeadersData();
                 data5.setHeaderName("header3");
                
                 headerList.add(data3);
                 headerList.add(data4);
                 headerList.add(data5);
                 }
                
                 public List <TaskListData> getHeaderList() {
                 loadHeader();
                 return headerList;
                 }
                
                 public void commandButton_action() {
                 HeadersData newData = new HeadersData();
                
                 newData = (HeadersData)headerList.get(1);
                 newData.setHeaderName("New Header");
                 headerList.set(1, newData);
                 }
                }
                



                Thank you again for your replies.

                • 5. Re: Datatable re-rendering problem
                  Roland Schöler Newbie

                  Hello rubenrjorge, your getter getHeaderList() will be called inside from the rich:dataTable and according to your implementation this will only call the loadHeader method.
                  Can't see where you add your updated values......

                  You have to change your SRC to ensure, that updated values will be reflected in your list.

                  regards
                  rschoeler

                  • 6. Re: Datatable re-rendering problem
                    Ruben Jorge Newbie

                    Thank you for your reply rschoeler,

                    I actually had a bug in my code that would prevent it from running the right way.

                    What I was trying to do is call a function that changed the values when I pressed a button, but I found out you need to have the button inside a form or it won't work (like I said, I'm new to these things...).

                    So here's a little different working example of a datatable that retrieves the column data from a variable. That variable's data is changed when the button is pressed and the datatable reloads with the new data:

                    .jsp file:

                    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
                    <%@ page contentType="text/html;charset=windows-1252"%>
                    <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
                    <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
                    <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
                    <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
                    <f:view>
                     <html>
                     <head>
                     <meta http-equiv="Content-Type"
                     content="text/html; charset=windows-1252"/>
                     <title>columns</title>
                     </head>
                     <body>
                     <rich:dataTable value="" var="model" width="750">
                    
                     <f:facet name="header">
                     <h:outputText value="Testing"></h:outputText>
                     </f:facet>
                    
                     <rich:columns value="#{TaskListBean.headerList}" var="columns" index="ind">
                     <f:facet name="header">
                     <h:outputText value="#{columns.headerName}" />
                     </f:facet>
                    
                     <h:outputText value="test" />
                     </rich:columns>
                    
                     </rich:dataTable>
                     <h:form id="testForm">
                     <h:commandButton value="new data" action="#{TaskListBean.changeValues}"/>
                     </h:form>
                     </body>
                     </html>
                    </f:view>
                    



                    .java managed bean:

                    package project1;
                    
                    import java.util.ArrayList;
                    import java.util.List;
                    
                    import javax.faces.event.ActionEvent;
                    
                    public class TaskListBean {
                    
                     private ArrayList headerList;
                     private boolean createNew = true;
                    
                     public void loadHeader() {
                     headerList = new ArrayList();
                    
                     HeadersData data3 = new HeadersData();
                     data3.setHeaderName("header1");
                    
                     HeadersData data4 = new HeadersData();
                     data4.setHeaderName("header2");
                    
                     HeadersData data5 = new HeadersData();
                     data5.setHeaderName("header3");
                    
                     headerList.add(data3);
                     headerList.add(data4);
                     headerList.add(data5);
                     }
                    
                     public void loadNewHeader() {
                     headerList = new ArrayList();
                    
                     HeadersData data3 = new HeadersData();
                     data3.setHeaderName("AAA");
                    
                     HeadersData data4 = new HeadersData();
                     data4.setHeaderName("BBB");
                    
                     HeadersData data5 = new HeadersData();
                     data5.setHeaderName("CCC");
                    
                     headerList.add(data3);
                     headerList.add(data4);
                     headerList.add(data5);
                     }
                    
                     public List <TaskListData> getHeaderList() {
                     if (createNew)
                     loadHeader();
                     else
                     loadNewHeader();
                    
                     return headerList;
                     }
                    
                     public void changeValues() {
                     createNew = false;
                     }
                    }
                    



                    Thank you again for your help.