Using ServerPaging with custom server datasource parameters

[Bach]

Hi Support team,

I encounter this issue while integrating Grid into my application. Our clients provide us a fix Data API like below:

http://11.11.11.11/accountservice.aspx?PageSize=100  get the page which currentpage = 0 ( seqNo: 1~100)
http://11.11.11.11/accountservice.aspx?PageSize=100&CurrentPage=2 get third page (seqNo: 201~300)
http://11.11.11.11/accountservice.aspx?PageSize=100&GetTotal=true get the total count number

The datasource is in JSON format:
[ { UEN:"ST12345",CustName:"AA",Email:"" }, ... ] more than 10K records like this on the server.

Could you please help me with below grid features:
- ServerPaging
- AutoBinding
- Server Sorting

Thanks & Regards,
Bach

[Matt Barker]

I'm just looking into server side paging myself. The response should contain both the data and the total rows. So you could write a Web API/MVC controller or WCF service that gets the data from that data source and returns it in the correct format. Then you can call your web service using code like this:

var grid = $('#grid').kendoGrid({
    dataSource: {
        serverPaging: true,
        serverSorting: true,
        serverFiltering: true,
        allowUnsort: true,
        pageSize: 25,
        transport: {
            read: {
                url: 'DataSource/Get',
                dataType: 'json',
                type: 'POST'
            },
            parameterMap: function (options) {
                return JSON.stringify(options);
            }
        },
        schema: {
            data: 'data', // records are returned in this
            total: 'total' // total row count is required to determine page count
        }
    },
    sortable: {
        mode: 'multiple',
        allowUnsort: true
    },
    scrollable: true,
    pageable: {
        input: true,
        numeric: false,
        pageSizes: [5, 10, 25, 50, 100, 500, 1000]
    },
    filterable: true,
    columns: [
            { field: 'UEN', title: 'UEN' },
            { field: 'CustName', title: 'Customer Name' },
            { field: 'Email', title: 'Email Address' }
        ]
    }
});

See this link for some useful model binders: http://blogs.telerik.com/kendoui/posts/14-01-02/kendo-ui-open-sources-dynamic-linq-helpers

[Bach]

Hi Matt, thanks for your answer, it helps me understand more about the KendoUI Grid but I encounter a problem that the datasource format is not controlled by us and I cannot reformat the data like the post you sent. That's the reason I looking for re-mapping parameter.

[Matt Barker]

I didn't mean for you to re-write the data source, rather to write a new web service in the application that calls the data source and returns JSON data in the correct format. If you can't write any server side code, and you have to rely on a purely client side solution then you can use a custom function in the read method. This code is just off the top of my head so not tested, but something along these lines should work:

transport: {
    read: function (options) {
        var grid = {},
            dataUrl = 'http://11.11.11.11/accountservice.aspx?PageSize=' + options.data.pageSize + '&CurrentPage=' + (options.data.page - 1),
            totalUrl = 'http://11.11.11.11/accountservice.aspx?PageSize=' + options.data.pageSize + '&GetTotal=true'
        $.when(
            $.ajax(dataUrl),
            $.ajax(totalUrl)
        ).then(function(data, total) {
            grid.data = data;
            grid.total = total; // If total is the page count, multiply it by the page size
            options.success(grid);
        });
    }
}

Take a look at the options.data.sort property for the sort order.