Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

Data Grid Problem

Avatar

Level 2
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" />

</mx:columns>

</mx:DataGrid>




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





4 Replies

Avatar

Level 4
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.

Avatar

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,



...

<network>

<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.



Ed

Avatar

Level 4
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.



Avatar

Level 4
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:columns>



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



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



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



</mx:columns>



</mx:DataGrid>



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.



edit:

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.