在我的项目中,我想根据屏幕尺寸更改网格的过滤器类型。对于大屏幕,我使用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);
}))
根据文档:
当调用setOptions时,网格小部件将被销毁,并且 重新创建。如果小部件绑定到远程数据,则新的读取请求 将制作。
剑道网格非常复杂,因此需要在更改选项后重建它。一种解决方案是禁用自动数据绑定并提供您自己的机制或仅实现缓存。但是你为什么在乎呢?谁在运行时更改屏幕尺寸?这是边际问题,不值得花时间解决问题。视口尺寸大多是在旋转手机或平板电脑时发生的,但是在这里,一个数据重新加载肯定不是问题。