This is a migrated thread and some comments may be shown as answers.

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

1 Answer 200 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ashish
Top achievements
Rank 1
Veteran
Ashish asked on 21 Dec 2020, 10:38 PM

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!

 

 

 

 

1 Answer, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 24 Dec 2020, 02:27 PM

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.

Let me know if yo have any questions.

Regards,
Nikolay
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Ashish
Top achievements
Rank 1
Veteran
Answers by
Nikolay
Telerik team
Share this question
or