使用setOptions恢复Kendo UI Grid状态后无数据显示问题求助

问题概述 #

项目中使用Kendo UI Grid（MVC初始化），通过DataBound等事件保存用户的网格状态（筛选、列调整等）。但在恢复状态时，调用setOptions后网格显示“无记录”，移除该调用则数据正常加载；尝试等待网格加载完成再调用setOptions会导致两次数据请求，用户体验差。

核心原因 #

1. 操作顺序错误：先设置数据源并读取，再调用setOptions会重置网格配置（包括数据源状态），导致已加载的数据被清空或无法正确渲染。
2. 状态配置冲突：手动设置stateGrid.toolbar可能覆盖网格原有配置，或模板解析异常干扰数据渲染。
3. DataBound事件重复触发：恢复状态后的数据加载会触发DataBound，可能覆盖刚恢复的状态。

解决方案 #

1. 调整操作顺序：先恢复状态，再绑定数据源 #

将状态恢复放在数据源设置之前，确保网格先应用用户保存的配置，再加载适配该配置的数据。

2. 优化状态保存逻辑：排除不必要的配置 #

保存状态时移除固定配置（如toolbar），避免恢复时冲突。

3. 控制DataBound事件：避免重复保存状态 #

添加标记，跳过恢复状态后的第一次DataBound事件触发的保存操作。

代码修改示例 #

状态保存函数调整 #

function SaveGridState(e) {
    // 跳过恢复状态时的自动保存
    if (window.isRestoringGridState) {
        window.isRestoringGridState = false;
        return;
    }

    var grid = e.sender;
    var state = grid.getOptions();
    // 移除toolbar配置（固定项无需保存）
    delete state.toolbar;
    // 保存处理后的状态到存储（替换为你的保存逻辑）
    localStorage.setItem(`GridState_${grid.name}`, JSON.stringify(state));
}

状态恢复与数据源绑定代码 #

$(function() {
    var grid = $("#FeedGrid").getKendoGrid();
    var stateGrid = GetGridState("FeedGrid"); // 你的状态读取函数

    if (!isNullOrEmpty(stateGrid)) {
        // 标记当前正在恢复状态，避免DataBound触发重复保存
        window.isRestoringGridState = true;
        // 先恢复网格状态
        grid.setOptions(stateGrid);
    }

    // 创建并设置数据源
    var dataSource = new kendo.data.DataSource({
        transport: {
            read: function (options) {
                $.ajax({
                    url: GetApiUrl('Api/GetGrid'),
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify(DataSourceRequestViewModel(options, currentSearchXml)),
                    type: 'POST',
                    cache: false,
                    success: function (result) {
                        options.success(result);
                    },
                    error: function (result) {
                        options.error(result);
                    }
                });
            }
        },
        schema: {
            data: "Data",
            total: "Total"
        }
    });

    // 绑定数据源并读取数据
    grid.setDataSource(dataSource);
    grid.dataSource.read();
});

MVC Grid初始化代码（保持原有，仅确认事件绑定） #

@(Html.Kendo().Grid<Entity>()
      .Name("FeedGrid")
      .HtmlAttributes(new { @class = "FeedGrid" })
      .Sortable(sortable => sortable
          .AllowUnsort(true)
          .SortMode(GridSortMode.MultipleColumn))
      .Scrollable()
      .ColumnMenu()
      .Filterable()
      .Reorderable(ro => ro.Columns(true))
      .Resizable(rs => rs.Columns(true))
      .Groupable()
      .NoRecords("<b style='text-align:center'><i>---- No records found ----</i></b>")
      .Columns(columns => /* 你的列配置 */)
      .Events(events =>
                 { 
                     events.ExcelExport("exportGridWithTemplatesContent");
                     events.ColumnShow("SaveGridState");
                     events.ColumnHide("SaveGridState");
                     events.ColumnReorder("SaveGridState");
                     events.ColumnResize("SaveGridState");
                     events.ColumnMenuInit("SortFilterDropdown");
                     events.DataBound("SaveGridState");
                 })
      .DataSource(dataSource => dataSource
          .Ajax()
          .ServerOperation(false)));

关键说明 #

• 移除了不必要的setTimeout，因为MVC渲染的Grid在页面加载完成后已初始化，可直接操作。
• 先恢复状态再绑定数据源，确保网格配置（筛选、排序、列布局等）先生效，数据源读取时会自动适配这些配置请求数据。
• 排除toolbar配置的保存与恢复，避免固定UI元素的冲突。

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