title: How to make KendoUI grid.setOptions working with MVVM?
body: <p>In latest release kendo introduced ability for <a href="http://demos.telerik.com/kendo-ui/grid/persist-state" rel="nofollow" title="saving grid state and layout">saving grid state and layout</a> which I can't make working with the javascript MVVM declared grid.</p>
  
  <p>My problem can be reproduced by performing few simple steps with bellow given jsfiddle code</p>
  
  <ol>
  <li>Resize columns</li>
  <li>Save the state</li>
  <li>Move the columns to some other width</li>
  <li>Load the state</li>
  </ol>
  
  <p>What I would expect to be the outcome is that after step #4, column width will be reset to saved state.
  What I see in my repro is that grid.setOptions just reset the grid to initial unmodified state.</p>
  
  <p>Here's the <a href="http://jsfiddle.net/2h45scge/1/" rel="nofollow">jsfiddle repro link</a> also given as inline code snippet here...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> $(document).ready(function () {
     var dataSource = new kendo.data.DataSource({
      data: [
        {name: 'John', surname: 'Smith'},
        {name: 'John', surname: 'Doe'}
      ]
    });
  
      var dataContext = new kendo.data.ObservableObject({
        dataSource: self.remoteDataSource
      });
  
      var viewTemplate = 
          "&lt;div id='grid' data-role='grid' data-sortable='true' data-editable='true' " +
          "data-resizable='true' data-reorderable='true' data-navigatable='true' " + 
          "data-columns=\"[{'field':'name', 'title':'Name'}, {'field': 'surname', 'title': 'Surname'}]\"" + 
          " data-bind='source: dataSource' /&gt;";
  
  
      // now get the main view
      var kendoView = new kendo.View(viewTemplate, {
        wrap: false,
        model: dataContext
      });
  
      kendoView.render($("body"));
  
       var grid = $("#grid").data("kendoGrid");
  
      $("#save").click(function (e) {
          e.preventDefault();
          var options = grid.getOptions();
          console.log(options);
          localStorage["kendo-grid-options"] = kendo.stringify(options);
      });
  
      $("#load").click(function (e) {
          e.preventDefault();
          var optionsString = localStorage["kendo-grid-options"];
          if (optionsString) {
              var options= JSON.parse(optionsString);
              console.log(options);
              grid.setOptions(options);
          }
      });
  
   });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" rel="stylesheet" /&gt;
  &lt;link href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.metro.min.css" rel="stylesheet" /&gt;
  &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"&gt;&lt;/script&gt;
  
  &lt;body&gt;
      &lt;div class="box"&gt;
          &lt;a href="#" class="k-button" id="save"&gt;Save State&lt;/a&gt;
          &lt;a href="#" class="k-button" id="load"&gt;Load State&lt;/a&gt;
      &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>