New to Kendo UI for jQuery? Download free 30-day trial

Persist Function References of Custom Command Buttons in the Grid


Product Progress Kendo UI Grid
Operating System Windows 10 64bit
Browser Google Chrome
Browser Version Latest
Made with version 2017.3.913


How can I persist the function references of the custom command buttons in the Kendo UI Grid after serialization?


Just before you pass the options to the setOptions method of the Grid, add the function reference to the parsed JSON file.

    <div id="example">
      <div class="box wide">
        <a href="#" class="k-button" id="save">Save State</a>
        <a href="#" class="k-button" id="load">Load State</a>
      <div id="grid"></div>

        $(document).ready(function () {
            dataSource: {
              type: "odata",
              transport: {
                read: ""
              pageSize: 20
            height: 550,
            groupable: true,
            sortable: true,
            reorderable: true,
            resizable: true,
            columnMenu: true,
            filterable: {
              mode: "row"
            pageable: {
              refresh: true,
              pageSizes: true,
              buttonCount: 5
            columns: [{ command: { text: "View Details", click: showDetails }, title: " ", width: "180px" },{
              field: "ContactName",
              title: "Contact Name",
              width: 250,
            }, {
              field: "ContactTitle",
              title: "Contact Title",
              width: 350
            }, {
              field: "CompanyName",
              title: "Company Name",
              width: 350
            }, {
              field: "Country",
              width: 450

          var grid = $("#grid").data("kendoGrid");

          $("#save").click(function (e) {
            localStorage["kendo-grid-options"] = kendo.stringify(grid.getOptions());

          $("#load").click(function (e) {
            var options = localStorage["kendo-grid-options"];
            if (options) {
              var parsedOptions = JSON.parse(options)
              // Add the function reference
              parsedOptions.columns[0] = showDetails

          function showDetails(e) {
            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
In this article
Not finding the help you need? Improve this article