4 Replies Latest reply on Aug 16, 2010 5:29 AM by Daniel Posch

    Editable data table

    Daniel Posch Newbie

      Hi everyone,

       

      I have been trying to implement an editable (extended) data table, but failed. I should either save the input values on the fly, i.e. without asking, or with one "Save"-button for several data tables on the page. Neither did I accomplish to do so, nor did I find anything on the net that helped me out.

       

      Whenever I do an Ajax request on the client-side (e.g. opening the modal panel, sorting, filtering,...), the data in the input fields is saved in the database. But... I don't know why. I would really appreciate a suggestion how to either save every change in the input fields (manually triggering an Ajax request?) or manage to save the data only in when clicking on a save button.

       

      I am using Seam's application framework on the server-side and RichFaces 3.3.3 on the client-side. You can see my code below.

       

      Thanks a lot for your great work,

       

      Daniel

       

       

      <!-- Table 1 -->
      <a4j:form id="table1Form" ajaxSubmit="true">
          <h:outputText value="Could not find any data in table 1"
              rendered="#{table1Query.resultCount == 0}" />
      
          <a4j:region>
              <rich:extendedDataTable id="table1" value="#{table1Query.dataModel}"
                  var="_table1">
                  <f:facet name="header">
                      <h:outputText value="Table 1's elements (#{table1Query.resultCount})" />
                  </f:facet>
      
                  <rich:column sortBy="#{_table1.prop1}" label="Property 1" filterBy="#{_table1.prop1}"
                      id="columnProperty1">
                      <f:facet name="header">Property 1</f:facet>
                      <h:inputText id="property1Input" value="#{_table1.prop1}" />
                  </rich:column>
      
                  <rich:column sortBy="#{_table1.prop2}" label="Property 2"
                      filterBy="#{_table1.prop2}" id="columnProperty2">
                      <f:facet name="header">Property 2</f:facet>
                      <h:inputText id="property2Input" value="#{_table1.prop2}" />
                  </rich:column>
      
                  <rich:column sortable="false" label="Action">
                      <f:facet name="header">Action</f:facet>
                      <h:commandLink id="modalPanelLink" value="History">
                          <rich:componentControl for="myModalPanel"
                              attachTo="modalPanelLink" operation="show" event="onclick" />
                      </h:commandLink>
                  </rich:column>
              </rich:extendedDataTable>
          </a4j:region>
      </a4j:form>
      
      <!-- Table 2 -->
      <a4j:form id="table2Form" ajaxSubmit="true">
          <h:outputText value="Could not find any data in table 2" rendered="#{table2Query.resultCount == 0}" />
      
          <a4j:region>
              <rich:extendedDataTable id="table2" value="#{table2Query.dataModel}"
                  var="_table2">
                  <f:facet name="header">
                      <h:outputText value="Table 2's elements (#{table2Query.resultCount})" />
                  </f:facet>
      
      
                  <rich:column sortBy="#{_table2.prop3" label="Property 3" filterBy="#{_table2.prop3}"
                      id="columnProperty3">
                      <f:facet name="header">Property 3</f:facet>
                      <h:inputText id="property3Input" value="#{_table2.prop3}" />
                  </rich:column>
      
                  <rich:column sortBy="#{_table2.prop4}" label="Property 4"
                      filterBy="#{_table2.prop4}" id="columnProperty4">
                      <f:facet name="header">Property 4</f:facet>
                      <h:inputText id="property4Input" value="#{_table2.prop4}" />
                  </rich:column>
              </rich:extendedDataTable>
          </a4j:region>
      </a4j:form>
      
      

       

       

      @Name("table1Query")
      @AutoCreate
      public class Table1Query extends EntityQuery<Table1> {
          private static final String EJBQL = "SELECT t FROM Table1";
      
          private static final String[] RESTRICTIONS = {/* ... */};
          
          public ViewE1Query() {
              setEjbql(EJBQL);
              setRestrictionExpressionStrings(Arrays.asList(RESTRICTIONS));
          }
      
          @Override
          @Factory("table1List")
          public List<Table2> getResultList() {
              return super.getResultList();
          }
      }
      

       

       

      @Name("table2Query")
      @AutoCreate
      public class Table2Query extends EntityQuery<Table2> {
          private static final String EJBQL = "SELECT t FROM Table2";
      
          private static final String[] RESTRICTIONS = {/* ... */};
          
          public ViewE1Query() {
              setEjbql(EJBQL);
              setRestrictionExpressionStrings(Arrays.asList(RESTRICTIONS));
          }
      
          @Override
          @Factory("table2List")
          public List<Table2> getResultList() {
              return super.getResultList();
          }
      }
      
        • 1. Re: Editable data table
          Ilya Shaikovsky Master

          probably you isundestand form ajaxSubmit attribute. It's just makes standard submit controls like h:command works through ajax and nothing more. I do not think that's what you need so you could remove it.

           

          Now to the case.

          • In order to store the values from fields on change - use a4j:support in fields. (probably with ajaxSubmit =true as nothing except the current input should be updated)
          • In order the modal panel call not cause ajax submit - use disableDefault at component control or just use the other link control which is not perform subit(outputLink)
          • As for the sorting.. Need to check more buto I think that's how the default sorting works.. It's probably process all the inputs in table and for now - nt sure how to preven that.
          1 of 1 people found this helpful
          • 2. Re: Editable data table
            Daniel Posch Newbie

            Ilya Shaikovsky wrote:

             

            probably you isundestand form ajaxSubmit attribute. It's just makes standard submit controls like h:command works through ajax and nothing more. I do not think that's what you need so you could remove it.

            The ajaxSubmit attribute prevented my modal panel to close after a second or so. I removed it, though, and use a <a4j:commandLink /> for my modal panel. That works fine.

            Now to the case.

            • In order to store the values from fields on change - use a4j:support in fields. (probably with ajaxSubmit =true as nothing except the current input should be updated)

            I guess you mean ajaxSingle, don't you? Anyway, using <a4j:support /> works perfectly fine, thanks a lot!

             

            However, when an input field is empty, I get the value "''" (two quote signs) in the database. Why is that?

            • In order the modal panel call not cause ajax submit - use disableDefault at component control or just use the other link control which is not perform subit(outputLink)
            • As for the sorting.. Need to check more buto I think that's how the default sorting works.. It's probably process all the inputs in table and for now - nt sure how to preven that.

            Sorting and filtering isn't an issue anymore, everything is saved.

            • 3. Re: Editable data table
              Daniel Posch Newbie

              Unfortunately, I have found a problem when using pagination/a <rich:datascroller> (and subsequently <rich:extendedDataTables>'s row attribute)just like that:

               

              <f:facet name="footer">
                   <rich:datascroller maxPages="20" />
              </f:facet>
              

               

              I got strange results in the database, so I tried to call an action-method and log the object's primary key. When using pagination I get random (at least I haven't found any pattern) primary keys, even within the same row. Notably, the primary keys I receive are only a few rows away of the data I try to save, but I don't know if that's of any relevance. Any suggestions?

               

              Thanks a lot!

              • 4. Re: Editable data table
                Daniel Posch Newbie

                No suggestions as to why row keys randomly change?

                 

                I'm still struggling with this issue.