使用Kendo UI Grid设置初始页面问题求助

Hey there! I get it—frustrating when you know someone’s solved a problem before but you can’t get it working for your own setup. Let’s fix that initial page issue for your Kendo UI Grid right away.

Here are a few reliable ways to set the initial page, depending on your scenario:

1. Set the initial page directly in the DataSource configuration #

Since you’re using an Ajax-bound Grid, you can add the .Page() method directly to your DataSource setup to define the starting page number. For example, if you want to load page 3 by default:

@(Html.Kendo().Grid<MyViewModel>()
    .Name("KendoGrid")
    .Columns(columns => {
        // Your column definitions here
    })
    .Events(e=>e.DataBound("onRowBound"))
    .Pageable(pageable => pageable.Refresh(true).PageSizes(true).ButtonCount(5))
    .Filterable()
    .Sortable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Page(3) // This sets the initial page to 3
        .Model(model => model.Id(p => p.ModelId))
        .Read(read => read.Action("Action", "Controller"))
    )
)

This will make the Grid automatically request data for the specified page on initial load.

2. Pass the initial page via a dynamic data parameter #

If your starting page needs to come from a dynamic source (like a ViewBag value, hidden input, or user preference), use the .Data() method in the Read configuration to pass it to your controller action:
First, update your Grid’s Read section:

.Read(read => read.Action("Action", "Controller")
    .Data("getInitialPageParams") // Call a JS function to pass params
)

Then add the corresponding JavaScript function:

function getInitialPageParams() {
    // Replace 3 with your dynamic value (e.g., $('#initialPage').val(), @ViewBag.InitialPage)
    return {
        page: 3
    };
}

Just make sure your controller action accepts the standard Kendo pagination parameters (page, pageSize, etc.) and returns a DataSourceResult with the correct page of data.

3. Jump to the desired page after Grid initialization #

If you need to set the page after the Grid has rendered (e.g., based on another UI element’s value), use JavaScript to call the Grid’s page() method. You can do this in document.ready or adjust your existing onRowBound event (just avoid infinite loops):

$(document).ready(function() {
    var grid = $("#KendoGrid").data("kendoGrid");
    grid.page(3); // Navigate to page 3
});

Or in your onRowBound event (with a guard to run only once):

function onRowBound(e) {
    if (!e.sender.dataSource._initialPageSet) {
        e.sender.page(3);
        e.sender.dataSource._initialPageSet = true;
    }
}

A quick note: Make sure your controller action correctly handles pagination—Kendo sends page, pageSize, sort, and filter parameters automatically, so your action should use these to return the right subset of data. Also, if the page number you set is higher than the total number of pages available, Kendo will automatically fall back to the last valid page.

内容的提问来源于stack exchange，提问作者Richard Martin