使用 ajax 调用更改剑道网格数据答案

【问题标题】：Change kendo grid data with ajax call使用 ajax 调用更改剑道网格数据
【发布时间】：2020-01-30 19:28:08
【问题描述】：

我从我的模型中填充了一个剑道网格，效果很好。我希望能够通过 ajax 调用更改网格的数据源，这与初始加载和后续的过滤行程不同。我的 ajax 调用以 json 格式返回模型数据，但网格中的数据没有改变。如何更改数据源并重新绑定网格？

初始填充和过滤

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

我想用 json 重新填充网格的 Ajax 调用。 result.Catalogs 确实包含正确的数据：

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


    });

【问题讨论】：

标签： asp.net-mvc kendo-ui

【解决方案1】：

您的语法已关闭：

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

或者您可以创建一个新的数据源（可能会影响列设置）：

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

【讨论】：