使用分页从 Devextreme 组列中删除分组名称

Question

TL;DR

如何在从分组行中删除列名称时使内容的文本转到下一页。

问题解释

我正在使用 Devextreme datagrid 显示数据（带分页），我注意到按列对数据进行分组时，组名称将始终显示如下：

groupingColumnName: columnValue

例如，如果我有一个 table 和 ID，Name 并说 Age 并决定按年龄分组，我的 table 将看起来有点像这样：

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

我尝试使用 groupCellTemplate 并设法只获取值，但现在如果行已展开但内容在下一行，我不会在它旁边看到 (Continues on the next page) 文本页面，通常默认工作。

如何在删除用于分组的列的名称的同时保留进入下一页的内容的文本？

Answer 1

我意识到一旦你使用 groupCellTemplate 绑定，你必须手动添加通常有条件显示的任何文本，否则网格将始终按原样显示你的模板。

因此您需要在需要时自行添加 (Continues on the next page) 或 (Continued from previous page) 文本。

我的方法是使用 groupContinuedMessage 和 groupContinuesMessage 属性。这些通常是未定义的，所以如果不是，我可以将它们附加到我的分组行文本中：

模板

<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);  
  }

或全部在模板中：

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

现在我不必看到用于分组的列的名称，我仍然可以使用分页并知道内容何时进入下一页。

使用分页从 Devextreme 组列中删除分组名称

Remove Grouping name from Devextreme group column with pagination

devextreme

angular

TL;DR

问题解释

模板

.ts