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:
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:
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 groupCellTemplate
s 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
In case anyone is interested. I posted a ticket in the DevExpress Forum as well. I made it public as well.
I will answer the question, once I solved my issue.
https://supportcenter.devexpress.com/ticket/details/t1257784/datagrid-customize-other-cell-templates-while-in-grid-mode
As mentioned in my question, I have opened a ticket in the support center of devexpress. I finally have resolved my issue and here is the answer:
Instead of trying to implement multiple groupCellTemplates
, we could use Group Summaries and implement a custom
summary.
Note:
In the docs of custom group summaries it says:
Make sure that the remoteOperations.summary, remoteOperations.groupPaging, or remoteOperations property is not set or set to false.
However if you set these remoteOperations
as above and still want to have a few other remoteOperations to be server sided, while doing the custom summary client sided. You should set remoteOperations.grouping = false
as well. More about remoteOperations.