如何从ajax查询绑定到kendoui网格的数据？

Question

我在页面上有一个日期选择器和一个网格.我希望根据datepicker中的日期填充网格.我使用grid.dataBind使用Telerik mvc网格完成了这项工作.

var grid = $('#Grid').data('tGrid');
var pDate = document.getElementById('DatePicker').value;
$.ajax(
{
  type: 'POST',
  url: '/Home/AccountSummary/',
  dataType: 'json',
  data: { date: pDate },
  success: function (result) {
    grid.dataBind(result);
  }
});

现在我想用Kendoui网格做同样的事情.我知道我需要通过使用获得网格$('#Grid').data('kendoGrid').但是如何将结果绑定到网格？

Answer 1

假设结果变量包含一个javascript对象数组,并且它包含与原始标记相同数量的列的数据.

即. result = [{"AccountId":1,"Name":"AAA"},{"AccountId":2,"Name":"BBB"}];

请尝试以下方法:

$.ajax(
{
    type: 'POST',
    url: '/Home/AccountSummary/',
    dataType: 'json',
    data: { date: pDate },
    success: function (result) {
        $("#Grid").data("kendoGrid").dataSource.data(result);
    }
});

Answer 2

你也可以这样做:

var dataSource = new kendo.data.DataSource({
    transport: {
        read: function(options) {
            $.ajax({
                type: "POST",
                url: "Controller/Handler",
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                data: JSON.stringify({key: "value"}),
                success: function(data) {
                    options.success(data);
                }
            });
        }
    }
});

然后将其绑定到网格:

var grid = $("#grid").kendoGrid({
    dataSource: dataSource
}

这样,您可以将其余的CRUD操作添加到传输中,并将所有代码放在一个位置.