Как связать данные с сеткой kendoui из запроса ajax?

У меня есть датапикер и сетка на странице. Я хочу, чтобы сетка была заполнена на основе даты в datepicker. Я сделал это с сеткой mvc Telerik, используя grid.dataBind.

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

Теперь я хочу сделать то же самое, кроме как с сеткой Кендуи. Я знаю, что мне нужно получить сетку, используя $('#Grid').data('kendoGrid'). Но как мне привязать мой результат к сетке?

Ответ 1

Предполагая, что переменная result содержит массив объектов 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);
    }
});

Ответ 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 к вашему транспорту, и у вас будет весь ваш код в одном месте.

Ответ 3

Вы можете привязать результаты Json к сетке. А также вы можете пройти модель, если вам нужно. См. Ниже фрагмент кода.

Подробнее см. здесь.

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

Ответ 4

Продолжать на 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'.