Remove Grouping name from Devextreme group column with pagination

Question

TL;DR

How to keep the text for content going to next page when removing the column name from the grouping row.

---

Problem Explained

I'm using Devextreme datagrid to display data (with pagination) and I noticed that when grouping the data by a column, the group names will always display like so:

groupingColumnName: columnValue

So for example if I have a table with ID, Name and say Age and decided to group by age, my table will look a little like this:

| ID    | Name   |
|----------------|
|Age: 21       v | <---- grouping row (expanded)
|----------------|
| 1     | Elise  | <---- grouping's content
| 5     | Mary   |
|----------------|
|Age: 24       v |
|----------------|
| 2     | Joseph |
|----------------|
|Age: 17       > | <---- grouping row (collapsed)
|----------------|
|----------------|
|Age: 30        v|
|----------------|
| ...            |

I tried using groupCellTemplate and managed to get the value only, but now I don't get the (Continues on the next page) text next to it if the row is expanded but the content goes on the next page, which is usually working by default.

How can I keep the text for content that goes to the next page while removing the name of the column used for grouping?

Answer 1

I realized that once you use the groupCellTemplate binding, you have to manually add any text that is usually conditionally displayed, otherwise the grid will always display your template as is.

So you need to add the (Continues on the next page) or (Continued from previous page) text yourself when needed.

The way I did it was using the groupContinuedMessage and groupContinuesMessage properties. Those are usually undefined, so if they aren't I can just append them to my grouping's row text:

template

<dxi-column 
  [groupCellTemplate]="formatGroupCell" 
  caption="Age"
  dataField="Age" 
  [groupIndex]="0">
</dxi-column>

.ts

formatGroupCell(elem, data) {
    let formattedValue = data.displayValue;
    formattedValue += data.groupContinuedMessage ? ` (${data.groupContinuedMessage}) ` : ''
    formattedValue += data.groupContinuesMessage ? ` (${data.groupContinuesMessage}) ` : ''
    elem.append(formattedValue);  
  }

Or all in the template:

<dxi-column 
  [groupCellTemplate]="groupCellTemplate" 
  caption="Age"
  dataField="Age" 
  [groupIndex]="0">
</dxi-column>
<div *dxTemplate="let data of 'groupCellTemplate'">
   {{data.displayValue}}
   {{data.groupContinuesMessage ? ' ('+data.groupContinuesMessage+')' : ''}} 
   {{data.groupContinuedMessage ? ' ('+data.groupContinuedMessage+')': ''}}
</div>

Now I don't have to see the name of the column used for grouping and I can still use pagination and know when content carries over on the next page.