maxWidth as percentage not working correcly

Question

Hello, setting maxWidth for columns doesn't work correctly the width of columns are stretching to the width of the width surpassing the maxWidth set in the property on the column. We need that the grid leave an empty space if the columns width doesn't sum the width of the grid.

In the example shared in stackblitz we set minWidth and maxWidth of the columns (maxWidth as percentage) and we autoFit one column to match the minimum, the other columns must have 20% of the width (100px in the example) because the width of the container is fixed. But when the container is flexible or resizable the columns must manage the width in the range established in minWidth and maxWidth.

https://stackblitz.com/edit/angular-11-new-jnusz5?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fgrid%2Fgrid.module.ts,src%2Fapp%2Fgrid%2Fgrid.component.ts,src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fgrid%2Fdatasource.ts,src%2Fstyles.css

Attachment: Screenshot_3_afcbc84c.zip

Aishwarya Rameshbabu · Answer

Hi Cesar Smerling,Greetings from Syncfusion support.After reviewing your query, it appears that you
are utilizing the AutoFit feature of the Grid. In the provided sample,
you have specified the minWidth and maxWidth properties for the
columns. By default, in the Grid, if the width of the columns is not defined
during initial rendering, it is set to "auto" to occupy the width of
the entire Grid. The minWidth and maxWidth properties are taken into account when
using AutoFit and Resizing the columns. If you wish to render
columns with a specified minWidth, you can achieve this by calling the autoFitColumns()
method without specifying any columns in the dataBound event of the Grid. This
will automatically adjust the column widths based on the minWidth and display
any empty space in the Grid if the total minWidth of the columns exceeds the
Grid's width. Please refer to the code example, sample,
screenshot and documentation link provided below for more
detailed information. Additionally, in version 21.1.35, we have
introduced support for limiting column expansion beyond a specified width by
setting the autoFit property to true in the Grid. For further information,
please consult the documentation link provided.

App.component.ts
   
    dataBound() {
      (this.grid as GridComponent).autoFitColumns();
    }

Sample: https://stackblitz.com/edit/angular-xqwqsx-pd3j6u?file=src%2Fapp.component.html,src%2Fapp.component.ts,src%2Fdata.tsScreenshot:Documentation Links: Resizing-a-column-to-fit-its-content-using-autofit-methodAutofit-columns-with-empty-spaceRelease Notes: Release-notes-21.1.35RegardsAishwarya
R