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

Question

У меня есть дампикер и сетка на странице. Я хочу, чтобы сетка была заполнена на основе даты в 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'). Но как мне привязать мой результат к сетке?

Answer 1

Предполагая, что переменная result содержит массив объектов javascript и содержит данные для того же числа столбцов, что и исходная отметка.

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

Answer 3

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

Answer 4

Вы можете связать результаты 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; 
});