We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Grouping Requirement

Dear Team,

I have some requirement in grouping grid footer. Requirement I have attached you, please find the attach file for better understanding.

Basically I want groupCaptionTemplate text value should be display in groupFooterTemplate text value.

Below is code

aggregateColumn['groupCaptionTemplate'] = '${key}';

aggregateColumn['groupFooterTemplate'] = '${key} Total';

Attachment: file_7af7bb32.zip


Regards

Nagendra Gupta



1 Reply 1 reply marked as answer

NS Nithya Sivaprakasam Syncfusion Team October 27, 2022 01:18 AM

Hi Nagendra,


Greetings from Syncfusion support.


Query:” Grouping Requirement”


Based on your requirement we have prepared a sample and achieved your requirement by using the customAggregate on groupFooterTemplate option of Aggregate feature. To display your group caption text in the footer row, we have used the customAggregate for the column ‘CategoryName’.


Kindly check the below code for reference and a sample for more information.


Code:


App.component.html 

 

<e-aggregates>

      <e-aggregate>

        <e-columns> <e-column

            type="Custom"

            field="ProductName"  // column where you want to display the value

            [customAggregate]="customAggregateFn"

          >

            <ng-template #groupFooterTemplate let-data

              > {{ data.Custom }} </ng-template

            >

          </e-column>

        </e-columns>

      </e-aggregate>

    </e-aggregates>

 

App.component.ts

 

export class AppComponent {

  public data: Object[];

  public pageOption: Object = { pageCount: 5 };

  public groupSettings: { [x: string]: Object } = {

    showDropArea: true,

    captionTemplate: '<span style="display:none"></span>', // use this code to hide group caption

    columns: ['CategoryName'],

  };

 

  @ViewChild('grid')

  public grid: GridComponent;

 

  public ngOnInit(): void {

    this.data = categoryData;

  }

  public customAggregateFn = (data) => {

    var value;

    value = data.key;

    return value;

  };

}


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


Kindly refer to the below documentation to know more about the custom aggregate feature.


Documentation: https://ej2.syncfusion.com/angular/documentation/grid/aggregates/custom-aggregate/


Please get back to us if you need further assistance on this.


Regards,

Nithya Sivaprakasam.


Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon