Required Sub Total At Row Level in Grid

[Nagendra Gupta]

Hello Team,

Please check snapshot attach, I need same type of format in Angular Grid component. How to achieve this.

1. There is Two column is data one is BRAND, PRODUCT 
2. Grouping should be done on BRAND, A sub total row should be added after each brand grouping and make sum for selected column not for all.
3. There is a option for adding custom color to sub total row
4. There is a option for making font bold/ un-bold to sub total row
5. There is a option for Grand Total Required Or Not
6. There is a option for Header Row Required for Each BRAND Group

Attachment: SubTotal_84453bb6.zip

[Ajith Govarthan]

Hi Nagendra Gupta, 

Thanks for contacting synfusion support. 

Query: Required Sub Total At Row Level in Grid 

 

Based on your query you want to add summary row for each grouped column in your Grid application. By default, in our EJ2 Grid we have aggregate feature. Using the aggregate feature you can show the total, average and some custom calculation values using grouping with aggregates feature. 

So, using these features you can show the aggregates for grouped columns, and we have also customized the color of the aggregate rows using CSS properties. 

For your convenience we have attached the sample and the documentation please refer them for your reference. 

Code Example: 

App.component.html 

<div class="control-section"> 

<ejs-grid #grid [dataSource]="data" [allowPaging]="true" [allowGrouping]="true" [pageSettings]='pageOption' [groupSettings]="groupSettings" 

(dataBound)='dataBound()' (load)='load()'> 

    <e-columns> 

        <e-column field='CategoryName' headerText='Category Name' width='170'></e-column> 

        <e-column field='ProductName' headerText='Product Name' width='150'></e-column> 

        <e-column field='QuantityPerUnit' headerText='Quantity per unit' width='180' textAlign='Right'></e-column> 

        <e-column field='UnitsInStock' headerText='Units In Stock' width='150' textAlign='Right'></e-column> 

        <e-column field='Discontinued' width='170' textAlign="Center" [displayAsCheckBox]="true" type="boolean"></e-column> 

    </e-columns> 

    <e-aggregates> 

        <e-aggregate> 

            <e-columns> 

                <e-column type="Sum" field="UnitsInStock"> 

                      <ng-template #groupFooterTemplate let-data>Total units: {{data.Sum}}</ng-template> 

                </e-column> 

                <e-column type="TrueCount" field="Discontinued"> 

                    <ng-template #groupFooterTemplate let-data>Discontinued: {{data.TrueCount}}</ng-template> 

                </e-column> 

            </e-columns> 

        </e-aggregate> 

        <e-aggregate> 

            <e-columns> 

                <e-column type="Max" field="UnitsInStock"> 

                    <ng-template #groupCaptionTemplate let-data>Maximum: {{data.Max}}</ng-template>              

                </e-column> 

            </e-columns> 

        </e-aggregate> 

    </e-aggregates> 

</ejs-grid> 

</div> 

App.component.css 

.e-grid .e-summaryrow .e-summarycell, 

.e-grid .e-summaryrow .e-templatecell, 

.e-grid .e-summarycontent .e-indentcell, 

.e-grid .e-indentcell.e-detailindentcelltop { 

  background-color: forestgreen;  // customize the summary rows 

  font-weight: bold; 

} 

Sample Link: https://stackblitz.com/edit/angular-xa4enx?file=app.component.css 

UG-link: https://ej2.syncfusion.com/angular/documentation/grid/aggregates/#group-and-caption-aggregate 

You have also mentioned some other queries. So, to provide prompt solution for those queries please share the below details. 

1. Explain more details on “There is a option for Grand Total Required Or Not & There is a option for Header Row Required for Each BRAND Group”.

 

2. Share the video demo for your reported query.

 

3. Do you want to hide the group caption row?

 

4. Share the Syncfusion package version.

 

Regards, 

Ajith G.