Knockout JS with Kendo UI Grid forgets user's selection

Question

I have a Kendo UI Grid and I am populating and maintaining the data it displays using Knockout JS (with knockout-kendo.min.js and knockout.mapping-latest.js). When the underlying data updates, the grid also updates to reflect this change. It's working well apart from the problem outlined below.

Code presented in the following Fiddle: http://jsfiddle.net/rTtS9/

The problem is that when the grid updates, it 'forgets' the selected cell that the user has chosen, such that if they are trying to keep an eye on a certain cell value, they can't. If this data is updating sub second (which it could), this gets very silly. The are many other use-case problems too (this is a contrived one).

Is there a way to have the Kendo UI Grid avoid a complete redraw when new data arrives such that the user's selection does not get forgotten?

I thought that this issue might be because KO thought that the whole object had changed, so rather than updating an existing object, it removed and added new ones. To make sure that this isn't the case, I uniquely identify objects using “keys” via the Mapping plugin. In addition, the array remain the same length.

I think that the mapping plugin is working OK as I seem to get desired behavior with the foreach binding, whereby you can select and highlight the ID part of the list item and it won't drop your selection when the data updates. See the Fiddle to see what I mean.

Answer 1

In case this is helpful for anyone else, I have included my solution below which remembers which grid cells were selected before the grid is re-drawn/bound.

I have attached the following code to the Kendo Grid change and dataBound events, respectively. Note, naming conversions for my grid variables always lead with "grid" followed by "name", such as "gridName".

So for the change event:

function saveGridSelection (gridID) {
    try {
        var shortName = gridID.substring(4,gridID.length)
        var idxGrid = ns.grids.map(function(e) {return e.name}).indexOf(shortName);
        var gridID = "#grid" + shortName;
        var pair=[];
        var columnHeader=[];
        ns.grids[idxGrid].selectedCells = [];
        // Loop over selected realized volsz
        $(gridID + " > .k-grid-content .k-state-selected").each(function (index, elem) {
            var grid = $(gridID).data("kendoGrid");
            var row = $(this).closest("tr");
            var colIdx = $("td", row).index(this);
            pair[index] = $('td:first', row).text();
            columnHeader[index] = $(gridID).find('th').eq(colIdx).text();

            if (colIdx !=  0 && ns.grids[idxGrid].dataGrid.length > 0 ) { // Check if cell is permitted and has data
                pairID = ns.grids[idxGrid].dataGrid.map(function(e) { return e.pair; }).indexOf(pair[index]); // Get the index for the appropriate Pair
                ns.grids[idxGrid].selectedCells.push({pair: pairID, container: (colIdx - 1), pairTitle: pair[index], columnHeader: columnHeader[index] });
            }
        });
    }  catch (err) {
        console.log(err);
    }
}

And for the dataBound event:

function loadGridSelection (gridID) {
    try {
        var shortName = gridID.substring(4,gridID.length)
        var idxGrid = ns.grids.map(function(e) {return e.name}).indexOf(shortName);
        var gridID = "#grid" + shortName;
        var grid = ns.grids[idxGrid];
        var gridSelectedCells = grid.selectedCells;
        var tempSelectedCells = gridSelectedCells.slice(0); // Create a temp. array to work with

        $(gridID + " > div.k-grid-content > table > tbody > tr").each(function (i,e) {
            var pair = $("td:nth-child(1)", this).text();
            if (tempSelectedCells && typeof tempSelectedCells !== "undefined") { 
                var ii = tempSelectedCells.length; 
                while(ii--) { // Loop backwards through teh array so we can slice out the bits we're finished with.
                    if (pair == tempSelectedCells[ii].pairTitle) {
                        var row = i;
                        var column = tempSelectedCells[ii].container;
                        var noColumns = $(gridID + " > div.k-grid-content > table").find("tr:first td").length;
                        var cell = (row * noColumns) + 1 + column;
                        $(gridID).data("kendoGrid").select(gridID + " td:eq("+cell+")");
                        tempSelectedCells.splice(ii, 1)
                    }
                }
            }
        });
    } catch (err) {
        console.log(err);
    }
}

Improvements to code always welcome.