jquery - 行展开的剑道网格详细信息

Question

每当我在 Kendo 网格中展开详细信息行时，我都希望获取远程数据来填充详细信息模板。这是我当前的流程:

• 创建剑道网格并填充数据
• 在网格初始化期间注册detailInit事件
• 当用户单击该行展开时，detailInit 会被调用
• 在detailInit中，使用我的远程数据创建一个kendo DataSource
• 如何使用新数据更改明细行？这可能吗？

仅供引用...详细信息行不是 kendoGrid。它是这样的标签布局#= MyDataField#

  function detailInit(e) {
        var detailRow = e.detailRow;

        //Go get the details for the selected row
        var ds = new kendo.data.DataSource(
        {
            transport: {
                read: {
                    data: "d.Data",
                    dataFilter: function (data) {

                        var msg = eval('(' + data + ')');
                        if (msg.hasOwnProperty('d'))
                            return msg.d;
                        else
                            return msg;
                    },
                    contentType: "application/json; charset=utf-8",
                    type: "POST",
                    dataType: "json",
                    url: "SearchComponents.aspx/GetComponent"


                },
                parameterMap: function (options) {
                    return kendo.stringify({ lpComponentId: e.data.componentid });
                }
            }
        });

        ds.fetch(function () {
            var data = this.data();
        });

        //How do i update the detail row with my dataSource?

        detailRow.find(".tabstrip").kendoTabStrip({
            animation: {
                open: { effects: "fadeIn" }
            }
        });

    }

Answer 1

数据源没有固有的显示方式，因此您需要决定要显示的内容和格式(例如，数据源中的单个数据项，或每个数据项的表行)数据项，或...)。一般来说，您可以简单地替换e.detailCell的内容:

$("#grid").kendoGrid({
  columns: [
    { field: "name" }
  ],
  dataSource: [
    {
      name: "Beverages",
      products: [
        { name: "Tea" },
        { name: "Coffee" }
      ]
    },
    {
      name: "Food",
      products: [
        { name: "Ham" },
        { name: "Bread" }
      ]
    }
  ],
  detailInit: function(e) {
      // get data
      datasource.fetch(function () {
          var data = this.data();

          // compose your content and write it to the detail cell
          e.detailCell.html("this is my content: " + data.length);
      });
  }
});

您还可以使用detailTemplate用于详细内容的非动态部分或每个数据项的模板。