【问题标题】:Populate Kendo grid with Ajax result使用 Ajax 结果填充 Kendo 网格
【发布时间】:2023-03-15 04:01:01
【问题描述】:

我希望能够使用 ajax 调用的结果来决定我将填充哪个 Kendo Grid。如果我只收到数组中的一个项目,我想填充一个网格,否则我有另一个用于多个项目的网格。

我的 jQuery

    $.ajax({
        type: "POST",
        dataType: "json",
        url: 'Item/GetItems/',
        data: { number: number },
        success: function (data) {

            if (data.length == 1) {
                var sGrid = $("#SingleGrid").data("kendoGrid").dataSource.data(data);

                //I´ve also tried this
                //sGrid.refresh();
            }
            else {
                var mGrid = $("#MultipleGrid").data("kendoGrid").dataSource.data(data);

                //I´ve also tried this
                //mGrid .refresh();
            }
        },
        error: function () {
        }
    });

我的控制器操作

    public ActionResult GetItems([DataSourceRequest] DataSourceRequest request, string number)
    {
        var items = _idg.GetItems(number);
        return Json(items.ToDataSourceResult(request, ModelState));
    }

我一直在监控 Firebug,它没有显示任何错误。我试图通过决定填充其中一个网格来阻止对服务器的第二次调用。有没有办法像这个客户端一样强制刷新数据源? (不调用 dataSource 上的 read 函数,这将第二次调用服务器)

######已编辑########

function TestGrid() {
    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                type: "POST",
                dataType: "json",
                url: 'Item/GetItems/'
            }
        },
        schema: {
            data: function (response) {
                // Here the Total is always correct
                return response.Total;
            }
        }
    });

    dataSource.fetch(function () {
        var kendoGrid;
        var data = this.data();
        //Here the data does not include my Total
        alert(data);
        if (data.length == 1) {
            kendoGrid = $("#SingleGrid").data("kendoGrid");
        } else {
            kendoGrid = $("#MultipleGrid").data("kendoGrid");
        }
        kendoGrid.setDataSource(dataSource);
        kendoGrid.refresh();
    });
}

从上面的示例中,我似乎无法从 this.data() 中得出总数。当我使用 Firebug 进行调试时,我可以看到总数始终是正确的。有什么想法吗?

【问题讨论】:

    标签: jquery asp.net-mvc asp.net-mvc-4 kendo-ui kendo-grid


    【解决方案1】:

    您可以填充剑道数据源的新实例,加载数据,然后对结果进行操作,设置网格的数据源。也许是这样的:

    var dataSource = new kendo.data.DataSource({
      transport: {
        read:  {
          type: "POST",
          dataType: "json",
          url: 'Item/GetItems/',
          data: { number: number },
        }
      }
    });
    

    然后从服务器获取数据并根据结果进行操作:

    dataSource.fetch(function() {
      var data = this.data();
      var kendoGrid;
      if (data.length == 1) {
        kendoGrid = $("#SingleGrid").data("kendoGrid");
      } else {
        kendoGrid = $("#MultipleGrid").data("kendoGrid");
      }
      // Replace the grids data source with our new populated data source
      kendoGrid.setDataSource(dataSource);
      kendoGrid.refresh();
    });
    

    【讨论】:

    • 感谢您的回答@boniestlawyer,我按照您的建议实施了,但我的网格仍然没有显示数据。我可以在 Firebug 中看到数据正在从控制器传递但没有出现。当我计算新数据源中的元素(使用 total() 函数)时,我总是没有收到任何数据,就好像数据源为空一样。也许我使用了错误的函数来计算数据源,或者我没有以正确的方式填充数据源。有任何想法吗? :)
    • 我怀疑这与传到浏览器的数据有关。尝试将 schema->data 函数添​​加到您的 kendo 数据源,如下所示:docs.kendoui.com/api/framework/datasource#configuration-schema,并调试该函数以检查您得到的响应。
    • 这可能就像您在暗示的那样,来自服务器的数据以某种方式无法正确通过,或者至少没有正确数据绑定。我是否正确假设 dataSource 总是从控制器读取数据作为 DataSourceResult? (就像我的例子所示)
    • 看来是正确的。 kendo 数据源的 javascript 端不一定必须绑定到 DataSourceResult,它几乎可以从任何 JSON 数据中读取,它只是帮助处理数据,因此您不需要在客户端做太多的管道工作。
    • 你好@boniestlawyer。现在我回到这个问题上。您将如何计算数据源中的元素?如上例所示,您将使用什么来返回数据源的长度?
    【解决方案2】:

    你也可以这样做。

    $("#grid").kendoGrid({
                dataSource: {
                    transport: {
                        read: {
                            url: "http://localhost:13073/home/KendoGriddata",
                            dataType: "json",
                            type: "Post",
                            data: function () {
                                var dt = { MultipleSearchText: 'rikin' };
                                return dt;
                            }
                        }
                    },
                    pageSize: 5    
                });
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-06-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多