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

Persist Grid Editor Template While Restoring State


Product Progress® Kendo UI® Grid for jQuery
Operating System All
Browser All
Browser Version All


How can I persist Grid Editor Template after Restoring State with setOptions?


As pointed out in the setOptions API documentation JSON.stringify() cannot serialize function references (e.g. event handlers), so if stringification is used for the retrieved Grid state, all configuration fields, which represent function references, will be lost.

Specify the custom editor to the columns object before passing it to the setOptions() method.

    <script src=""></script>

    <div class="box wide">
      <button id="save"class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md" >Save State
      <button id="load" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md" >Load State

    <div id="grid"></div>

      $(document).ready(function () {
        var dataSource = new{
          pageSize: 20,
          data: products,
          autoSync: true,
          schema: {
            model: {
              id: "ProductID",
              fields: {
                ProductID: { editable: false, nullable: true },
                ProductName: { validation: { required: true } },
                Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages"} },
                UnitPrice: { type: "number", validation: { required: true, min: 1} }

          dataSource: dataSource,
          pageable: true,
          height: 550,
          resizable : true,
          filterable: true,
          columnMenu: true,
          onDataBound: function(){
          toolbar: ["create"],
          columns: [
            { field:"ProductName",title:"Product Name" },
            { field: "Category", title: "Category", width: "180px", editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },
            { field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "130px" },
            { command: "destroy", title: " ", width: "150px" }],
          editable: true

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

      $("#load").click(function (e) {
        var grid = $("#grid").data("kendoGrid");
        var options = localStorage["kendo-grid-options"];
        if (options) {
          let parsedOptions = JSON.parse(options);
          // Get only the columns from the options.
          let columns = parsedOptions.columns;
          let filter = parsedOptions.dataSource.filter;
          columns[1].editor = categoryDropDownEditor;
          // Change only the columns options. You can use the same approach for other settings as well.
            columns: columns,
            dataSource: {
              filter: filter

      function categoryDropDownEditor(container, options) {
        $('<input required name="' + options.field + '"/>')
          autoBind: false,
          dataTextField: "CategoryName",
          dataValueField: "CategoryID",
          dataSource: {
            type: "odata",
            transport: {
              read: ""

See Also

In this article