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

时间:2012-06-28 15:59:02

标签: jquery telerik kendo-ui

我在页面上有一个日期选择器和一个网格。我希望根据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')来获取网格。但是如何将结果绑定到网格?

4 个答案:

答案 0 :(得分:21)

假设结果变量包含一个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);
    }
});

答案 1 :(得分:10)

你也可以这样做:

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操作添加到您的传输中,并将所有代码放在一个位置。

答案 2 :(得分:3)

您可以将Json结果绑定到网格。如果需要,您也可以通过模型。例如,请参阅下面的代码段。

有关详细信息,请参阅here

$('#FindBtn').click(function (e) {
    e.preventDefault();
    var UserDetails =
    {
        "FirstName": document.getElementById('FirstName').value,
        "LastName": document.getElementById('LastName').value,
    };
    $.ajax({
        url: "SearchJsonRequest",
        type: 'POST',
        contentType: "application/json;charset=utf-8",
        data: JSON.stringify(UserDetails),
        dataType: "json",
        success: function (data) {
            var grid = $('#AssociateSearch').getKendoGrid();
            grid.dataSource.data(data);
            grid.refresh();
        }
    });
    return false;
});

答案 3 :(得分:0)

延伸Igorrious ......这个确切的答案对我没有帮助,但它引导我找到答案。

对我有用的是什么:

$.ajax(
  {
    type: 'POST',
    url: '/Controller/Action',
    data: {
      paramKey: paramValue
    },
    success: function (result) {
      $("#my-grid").data("tGrid").dataBind(result);
    }
}); 

如果这对您没有帮助,请执行一些javascript调试,以找出链[$("#my-grid")] . [data("tGrid")] . [dataBind]中的某些元素为何具有value == 'undefined'的原因。