I cannot find a proper function for redrawing / resetting the grid with Kendo ui grid.

Here is my fiddle:

/

1. Drag a column to another position.
2. Click reset (does not work).

I included a function called "resetgrid" which should reset / reload / redraw the grid but it does not work. How can I do it?

function resetgrid(){
    var grid = $("#grid").data("kendoGrid");
    grid.dataSource.read();
    grid.refresh();
}

Many thanks

I cannot find a proper function for redrawing / resetting the grid with Kendo ui grid.

Here is my fiddle:

http://jsfiddle/orcy69dv/

1. Drag a column to another position.
2. Click reset (does not work).

I included a function called "resetgrid" which should reset / reload / redraw the grid but it does not work. How can I do it?

function resetgrid(){
    var grid = $("#grid").data("kendoGrid");
    grid.dataSource.read();
    grid.refresh();
}

Many thanks

• javascript
• jquery
• kendo-ui
• kendo-grid

3 Answers 3

I would probably remend using the setOptions on the grid to reset the columns.

grid.setOptions({ columns: [ {field: 'name'},{field:'age'},{field:'a'},{field:'b'} ] });

Updated JSFiddle: http://jsfiddle/orcy69dv/2/

There is no function that would reset columns order. The grid.refresh() function renders all table rows using the current data items. It does not affect to column order, just content of the table.

To reset column order you can use this function:

function resetColumns(grid){
    for(var i = 0; i < grid.options.columns.length; i++){
        var field = grid.options.columns[i].field;
        for(var j = 0; j < grid.columns.length; j++){
            if(grid.columns[j].field == field){
                grid.reorderColumn(i, grid.columns[j]);
            }
        }
    }
}

Here is updated fiddle: http://jsfiddle/orcy69dv/1/

For me I was using angular and this was the way I reset it back to defaults:
First set events in the Options setting of the grid to write the columns to the localStorage:

 vm.Grid1Options = {
            dataSource: vm.Grid1Data,
            autoBind: false,
            columnResize: saveGrid1State,
            columnShow: saveGrid1State,
            columnHide: saveGrid1State,
            columnReorder: saveGrid1State,
            columnLock: saveGrid1State,
            columnUnlock: saveGrid1State,

And here is that function:

function saveGrid1State(e) {
        e.preventDefault();
        $timeout(function () {
            localStorage['kendo-grid-options-Grid1'] = kendo.stringify(e.sender.columns);;
        }, 500);
        vm.showResetGrids = true;
    }

The getColumnsGrid1() mehtod you see is used to set the default columns or grab the localStorage settings:

function getColumnsGrid1() {
        var columns = [];
        // Check to see if the key is in localStorage, if not use these defaults
        if (localStorage['kendo-grid-options-Grid1']) {
            columns = JSON.parse(localStorage['kendo-grid-options-Grid1']);
        } else {
            columns = [
                        { field: "Field1", title: "Field 1", width: "110px" },
                        { field: "Field2", title: "Field 2", width: "50px" }
                      ];
        }
         $('#Grid1').data('kendoGrid').setOptions({ columns: columns });
}

I set the columns in this function and not in the Options for the Grid, this allows me to have more control.

Notice I'm only getting and setting the columns and their properties only, the default way Kendo tells you to do it on the demos it will actually grab your columns and the data which is bad.

And my Reset Grid button calls this method:

        // Delete the Local Storage keys
        localStorage.removeItem('kendo-grid-options-Grid1');

        // Reset the grid
        getColumnsGrid1();

So now the next time you set the data you just call the getColumnsGrid1 function first which will determine if it has a localStorage key or to use the defaults.

// Get Grid1Data and wire it up.
dataservice.getGrid1Data(myVar).then(function (response) {
            getColumnsGrid1();
            vm.Grid1Data.data(response);                
        });

One of my problems is that when I would update columns the user couldn't see the changes because it was always reading the previuos data from LocalStorage. Now they click the Reset Grids button and it will delete the LocalStorage key and rest the grids back to defaults.