How to bind data to a kendoui grid from an ajax query?

Question

I have a datepicker and a grid on a page. I want the grid to be populated based on the date in the datepicker. I have done this with a Telerik mvc grid using 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);
  }
});

Now I want to do the same thing except with the Kendoui grid. I know I need to get the grid by using $('#Grid').data('kendoGrid'). But how do I bind my result to the grid?

Answer 1

Assuming the result variable contains an array of javascript objects, and it contains data for the same number of columns as the original mark up.

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

Try the following:

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