在 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()&nbsp; &nbsp; &nbsp; &nbsp; .Grid<ProjectName.DataModels.Models.Customer>()&nbsp; &nbsp; &nbsp; &nbsp; .Name("CustomerGrid")&nbsp; &nbsp; &nbsp; &nbsp; .Columns(columns =>&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; columns.Bound(e => e.CustomerId);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; columns.Bound(e => e.SomeCustomerColumn);&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; .ClientDetailTemplateId("OrderDetails")&nbsp; &nbsp; &nbsp; &nbsp; .AutoBind(false) // Don't load the data yet because I'll need to supply parameters for the fetch&nbsp; &nbsp; &nbsp; &nbsp; .DataSource(dataSource => dataSource&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .Ajax()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .PageSize(20)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .Model(model => model.Id("CustomerId", typeof(string)))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .Read(read => read.Action("GetCustomersAsync", "Customer").Data("passArguments"))&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; .Events(events => events.DataBound("dataBound").DetailExpand("onExpand")))onExpand现在，每次我们在父网格中展开一行时，都会调用所调用的回调函数。这是我现在设置子网格的dataSource.// Passing e is also important here because if you don't, this callback gets called&nbsp;// for every row in the main grid (even when you don't expand them!)function onExpand(e) {&nbsp; &nbsp; var customerId = e.sender.dataItem(e.masterRow).CustomerId;&nbsp; &nbsp; var orders = e.sender.dataItem(e.masterRow).Orders;&nbsp; &nbsp; //Initialize the&nbsp; child grid as well&nbsp; &nbsp; var childGridName = "#" + "OrderDetails_" + customerId;&nbsp; &nbsp; var childGrid = $(childGridName).data("kendoGrid");&nbsp; &nbsp; if (childGrid !== undefined) {&nbsp; &nbsp; &nbsp; &nbsp; childGrid.dataSource.data(orders);&nbsp; &nbsp; }}function dataBound() {&nbsp; &nbsp; this.expandRow(this.tbody.find("tr.k-master-row").first());}我曾经e.sender.dataItem(e.masterRow).PROPERTYNAME从主行访问我需要的属性。现在这工作完美无缺！