AG-Grid - Как динамически увеличить высоту строки? - PullRequest
Новая
       6

AG-Grid - Как динамически увеличить высоту строки?

1 голос
/ 20 марта 2019

Этот вопрос относится к высоте строки Ag-Grid в проекте Angular 4. Пожалуйста, смотрите ниже сценарий: -

У меня Ag-Gird, имеющий 3 столбца соответственно: -

  1. Id (столбец с изменяемым размером из пользовательского интерфейса)
  2. Имя (столбец с изменяемым размером из пользовательского интерфейса)
  3. Адрес (столбец с изменяемым размером из пользовательского интерфейса)

У меня нет есть какие-либо ограничения (например, разрешено ограниченное количество символов или слов) в столбце Адрес . Пользователи могут вводить любое количество символов или слов, которые они хотят.

Вопросы: -

  1. Как увеличить высоту строки, когда ширина столбца Address полностью заполнена словами или когда пользователи нажимают , введите или Shift + Enter ?
  2. Как автоматически настроить высоту при изменении размера столбца «Адрес»?

Пожалуйста, помогите мне с этими вопросами.

Спасибо

1 Ответ

1 голос
/ 21 марта 2019

Есть несколько вещей, о которых необходимо позаботиться.

Посмотрите на обновленный Stackblitz

  1. Имеете cellClass: "cell-wrap-text"атрибут в столбце ColDef для Address и имеет соответствующее событие CSS
  2. Handle columnResized, чтобы можно было вызывать this.gridApi.resetRowHeights() для регулировки высоты строк при каждом изменении размера столбца

  3. Также обрабатывает событие cellEditingStopped, поэтому при обновлении данных для столбца высота строки также обновляется соответствующим образом.

    onColumnResized() {
   this.gridApi.resetRowHeights();
}
onCellEditingStopped() {
  this.onColumnResized();
}

  4. Укажите autoHeight: true свойство в defaultColDef

    defaultColDef = { autoHeight: true };

Обновление:

укажите cellEditor: 'agLargeTextCellEditor', если вы хотите иметь textarea подобный элемент управления для этого поля.

Проверьте это StackBlitz

...