KendoGrid刷新

Question

我正在使用KendoGrid显示从我的服务中获取的一些数据。

用户在加载按钮上选择一些参数（公司和日期）和cliks。

用户在datePicker上选择一个月，服务器将返回该日期加上11个月的数据。

我只在用户点击加载按钮后才显示网格。

装载功能：

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 < 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() 
    }); 
} 

当我点击首次加载按钮，数据源被加载并正确显示网格。但是，例如，如果我更改datePicker的日期并再次单击加载按钮，数据源将加载正确的数据（其他月份的新记录），但网格不会刷新。

如果我第一次选择月份Jan/2015，它会从Jan/2015加载并显示，直到Dec/2015，这是正确的。

但如果比我选择月Feb/2015，从Feb/2015数据源的负载，直到Jan/2016（正确的），但网格显示来自Jan/2015列，直到Dec/2015，这是不对的。在这种情况下，列Jan/2015显示为空，并且不显示列Jan/2016。

有人能指点我正确的方向吗？ 谢谢！

Answer 1

你应该使用功能为您的数据源 - >运输 - >读 - >数据：

data: function() { 
    return { 
       companyIds: companyIds, 
       date: kendo.toString(picker.value(), "yyyy-MM-dd") // user select it 
      }; 
    } 

UPDATE：

这里是我会怎么做：

function loadGrid(e) { 
    $("#grid").data("kendoGrid").dataSource.fetch(); 
} 

function getData() { 
    var companyIds = ... 
    var picker = ... 
    return { 
     companyIds: companyIds, 
     date: kendo.toString(picker.value(), "yyyy-MM-dd") // user select it 
    }; 
} 

var dataSource = new kendo.data.DataSource({ 
    transport: { 
     read: { 
      url: URL, 
      dataType: "json", 
      data: getData 
     } 
    }, 
    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 < 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; 
     } 
    } 
}); 

$("#grid").kendoGrid({ 
    scrollable: false, 
    editable: false, 
    dataSource: dataSource 
}); 

Answer 2

当用户点击load button时，我最终破坏并重新创建网格。

$("#loadButton").kendoButton({ 
    click: loadGrid 
}); 

var loaded = false; 
function loadGrid(e) { 

    if (value) { 

     if (loaded) { 
      var grid = $("#grid").data("kendoGrid"); 
      grid.wrapper.empty(); 
      grid.destroy(); 
     } 

     $("#grid").kendoGrid({ 
      scrollable: false, 
      editable: false, 
      autoBind: false, 
      dataSource: _dataSource() 
     }); 

     $("#grid").data("kendoGrid").dataSource.read(); 
     loaded = true; 
    } else { 
     e.preventDefault(); 
     alert("aaaa"); 
    } 
}