Maintaining row selection after an auto grid refresh

[Xander]

Hi,

I'm using the MVC wrappers with ajax binding and I cannot find a way to maintain row selection after an automatic timer initiated grid refresh. The timer is working just fine, but the row selection is lost after the refresh. I think it would be very good to get an example from Telerik as I've spent quite a bit of time searching the internet and this must surely be a common requirement.

Can someone please help with the following code?:

var timer = $.timer(function () {
        
    // -- find currently selected row --
    var grid = $("#Grid").data("kendoGrid");
    var row = grid.select();
    var uid = row.data("uid");
        
    // -- refresh grid --
    grid.dataSource.read();
        
    // -- reselect row --
    var row2 = grid.table.find('tr[data-uid="' + uid + '"]');
    row2.addClass('k-state-selected');
    
});
timer.set({ time: 5000, autostart: true });

Thanks in advance

[Dimiter Madjarov]

Hi Xander,


The current approach is not working, because when a read of the dataSource is performed, the grid is repainted and the rows are receiving different uid attributes i.e. the previously selected row does not exist anymore. A different approach would be to save the id of the dataItem for the current row, which is unique and maintained on each page. Here is a similar example, which demonstrates how to maintain the selection of multiple rows when a paging is performed.

E.g.

<script>
    var allSelected = {};
    function change(e) {
        var grid = $("#Grid").data("kendoGrid");
        var gridView = grid.dataSource.view();
        var selection = this.select();

        for (var i = 0; i < gridView.length; i++) {
            var id = gridView[i].OrderID;
            if (allSelected[id] == true) {
                var isSelectedNow = false;
                for (var j = 0; j < selection.length; j++) {
                    var row = grid.dataItem(selection[j]);
                    if (row.OrderID == id) {
                        isSelectedNow = true;
                        break;
                    }
                }
                if (!isSelectedNow) {
                    allSelected[id] = false;
                }
            }
        }

        for (var i = 0; i < selection.length; i++) {
            allSelected[grid.dataItem(selection[i]).OrderID] = true;
        }
    }

    function dataBound(e) {
        var grid = $("#Grid").data("kendoGrid");
        var pageData = grid.dataSource.view();
        var newSelection = [];
        for (var i = 0; i < pageData.length; i++) {
            if (allSelected[pageData[i].OrderID]) {
                newSelection.push(grid.tbody.find(">tr[data-uid='" + pageData[i].uid + "']"));
            }
        }
        grid.select(newSelection);
    }
</script>

You could use a similar simplified approach if you need to maintain the selection of a single row.

 

Greetings,
Dimiter Madjarov
the Telerik team