Change kendo grid data with ajax call

Question

I populate a kendo grid from my model which works fine. I want to be able to change the datasource of the grid via an ajax call which is different from the initial load and subsequent trips to filter. My ajax call is returning the model data in json, but the data in the grid does not change. How do I change the datasource and rebind the grid?

Initial population and filtering

                        @(Html.Kendo().Grid(Model.Catalogs)
                        .Name("grid")
                        .DataSource(dataSource => dataSource
                        .Ajax().ServerOperation(false)
                            .Read(read => read.Action("Index", "Catalog"))
                        )

Ajax call where I want to repopulate the grid with json. result.Catalogs does contain the proper data:

$("#btnPartNumberSearch").on('click', function () {
        $.ajax({
            type: "POST",
            url: "Catalog/PartNumberSearch",
            data: JSON.stringify({
                PartNumber: $("#Partnumber").val()
            }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (result) {

                if (result.isCatalogSearch) {
                    $('#inventoryItems').hide();
                    $('#catalogItems').show();
                    $("#grid").data(result.Catalogs);
                }
                else {
                    $('#inventoryItems').show();
                    $('#catalogItems').hide();
                    $("#grid").data(result.Inventory);
                }

            },
            error: function(){
                alert("error");
            }
        });


    });

Steve Greene Steve Greene · Accepted Answer · 2020-01-30T20:43:41

Your syntax is off:

var grid = $("#grid").data("kendoGrid");
grid.dataSource.data(result.Catalogs);

or you could create a new datasource (might impact column settings):

var dataSource = new kendo.data.DataSource(result.Catalogs);
var grid = $("#grid").data("kendoGrid");
grid.setDataSource(dataSource);

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/setdatasource

Change kendo grid data with ajax call

1 Answers