AG-Grid - How to increase row height dynamically?

Question

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

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

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.

Issues:-

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.

Thanks

Answer 1

There are multiple things to be taken care.

Have a look at the updated Stackblitz

1. Have cellClass: "cell-wrap-text" attribute in the ColDef for Address column and have the appropriate CSS
2. Handle columnResized event so that this.gridApi.resetRowHeights() can be called to adjust the height of the rows whenever the column is resized

3. Also handle cellEditingStopped event, so that when the data for the column is updated, the row height also gets updated accordingly.

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

4. Provide autoHeight: true property in the defaultColDef

   defaultColDef = { autoHeight: true };

---

Update:

provide cellEditor: 'agLargeTextCellEditor' if you want to have textarea like control for this field.

Check this StackBlitz

Answer 2

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