AG-Grid-如何动态增加行高？ [英] AG-Grid - How to increase row height dynamically?

问题描述

此问题与Angular 4项目上的Ag-Grid行高有关。请查看以下情况：-

This question is related to Ag-Grid row height on Angular 4 Project. Please see the below scenario:-

我有一个Ag-Gird，该Ag-Gird分别具有3列：-

I have an Ag-Gird having 3 columns respectively:-

1. Id （可从UI调整大小的列）


2. 名称（可从UI调整大小的列）


3. 地址（用户界面中可调整大小的列）

1. Id (resizable column from UI)
2. Name (resizable column from UI)
3. Address (resizable column from UI)

我不在地址列上有任何限制（例如，字符或单词的数量受限制）。用户可以输入任意数量的字符或单词。

I do not have any limitations( like the limited number of character or words is allowed) on Address column. Users can type any number of characters or words they want to.

问题：-

1. 当地址栏的宽度完全用单词填充或用户按下 Enter 或 Shift + Enter 时，如何增加行高>？


2. 用户调整地址列大小时如何自动调整高度？

1. How to increase the row height, when Address column width is completely filled-up with words or when users press Enter or Shift + Enter?
2. How to adjust height automatically when users resize the Address column?

请帮助我遇到了这些问题。

Please help me with these issues.

谢谢

推荐答案

我正面临着在反应中存在相同的问题，我想根据文本区域的内容增加行的高度，并在输入时应转到文本区域的下一行，而不是不变成只读，所以我使用了ag的uppressKeyboardEvent -grid并将代码写入其中，这是我的代码

I was facing the same issue in react I wanted to increase the height of row according to the content of the text area and on enter it should go to next line in text area instead of not turning into read only, so what I did i used the suppressKeyboardEvent of ag-grid and wrote the code into it, here is my code

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

我希望这可以对您或正在寻找它的人有所帮助:)

I hope this could help you or someone who is looking for it :)

这篇关于AG-Grid-如何动态增加行高？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！