5 Replies Latest reply on Jul 26, 2010 3:50 AM by Ilya Shaikovsky

    How to insert a row in xxxxDataTable

    Roy Smith Newbie

      Is there any way to insert (and delete) a row in a dataTable without re-rendering the entire table?

       

      My ContactManager application has a 4,000 row table with draggable rows, so it takes 5 seconds or so to render. That's OK on startup, but I don't want to do this for every table update.

       

      The UI that I am trying to achieve is that a user can click an "Add" button which inserts a blank row in the contacts table and then sets its fields to input fields of some type to allow the user to populate the new row. I've attached a simple screenshot to illustrate.

       

       

      btw. I've just started working with RichFaces and so far it's been a wonderful experience. Great job guys!

        • 1. Re: How to insert a row in xxxxDataTable
          Ilya Shaikovsky Master

          no way to insert without updating parent.

           

          B.t.w. why you trying to show all the 4000 ros to the client? I do not think user will go through all that list. I prefer to use pagging and some filter additionally to make it really convinient if requirements permits. Then the updates will not be so painfull and rendering will be fast.

          • 2. Re: How to insert a row in xxxxDataTable
            Roy Smith Newbie

            Thx Ilya

             

            In my app I want the user interface as responsive as a local app, hence the fewest possible server round-trips. The problem with paging is that there is no obvious way to predict which page a given contact is on. So the user clicks a page and then waits for that page of the table to download and render. I'm considering building alphabetic tabs and breaking my contacts down by initial letter. That was before I hit this problem  https://community.jboss.org/message/553864#553864

             

             

            I had a lot of problems with rendering of the built-in filtering so in the end just created my own search form outside the table.

             

            The solution I finally settled on is to have my contacts load in an iframe in an unselected tab, so the initial load is quick while the contacts are populated in the background. When a user is inserting a new contact, the Contacts table is not displayed, so again the refresh happens in background.

             

            It's only really a problem on IE, which takes forever to render the table. Chrome and FF (especially FF4) are fine.

             

            best

            Roy

            • 3. Re: How to insert a row in xxxxDataTable
              Ilya Shaikovsky Master

              I'm not sure if you created something about

              I had a lot of problems with rendering of the built-in filtering so in the end just created my own search form outside the table.
              I was at vacation so maybe lost some threads.. But in general I still think that you should choose the way of solving such problem and building interface which contains lightweight tables with good filters instead of transmitting all the data to the client.
              • 4. Re: How to insert a row in xxxxDataTable
                Well Nery Newbie

                Hi,

                 

                I have a similar problem!

                 

                My page have the following code:

                 

                 


                 

                ...........

                <a4j:region id="region" renderRegionOnly="true" >

                                    <a4j:poll reRender="colum" action="#{bean.test}" interval="1000"/>

                 

                <rich:dataTable value="#{bean.list}"
                                                    var="list"
                                                    id="dataTable"
                                                    rows="10"
                                                    ajaxKeys="#{bean.keyToUpdate}">
                                        <rich:column id="colum">
                                            <f:facet name="header">
                                                <h:outputText value="Name" /> 
                                            </f:facet>
                                            <h:outputText id="name" value="#{list.name}" />
                                        </rich:column>

                     ............

                 

                The code snippet above do update only the row I want through ajaxKeys. But looking at wireshark(http://www.wireshark.org/) the app receive all XHTML's structure from ajax request! In other words, it send 1150 bytes (depending of update's information) of 1500 total bytes of an IP packet.

                Can I send only the information (without XHTML structure) and uptade the dataTable's row?? And if I can't, I wanted to understand why.

                 

                Thank's in advance!!

                • 5. Re: How to insert a row in xxxxDataTable
                  Ilya Shaikovsky Master

                  change colum to name in reREnder.

                  and please do not make similar postings in different threads. I already answered in separate one you  created.