Posted 13 November 2018, 8:47 am EST - Updated 3 October 2022, 11:18 am EST
I’m creating a grid with this Angular code:
<wj-flex-grid [itemsSource]="masterData">
<wj-flex-grid-column *ngFor="let column of masterColumns" [header]="column.Caption" [binding]="column.Key" width="*" [minWidth]="column.MinWidth" [maxWidth]="column.MaxWidth"></wj-flex-grid-column>
<ng-template wjFlexGridDetail detailVisibilityMode="ExpandSingle" let-item="item">
<wj-flex-grid [itemsSource]="filterDetailItems(detailData, item)">
<wj-flex-grid-column *ngFor="let column of detailColumns" [header]="column.Caption" [binding]="column.Key" width="*" [minWidth]="column.MinWidth" [maxWidth]="column.MaxWidth"></wj-flex-grid-column>
</wj-flex-grid>
</ng-template>
</wj-flex-grid>
However, when the last column has a maxWidth value that’s less than *, it leaves blank space on the right side of the grid rather than expanding the other columns to fill it. In this picture, I’ve set a maxWidth of 150 on the last column, while the other columns are using the * value of 187px (data values have been removed):
If I set the same maxWidth on another column instead, only the last column expands to fill the remaining space (I want it to be distributed among all the other columns, not just the last one). Here I’ve removed the maxWidth from the last column and set it on the second to last instead:
How can I make it so all columns without a max width expand to fill the remaining space?
