angulardatagriddevextremedevextreme-angular

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:

Clipboard-File-1.png

Ultimate goal:


Example:

Clipboard-File-2.png

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:

Clipboard-File-3.png

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


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


Solution

  • 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.