Resizing of Columns
The resizing behavior of the Grid columns depends on whether scrolling is enabled or disabled.
For a runnable example, refer to the demo on resizing columns in the Grid.
When scrolling is disabled and a Grid column is resized, other columns, including the ones with resizable set to false, change widths too, so that the sum of all column widths remains constant. If both the columns and the Grid <div> already have their minimum possible widths applied, then the resizing of the columns stops working. In such scenarios, use either of the following approaches:
- Apply a larger width to the Grid, or
- Enable scrolling.
When scrolling is enabled and a column is resized, all other columns maintain their widths. When column resizing is applied, the following outcomes with regard to the sum of all column widths are possible:
- If the sum of all column widths is greater than the width of the Grid, a horizontal scrollbar appears.
- If the sum of all column widths is equal to the width of the Grid, no horizontal scrollbar appears.
- If the sum of all column widths is less than the width of the Grid, an empty space after the last column appears.
By design, the last column of the Grid has no right border, so that no double border appears at the right end of the Grid if the Grid table width matches the Grid component width. If needed, you can apply a right border with the CSS code from the following example. The color value of the #ccc border has to match the color of the cell border from the Kendo UI theme. To obtain this, check the styles of the table cell by using a DOM inspector.
.k-grid-header-wrap > table,
.k-grid-content > table {
border-right: 1px solid #ccc;
}
For column resizing on mobile devices please refer to the Grid Adaptive Rendering official demo and the Adaptive Rendering documentation article.