3 Replies Latest reply on Mar 11, 2011 7:32 PM by anonyin

    Scrollable <rich:dataGrid...>

    anonyin

      I have a Gallery view functionality and currently I am using <rich:dataGrid with pagination(<rich:dataScroller). The new requirement is to remove the pagination and acheive the "Scrollable Data Table" functionality for the Gallery View page.

       

      Is there any richFaces component available for this ? If not any Ideas how I could implement and acheive this "scrollable data grid" behavior ?

       

      Thanks In Advance.

       

      -Kiran

        • 1. Scrollable <rich:dataGrid...>
          ilya_shaikovsky

          Why you can't just use SDT for that? just set cell sizes using CSS as wide as need, remove borders and use te same scrolling feature.

           

           

          If you can'tt for some reason and stick with dataGrid:

          you need ajax loading(1) or just scrolling(2)? the first is not really simple task as you will need almost duplicate scrollable code applying it to grid. And for second goal - just wrap the dataGrid to scrollable div container.

          simple idea - observer scroll events on container and send ajax by jsFunction which will add needed portion to the grid model and reRender the grid. But such simple impl will have problems with the performace for long scrolling operations, and probably will need to optimize for loading only required data anyway later( 1) SDT variant ).

          • 2. Scrollable <rich:dataGrid...>
            anonyin

            Thanks Ilya.

             

            I kinda like the 2 option(just wrap the dataGrid toscrollable div container) and is easy to implement. I tried both thefollowing options and it doesn't help.

             

            option:1

            <div style="overflow: auto;">

            <rich:dataGrid  ...

            ..........

            </rich:dataGrid>

            </div>

             

            option:2

            <rich:dataGrid  style="overflow: auto;" ....

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

            </rich:dataGrid>

             

            I tried the option 2, to restric the rich:tree and it helped, not sure why it is not working with dataGrid.

             

            Any thoughts ?

             

            Thanks

            Kiran

            • 3. Scrollable <rich:dataGrid...>
              anonyin

              Nevermind my code issue, all good Thanks Again Ilya.

               

              Kiran.