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?

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