title: KendoGrid refresh
body: <p>I'm using KendoGrid to display some data fetched from my service.</p>
  
  <p>The user selects some parameters (company and date) and cliks on a load button.</p>
  
  <p>The user selects a month on a datePicker and the server will return data from that date plus 11 months.</p>
  
  <p>I only display the grid after the user click on the load button.</p>
  
  <p><strong>Load function:</strong></p>
  
  <pre><code>function loadGrid(e) {
  
      var companyIds = [1, 3, 7]; // user select it
  
      var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
      var rowHeaders = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K"];
  
      var _dataSource = function () {
  
          var dataSource = new kendo.data.DataSource({
              transport: {
                  read: {
                      url: URL,
                      dataType: "json",
                      data: {
                          companyIds: companyIds,
                          date: kendo.toString(picker.value(), "yyyy-MM-dd") // user select it
                      }
                  }
              },
              schema: {
                  data: function (data) {
  
                      // function to handle data returned from server
  
                      var dataArray = [];
                      var index = 0;
                      for (var key in data[0]) {
                          if (Object.prototype.hasOwnProperty.call(data[0], key)) {
                              var property = key;
                              if (property == "date") {
                                  continue;
                              }
                              key = {};
                              key["X"] = rowHeaders[index];
                              index++;
                              for (var i = 0; i &lt; data.length; i++) {
                                  var date = data[i].date;
                                  var dateSplit = date.split("-");
                                  var year = dateSplit[0];
                                  var month = months[dateSplit[1] - 1];
                                  var header = month + "_" + year;
                                  key[header] = data[i][property];
                              }
                              dataArray.push(key);
                          }
                      }
                      return dataArray;
                  }
              }
          });
          return dataSource;
      };
  
      $("#grid").kendoGrid({
          scrollable: false,
          editable: false,
          dataSource: _dataSource()
      });
  }
  </code></pre>
  
  <p>When I click on the load button for the first time, the datasource is loaded and the grid is displayed correctly.</p>
  
  <p>But, for instance, if I change the date on the datePicker and click on the load button again, the datasource is loaded with the correct data (new records for other months), but the grid is not refreshed.</p>
  
  <p>If the first time I select the month <code>Jan/2015</code>, it loads and displays from <code>Jan/2015</code> until <code>Dec/2015</code>, which is correct.</p>
  
  <p>But if than I select the month <code>Feb/2015</code>, the datasource loads from <code>Feb/2015</code> until <code>Jan/2016</code> (correct), but the grid display the columns from <code>Jan/2015</code> until <code>Dec/2015</code>, which is wrong. In this case, the column <code>Jan/2015</code> is shown empty and the column <code>Jan/2016</code> is not displayed.</p>
  
  <p>Can someone point me to the right direction?
  Thanks!</p>