I need to reload all the grid (not only the data).

I'm trying with:

$('#GridName').data('kendoGrid').dataSource.read();
$('#GridName').data('kendoGrid').refresh();

but read() reloads only the data and refresh() is not working. When a user clicks on the button, I need to recreate all the table with new columns (I don't know how many columns or what columns, the server process it).

Users can change the columns that they see with a html checkbox. The first time the table charges correctly but if the user change the checkbox value the columns don't change. If deselect an option the column is empty and if the user adds an option, the new column don't appear.

How can I achieve this?

I need to reload all the grid (not only the data).

I'm trying with:

$('#GridName').data('kendoGrid').dataSource.read();
$('#GridName').data('kendoGrid').refresh();

but read() reloads only the data and refresh() is not working. When a user clicks on the button, I need to recreate all the table with new columns (I don't know how many columns or what columns, the server process it).

Users can change the columns that they see with a html checkbox. The first time the table charges correctly but if the user change the checkbox value the columns don't change. If deselect an option the column is empty and if the user adds an option, the new column don't appear.

How can I achieve this?

• javascript
• kendo-ui
• kendo-grid

3 Answers 3

You should destroy and recreate the grid to change the columns.

$.ajax(
{
    type: 'GET',
    url: yourURL,
    dataType: 'json',
    success: function (result) {
        $('#Grid').data('kendoGrid').destroy();
        $('#Grid').empty(); //necessary to remove the old html

        $("#grid").kendoGrid({
            dataSource: {
                data: result,
                schema: {
                    data: "d"
                }
            }
        });
    }
});

The result of your ajax should be something like:

var result = { 'd': [
    { description: "Description 1", number: 30, price: 3.5 },
    { description: "Description 2", number: 33, price: 4 },
    { description: "Description 3", number: 40, price: 4.5 }
]}

Do you want to attempt to reselect the last record? This function below uses the same method you described above and has been working for ages. What you posted above should work. What makes you say it is not working?

function refreshGrid(gridID) {
    var grid = $('#' + gridID).data('kendoGrid');
    var selectedItem = grid.dataItem(grid.select());
    grid.dataSource.read();
    grid.refresh();
    if (selectedItem != null && selectedItem.uid != null) {
        var row = grid.tbody.find('tr[data-uid="' + selectedItem.uid + '"]');
        row.addClass("k-state-selected");
        grid.select(row);
        grid.select(grid.table.find('tr').first());
    }
}

k-rebind="gridOptions"

This event will rebind the grid whenever gridOptions are changed.