Child Grid does not load

[Riwut Libinuko]

Hi, 

I am trying to create parent child grid summary like this using Syncfusion .NET Core.

1. When the page open, only green row will be shown.
2. When user click on the green row, example Year: 2022 , the month rows of that year will open.

Year	Month	Average Price
2022		100
	Jan	120
	Feb	80
2021		50
	Jan	75
	Feb	75
	Mar	0

What I did

1.  Create method in controller to return Year Average , (UrlDatasourcePricingYearSummary)
2. Create method in controller to return Monthly Average, (UrlDatasourcePricingMonthSummary)

Razor.cshtml page

<ejs-grid id="YearlySummaryGrid" >    

<e-data-manager url="/Pricing/ UrlDatasourcePricingYearSummary" adaptor="UrlAdaptor"> </e-data-manager>

<e-grid-columns>

<ejs-grid id="MonthlySummaryGrid" > 

​  <e-data-manager url="/Pricing/ UrlDatasourcePricingMonthSummary" adaptor="UrlAdaptor"> </e-data-manager>

</ejs-grid>

</e-grid-columns>

</ejs-grid>

---

Problem, I cannot make it work. The MontlySummaryGrid never been shown.

Can anyone help me?

[Rajapandiyan Settu]

Hi Riwut,

Thanks for contacting Syncfusion support.

You can achieve your requirement by using Grouping and Aggregate features of Grid.

Grouping: https://ej2.syncfusion.com/aspnetcore/documentation/grid/grouping/grouping
Aggregate: https://ej2.syncfusion.com/aspnetcore/documentation/grid/aggregates/group-and-caption-aggregate

Demo: https://ej2.syncfusion.com/aspnetcore/Grid/GroupAndCaptionAggregate#/fluent

[index.cshtml]

<ejs-grid id="Grid" allowPaging="true" allowGrouping="true" allowSorting="true" allowFiltering="true" toolbar="@(new List<string>() {"Search" })" dataBound="dataBound">

    <e-data-manager url="/Home/UrlDataSource" adaptor="UrlAdaptor"></e-data-manager>

    <e-grid-groupsettings showgroupedColumn="true" columns="@(new string[] {"ShipCountry"})"></e-grid-groupsettings>

    <e-grid-aggregates>

        <e-grid-aggregate>

            <e-aggregate-columns>

                <e-aggregate-column field="Freight" type="Average" format="N2" groupCaptionTemplate="${Average}"></e-aggregate-column>

            </e-aggregate-columns>

        </e-grid-aggregate>

    </e-grid-aggregates>

    <e-grid-columns>

        <e-grid-column field="OrderID"  headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>               

        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column>               

        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="N2" editType="numericedit" width="120"></e-grid-column>                              

        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>                

    </e-grid-columns>

</ejs-grid>

 

<script>

    function dataBound(args){

        if ( this.groupSettings.columns.length > 0 ){

            this.groupCollapseAll(); // collapse all the grouped items

        }

    }

</script>

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/core_grid_grouping_aggregate-749245563.zip

You can also use TreeGrid component to achieve your requirement. Kindly refer to the below documentation for more information,

TreeGrid: https://ej2.syncfusion.com/aspnetcore/documentation/tree-grid/getting-started-core
Demo: https://ej2.syncfusion.com/aspnetcore/TreeGrid/Overview#/fluent

Please let us know if you have any concerns.

Regards,

Rajapandiyan S
If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.