Devextreme-Angular: Customize other cell templates while in Grid mode

since English is not my first language, I will try to keep things very simple and explain my train of thoughts.

We have a devextreme-angular DataGrid

example:



Ultimate goal:

• Group the columns by a single column and add custom values to different columns

Example:



currently we are using a data grid and we allow users to group by "nationality".

This works fine and we get the default group header, which contains:

1. the button to collapse/expand the group
2. default text + "Nationality" + count of it
3. for every column with type of number, we get the sum of it

The first step was to change the text(Nr.2), which was perfectly done by using the groupCellTemplate

<dxi-column
[caption]="'some-caption'"
dataField="nationality"
dataType="string"
groupCellTemplate="nationalityGroupTemplate"
>
<div *dxTemplate="let data of 'nationalityGroupTemplate'">
{{ doSomething(data) }}
</div>
</dxi-column>


which results to the follwing grid:



However after a lot of research, I couldn't figure out a way to either add or modify the values of the other columns. I tried to add multiple groupCellTemplates for each of the column, but they wont be triggered, if it is not grouped by that specific column. I also tried to manipulate the data object in the above dxTemplate hoping to access the row/header columns, that didn't work either.

Is there a way to modify multiple columns in a group row/header if the state of the grid is "grouped".

I know it is an odd thing to do, but it is a necessary feature requested by the customer. I would appreciate your help or any kind of suggestions.

Devextreme version: 23.1.6

Angular version: 17.3.2

Continue reading...