具有流更新的Kendo UI Grid：键入搜索过滤器将被重置

Question

我正在尝试发现一种更新我的Kendo UI Grid的方法，以便在数据刷新时，搜索过滤器框（以及其他内容）不会重置。例如，用户可能会按以下方式键入搜索条件：

开始输入搜索条件后，网格会使用以下命令进行更新：$("#myGrid").data("kendoGrid").dataSource.data(MyNewData);一旦网格更新（例如通过ajax调用或WebSocket），用户的搜索过滤器输入将重置并且他们最终得到以下结论：

显然这非常令人沮丧，因为经常更新后，用户无法完成搜索过滤器。

如何防止新数据到货时重置？

目前，我假设我可能需要恢复到我记录用户输入内容的hacky工作，并在刷新后将其放回文本框。我无法相信这是最佳选择，因为它可能会为光标或用户快速键入时创建异常行为。

Answer 1

最简单的解决方案是在过滤器菜单打开时暂停更新网格，正如我所建议的here。

您可以缓存当前数据并在关闭过滤器菜单后进行设置，这样您就不会丢失任何更新;尝试这样的事情：

var cachedData;
var updateGrid = function (data) {
    // update grid's data source here..
    $("#myGrid").data("kendoGrid").dataSource.data(data);

    // clear cached data
    cachedData = null;
};

// this is what's called regularly to update your grid data ..
var yourUpdateFunction = function (data) {
    var canRefresh = $(".k-filter-menu:visible").length === 0;
    if (canRefresh) {
        updateGrid(data)
    } else {
        // filter menu open, store data for later
        cachedData = data;
    }
};

// whenever a filter menu closes, call updateGrid
$(".k-grid-header").find("th").each(function () {
    var menu = $(this).data("kendoFilterMenu");
    var init = menu._init;
    menu._init = function () {
        init.apply(this, arguments);
        this.popup.bind("close", function () {
            if (cachedData) {
                updateGrid(cachedData);
            }               
        });
    };
});

替代方案是重写网格的一些源代码。

Answer 2

还有一个解决方案，您不必使用jQuery来检查是否可以更新。它使用弹出窗口的“开放”功能来设置变量。定期更新时，这会更快。因此，作为LarsHöppner答案的替代解决方案：

var canRefresh = true;
var cachedData;
var updateGrid = function (data) {
    // update grid's data source here..
    $("#myGrid").data("kendoGrid").dataSource.data(data);

    // clear cached data
    cachedData = null;
};

// this is what's called regularly to update your grid data ..
var yourUpdateFunction = function (data) {
    if (canRefresh) {
        updateGrid(data);
    } else {
        // filter menu open, store data for later
        cachedData = data;
    }
};

// whenever a filter menu closes, call updateGrid
$(".k-grid-header").find("th").each(function () {
    var menu = $(this).data("kendoFilterMenu");
    var init = menu._init;
    menu._init = function () {
        init.apply(this, arguments);
        this.popup.bind("open", function () {
           canRefresh = false;               
        });
        this.popup.bind("close", function () {
            canRefresh = true;
            if (cachedData) {
                updateGrid(cachedData);
            }               
        });
    };
});