Come associare dati a una griglia kendoui da una query ajax?

Question

Ho un datario e una griglia su una pagina. Voglio che la griglia venga compilata in base alla data nel datepicker. Ho fatto questo con una griglia mvc Telerik utilizzando 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); 
    } 
}); 

Ora voglio fare la stessa cosa tranne che con la griglia Kendoui. So che ho bisogno di ottenere la griglia usando $('#Grid').data('kendoGrid'). Ma come legare il mio risultato alla rete?

Answer 1

Supponendo che la variabile di risultato contenga una serie di oggetti javascript e contenga dati per lo stesso numero di colonne del markup originale.

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

Provare quanto segue:

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

Answer 2

È inoltre possibile fare in questo modo:

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

quindi associare alla griglia:

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

In questo modo è possibile aggiungere il resto delle azioni CRUD al tuo trasporto e avrai tutto il tuo codice in un unico posto.

Answer 3

Estendere su Igorrious ... Quella risposta esatta non mi ha aiutato ma mi ha portato a una risposta.

cosa ha funzionato per me:

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

Se questo non ti aiuta, fare un po 'javascript debug per scoprire il motivo per cui alcuni degli elementi a catena [$("#my-grid")] . [data("tGrid")] . [dataBind] hanno value == 'undefined'.

Answer 4

È possibile associare i risultati Json alla griglia. E anche tu puoi passare Model se ne hai bisogno. Vedi il frammento di codice qui sotto per esempio.

Vedere here per ulteriori dettagli.

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