Custom Command not working after setOptions

[Stefan]

We have this Command:

columns.Command(c =>
{
    c.Custom("Delete").Text(" ").Click("onClick").IconClass("k-icon k-i-trash").HtmlAttributes(new { @title = Resource.DELETE });
})

And we have this function to set the grid state:

function loadOptions() {
    var options = sessionStorage["userTable-options"];
    
    if (options) {
        var grid = $('#userTable').data('kendoGrid');
        var toolBar = $("#userTable .k-grid-toolbar").html();  // https://stackoverflow.com/questions/27717575/kendo-mvc-persist-and-load-grid-buttons

        var optionsJSON = JSON.parse(options);

        // https://docs.telerik.com/kendo-ui/knowledge-base/grid-persist-customized-filter
        var StatusTranslated = optionsJSON.columns.filter(function (c) { return c.field === "StatusTranslated.Text"; })[0];

        StatusTranslated.filterable = {
            ui: $.proxy(filterDropDownField, { field: 'StatusTranslated' })
        };

        grid.setOptions(optionsJSON);
        $("#userTable .k-grid-toolbar").html(toolBar);
        $("#userTable .k-grid-toolbar").addClass("k-grid-top");
    }
}

 

Before setting the grid state the button executes successfully. After executing setOptions the button does not work anymore.

How do we combine the possibility to save/load the grid state, and the usage of custom buttons in the grid?

 

Kind regards.

 

[Stefan]

I think the behaviour is also mentioned here: https://www.telerik.com/kendo-jquery-ui/documentation/api/javascript/ui/grid/methods/setoptions

So with a bit of help by Copilot we came up with the following solution to restore the command handlers:

var grid = $('#userTable').data('kendoGrid');
grid.columns.forEach((column, colIndex) => {
    if (column.command) {
        column.command.forEach((cmd, cmdIndex) => {
            if (typeof cmd.click === "function") {
                optionsJSON.columns[colIndex].command[cmdIndex].click = cmd.click
            }
        });
    }
});
grid.setOptions(optionsJSON);

Can you confirm that this is a valid implementation?

 

Kind regards.

[Mihaela]

Hello Stefan,

Thank you for the provided solution. I confirm that it is correct.

By design, the JSON.stringify() method cannot serialize function references (e.g., event handlers), so all configuration fields, which represent function references will be lost.

Having this in mind, you must manually add the function reference back to the deserialized configuration object before passing it to the setOptions() method (i.e.,  optionsJSON.columns[colIndex].command[cmdIndex].click = cmd.click).

Best,
Mihaela

[Stefan]

Hello Mihaela,

thank you for the confirmation. :)

 

Kind regards.