在 Kendo UI 中使用父网格的数据源设置子网格的数据源

Question

我有这个表格：@*Some form fields here that accept startDate and endDate*@<div>    <button id="searchButton">Search</button></div><div class="col-md-12 row">    @(Html.Kendo()            .Grid<ProjectName.DataModels.Models.Customer>()            .Name("CustomerGrid")            .Columns(columns =>            {                columns.Bound(e => e.CustomerId);                columns.Bound(e => e.SomeCustomerColumn);            })            .ClientDetailTemplateId("OrderDetails")            .AutoBind(false) // Don't load the data yet because I'll need to supply parameters for the fetch            .DataSource(dataSource => dataSource                        .Ajax()                        .Events(events=>events.Change("loadChildGrid"))                        .PageSize(20)                        .Model(model => model.Id("CustomerId", typeof(string)))                        .Read(read => read.Action("GetCustomersAsync", "Customer").Data("passArguments"))            )    )    <script id="OrderDetails" type="text/kendo-tmpl">        @(Html.Kendo()                .Grid<ProjectName.DataModels.Models.Order>()                .Name("OrderDetails_#=CustomerId#")                .Columns(columns =>                {                    columns.Bound(o => o.ProductName);                    columns.Bound(o => o.SomeOrderColumn);                })                .DataSource(dataSource => dataSource                            .Ajax()                            .PageSize(10)                            .Model(model=>model.Id("OrderId"))                            .ServerOperation(false)                )                .AutoBind(false)                .ToClientTemplate()        )    </script></div>

Answer 1

经过几个小时的打击和尝试，我终于解决了。因此，我将其发布在这里，以节省其他人遇到类似问题的时间：

我DetailExpand向主网格添加了一个事件。并删除了Change上的事件dataSource。

@(Html.Kendo()

        .Grid<ProjectName.DataModels.Models.Customer>()

        .Name("CustomerGrid")

        .Columns(columns =>

        {

            columns.Bound(e => e.CustomerId);

            columns.Bound(e => e.SomeCustomerColumn);

        })

        .ClientDetailTemplateId("OrderDetails")

        .AutoBind(false) // Don't load the data yet because I'll need to supply parameters for the fetch

        .DataSource(dataSource => dataSource

                    .Ajax()

                    .PageSize(20)

                    .Model(model => model.Id("CustomerId", typeof(string)))

                    .Read(read => read.Action("GetCustomersAsync", "Customer").Data("passArguments"))

        )

        .Events(events => events.DataBound("dataBound").DetailExpand("onExpand"))

)

onExpand现在，每次我们在父网格中展开一行时，都会调用所调用的回调函数。这是我现在设置子网格的dataSource.

// Passing e is also important here because if you don't, this callback gets called 

// for every row in the main grid (even when you don't expand them!)

function onExpand(e) {

    var customerId = e.sender.dataItem(e.masterRow).CustomerId;

    var orders = e.sender.dataItem(e.masterRow).Orders;

    //Initialize the  child grid as well

    var childGridName = "#" + "OrderDetails_" + customerId;

    var childGrid = $(childGridName).data("kendoGrid");

    if (childGrid !== undefined) {

        childGrid.dataSource.data(orders);

    }

}

function dataBound() {

    this.expandRow(this.tbody.find("tr.k-master-row").first());

}

我曾经e.sender.dataItem(e.masterRow).PROPERTYNAME从主行访问我需要的属性。

现在这工作完美无缺！