Kendo : How do i keep the toolbar when i save and restore a grid state?

Question

I kept the title generic because i don't care if the answer I get is in jquery, javascript, or specifically to MVC.

I have this code to save and load a grid:

$("#save").click(function() {
var grid = $("#grid").data("kendoGrid");

var dataSource = grid.dataSource;

var state = kendo.stringify(grid.getOptions());


$.ajax({
    method: "POST",
    url: "/ebol/savegrid",
    data: {
        data: state
    }
});
});

$("#load").click(function () {
var grid = $("#grid").data("kendoGrid");

var dataSource = grid.dataSource;

$.ajax({
    url: "/ebol/loadgrid",
    success: function (options) {
        if (options) {
            grid.setOptions(JSON.parse(options));
        }
    }
});
});

The problem: I can save a grid's state (which includes column order, filters etc) but when i go to restore it with the load button, the grid's command column vanishes.

How do i preserve these buttons as well during the restore?

Selway

Can you show us how you are creating the grid and toolbar please? – Subdeacon

standard kendo mvc grid. Nothing special. – Selway

Fair enough. The setOptions documentation has some advice specifically relating to the MVC wrapper. I suspect that's relevant to your problem. – Subdeacon

I'm tossing you some upvotes for your help. The problem was in fact caused by us using an mvc wrapper. It doesn't render the toolbar area when layouts are applied. – Selway

Answer 1

Another of our developers who was working on this exact issue on another page solved this one for me. You need to detach the toolbar before loading the grid settings. It seems hacky to me but according to Kendo, saving and loading settings is unsupported so this is the best we have. My revised code:

    $("#load").click(function () {
    var grid = $("#grid").data("kendoGrid");
    $.ajax({
        url: "/ebol/loadgrid",
        success: function(state) {
            if (state) {
                state = JSON.parse(state);
                let toolBar = $("#grid .k-grid-toolbar").detach();
                grid.setOptions(state);
                $("#grid .k-grid-toolbar").replaceWith(toolBar);
            }
        }
    });
});

Edit(2024) I do not believe this is necessary anymore. They added the ability for the toolbar to be restored in r3 2023, except it was breaking some of the buttons in it. That has been resolved q1 2024.

Selway

One and only way to awoid unnecessary <span class="k-edit" width="100%"> blocks. – Lair