11 Replies Latest reply on Jan 28, 2012 9:41 AM by Tom Giberius

    vertical scrollbar of extended datatable

    chung siu man Newbie

      Dear All,

       

      I have a web page, using extended datatable, and user often clicking right side bar up or down

      to scroll through records inside extended datatable.

       

      However after saving, rendering of the extended datatable will re-scroll right side bar of extended datatable to the first row.

      To facuilitate user input after saving, can I keep the scroll position / height of the extended datatable even after table rendering.

       

      Can anyone help me? and Thanks

        • 1. Re: vertical scrollbar of extended datatable
          Ilya Shaikovsky Master

          you should not reRender the table - or some custom workarounds should be looked in order to store scroll position. RF client side mechanism which made updates after ajax request - has no idea if you need to store scrolls in updated elements or not,. And it's just replaces old table in DOM with new one. So maybe updates only cells instead of whole table changed using ajaxKeys - will be easier solution.

          • 2. Re: vertical scrollbar of extended datatable
            Tom Giberius Newbie

            I understand when a extended datatable is rerendered that the right scrollbar goes up to its start postion, while the whole table is redrawn.

            Now I insert records in a table and I need to rerender to show the new record. If the table gets too long (and the scrollbar shows up) then it scrolls up and the user needs to go down to the new empty inserted record. That's not what I want.

             

            I know the record (I maintain the selected record in my bean).

             

            What are the possibilities to scroll back. You spoke about some custom work arounds in order to store the scroll postion.

            • 3. Re: vertical scrollbar of extended datatable
              Christian Peter Expert

              In such cases I use a datascroller for pagination, so scrolling won't become an issue. Additionally I set the datascroller to the last page every time a new record has been added. To avoid flickering I'd get the datascroller in the backing bean from the FacesContext.

              • 4. Re: vertical scrollbar of extended datatable
                Tom Giberius Newbie

                @Christian: thanks, I could try to use a dataScroller but that is very different from an extendedDataTable with a vertical scrollbar. The extendedDataTable with scrolling looks more like a user data entry screen. So first I want to find a solution for the extendedDataTable (but I fear this is a difficult one and then I have to fall back to the exentendedDataTable).

                 

                Direction one

                ==========

                 

                Scrolling probably takes place in the Client, so I Assume there must be a scroll position. Solution good be: add a record and remember the scrollposition and then scrollback to the scrollposition (then have the risk goes up and down). But how?

                 

                Direction two

                =========

                If I do not re-render the table it does not scroll back. E.g. on my save-button I do not re-render and the scroll position is maintained.

                How over with new records or deleting records I add/remove them in my bean and then I need to re-render otherwise the screen is not changed.

                Can I add/remove records and not re-render the whole table but somehow only the new/deleted records. ( I guess not).

                 

                Partial Table Updates also does not work => You only can update existing records, not partially add/delete records.

                 

                Anyone a good idea?

                • 5. Re: vertical scrollbar of extended datatable
                  Tom Giberius Newbie

                  Data Scroller is working fine.

                  I prefer to work with the scrollbar but no way I see a solution:

                  1) I looked into the the Java Script of extendedDataTable (where I already made some small changes). No way to influence scrolling from there. But even then the table fully rendered so if you then could scroll to where you want it would not look nice.

                  2) Partial Tables Updates only work on existing rows and seems not to be usable voor inserts/deletes of rows. This looks to me the way it should be implemented (and not a full table redraw by a re-render).

                   

                  If anyonw knows a way forward it would be nice.

                   

                  I will raise a enhancement request for partial table update for inserting and deleting records.

                  • 6. Re: vertical scrollbar of extended datatable
                    Christian Peter Expert

                    It's possible to influence a scrollbar via javascript DOM modifications. So, after you add a line and reRender the whole table you should move the scrollbar down (in the oncomplete event of a a4j:commandButton for example)

                    • 7. Re: vertical scrollbar of extended datatable
                      Tom Giberius Newbie

                      Christian: what kind of statements I should use? I have no idea where to start. Happy to try it out.

                       

                      Anyway: I suspect that it would look ugly: the render=myTable will redraw the full table (so the scrollbar goes to the top) and then you scroll down. I you need to scroll to row 91 and you have a table height of about 20 rows then it would look like a movie with all records passing by?

                       

                      I think that the basic problem lies in the re-render of the table. Partial Table updates are possible with render="myTable:@rows(myBean.ListOfUpdateRows):myColumn", this works for exisiting rows. So there should be something like "render=myTable@Insert(myRow)" adding a row to the DOM. By now there also @body, @header, @footer for partial update of part of a table.

                       

                      Inserting/deleting rows with a table with a scrollbar is just not suiteable, unless you always have less row then the height of your screen, but then you do not need a scrollbar.

                       

                      I have looked around but found no direction for partial insert/deletes of rows in an extendedDataTable.

                      • 8. Re: vertical scrollbar of extended datatable
                        Tomek F Newbie

                        I have the same problem.  Anyone?

                        • 9. Re: vertical scrollbar of extended datatable
                          Tom Giberius Newbie

                          I think there is no solution for the moment. I have raised an enhencement request: RF-11916.

                           

                          Now I use the datascroller. Works fine.

                           

                          If the RF-Team will honor my enhancement request I will later use the scollbar.

                          • 10. Re: vertical scrollbar of extended datatable
                            Tomek F Newbie

                            Yes. There is div and table inside @body od extendeddatatable whiotch could be rendered, and it i think wouldn't affect scrolling positions, but i dont know how can it be rendered. It's tableId:tbn...

                            • 11. Re: vertical scrollbar of extended datatable
                              Tom Giberius Newbie

                              I understood that a re-render gives a refresh of the whole table in the DOM. I think that Richfaces is doing that and this cannot be stopped. Because the replacing the whole table in the DOM the table is in it initial postion with the scroll bar up/