hide/show group caption when group is expanded/collapsed

[Jose]

Hello,

I have a requirement to show the sum in the group caption line when the group is collapsed. If the group is expanded, the sum should appear in the group footer. Is this possible? If yes, how can it be done?

[Rajapandi Ravi]

Hi Jose,

Greetings from Syncfusion support

We have checked your query and we could see that you like to display the Sum in group caption and footer aggregates. Based on your query we have prepared a sample and we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information.

 

<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="Sum" field="UnitsInStock">

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

                </e-column>

            </e-columns>

        </e-aggregate>

    </e-aggregates>

</ejs-grid>

 

Sample: https://stackblitz.com/edit/angular-axxtwr?file=app.component.html

Sample demos: https://ej2.syncfusion.com/angular/demos/#/material/grid/aggregate-group

Screenshot:

Regards,

Rajapandi R

[Jose]

FYI, below is the response from Raj in a ticket, which helped me with my requirement.

Hi Jose,

Thanks for the update.

We have checked your query and we could see that while collapsing the Grouped row you like to show the group caption and while expanding you like to hide the group caption. Based on your requirement we have prepared a sample and we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information.

 

dataBound() {

        var groupcaptionlength = document.getElementsByClassName('e-groupcaption');

        for (var i = 0; i < groupcaptionlength.length; i++) {

            (groupcaptionlength[i].closest('tr').querySelector('.e-templatecell') as any).style.display= 'none'; //set display as none initially

            groupcaptionlength[i].previousElementSibling.addEventListener('click', function (args) { //bind the click event

                if((args.currentTarget as any).classList.contains('e-recordplusexpand')) {

                  //set display none based on expand/collapse

                    (args.currentTarget as any).closest('tr').querySelector('.e-templatecell').style.display = '';

                }

                else {

                    (args.currentTarget as any).closest('tr').querySelector('.e-templatecell').style.display = 'none';

                }

            })

        }

     

    }

 

Sample: https://stackblitz.com/edit/angular-axxtwr-cayoqr?file=app.component.ts

Screenshot:

Regards,

Rajapandi R

[Pavithra Subramaniyam]

Hi Jose,

It is great to hear that the provided solution helped your requirement.

Please get back to us if you need further assistance.

Regards,

Pavithra S