I'm reading about igGrid remote paging here : http://help.infragistics.com/NetAdvantage/jQuery/2013.1/CLR4.0?page=igGrid_Paging.html.
However, it's still unclear to me how I setup my remote paging if I'm NOT using the IG wrappers.
Could someone advise me on how to use recordCountKey and responseDataKey to configure this ? How do I implement my c# page method on the server-side, is it through the grid's "pageIndexChanging" event ?
As per the link above, it says :
"If you are implementing your own remote service (for example in ASP.NET or PHP), in order to properly initialize and render the pager, your service must specify both the responseDataKey (grid option) and the recordCountKey (paging option). The recordCountKey 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:///grid/PagingGetData?page=2&pageSize=25"
ex/
$("#imGrid").igGrid({ //dataSource: jsonData,
dataSource: "/Margins/getTrades?level=account&entityName=" + entityName, responseDataKey: "Data.data", columns: [ { headerText: "Member", key: "entityName", dataType: "string", width: "100px" }, { headerText: "Margin", key: "Margin", dataType: "number", format: "double", width: "120px" }, ], features: [ name: "Paging", type: "remote", pageSize: 10,
recordCountKey: "Data.recordCountKey", }
});
and my controller code returns a nice-formatted Json object :
public dynamic getTrades(string entityName, string level = "member") { // Bind to Service (details omitted) BasicHttpBinding httpBinding = new BasicHttpBinding(); // Converts List type to Json format below JavaScriptSerializer ser = new JavaScriptSerializer(); var tradeData = myService.GetTrades(entityName); var jsonDataObj = Json(new { recordCountKey = 50, responseDataKey = "data", data = tradeData }); string jsonData = ser.Serialize(jsonDataObj); return jsonData; }
Hey Bob,
recordCountKey is a property you need to add to the response data which specifies the total number of records (so that the grid UI knows what to show and how to calculate, i.e. XXX of YYY records, where YYY is the total number of records). responseDataKey is a property holding your array of actual data records. As I see from your example above, those are already properly set. Do you need to add "Data" in front of ".data" and ".recordCountKey", respectively. Could you show me some example response JSON that you're sending to the browser?
As for the pageSize and page index ("page") parameters, you need to add extra parameters to your service method and read them in its implementation, so that you know which page the client requests. so you need to do something like this :
var tradeData = myService.GetTrades(entityName, pageSize, pageIndex); // where pageSize and page are parameters that the service will read from the URL, similar to entityName.
Then you need to modify your GetTrades method to take into account this pageSize and page (the index), in order to return the correct data portion.
Hope it helps. Thanks,
Angel
Hi Angel,
Yes in fact I do need to qualify responseDataKey with "Data.data". The reason is when the following controller code returns jsonData,
var tradeData = myService.GetTrades(entityName); var jsonDataObj = Json(new { recordCountKey = tradeData.Count(), responseDataKey = "data", data = tradeData }); string jsonData = ser.Serialize(jsonDataObj); return jsonData;
jsonData is then returned back to the client with the property "Data" as the top level of jsonData. Take a look at my debug screen shot :
{"ContentEncoding":null,"ContentType":null,"Data":{"recordCountKey":37,"responseDataKey":"data","data":[{"ExtensionData":{},"Account":"0012F","BuySell":0,"FaceValue":0,"Member":"3D","SettlementDate":"\/Date(1421298000000)\/","TradeDate":"\/Date(1358226000000)\/","TradeID":null,"contractID":"CGZU12","qty":3,"source":"IX"},{"ExtensionData":{},"Account":"0012F","BuySell":0,"FaceValue":0,"Member":"3D","SettlementDate":"\/Date(1421384400000)\/","TradeDate":"\/Date(1358312400000)\/","TradeID":null,"contractID":"CGZZ12","qty":13,"source":"IX"},{"ExtensionData":{},"Account":"0012F","BuySell":0,"FaceValue":0,"Member":"3D","SettlementDate":"\/Date(1421470800000)\/","TradeDate":"\/Date(1358398800000)\/","TradeID":null,"contractID":"CGZH13","qty":1,"source":"IX"},{"ExtensionData":{},"Account":"0012F","BuySell":0,"FaceValue":0,"Member":"3D","SettlementDate":"\/Date(1421557200000)\/","TradeDate":"\/Date(1358485200000)\/","TradeID":null,"contractID":"CGZM13","qty":69,"source":"IX"}}
ok great, in that case if you apply my suggestion to pass the paging (pageSize & page) parameters to your service and propagate them to the GetTrades method, remote paging should work. Not sure what GetTrades does (I mean how it connects to your backend) so if you need more details please let me know.
thanks
Hi,
myService.GetTrades() is just a backend service just returns to me an iEnumerable list of trade records, which I then serialize into jsonDataObj.
My controller is also called getTrades(), which I call directly from the dataSource property of igGrid.
Where I'd like clarification is the on dataSource of the igGrid :
dataSource: "/Margins/getTrades?level=account&entityName=" + entityName
My understanding is that your grid automatically appends the appropriate pageIndex and pageSize params as per this IG link :
http://help.infragistics.com/NetAdvantage/jQuery/2013.1/CLR4.0?page=igGrid_Paging.html
"In the case of the “remote” scenario, for every page change, the grid initiates a request to the dataSource specified in the grid, by automatically calculating and appending all necessary parameters to the request, such as pageIndex and pageSize."
So do I NOT need to add any params to the dataSource call ? But I do need to add the pageIndex and pageSize parameters to my controller first, correct ?
For now, I could just write the custom code here in getTrades controller, then eventually discuss it with the backend service coders.
public dynamic getTrades(string entityName, string level = "member", int pageIndex, int pageSize) { // service binding... JavaScriptSerializer ser = new JavaScriptSerializer(); var tradeData = iRAService.GetTrades(entityName); var jsonDataObj = Json(new { recordCountKey = tradeData.Count(), responseDataKey = "data", data = tradeData }); string jsonData = ser.Serialize(jsonDataObj); return jsonData; }
hey Bob,
that's right, you don't need to add any params to the dataSource url, the grid will do that automatically before it sends out the request. The only thing you need to change is make your service accept pageSize and page, and then either:
1) Filter the IEnumerable that you get from the backend yourself, based on those page index and pageSize or
2) pass those to the backend call, and ask your backend service developes to take them into account - i strongly recommend this, mainly for performance reasons
Thanks
Right, I agree it's best for the backend service to accomplish this for performance. In the meantime, however, I'll work up a beta version before discussing it further. I'd like to get a handle on it first.
And the other thing that concerns me has to do with sorting. So if the user decides to sort on say "trade Data" column, and my service always returns data by the Trade Id for example, is that something I need to account for in my logic ?
thanks.
Bob
Hello,
In my opinion your scenario is related to https://github.com/IgniteUI/igniteui-angular2/issues/146
Follow the issue to receive notification, we will resolve it soon and your scenario should be covered too.
We are following the same above steps to use remote paging in Ig tree grid. below are our codesnippet, we are getting error like arrays and iterates are only allowed when we give URl in dataSource. Please help us on this.
<ig-tree-grid [options]='gridOptions' [widgetId]='id'></ig-tree-grid>
this.gridOptions = { responseDataKey: "Data.Records", dataSource: "/api/DealsList?UserID=" + this.userID, height: "500", width: "100%", columns: [ ---------- ], features: [ { name: "Paging", type: "remote", pageSize: 20, recordCountKey: "Data.recordCountKey", pageIndexUrlKey: "pageIndex", pageSizeUrlKey: "pageSize" } ] };
Json I'm getting from API:
{"ContentEncoding":null,"ContentType":null,"Data":{"Records":"[{\"DealId\":47r3254545456,\"Phase\":541,\"DealName\":\"StatusChangeTest\",\"StatusId\":22457,\"StatusName\":\"Re-Authorization Approval Pending\"}]","recordCountKey":3634,"responseDataKey":"Records"},"JsonRequestBehavior":0,"MaxJsonLength":null,"RecursionLimit":null}
error while i'm running :
ERROR Error: Error trying to diff '/api/DealsList?UserID=X202942'. Only arrays and iterables are allowed
ERROR CONTEXT [object Object]
Do we missing some thing on this setting for remote paging.
Hi Alexander.
I would like to know about if with remote paging can I still using this kind of filters on the grid.
Currently, before team developer than mine, were sending all data to the client and doing paging, sorting and filtering all sucessfully but when end workdays at office, IIS (Internet Information) died because there were so much clients connected and getting around 3 thousands register in this way.
I am planning change for remote paging, but I am wondering about these filters since they are so useful for our users.
Thanks in advance. Here in the company we got IG licensed btw.
Great to hear, thanks Bob.
Thanks Angel. And yes, we've been already playing with virtualization - and we like it very much.
We just have to be careful that eventually the returned dataset doesn't get into the 10s of thousands...
thank you.