在我的项目中，我想根据屏幕大小更改网格的过滤器类型。 对于大屏幕我使用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); }))In my project I want to change grid's filter type depending on screen size. For large screens I use GridFilterMode.Row and for mobile devices I want to use GridFilterMode.Menu (.Mobile(MobileMode.Phone) doesn't work properly in this project and gives a very ugly result).
So I try to handle $(window).resize event to set the proper filter type for my grid. Here is my function:
$(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); } }Everything works fine. But when I call grid.setOptions() it causes refreshing of the grid data source, and that provokes a new request to server - each time I change window's size. So if I resize window for 10 times - I would get 10 request!
Does anybody have an idea how to prevent this?
Just in case - my Kendo().Grid data source part
.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时，Grid小部件将被销毁并重新创建。 如果小部件绑定到远程数据，则会发出新的读取请求。
剑道网格是非常复杂的野兽，所以需要在改变选项后重建。 一种解决方案是禁用自动数据绑定并提供您自己的机制或仅实现缓存。 但你为什么在意？ 谁在运行时更改屏幕大小？ 这是一个边缘问题，不值得花时间去解决它。 视频大小主要发生在手机或平板电脑旋转时，但一次数据重新加载在这里肯定不是问题。
According to documentation 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 is quite complicated beast, so it needs to be rebuilt after changing options. One solution is to disable automatic data binding and provide your own mechanism or just implement caching. But why do you care? Who changes screen size in runtime? This is marginal problem and not worth spending time to solve it. Viewport size occurs mostly when phone or tablet is rotated, but one data reload is surely not a problem here.
更多推荐
发布评论