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

    Scrollable <rich:dataGrid...>

    Kiran Kumar Newbie

      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 Master

          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...>
            Kiran Kumar Newbie

            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...>
              Kiran Kumar Newbie

              Nevermind my code issue, all good Thanks Again Ilya.

               

              Kiran.