title: Updating base object in Kendo grid bound to local data
body: <p>I have a local javascript list that I have bound to a Kendo grid (inline editing) using a DataSource. When I use the grid to add a row, visually it all works but I can't figure out how to update the base javascript list. I need this functionality as the list is actually part of a larger Javascript object that is updated in multiple places. Once all the changes are complete, the entire object is sent to the server with ajax.</p>
  
  <p>Here's some simple code that demonstrates the issue (can find it on <a href="http://jsbin.com/OpEzUrAL/1" rel="nofollow">JSBin</a> as well). Just add an item and click Get Array Size to see that the array hasn't increased in size.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset=utf-8 /&gt;
      &lt;title&gt;JS Bin&lt;/title&gt;
      &lt;link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet" type="text/css" /&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/2013.3.1119/js/kendo.all.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="MyGrid"&gt;&lt;/div&gt;
      &lt;a id="LengthButton"&gt;Get Array Size&lt;/a&gt;
  
      &lt;script&gt;
          $("#LengthButton").kendoButton({
              click: function (e) {
                  alert(dataList.length);
              }
          });
  
          var dataList = [
              { id: 1, Comment: "Comment 1" },
              { id: 2, Comment: "Comment 2" },
              { id: 3, Comment: "Comment 3" }
          ];
  
          var dataSource = new kendo.data.DataSource({
              transport: {
                  read: function (options) {
                      options.success(dataList);
                  },
                  create: function (options) {
                      var data = options.data;
                      data.id = dataSource.data()[dataSource.data().length - 1].id + 1;
  
                      options.success([data]);
                  }
              },
              data: dataList,
              schema: {
                  model: {
                      id: "id",
                      fields: {
                          id: { type: "number", editable: false, nullable: true },
                          Comment: { type: "string" }
                      }
                  }
              }
          });
  
          $("#MyGrid").kendoGrid({
              toolbar: ["create"],
              columns: [
                { command: "edit" },
                {
                    title: "Comment",
                    field: "Comment"
                }
              ],
              editable: { mode: "inline" },
              dataSource: dataSource
          });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I've been back and forth with Telerik but still haven't sorted it out so I'm hoping someone here can point me in the right direction.</p>
  
  <p>Thanks in advance,
  Jason</p>