Set datasouce of a child grid from the datasource of parent grid in Kendo UI for .NET core

[Ashish]

I have this form:

<div align="center">
    <div>
        <button type="button" class="searchButton" id="search">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);
                })
                .Sortable()
                .Pageable()
                .Scrollable()
                .Filterable()
                .ClientDetailTemplateId("OrderDetails")
                .HtmlAttributes(new { style = "height:430px;" })
                .AutoBind(false) // Don't load the data yet because I'll need to supply parameters for the fetch
                .DataSource(dataSource => dataSource
                            .Ajax()
                            .PageSize(20)
                            .Read(read => read.Action("GetCustomersAsync", "Customer"))
                )
                .Events(events => events.DataBound("dataBound"))
        )

        <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)
                    )
                    .AutoBind(false)
                    .Pageable()
                    .Sortable()
                    .ToClientTemplate()
            )
        </script>
    </div>
</div>

<script type="text/javascript">

    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }

    $("#searchButton").on("click", function () {
        var startDate = $("#startdate").data("kendoDatePicker").value();
        var endDate = $("#enddate").data("kendoDatePicker").value();

        // How to load the customerGrid here by sending over the startDate and endDate? They are set from Kendo Date Pickers.
        // How to load the child grid: OrderDetails_123 by using the datasource used by the parent grid?

    });
</script>

 

And a method in the 'Customer' controller:

public async Task<ActionResult> GetCustomersAsync([DataSourceRequest] DataSourceRequest request, DateTime start, DateTime end)
{
    var consolidatedData = GetDataForParentAndChildGrid(start, end);
    return Json(new[] { consolidatedData }.ToDataSourceResult(request));
}

private ConsolidatedDataModel GetDataForParentAndChildGrid(DateTime start, DateTime end)
{
    var testData = new List<CustomerData>();
    // Gets required data with those dates filter and does a lot of mathematical calculations on them

    testData.Add(new CustomerData
    {
        CustomerId = "123",
        SomeCustomerColumn = "Blah blah",
        Orders = new List<OrderData>()
        {
            new OrderData{
                OrderId = "123ABC",
                CustomerId = "123",
                SomeOrderColumn = "Blah Blah Blah"
            }
        }
    });

    var consolidatedData = new ConsolidatedDataModel()
    {
        Data = testData
    };

    return consolidatedData;
}

 

After I click the "Search" button (which will take into account the start and end date fields to fetch the data), I'd like to update the 'dataSource' for the parent grid and the child grid. As you can see, the data I need for the parent grid already has data that I need for the child grid so I cannot do a new action call to populate the child grid. How do I accomplish this?

Please help.

Thank You!

 

 

 

 

[Nikolay]

Hello Ashish,

The approach of setting Autobind property to false looks good to me. The next step can be to get the parent Grid dataSource and filter it with the startDate and endDate values via the filter() dataSource method. This will also bind the Grid to the filtered data.

Please check out the following Dojo demo demonstrating a similar case, filtering by two values on a button click.

• http://dojo.telerik.com/OpilOhAp

Let me know if yo have any questions.

Regards,
Nikolay
Progress Telerik