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.
Hello nguyenjn ,
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
Hi,
I asked DS to create a sample for you which binds to ASMX. we have a couple of remote binding samples for client only grids (no MVC) but they are binding to WCF instead of ASMX. In theory it shouldn't make a difference.
The grid always performs a GET request when data-binding, so i suggest to double check if you have the GET methods which return JSON exposed (not only the POST ones).
that should do it:
[WebMethod]
[ScriptMethod(UseHttpGet=true, ResponseFormat=ResponseFormat.Json)]
Let me know if it helps.
Angel
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?
I am just checking about the progress of this issue.
Hello ,
You receives this error because your dataSourceType is xml and you are setting it to json
http://help.infragistics.com/jQuery/2011.1/ui.iggrid#!options
You can use igDataSource in order to bind the igGrid to it
https://www.igniteui.com/help/igdatasource-igdatasource-overview