Master Detail Grid control expand/collapse column width

[schakravarty]

How can I set the width of the expand/collapse column? In my grid the expand collapse column is displaying too wide and I would like to set the width but cannot find the correct selector to do so.

[Dimiter Topalov]

Hi Paul,

The expand/collapse column is created internally, and the developer has no control over its width out-of-the-box. However, there are are a couple of approaches to control the said column width depending on the scenario and Grid configuration. Typically all Grid columns in the scrollable (default) Grid behave as documented in the following section:

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

The expand/collapse column makes no exception, and thus when all other columns have their width explicitly set, and the available Grid width is greater than the cumulative widths of all columns, the remaining width is distributed between all columns (including the expand/collapse column):

https://stackblitz.com/edit/angular-zceodx?file=src%2Fapp%2Fapp.component.ts

The most straight-forward approach to fix the expand/collapse column width to its default value (32px in the Default theme) is to leave at least one of the other columns without explicitly set width. This way all set column widths will be respected, and the expand/collapse column will be always 32px wide (if using the Default theme). Remaining width will be distributed between the columns that do not have explicitly set width:

https://stackblitz.com/edit/angular-as571x?file=src%2Fapp%2Fapp.component.ts // the "width" option of the Description column is removed

The width of the expand/collapse column can be reduced further using CSS, e.g.:

https://stackblitz.com/edit/angular-as571x-rv3evm?file=src%2Fstyles.css

Alternatively, the Grid tables layout could be overwritten and set to "auto", but this can lead to multiple undesired side effects including loss of sync between the headers and data table column widths.

Regards,

Dimiter Topalov
Progress Telerik