how can i change Grid width relative to viewport without fixed width or without width property?

[Nurik]

how to create a responsive KendoReact Grid that adjusts its width dynamically based on the viewport without relying on fixed widths or the explicit width property

[Vessy]

Hello,

The KendoReact Grid is designed to be responsive by default and you can leverage its responsive capabilities out of the box. It behaves like a block-level element and automatically expands to fill the available 100% width of its parent container. This means you don't need to set any explicit width for the Grid itself neither to its columns to make the grid resizable based on the viewport space:

• https://www.telerik.com/kendo-react-ui/components/grid/styling/responsive-design 

You can test this behavior in the sample below:

• https://stackblitz.com/edit/react-aurf8dhq-snpms3ot?file=app%2Fgd-products.ts,app%2Fapp.jsx 

I hope this helps but let me know if I can assist you any further on this matter.

Regards,
Vessy
Progress Telerik

[Nurik]

That means that I can't change width of grid columns relatively of my viewport width? For my task I need to change width of column dynamicly with viewport width, 'cause width: 100% and fixed width is not proper for my problem.

[Vessy]

Hi, Nurik,

You can use percentage values fro the widths of the columns in the Grid by implementing the approach given in the following article - https://www.telerik.com/kendo-react-ui/components/grid/columns/width#setting-column-widths-in-percentage