More Samples
Download Wijmo

Star Sizing

This sample shows how you can use XAML-style star sizing to implement flexible layouts with the FlexGrid. Star sizing is specified in the width property of the Column object.

Star sizing is similar to percentage sizing, except that the values do not have to add up to one hundred. A width of '3' means 'three times wider than 1.' The total size used to calculate the layout is the current width of the control minus the width of any non-star columns divided by the number of stars specified.

You can use star-sizing to implement grids where the last column expands to fill all of the available space. To do this, simply set the width of the last colunm to *. You might also want to set the minWidth property of the last column to prevent it from getting too narrow.

Note that the minWidth and maxWidth properties of columns also affect the layout calculations. You can resize the entire grid in each sample by resizing the window.

These samples use the WjFlexGrid and WjFlexGridColumn directives and AngularJS.