AG-Grid - 如何动态增加行高？

Question

这个问题与 Angular 4 项目上的 Ag-Grid 行高有关。请看以下场景：-

我有一个分别有 3 列的 Ag-Gird：-

1. Id（来自 UI 的可调整大小的列）
2. 名称（用户界面中可调整大小的列）
3. 地址（来自 UI 的可调整大小的列）

我确实没有对地址列有任何限制（例如允许的字符或单词数量有限）。用户可以键入任意数量的字符或单词。

问题：-

1. 当地址列宽完全被单词填满或用户按 Enter 或 Shift + Enter 时，如何增加行高？
2. 如何在用户调整地址栏时自动调整高度？

请帮我解决这些问题。

谢谢

Answer 1

有很多事情需要注意。

看看更新后的Stackblitz

1. 在ColDef 的Address 列中具有cellClass: "cell-wrap-text" 属性并具有适当的CSS
2. 处理 columnResized 事件，以便在调整列大小时调用 this.gridApi.resetRowHeights() 来调整行高

3. 同时处理cellEditingStopped事件，这样当列的数据更新时，行高也会相应地更新。

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

4. 在defaultColDef 中提供autoHeight: true 属性

   defaultColDef = { autoHeight: true };

---

更新：

如果您想拥有textarea 的控制权，请提供cellEditor: 'agLargeTextCellEditor'。

检查这个StackBlitz

Answer 2

我在反应中遇到了同样的问题我想根据文本区域的内容增加行的高度，并且在输入时它应该转到文本区域的下一行而不是变成只读的，所以我我是否使用了ag-grid的suppressKeyboardEvent并将代码写入其中，这是我的代码

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

我希望这可以帮助你或正在寻找它的人:)