CODEWITHSUNDEEP
javascriptkendo-uikendo-grid
Rabegi
Rabegi

Reputation: 123

Reload/Refresh Kendo Grid

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?

Upvotes: 2

Views: 7530

Answers (3)

Shital Shah
Shital Shah

Reputation: 81

k-rebind="gridOptions"

This event will rebind the grid whenever gridOptions are changed.

Upvotes: 0

Bruno de Andrade
Bruno de Andrade

Reputation: 123

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 }
]}

Upvotes: 3

Ross Bush
Ross Bush

Reputation: 15155

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

Upvotes: 0

Related Questions