Requirement of Given format in Grid

[Nagendra Gupta]

Hello Team,

Please find the attached excel file, I want to create a particular format in the grid. How to achieve this task. 

Attachment: WORKING_HOUR_REPORTS_914b4088.zip

[Sujith Kumar Rajkumar]

Hi Nagendra, 

 

Greetings from Syncfusion support. 

 

Based on the provided information we could understand that your requirement is to customize the Grid cells as in your attached image. For this we suggest you to use the Grid’s headerCellInfo(Triggers before each header cell is appended to the Grid) and queryCellInfo(Triggers before each content cell is appended to the Grid) events to achieve the same for the header and content cells respectively.  

 

We have prepared a sample to demonstrate this case for your reference. You can find it below, 

 

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

 

More details on this can be checked in the below documentation link, 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/cell/#customize-cell-styles 

 

API links: https://ej2.syncfusion.com/angular/documentation/api/grid/#querycellinfo  

                  https://ej2.syncfusion.com/angular/documentation/api/grid/#headercellinfo 

 

You can use the queryCellInfo for performing the row/column spanning also. More details on this can be checked in the below documentation link, 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/row/#row-spanning 

 

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

 

Regards, 

Sujith R 

[Nagendra Gupta]

Hey Team,

I want to Create Below mention format in angular grid without expand/ collapse option using group feature. 

BRAND	ITEM	QTY
ABC	ITEM 1	10
ABC	ITEM 2	25
ABC	ITEM 3	15
ABC TOTAL		50
XYZ	NEW ITEM 1	9
XYZ	NEW ITEM 2	12
XYZ	NEW ITEM 3	27
XYZ TOTAL		48
Grand Total		98

[Sujith Kumar Rajkumar]

Hi Nagendra, 

 

You can achieve your requirement by following the below steps, 

 

Initially the required column is grouped and the group drop area is disabled using the Grid’s groupSettings, 

 

this.groupSettings = { showDropArea: false, columns: ['ShipCountry'] } 

 

Then the group footer template aggregate can be used to display aggregate rows for each group and the footer template aggregate can be used for displaying an aggregate row considering all the groups. This can be initialized as demonstrated in the below code snippet, 

 

<ejs-grid #grid [dataSource]="data" [allowGrouping]="true"> 

    <e-aggregates> 

        <e-aggregate> 

            <e-columns> 

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

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

                </e-column> 

            </e-columns> 

        </e-aggregate> 

        <e-aggregate> 

            <e-columns> 

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

                    <ng-template #footerTemplate let-data>Grand total: {{data.Sum}}</ng-template> 

                </e-column> 

            </e-columns> 

        </e-aggregate> 

    </e-aggregates> 

</ejs-grid> 

 

Finally the group expand icon is hidden and its event disabled using CSS and the required styles can be applied to the Grid header cell(using previously provided solution). 

 

.e-grid .e-recordplusexpand { 

    visibility: hidden; 

    pointer-events: none; 

} 

 

.custom-header { 

    font-size: medium; 

    font-weight: 500; 

    background-color: orange; 

} 

 

.e-grouptopleftcell.e-lastgrouptopleftcell { 

    background-color: orange; 

} 

 

We have modified the previously shared sample based on this for your reference. You can find it below, 

 

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

 

More details on this can be checked in the below documentation links, 

 

https://ej2.syncfusion.com/angular/documentation/grid/grouping/#hide-drop-area 

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

https://ej2.syncfusion.com/angular/documentation/grid/aggregates/#footer-aggregate 

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R