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

2 posts, 0 answers
  1. Ashish
    Ashish avatar
    14 posts
    Member since:
    Dec 2018

    Posted 21 Dec 2020 Link to this post

    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!

     

     

     

     

  2. Nikolay
    Admin
    Nikolay  avatar
    299 posts

    Posted 24 Dec 2020 Link to this post

    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/.

Back to Top