Wie binden Sie Daten von einer Ajax-Abfrage an ein Kendoui-Gitter?

Question

Ich habe einen Datepicker und ein Gitter auf einer Seite. Ich möchte, dass das Raster anhand des Datums im Datapicker ausgefüllt wird. Ich habe dies mit einem Telerik-MVC-Raster mit grid.dataBind getan.

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

Jetzt möchte ich das gleiche tun, außer mit dem Kendoui-Gitter. Ich weiß, dass ich das Raster mit $('#Grid').data('kendoGrid') bekommen muss. Aber wie binde ich mein Ergebnis an das Gitter?

Answer 1

Angenommen, die Ergebnisvariable enthält ein Array von JavaScript-Objekten und enthält Daten für die gleiche Anzahl von Spalten wie die ursprüngliche Markierung.

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

Versuchen Sie Folgendes:

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

Answer 2

Sie können es auch tun, um diese Art und Weise:

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

Dann binden sie an das Netz:

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

Auf diese Weise können Sie hinzufügen Der Rest der CRUD-Aktionen für Ihren Transport und Sie haben Ihren gesamten Code an einem Ort.

Answer 3

Um auf Igorrious zu erweitern ... Diese genaue Antwort hat mir nicht geholfen, aber es führte mich zu einer Antwort.

Was für mich gearbeitet:

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

Wenn dies bei Ihnen nicht hilft, einige tun Javascript-Debugging, um herauszufinden, warum einige der Elemente in der Kette [$("#my-grid")] . [data("tGrid")] . [dataBind]value == 'undefined' haben.

Answer 4

Sie können Json-Ergebnisse an das Raster binden. Und Sie können auch Model übergeben, wenn Sie müssen. Sehen Sie sich zum Beispiel das Code-Snippet an.

Weitere Informationen finden Sie unter 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; 
});