title: Kendo Grid doesn't show any data despite having data within DataSource
body: <p>So, I'm trying to make a readyonly grid with kendo that shows data, but whatever I do, the data does not get shown.</p>
  
  <p><a href="https://i.stack.imgur.com/rkcEi.png" rel="nofollow noreferrer">The grid looks like this</a></p>
  
  <p>And here's the code:</p>
  
  <pre><code>    $("#Materials")
          .kendoGrid({
              dataSource: {
                  data: [],
                  schema: {
                      model: {
                          id: "ID",
                          fields: {
                              ID: { type: "number", editable: false },
                              Code: { type: "string", editable: false },
                              Name: { type: "string", editable: false },
                              ExtDeviceCode: { type: "string", editable: false , nullable: true },
                              BaseUomLOVString: { type: "string", editable: false }
                          }
                      }
                  },
                  pageSize: 20
              },
              filterable: {
                  extra: true
              },
              pageable: true,
              columns: [
                  { field: "Code", title:"Code"},
                  { field: "Name", title: "Name"},
                  { field: "ExtDeviceCode", title:"External device code"},
                  { field: "BaseUomLOVString", title: "UnitsOfMeasure" }
              ],
              editable: false
          });
  </code></pre>
  
  <p>This makes an empty grid with no data, which I later on fill with an Ajax call. As you can see from above picture, the grid contains the data but does <strong>not display</strong> it. The data inside the dataSource <a href="https://i.stack.imgur.com/mi00a.png" rel="nofollow noreferrer">looks like this.</a> or as Json:</p>
  
  <pre><code>[{
      "ID": 21150,
      "Code": "3",
      "ExtDeviceCode": null,
      "Name": "Avio benzin",
      "BaseUomLOVString": "Kilogram"
  }, {
      "ID": 21400,
      "Code": "5003",
      "ExtDeviceCode": null,
      "Name": "Bencin 95",
      "BaseUomLOVString": "Litre"
  }]
  </code></pre>
  
  <p><strong>EDIT 1</strong>:  I'm filling the data with an Ajax call like this:</p>
  
  <pre><code>            $.ajax({
                  url: '@SimpleUrlHelper.UrlObjectToRoot(Url)/FuelPointMaterialTankMask/LookupMaterials',
                  data: {
                      //Send list of IDs
                      'materialIDs': materialList
                  },
                  type: "POST",
                  success: function (response) {
  
                      var tmp = [];
                      if (typeof response !== "undefined" &amp;&amp; 
                      response !== null) {
                          response.forEach(function(item) {
                              tmp.push(item);
                          });
                      }
                      grid = $("#Materials").data("kendoGrid");
                      originalMaterialDataSource = grid.dataSource;
                      originalMaterialDataSource.data(tmp);
                      originalMaterialDataSource._destroyed = [];
                      originalMaterialDataSource.pageSize(pageSize);
                      originalMaterialDataSource.page(1);
                      originalMaterialDataSource._total = tmp.length;
                      grid.pager.refresh();
                  }
              });
  </code></pre>