首页 文章

行扩展时的剑道网格详细信息

提问于
浏览
2

每当我在Kendo网格中展开细节行时,我想获取远程数据来填充细节模板 . 这是我目前的流程:

  • 创建kendo网格并填充数据

  • 在网格初始化期间注册detailInit事件

  • 当用户单击要展开的行时,将调用detailInit

  • 在detailInit中,使用我的远程数据创建一个kendo DataSource

  • How do i change the detailRow with my new data ?这可能吗?

fyi ...细节行不是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" }
            }
        });

    }

1 回答

  • 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用于详细内容的非动态部分或每个数据项的模板 .

相关问题