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

Этот вопрос связан с высотой строки Ag-Grid в Angular 4 Project. См. Сценарий ниже: -

У меня есть Ag-Gird с 3 столбцами соответственно: -

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

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

Проблемы: -

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

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

Спасибо


ag-grid ag-grid-angular
person Tilak Dewangan    schedule 20.03.2019    source источник
comment
Воспроизведите вашу проблему на plunk или stackblitz, чтобы люди могли легко вам помочь. Узнайте, как создать минимальный воспроизводимый пример   -  person Paritosh    schedule 20.03.2019
comment
@Paritosh, пожалуйста, найдите проблему на stackblitz stackblitz.com/edit/aggrid. Спасибо   -  person Tilak Dewangan    schedule 21.03.2019

Ответы (2)


arrow_upward
1
arrow_downward

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

Взгляните на обновленный Stackblitz

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

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

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

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

    defaultColDef = { autoHeight: true };

Обновлять:

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

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

person Paritosh    schedule 21.03.2019
comment
Спасибо за Ваш ответ. Я пробовал эти параметры, но это не решает мою проблему, т.е. я действительно хотел добиться автоматической высоты, когда пользователь редактирует столбец Address в сетке. - person Tilak Dewangan; 21.03.2019
comment
вы можете использовать для этого пользовательский редактор ячеек, используйте textarea вместо input - person Paritosh; 21.03.2019
comment
Текст теряется при изменении размера столбца адреса (как ширина столбца Id). Чтобы воспроизвести эту проблему, используйте указанный ниже rowData. rowData = [ {id: 1, name: 'XYZ', address: ``1. Building number.wing number, landmark 2. Building number.wing number, landmark 3. Building number.wing number, landmark 4. Building number.wing number, landmark 5.Building number.wing number, l``} ]; - person Tilak Dewangan; 22.03.2019
comment
не уверен, что вы предлагаете, посмотрите обновленный ответ - person Paritosh; 27.03.2019

arrow_upward
1
arrow_downward

Я столкнулся с той же проблемой в ответе. Я хотел увеличить высоту строки в соответствии с содержимым текстовой области, и при вводе он должен переходить на следующую строку в текстовой области, а не переходить в режим только для чтения, поэтому то, что я сделал, я использовал suppressKeyboardEvent из ag-grid и написал в него код, вот мой код

           cellClass: "description-cell",
            width: 200,
            cellRendererFramework: (params) =>{
                return <pre> {params.data.description}</pre>
            },
            cellEditor: 'agLargeTextCellEditor',
            cellEditorParams: (params) => {
                return {
                    maxLength: '1000',
                    cols: this.props.cols,
                    rows: 2
                }
            },
            suppressKeyboardEvent: (params) => {
              const KEY_ENTER = 13;
              const keyCode = params.event.keyCode;
              const gridShouldDoNothing = params.event.target.value && params.editing && keyCode === KEY_ENTER;
              params.event.target.style.height = 'inherit';
              params.event.target.style.height = `${params.event.target.scrollHeight}px`;
              params.node.setRowHeight(params.event.target.scrollHeight); // adjust it according to your requirement
              this.gridApi && this.gridApi.onRowHeightChanged();
              return gridShouldDoNothing;
          }

Надеюсь, это может помочь вам или тому, кто это ищет :)

person mayank    schedule 11.04.2020