CODEWITHSUNDEEP
kendo-uikendo-grid
Richard Martin
Richard Martin

Reputation: 131

set initial page with Kendo UI Grid

I know this has been asked before, but I just cannot get this to work for some reason.

 @(Html.Kendo().Grid<MyViewModel>()
    .Name("KendoGrid")
    .Columns(columns =>
    {
     ---Columns---
    })
    .Events(e=>e.DataBound("onRowBound"))
    .Pageable(pageable => pageable.Refresh(true).PageSizes(true).ButtonCount(5))
    .Filterable()
    .Sortable()
    .DataSource(dataSource => dataSource
          .Ajax()
          .PageSize(20)
          .Model(model => model.Id(p => p.ModelId))
          .Read(read => read.Action("Action", "Controller").Data("Handler"))
        )
     .AutoBind(false)
 )

Since my AutoBind is false, I call a function to read the data source after the page has loaded:

$(document).ready(function () {
     ReadDataSource();
});


function ReadDataSource() 
{
    $("#KendoGrid").data().kendoGrid.dataSource.page(2);
}

(I am hard-coding the initial page number for now for simplicity. Suffice it to say that the data source has at least three pages).

Every time I navigate to the page, it always shows page one. What am i doing wrong?

Thanks.

Upvotes: 1

Views: 2103

Answers (2)

Nic
Nic

Reputation: 23

Try to change your ReadDataSource function to this 

function ReadDataSource() 
{
    $("#KendoGrid").data("kendoGrid").dataSource.page(2);
}

Upvotes: 1

Sangram Nandkhile
Sangram Nandkhile

Reputation: 18202

Try this

function ReadDataSource() 
{
    var grid = $("#KendoGrid").data("kendoGrid");
    grid.one("dataBound", function () {
        this.dataSource.page(2);
    });
}

or

// Make sure you set the correct pageSize

function ReadDataSource() 
{
    $("#KendoGrid").data("kendoGrid").dataSource.query({ page: 2, pageSize: 20 });
}

Upvotes: 0

Related Questions