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

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

从主行访问我需要的属性。

现在完美无缺！