How to get Kendo grid page change options?

Question

I have completed setting up kendo UI grid (angularJs version) for my web api. I have included sever side pagination. It sends take, skip, page and pageSize options for each page changed request.

Here I would like to create my own search model in the api, bind those value to the JS object and then post the data to the server.

I am wondering if I could get the values for events associated with grids like : page change, pageSize.

My Custom Data fields to be Sent :`

    public class SearchModel 
{
    ....
    .......
    public int PageNo { get; set; }
    public int PageSize { get; set; }
    public string SortOrder { get; set; }
    public string SortColumn { get; set; }
}

So these specified fields in the server side needs to be populated. For this an object can be made in JS with these identical field and the values should be populated from the grid pagination events. Like pageNo and the page Size.

How to do this using angular js ?

Answer 1

check this out.

var grid = $('#test_grid').data('kendoGrid');
var pager = grid.pager;
pager.bind('change', test_pagechange);

function test_pagechange(e){
   console.log(e);
}

Also you can try this

dataBound event is fired when page changes. You can get current page index with page() method of the grid's dataSource.

$("#grid").data("kendoGrid").dataSource.page();

Also look into documentation http://docs.telerik.com/kendo-ui/api/javascript/ui/pager#events-change

Answer 2

Typically, you would add your values to the kendo datasource parameters using the dataSource.transport.read.data configuration(http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport.read.data) instead of extracting the datasource parameters and adding yours.

Take a look at this example http://dojo.telerik.com/@Stephen/uXAjU. This is a modified kendo grid demo for remote data binding.

I have simply added a read.data config the dataSource's transport configuration:

transport: {
    read: {
      url: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders",
      data: customData
    }
}

where customData is(this is where you would add the parameters from your search model):

function customData() {
    return {
        custom1: 1,
        custom2: "Two",
        custom3: new Date()
    };
}

Now whenever the grid queries the remote service, it passes the paramaters built in the datasource functionality, i.e. paging/filtering/grouping paramaters, in addition to the data returned by your custom transport.read.data method. Take a look at the dev tools network tab to see that the customData is appended to the grid/datasource read request.