¿Cómo vincular datos a una grilla kendoui desde una consulta ajax?

Question

Tengo un marcador de fecha y una cuadrícula en una página. Quiero que la cuadrícula se rellene en función de la fecha en el selector de fecha. He hecho esto con una cuadrícula de mvc de Telerik usando 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); 
    } 
}); 

Ahora quiero hacer lo mismo, excepto con la grilla Kendoui. Sé que necesito obtener la grilla usando $('#Grid').data('kendoGrid'). Pero, ¿cómo puedo vincular mi resultado a la cuadrícula?

Answer 1

Suponiendo que la variable de resultado contiene una matriz de objetos JavaScript, y contiene datos para la misma cantidad de columnas que la marca original.

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

Pruebe lo siguiente:

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

Answer 2

También puede hacerlo de esta manera:

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

A continuación, se unen a la red:

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

De esta manera se puede añadir el resto de las acciones de CRUD para su transporte y tendrá todo su código en un solo lugar.

Answer 3

Extender en Igorrious ... Esa respuesta exacta no me ayudó pero me llevó a una respuesta.

lo que funcionó para mí:

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

Si esto no le ayuda, hacer algo de JavaScript depuración para averiguar por qué algunos de los elementos en la cadena [$("#my-grid")] . [data("tGrid")] . [dataBind] tienen value == 'undefined'.

Answer 4

Puede enlazar los resultados de Json a la grilla. Y también puede pasar Model si es necesario. Vea el fragmento de código a continuación, por ejemplo.

Consulte here para obtener más información.

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