Sets the options of the Grid. 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 Grid 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 Grid event handler is not possible.
  • calling setOptions() in a function, which is related to the Grid'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 Grid 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.
  • When using the Grid MVC wrapper, any server templates will not be retrieved by the getOptions method (e.g. toolbar or header templates with @<text></text> razor syntax). This is because the server templates are rendered server-side and do not have corresponding configuration options included in the JavaScript initialization statement that creates the Grid object client-side. As a result, the templates will be lost once the setOptions() method is invoked. There are two options to avoid the issue - use JavaScript initialization instead of an MVC wrapper, or add template configuration to the retrieved Grid state with the JavaScript equivalent syntax (e.g. headerTemplate and toolbar).


options Object

The configuration options to be set.

Example - set sortable feature of the Grid to true

<div id="grid"></div>
        columns: [
          { field: "name" },
          { field: "age" }
        dataSource: [
            { name: "Jane Doe", age: 30 },
            { name: "John Doe", age: 33 }
    var grid = $("#grid").data("kendoGrid");
          sortable: true

When used for AngularJS, the $scope should be passed to the Grid options. By default, the Grid when initialized expects such logic.

$scope.grid.setOptions($.extend({}, options, {
                        $angular: [$scope]
In this article