Kendo ASP.Net MVC 中的网格：防止在 grid.setOption 上刷新数据

Question

在我的项目中，我想根据屏幕大小更改网格的过滤器类型。对于大屏幕，我使用 GridFilterMode.Row，对于移动设备，我想使用 GridFilterMode.Menu（.Mobile(MobileMode.Phone) 在这个项目中不能正常工作，结果非常难看）。

所以我尝试处理 $(window).resize 事件来为我的网格设置正确的过滤器类型。这是我的功能：

$(window).resize(function () {

    var windowSize = $(window).innerWidth();
    var filterMode = "";

    if (windowSize >= 960) {
        filterMode = "row";
        loadTemplate(filterMode);

    } else if (windowSize < 960) {
        filterMode = "menu";
        loadTemplate(filterMode);
    }

});

function loadTemplate(filterModeType) {
    var grid = $("#messagesGrid").data("kendoGrid");
    var options = grid.getOptions();

    if (options) {
        options.filterable = { "mode": filterModeType }
        options.toolbar = [
            {
                template: $("#toolbarTemplate").html()
            }
        ];

        grid.setOptions(options);
    }
}

一切正常。但是当我调用 grid.setOptions() 时，它会导致网格数据源的刷新，并且会引发对服务器的新请求 - 每次我更改 window 的大小时。因此，如果我将 window 的大小调整 10 次——我将收到 10 个请求！

有人知道如何防止这种情况发生吗？

以防万一 - 我的 Kendo().Grid 数据源部分

.DataSource(dataSource => dataSource.Ajax()
  .Read(read => read.Action("FilterTypeGrid", "Project"))
  .PageSize(20)
  .Sort(sort => sort.Add(t => t.Date).Descending())
  .ServerOperation(true)
  .AutoSync(true)
  .Model(model =>
  {
      model.Id("Key");
      model.Field(a => a.Key).Editable(false);
      model.Field(a => a.Text).Editable(false);
      model.Field(a => a.Date).Editable(false);
      model.Field(a => a.Name).Editable(true);
      model.Field(a => a.Selected).Editable(true);
  }))

Answer 1

根据文档here：

When setOptions is called, the Grid widget will be destroyed and recreated. If the widget is bound to remote data, a new read request will be made.

Kendo grid 是相当复杂的野兽，因此需要在更改选项后重新构建。一种解决方案是禁用自动数据绑定并提供您自己的机制或只实现缓存。但你为什么要关心？谁在运行时更改屏幕大小？这是边际问题，不值得花时间去解决。 Viewport size 主要发生在 phone 或 tablet 旋转时，但一次数据重新加载在这里肯定不是问题。

Kendo ASP.Net MVC 中的网格：防止在 grid.setOption 上刷新数据

Kendo Grid in ASP.Net MVC: prevent refreshing data on grid.setOption

asp.net-mvc

kendo-ui

kendo-grid

kendo-asp.net-mvc