Kendo UI Grid dataBound事件设分页陷循环及MVC初始化分页问题

一、初始化时直接指定分页 #

在ASP.NET MVC Razor的Grid配置中，可直接通过DataSource的.Page()方法设置初始页码，无需额外事件处理：

@(Html.Kendo().Grid<YourModelType>()
    .Name("yourGrid")
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(10) // 设置每页条数
        .Page(2) // 直接指定初始加载第2页
        .Read(read => read.Action("GetGridData", "Home"))
    )
    .Pageable() // 启用分页控件
    // 其他Grid配置（列、样式等）
)

这种方式最直接，Grid初始化时会自动请求对应页码的数据，不会出现循环问题。

二、避免dataBound事件递归循环 #

如果必须通过dataBound事件动态切换分页，核心是添加状态标志位，防止重复触发分页逻辑：

1. 在Razor中绑定事件 #

@(Html.Kendo().Grid<YourModelType>()
    .Name("yourGrid")
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(10)
        .Read(read => read.Action("GetGridData", "Home"))
    )
    .Pageable()
    .Events(events => events.DataBound("onGridDataBound")) // 绑定dataBound事件
)

2. 编写JavaScript逻辑（带标志位） #

// 全局标志位，标记是否正在执行分页切换
var isProcessingPageChange = false;

function onGridDataBound(e) {
    // 如果正在处理分页，直接返回，避免递归
    if (isProcessingPageChange) {
        isProcessingPageChange = false;
        return;
    }

    var targetPage = 3; // 你需要跳转的目标页码
    var currentPage = e.sender.dataSource.page();

    // 仅当当前页码与目标页码不一致时执行切换
    if (currentPage !== targetPage) {
        isProcessingPageChange = true;
        e.sender.dataSource.page(targetPage);
    }
}

原理说明 #

调用dataSource.page()会触发Grid重新发起数据请求，请求完成后再次触发dataBound事件。通过标志位控制，第二次进入事件时直接跳过分页操作，从而终止递归循环，结束加载状态。

三、初始化后动态设置分页（非事件方式） #

若需要在Grid初始化完成后（比如从URL参数、本地存储获取页码）设置分页，可在document.ready中直接调用，无需依赖dataBound事件：

$(document).ready(function() {
    var grid = $("#yourGrid").data("kendoGrid");
    // 示例：从URL参数获取页码
    var targetPage = parseInt(new URLSearchParams(window.location.search).get("page"));
    
    if (targetPage && targetPage > 0) {
        grid.dataSource.page(targetPage);
    }
});

这种方式只会执行一次分页切换，不会触发递归问题。

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