setOptions

Sets the options of the Treelist. Use this method if you want to enable/disable a particular feature/option or to load the complete state obtained previously with the getOptions method.

When setOptions is called, the Treelist widget will be destroyed and recreated. If the widget is bound to remote data, a new read request will be made.

There are a few important things to keep in mind when using getOptions and setOptions.

  • calling setOptions() in a Treelist event handler is not possible.
  • calling setOptions() in a function, which is related to the Treelist's databinding mechanism may cause an endless loop.
  • JSON.stringify() cannot serialize function references (e.g. event handlers), so if stringification is used for the retrieved Treelist state, all configuration fields, which represent function references, will be lost. You have two options to avoid this limitation: use a custom implementation to serialize JavaScript functions, or add the function references back to the deserialized configuration object before passing it to the setOptions method.

Example - set reorderable feature of the TreeList to true

<div id="treelist"></div>
<script>
  var service = "https://demos.telerik.com/kendo-ui/service";

  $("#treelist").kendoTreeList({
    dataSource: {
      transport: {
        read: {
          url: service + "/EmployeeDirectory/All",
          dataType: "jsonp"
        }
      },
      schema: {
        model: {
          id: "EmployeeID",
          parentId: "ReportsTo",
          fields: {
            ReportsTo: { field: "ReportsTo",  nullable: true },
            EmployeeID: { field: "EmployeeId", type: "number" },
            Extension: { field: "Extension", type: "number" }
          },
          expanded: true
        }
      }
    },
    height: 540,
    editable: {
      move: true
    },
    columns: [
      { field: "FirstName", title: "First Name", width: 220 },
      { field: "LastName", title: "Last Name", width: 160 },
      { field: "Position" }
    ]
  });

  var treelist = $("#treelist").data("kendoTreeList");
  treelist.setOptions({
    reorderable: true
  });
</script>
In this article
Not finding the help you need? Improve this article