I have an igGrid that has a JSON array as its datasource. The JSON array data comes from an ajax call to a webservice. The grid works and returns the data I'm expecting, but when the grid is loaded, it looks like all the data is loading to the client in one burst. I have about 10,000 records that I'm expecting from my webservice. I have paging turned on to show 20 records/page.
How do I configure the grid so only 20 records are retrieved initially, then as I page or use the filter, additional records are retrieved from the datasource so the load times are faster? Here's my grid setup. I also tried changing the "mode" to remote for paging & filtering, but that seems to break the paging & filtering altogether.
$.ajax({ type: "POST", url: "Services/TextileService.asmx/GetAllTextiles", data: {}, contentType: "application/json; charset=utf-8", dataType: "json", traditional: true, success: function (data) { $("#grid2").igGrid({ autoGenerateColumns: false, columns: [ { headerText: "Pattern", key: "Pattern", dataType: "string" }, { headerText: "Colorway", key: "Colorway", dataType: "string" }, { headerText: "Mill", key: "Mill", dataType: "string" }, { headerText: "Grade", key: "Grade", dataType: "string" }, { headerText: "PartID", key: "PartID", dataType: "string" }, { headerText: "Obsolete", key: "Obsolete", dataType: "string" }, { headerText: "Class", key: "Class", dataType: "string" } ], width: "100%", dataSource: data.d, responseDataKey: "Records", tabIndex: 1, primaryKey: "PartID", fixedHeaders: true, autoAdjustHeight: false, features: [ { name: "Filtering", type: "local", dataFiltering: filteringHandler, allowFiltering: true, caseSensitive: false, columnSettings: [ { columnKey: "Pattern", allowFiltering: true, condition: "contains" }, { columnKey: "Colorway", allowFiltering: true, condition: "contains" }, { columnKey: "Mill", allowFiltering: true, condition: "contains" }, { columnKey: "Grade", allowFiltering: true, condition: "contains" }, { columnKey: "PartID", allowFiltering: true, condition: "contains" }, { columnKey: "Obsolete", allowFiltering: true, condition: "contains" }, { columnKey: "Class", allowFiltering: true, condition: "contains" } ] }, { name: "Sorting", type: "local", //mode: "multi", columnSettings: [ { columnKey: "Pattern", allowSorting: true, currentSortDirection: "asc", firstSortDirection: "asc" }, { columnKey: "Colorway", allowSorting: true, currentSortDirection: "asc", firstSortDirection: "asc" }, { columnKey: "Mill", allowSorting: true, firstSortDirection: "asc" }, { columnKey: "Grade", allowSorting: true, firstSortDirection: "asc" }, { columnKey: "PartID", allowSorting: true, firstSortDirection: "asc" }, { columnKey: "Obsolete", allowSorting: true, firstSortDirection: "asc" }, { columnKey: "Class", allowSorting: true, firstSortDirection: "asc" } ] }, { name: "Selection", mode: "row", rowSelectionChanging: rowSelectionHandler, multipleSelection: false, activation: true }, { name: 'Paging', type: "local", pageSize: 20, visiblePageCount: 5, totalRecCountKey: "servertotalcount" } ] }); }, failure: function (data) { alert("ERROR: GetAllTextiles"); } });
Thanks,
John
Ok - I think I understand how the paging parameters work. I'm running into a different issue now though.
When the grid initially loads, it is calling my GetAllTextiles webservice and I see the data returned from the webservice. The problem is it is returning the data in XML format. How do I get it to return in json format? I see the Content-Type in the request header as xml. When I call my webservice using the jquery $ajax call, I can set the POST content-type to "application/json". How can I do something similar when the grid is retrieving data from my webservice.
The error I see with the exact code below is
"The remote request to fetch data has failed: (parsererror) There was an error parsing the XML data and applying the defined data schema: root is undefined"
So the webservice is returning data - just in XML and I think the grid datasource is expecting json.
If I set the dataSourceType = "json", then I get the following error msg
"There was an error parsing/evaluating the JSON string: JSON.parse: unexpected character"
$("#grid3").igGrid({ autoGenerateColumns: false, columns: [ { headerText: "Pattern", key: "Pattern", dataType: "string" }, { headerText: "Colorway", key: "Colorway", dataType: "string" }, { headerText: "Mill", key: "Mill", dataType: "string" }, { headerText: "Grade", key: "Grade", dataType: "string" }, { headerText: "PartID", key: "PartID", dataType: "string" }, { headerText: "Obsolete", key: "Obsolete", dataType: "string" }, { headerText: "Class", key: "Class", dataType: "string" } ], width: "100%", dataSource: "Services/TextileService.asmx/GetAllTextiles", dataSourceUrl: "Services/TextileService.asmx/GetAllTextiles", //dataSourceType: "json", responseDataKey: "d", tabIndex: 1, primaryKey: "PartID", fixedHeaders: true, autoAdjustHeight: false, features: [ { name: "Selection", mode: "row", rowSelectionChanging: rowSelectionHandler, multipleSelection: false, activation: true }, { name: 'Paging', type: "remote", pageIndexUrlKey: "pageIndex", pageSizeUrlKey: "pageSize", pageSize: 20, visiblePageCount: 5, totalRecCountKey: "TotalRecords" } ]});
Any suggestions why I should try to fix this issue?
Hello,
Please refer to the following article from the online help
http://help.infragistics.com/Help/NetAdvantage/jQuery/2011.1/CLR4.0/html/igGrid_Paging.html
Especially this part:
Remote Paging
If you are binding to remote services, in order to properly initialize and render the pager, your service must specify both the responseDataKey (grid option) and the totalRecCountKey (paging option). The totalRecCountKey member tells the Paging widget how many records in total are in the backend. The responseDataKey specifies which property in the response contains the resulting data.
Therefore, when remote paging is used, the grid automatically generates the proper request parameters in the following way:
http://<server>/grid/PagingGetData?page=2&pageSize=25
Note: You may change the key names, by setting the pageSizeUrlKey / pageIndexUrlKey in the Paging options, respectively.
Let me know if you need further assistance.
Could you show me an example of how to use the pageIndexUrlKey & pageSizeUrlKey to pass as parameters into my webservice? I'm not sure what I'm supposed to do with them.
Thanks
Hello John,
Thank you for posting in our forums.
This behavior is observed because you are using "local" paging.
If you want "remote" paging please refer to the below forum thread:
http://community.infragistics.com/forums/p/59486/302349.aspx#302349
Let us know if you need further assistance.