4 Replies Latest reply on Jul 20, 2007 4:26 AM by Robert Hirst

    Data Grid  Problem

    Ambili Level 1
      Hi all,

      I have a product_list, a datagrid with two columns Rate and availabilty and two buttons called 'Next' and 'Previous'
      Mapping of product_list to DataGrid is as follows..

      <mx:DataGrid id="dg" dataProvider="{product_list }" enabled="{!ds.commitRequired}" creationComplete="ds.fill(product_list)" >
      <mx:columns >
      <mx:DataGridColumn dataField="prdt_rate" headerText="Rate" editable="false" />
      <mx:DataGridColumn dataField="prod_status" headerText="Availabilty" editable="false" />

      While loading the page , if the product_list contains more than 10 records, say 15,

      I want the 'Next' Button to be enabled and display first ten records alone in the datagrid.
      On click of the 'Next' button , the remaining 5 records should be displayed and 'Previous' button should be enabled.

      How can i do this task at clientside..??

      thnx in advance Pr
      Ambili Surendran

        • 1. Data Grid  Problem
          Robert Hirst Level 1
          Have you already got the normal type of paging working in your program, where the fill is updated as the user scrolls through the datagrid?

          Your data-management-config.xml (don't forget to blank any passwords) and the place in your app where you declare the DataService named ds would be useful to see how you are building the data on the server side.

          Don't trust me opinion on this, as I'm fairly new to the Data Management features, but there may be some way to patch into the normal paging method but this may not be possible and LCDS is closed source so I cannot check. The other way would be to have parameters on your fill routine which mimic those of the paged fill routine, where you pass page and pagesize and get back a limited set of results.

          Anyway, if there is an easier way I'd also be interested in hearing about it, but my understanding is that the paging features in LCDS are just for loading big record sets into components without getting every item, then allowing the client to get the data it needs as it comes into view automatically.

          edit: looking at this in more detail, it seems to be implied in the example configuration files that you must define an additional fill method which has two parameters if you want to use data paging, so in fact if you were to simply call fill with page number/page size parameters you would be utilising the same method that LCDS does data paging with. But again, I'm fairly new to this and not sure of any of this info.
          • 2. Data Grid  Problem
            Ed Solovey (adobe) Level 1
            There are two types of paging supported by LCDS,
            1) Paging between server and client
            2) Paging between LCDS server and your data source

            An assembler method with two parameters (page number, page size) that Robert mentions is only necessary if you want to enable the second type of paging.

            To do what you want, on the client side I would add the following properties to the dataGrid:

            verticalScrollPolicy="{mx.core.ScrollPolicy.OFF}" // to disable the vertical scrollbar
            rowCount="10" // to show 10 rows at a time

            You could then use DataGrid.scrollToIndex(int) in your Next and Previous buttons to move through the items and have the enabled property be based on the size of your product_list collection and the row that your grid is currently on.

            As Robert suggests it would be nice to turn paging on here. By modiftying the configuration for your destination and adding,

            <paging enabled="true" pageSize="10" >

            you can turn on paging between client and server. Now if you expect your collection to be very large and dont want all of it to be loaded onto the server at once from your data source, you can add the custom="true' property to that and define a fill with two extra parameteres (page number, page size) in your assembler. This would extend paging from the client all the way to the aseembler. Note that this custom paging feature is available in the current release only if the atuoSync property for your destination is set to false. It will be available regardless of autoSync value in the next release.

            • 3. Re: Data Grid  Problem
              Robert Hirst Level 1
              That really helps me out too, Ed. Thanks for the info.

              I haven't checked this yet, but I'm assuming if you leave the vertical scroll on, then you should be able to have large (e.g. 50, 100) page sizes without some data becoming inaccessible, so I would imagine most important property to set is rowCount=pageSize.

              I was thinking one step above where I should have to make full use of the built in paging; I was looking for an answer at the DataService level rather than at the actual point of delivery for the data. It makes perfect sense to do it that way, and treat rowCount as analogous to pageSize, and the value for scrollToIndex(desiredPage*pageSize) as analogous to currentPage.

              In fact, it should be pretty trivial to extend DataGrid in a new class called PagedDataGrid or similar which exposes various properties and methods more logical for the task at hand, such as nextPage, previousPage, setPage, setPageSize, bindable properties for hasNextPage, hasPreviousPage, currentPage, pageCount, etc.

              • 4. Data Grid  Problem
                Robert Hirst Level 1
                Just tried this method out, and maybe I'm doing something wrong, but rowCount doesn't actually seem to affect the number of rows displayed in the DataGrid.

                Adapting the DataGrid example from the built in help in Flex Builder, but I'm tripling the number of employee records in the data declaration and amending the declaration of the Datagrid to look like this:

                <mx:DataGrid rowCount="2" verticalScrollPolicy="{mx.core.ScrollPolicy.OFF}" dataProvider="{employees}" >


                <mx:DataGridColumn dataField="name" headerText="Name"/>

                <mx:DataGridColumn dataField="phone" headerText="Phone"/>

                <mx:DataGridColumn dataField="email" headerText="Email"/>



                There still seem to be 12 records showing no matter what I use for rowCount. Has anyone tried this, and can they confirm whether it's a problem with my program or a bug? (I'm on Flex 2.0.1 Hotfix 2)

                I've also tried setting rowCount on a project where I'm using a DataService to get the data, but I believe it should work to set that property on DataGrid no matter where the data comes from.

                Okay, got it. It seems that any kind of fixed height on the DataGrid conflicts with the rowCount and stops it working. I had had height set but I'd trimmed it for brevity.