Kendo Angular Grid : Blank space in the end when you resize(reduce) any column

[Niranjan]

Kendo Angular Grid : Blank space in the end when you resize(reduce) any column.

If column is getting resized then content from the column should get fit with remaining space, but it is showing white space.

You can see the whole data in tool-tip but not in actual column.(PFA for better understanding)

Requesting to provide any solution where huge content will get good fit after resizing the column as well 

[Martin]

Hi Niranjan,

Thank you for the provided screenshot.

In general, when a column should occupy the available space, its width option can be omitted, so that the column width can be adjusted dynamically e.g.:

https://stackblitz.com/edit/angular-sr6z2a-pzetex?file=app/app.component.ts

When the Grid is initialized the column widths are set, based on the available space. Changing their dimensions afterward, using the autoSize option, autoFitColumn built-in method, or manually set the width property, white space will occur. Indeed this is the default behavior of resizable tables.

Basically whenever the total width of all Grid columns is less than the Grid width, then the remaining space is filled with white space.

What could be done in order to avoid the additionally added white space to the end of the Grid, is to control the width of the last column manually. A possible approach is to calculate the actual width of the Grid and the total sum of all columns. Then we can add the difference to the first column. That will make sure to stretch the first column so that there is no white space.

Please check the following example demonstrating such an approach:

https://stackblitz.com/edit/angular-eoxmbo-zuuvfl?file=app/app.component.ts+

Indeed, the demonstrated implementation is just a workaround that isn't based on the built-in features of the Grid and isn't thoroughly tested. However, it should point you in the right direction of how the requirement could be achieved.

Regards,
Martin
Progress Telerik