Grid component not scalling properly

Hi, Kamil,

Thank you for the provided screenshot.

The faced behavior is expected as in the linked Overview demo of the Grid we are setting a specific width for all the GridColumn components using the width prop, which will make them not stretch.

It is enough to have at least one column without set `width` (or with `width` set to `auto`) which will allow the column to stretch depending on the available white space. You can see that in the example of the getting started Grid article where only the `ProductID` and `ProductName` columns have a set width:

• https://www.telerik.com/kendo-react-ui/components/grid/get-started/

For more information about customizing the width of the GridColumn, you can check the following article:

• https://www.telerik.com/kendo-react-ui/components/grid/columns/width/

I hope this helps, but please let me know if you have any further questions.

Hello, Kamil,

The column disappearing when zooming in can be resolved by setting a minimum column width. This approach is demonstrated in the below article, where a horizontal scrollbar will appear when the width of the Grid is smaller than the combined minimum width of all columns:

• https://www.telerik.com/kendo-react-ui/components/grid/columns/width/#toc-setting-a-minimum-column-width

Regarding the blank space when the column is resized, you can avoid this by setting the column width to `auto` instead of not setting it. In the below example, I set the width of the grid column with the `UnitsInStock` field to `auto`:

• https://stackblitz.com/edit/react-agcqhv?file=app%2Fmain.jsx

I hope this helps, but please let us know if you have further questions.

Hello Wissam,

thank you for your response, it seems like 2nd solution doesnt work with locked column, add "locked" property to last column ( https://stackblitz.com/edit/react-agcqhv?file=app%2Fmain.jsx) and it dissapears when zoomed, even with minResizibleWidth set.

not zoomed:


zoomed and scrolled max to the right - locked column not visible:
 

Hi Kamil,

The locked column should have fixed width, even if it is the last column, because the "auto' will not work for it. If the last column is locked and you set a fixed width for it, you can set the "auto" to the last unlocked column. I have modified the example with that configuration:

• https://stackblitz.com/edit/react-agcqhv-ittpkx?file=app%2Fmain.jsx

Hope this helps.

Due to the way that the browser's zoom work, in order for the Grid to keep the proportions, its width and height must be fixed. Since the width is set to fill the available width, when the browser is zoomed, that width will get smaller and the columns will shrink. You can see in the following example that putting fixed width for the Grid will keep the columns as per your requirement:

• https://stackblitz.com/edit/react-agcqhv-ittpkx?file=app%2Fmain.jsx

    <Grid
      style={{
        height: '400px',
        width: '800px',
      }}

If you want to keep the width of the Grid "100%" (the default) you will have to ensure that the container element in which the Grid is positioned expands when the browser is zoomed.

Hope this helps.

Hello Kamil,

As mentioned in my previous reply, if you want to keep the width of the columns while the browser is zoomed, you need to either set explicit width to the Grid or to handle the zoom event in the browser and manually expand the container where the Grid is rendered. We do not have any control over how the browser handles the zooming of table elements.

As for the second question, this would be the default behavior if the 2nd column is not resized. If you resize a column with width set to "auto", it will receive a fixed width afterwards. To avoid this you can set the "resizable" property of that column to "false":

<GridColumn field="ProductName" title="Name" width="auto" resizable={false} />