Удалить имя группы из столбца группы Devextreme с нумерацией страниц - PullRequest
0 голосов
/ 17 июня 2019

TL; DR

Как сохранить текст для контента, переходящего на следующую страницу при удалении имени столбца из строки группировки.


Объяснение проблемы

Я использую сетку данных Devextreme для отображения данных (с разбиением на страницы), и я заметил, что при группировке данных по столбцу имена групп всегда будут отображаться так:

groupingColumnName: columnValue

Так, например, если у меня есть таблица с ID, Name, скажите Age и я решил сгруппировать по возрасту, моя таблица будет выглядеть примерно так:

| 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) рядом с ним, если строка расширена, но содержимое переходит на следующую страницу, которая обычно работает по умолчанию.

Как сохранить текст для содержимого, которое идет на следующую страницу, при удалении имени столбца, используемого для группировки?

1 Ответ

0 голосов
/ 17 июня 2019

Я понял, что как только вы используете привязку groupCellTemplate, вы должны вручную добавить любой текст, который обычно отображается условно, иначе сетка всегда будет отображать ваш шаблон как есть.

Поэтому вам нужно добавить(Continues on the next page) или (Continued from previous page) текст самостоятельно, когда это необходимо.

То, как я это делал, использовало свойства groupContinuedMessage и groupContinuesMessage.Они обычно не определены, поэтому если нет, я могу просто добавить их в текст строки моей группировки:

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

Или все в шаблоне:

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

Теперь мне не нужно видеть название столбца, используемого для группировки, и я все еще могу использовать нумерацию страниц и знать, когда содержимое переносится наследующая страница.

...