Filter Page Sort Mode

Parent Previous Next

The grid exposes a key property, filterPageSortMode. This property plays a very important role in how the filtering (as well as paging and sorting) mechanism behaves.



This is a key property to understand. There are two values for this property, “server” and “client”. The default mode is client. Let us assume you are working on a Human Resource Management Application. You have a DataGrid that shows a list of Employees. You have a few hundred Employees to show. This can be easily accomplished by getting the list of employees from the server, and setting the data provider property of the grid to an Array that contains this list of Employees. As you need, you enable filters, footers, paging, export, print, etc, and all is well and good. You will be up and running in no time with filterPageSortMode=client. The grid will take care of paging, filtering and cross page sorting for you. However, now consider a scenario where you have to display a time sheet search page. Each employee creates hundreds of time-sheets each year, and multiply that by the number of employees, you are looking at thousands, even hundreds of thousands of records of data. Although it may be possible to load thousands of records in any  DataGrid (including ours) with no noticeable drag, this is not recommended, and often unnecessary. What we suggest in this scenario is you use the filterPageSortMode ={”server”}. What Flexicious does, in this setup, is it assumes that the current Array is a part of a much larger record set, and you are showing just the current page of data. So if there are 100,000 records in the database, and the pageSize is 50, grid will show the 50 records, and provide paging UI for the user to navigate to any record in the result set. At any point in time, no more than 50 records will be loaded on client memory. This setup, will require a little more effort in terms of configuration, but it will be considerably easier to do this with Flexicious as opposed to building it yourself, because the product is designed to cater to a scenario like this.


The Filter/Page/Sort Mode. Can be either "server" or "client". In client mode, the grid will take care of paging, sorting and filtering once the dataprovider is set. In server mode, the grid will fire a FilterPageSortChangeEvent named filterPageSortChange that should be used to construct an appropriate query to be sent to the back end.


For example of the server mode, please review the Fully Lazy Loaded example in the demo console, here : http://www.reactdatagrid.com/demo/#fulllazyload