Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Bob M.
835
How to implement remote paging in igGrid
posted

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;            
        }