网格中Kendo AutoComplete随分页切换重载的参数异常问题

核心问题 #

AutoComplete的数据源不会自动关联网格的分页状态，需要手动将当前网格的页码、页大小同步到AutoComplete的数据源请求参数中。

具体解决方案 #

1. 监听网格分页变化事件 #

在网格初始化时绑定pageChange事件，每次分页切换时触发参数同步：

$("#grid").kendoGrid({
    // 其他网格配置项
    pageable: true,
    pageChange: function(e) {
        // 获取当前网格的分页参数
        var currentPage = e.sender.page();
        var currentPageSize = e.sender.pageSize();
        // 更新AutoComplete的数据源参数
        syncAutoCompletePaging(currentPage, currentPageSize);
    }
});

2. 同步AutoComplete数据源分页参数 #

编写方法更新AutoComplete的数据源，确保请求时携带正确的分页参数：

function syncAutoCompletePaging(page, pageSize) {
    var autoComplete = $("#filterAutoComplete").data("kendoAutoComplete");
    if (autoComplete) {
        var dataSource = autoComplete.dataSource;
        // 设置数据源分页参数
        dataSource.page(page);
        dataSource.pageSize(pageSize);
        // 重新拉取数据
        dataSource.read();
    }
}

3. 初始化时同步初始分页参数 #

页面加载完成后，同步一次网格初始分页参数，避免首次加载异常：

$(document).ready(function() {
    var grid = $("#grid").data("kendoGrid");
    if (grid) {
        var initialPage = grid.page();
        var initialPageSize = grid.pageSize();
        syncAutoCompletePaging(initialPage, initialPageSize);
    }
});

4. 检查后端参数接收逻辑 #

确保控制器Action接收的参数名与Kendo数据源传递的一致，示例：

public ActionResult FetchAutoCompleteData(int page = 1, int pageSize = 10)
{
    // 根据page和pageSize查询对应分页数据
    // 返回符合Kendo格式的结果集
}

额外注意点 #

• 如果AutoComplete是嵌入在列筛选模板内的组件，可通过网格的filterMenuOpen事件获取当前筛选菜单中的AutoComplete实例，避免找不到组件的问题。
• 确认AutoComplete的数据源已开启serverPaging: true，否则分页逻辑会在前端处理，不会向后端传递分页参数。

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