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
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.
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,
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.
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 nguyenjn ,
I am just checking about the progress of this issue.
I still have the issue.
The issue is how do I get my asmx web service to return json instead of xml. When I call the web service using the JQuery $ajax POST, it works great and returns json data and the grid populates. But when I click next/prev on the igGrid pager, it uses a GET so when it calls the web service something different is happening and the same web service is returning xml.
I'm not instantiating a separate igDatasource. When I instantiate my igGrid, I'm assuming it will instantiate an igDataSource for me and as long as I set the "dataSourceType" attribute to json, it'll expect json format in the data, correct?
Do you have any example code that uses a remote (i.e. not local) datasource for paging or filtering and calls a regular asmx webservice and returns json data?
Thank you for the update.
I created a simple sample of iGrid that calls a regular asmx webservice and binds json data
As Angel mentioned you should set ResponseFormat
Please refer also to the below article for returning JSON when using ASMX services
http://encosia.com/asmx-scriptservice-mistakes-installation-and-configuration/
Let me know if you need further assistance