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()时，它会导致刷新网格数据源，并且每次更改窗口大小时都会向服务器发出新请求。所以如果我调整窗口大小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：

调用setOptions时，Grid小部件将被销毁重建。如果窗口小部件绑定到远程数据，则为新的读取请求将被制作。

Kendo网格是一个相当复杂的野兽，因此需要在更改选项后重建。一种解决方案是禁用自动数据绑定并提供您自己的机制或仅实现缓存。但你为什么关心？谁在运行时更改屏幕大小？这是一个边缘问题，不值得花时间来解决它。视口大小主要发生在手机或平板电脑旋转时，但一次数据重新加载肯定不是问题。

ASP.Net MVC中的Kendo Grid：阻止在grid.setOption上刷新数据

1 个答案: