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.
