过滤器处于活动状态时防止刷新 Kendo 网格

Question

我有一个 javascript 方法，每 5 秒刷新一次 Kendo 网格，我想防止此功能在过滤器对话框打开或过滤处于活动状态时不起作用。可能吗？如果过滤器处于活动状态，是否可以使用任何事件？

//For refreshing grid periodically
$(document).ready(function () {
    var refreshId = setInterval(function () {
        var grid = $("#eventGrid").data("kendoGrid");
        $("#eventGrid").data("kendoGrid").dataSource.read();
    }, 5000);
});

Answer 1

另一种方法 - 但不确定它的可靠性如何 - 是检查过滤器的 DOM 元素。过滤器弹出窗口是在网格包装器的同一父级中创建的，而不是在它内部。所以你可以检查它的元素以及它是否可见。

使用这些选择器，您可以检查过滤器弹出元素：

$(grid.element).parent().find(".k-animation-container:visible .k-filter-menu");

如果返回任何元素，则打开过滤器。查看 this demo（并查看控制台）。

Answer 2

请注意，使用 .k-animation-container 而不是 .k-filter-menu 用于自定义过滤器菜单可能会触发其他一些 kendo 小部件（我认为下拉菜单是其中之一），因此请注意那。

对于默认的过滤器菜单，.k-animation-container .k-filter-menu 将完成这项工作。对于自定义过滤器，可能会使用一些自定义 hook/selector，例如 .k-animation-container .custom-filter-menu，然后检查它是否可见。

$(function(){
    var grid = $("#grid").data('kendoGrid'),
        gridRefresh = setInterval(refreshGrid, 5000),
        filterCheck;

    grid.bind('filterMenuInit', onFilterMenuInit);

    function onFilterMenuInit(){
        // console.log('Filter Menu opened');
        // console.log('Grid Refresh removed');
        clearInterval(gridRefresh);
        // console.log('Filter Check added');
        filterCheck = setInterval(filterInterval, 1000);
    }

    function refreshGrid(){
        //console.log('Grid Refreshed');
        grid.dataSource.read();
    }

    function filterInterval(){
        // console.log('Filter Check');
        //    '.k-animation-container .k-filter-menu' for default menus
        // or '.k-animation-container .custom-filter-menu' for custom menus
        if(!$('.k-animation-container').is(":visible")){
            // console.log('Filter Check removed');
            clearInterval(filterCheck);
            // console.log('Grid Refresh added');
            gridRefresh = setInterval(refreshGrid, 5000);
        }
    }
});

过滤器处于活动状态时防止刷新 Kendo 网格

Prevent refreshing Kendo Grid when filter is active

javascript

jquery

kendo-ui

kendo-grid

kendo-asp.net-mvc