CODEWITHSUNDEEP
kendo-uikendo-gridkendo-asp.net-mvc
Ashiq Ali
Ashiq Ali

Reputation: 29

How to load kendo grid data with ajax call

How to load kendo grid data with ajax call using dataSource.data method. I have tried following but it is not working. $('#AAMaintenance').data('kendoGrid').dataSource.data(result);

function filterOnSubmit() {
    var data = {};
    data["ExaminerNo"] = $("#txtExaminerNo").val();
    data["ExaminerName"] = $("#txtExaminerName").val();   
    $.ajax(
    {
        type: 'POST',
        url: '@Url.Action("GetFilteredAAMaintenanceDetails", "AAMaintenance")',
        contentType: "application/json",
        dataType: 'json',
        data: JSON.stringify({ aaMaintenanceFilter: data }),
        success: function (result) {                              
            $('#AAMaintenance').data('kendoGrid').dataSource.data(result);                                                       
            $('#AAMaintenance').data('kendoGrid').refresh();
        }
    });
}

Upvotes: 0

Views: 2803

Answers (1)

Sandman
Sandman

Reputation: 2307

Assuming that the dataSource hasn't been setup for the Kendo grid control prior to the ajax call to retrieve the data, you should instantiate this before setting it as the datasource:

var ds = new kendo.data.DataSource({
    data: result
});

$("#AAMaintenance").data("kendoGrid").setDataSource(ds);

A few notes aside from this, and based on Telerik documentation:

  • If the result returned from the server is a complex object (unknown currently), you may need to look into schema.model.
  • Ensure that the column declaration field attributes match the names assigned to the object attributes you wish to display, for example note in this example how the field: "name" column matches the name attribute being added to the dataSource.

Upvotes: 1

Related Questions