Hi Vasya,

Thanks for the response. So this is my setup:

• Initialized the IgGrid with a responseDataKey
• Did NOT provide a URL as the data source in the options (since I have a custom API)
• In the paging options, set it to remote and provided the recordCountKey, pageSizeUrlKey and the pageIndexUrlKey
• Now when initializing the IgGrid, I provided the dataSource to be an object which contains the responseDataKey with the result object and the recordCountKey with the total number of values on the server

When the user clicks next or selects a page number to navigate to I am firing a pageIndexChanging event which contains the page number the user wants to see. I am retrieving the correct contents in the correct format and overwriting the existing dataSource with this new one, but it does not update on the grid.

It just shows the selected page number and the grid is empty and does not show any contents. Seems like I somehow need to update the items on the table.

I also tried re-rendering the IgGrid- it updated the contents but the page number was not changing, it was highlighted as page number 1 no matter which page I selected. The contents of the grid were changing, though.

Could you please help me work around this.

Thanks.

Hello Mohammed,

By design if remote Paging is used the igGrid will make a remote request. Since the dataSource url in your scenario is not set this request will not be successful and respectively the data, which the igGrid is expecting, is not going to be loaded correctly.  My suggestion for achieving your requirements is handling urlParamsEncoding event of the data source, which is fired before the URL parameters are encoded. The idea is to populate the custom properties, which your API service is expecting (page size, total records count, page index etc.) in the URL and return the resulting data.

var myUrlParamsEncoding = function (item, params) {
    alert("myUrlParamsEncoding");
}
 
var ds;
$(window).load(function () {
    var url = "http://services.odata.org/OData/OData.svc/Products?$format=json&$callback=?";
    ds = new $.ig.DataSource({
        callback: render,
        dataSource: url,
        schema: {
            fields: [{
                name: "Name"
            }, {
                name: "Price"
            }, {
                name: "Rating"
            }],
            searchField: "d"
        },
        responseDataKey: "d",
        responseDataType: "jsonp",
        urlParamsEncoding: myUrlParamsEncoding
    });
    ds.dataBind();
});

This approach will avoid rebinding the igGrid on every page change and will not interfere with the default data binding cycle of the grid.

Please let me know if you need any further assistance with this matter.

Hi,

What I ended up doing is set a custom responseDataKey and total records key, firing a custom event every time a page change or sort happens and when I get a response I provide the object as the dataSourceObject and then call dataBind

hi

Can you please provide a sample how you acheived this having the same senario.

Thanks