CODEWITHSUNDEEP
jquerykendo-uikendo-grid
jtromans
jtromans

Reputation: 4273

Kendo UI Grid with streaming updates: Typing into search filter gets reset

I am trying to discover a way to update my Kendo UI Grid such that upon a data refresh, the search filter boxes (among other things), do not reset. For example, the user may be part way through typing their search criteria as follows:

User begins typing their search criteria

Having begun to type in the search criteria, the grid experiences an update using the following command: $("#myGrid").data("kendoGrid").dataSource.data(MyNewData); As soon as the grid updates (e.g. via an ajax call or WebSocket), the user's search filter input resets and they end up with the following:

enter image description here

Obviously this is very frustrating since, upon frequent updates, the user is unable to complete their search filter.

How do I prevent this from resetting when new data arrives?

At the moment I assume I may need to revert to a hacky work around where I record what the user is typing and put it back it to the text box after refresh. I can't believe that this is the best option since it might create unusual behavior for the cursor or when the user is typing quickly.

Upvotes: 1

Views: 700

Answers (2)

Eric Smekens
Eric Smekens

Reputation: 1621

There is also a solution where you don't have to use jQuery to check if you can update or not. It uses the 'open'-function of the popup to set a variable. This will be quicker when you have regular updates. So, as an alternative solution to Lars Höppner's answer:

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);
            }               
        });
    };
});

Upvotes: 0

Lars Höppner
Lars Höppner

Reputation: 18402

The easiest solution would be to pause updating the grid while the filter menu is open, as I have suggested here.

You can cache the current data and set it once the filter menu is closed so you don't lose any updates; try something like this:

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);
            }               
        });
    };
});

The alternative would be rewriting some of the grid's source code.

Upvotes: 2

Related Questions