Footer template styling in Angular Grid

[mounir]

Hello,

I would like to know if there is a proper way to style footer templates individually, i tried to use the .e-summaryrow class but it is applied to all summary rows obvisouly. 

Mounir.

[Sujith Kumar Rajkumar]

Hi Mounir, 

 

Greetings from Syncfusion support. 

 

You can achieve the requirement of applying custom styles to particular aggregate footer template cells by defining the template content inside a element and applying the required styles to it. This is demonstrated in the below code snippet, 

 

app.component.html 

<ejs-grid [dataSource]="data" [allowPaging]="true" [pageSettings]='pageOption'> 

    <e-aggregates> 

        <e-aggregate> 

            <e-columns> 

                <e-column type="Sum" field="Freight" format="C2"> 

                    <ng-template #footerTemplate let-data><span class="customcss">Sum: {{data.Sum}}</span></ng-template> 

                </e-column> 

            </e-columns> 

        </e-aggregate> 

    </e-aggregates> 

</ejs-grid> 

 

app.component.css 

.e-templatecell .customcss { 

    color: blue; 

} 

 

We have prepared a sample based on this for your reference. You can find it below, 

 

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

 

You can find the list of CSS classes to apply styles for customizing each section styles in the Grid from the below documentation link,   

  

Grid styling documentation: https://ej2.syncfusion.com/angular/documentation/grid/how-to/grid-styling/  

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R