Setting the initial pagesize

[BruceWMember]

Hello,

How do I set the initial value for the the pagesize the grid will request from a server-side data handler?

I am using a data handler page that generates JSON data based on the pagesize and pagenum the grid requests from it. I have tried applying “pagesize: 25” to the source, dataAdapter, and the grid itself, but when the grid first requests data from my data handler page, it always is requesting “pagesize=10” on the first try. The result is that the first time the grid is displayed, it shows 25 rows but only the first 10 are populated and the rest are empty. The “Show rows” dropdown correctly shows “25,” and the label shows “1-25 of 12780.” However, if I use either the “next” or “previous” buttons, the next request sent to my data handler correctly has “pagesize=25” in the querystring, and the grid is displayed properly.

While debugging the Jscript, I see that the “dataAdapter.pagesize” is set to “10” sometime during the call to the ‘$(“#jqGrid”).jqxGrid’ constructor. That happens even if I explicitly set “dataAdapter.pagesize = 25;” before the constructor is called.

Also, is there any comprehensive documentation for the “jqx.dataAdapter” object? I am intrigued by the events I saw in the samples, “loadComplete,” “downloadComplete,” and “loadError,” and would like to know more about this object.

Thank you,

Bruce

[Peter StoevKeymaster]

Hi Bruce,

Thank you for writing.

You can update the initial ‘pagesize’ before the grid requests data by using the processdata function:

For example:

          var source =
            {
                 datatype: "json",
                 datafields: [
					 { name: 'CompanyName'},
					 { name: 'ContactName'},
					 { name: 'ContactTitle'},
					 { name: 'Address'},
					 { name: 'City'},
					 { name: 'Country'}
                ],
			    url: 'data.php',
				root: 'Rows',
				beforeprocessing: function(data)
				{		
					source.totalrecords = data[0].TotalRows;
				},
				processdata: function(data)
				{
					data.pagesize = 20;
				}
            };		

The dataAdapter object currently has 3 events – ‘loadComplete’ – occurs when the data loading is completed and stored in the dataAdapter’s records property. ‘downloadComplete’ – occurs when a remote data is requested via an ajax call and is downloaded. The ‘loadError’ event is raised when the remote data is requested but there is an error in the request. We’ll do our best to provide additional details about this object in the next update of the help documentation.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[BruceWMember]

That worked very well, Steve. Thank you!

Bruce

[Peter StoevKeymaster]

Hi Bruce,

We just updated the help documentation and you can read more about the binding capabilities of the jqxDataAdapter plug-in here:
jquery-data-adapter.htm

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts