You can use XAML-style star sizing to implement flexible layouts with the FlexGrid. The sample below uses Star sizing specified in the width property of the object.

This grid has three columns. The first is 80 pixels wide and can be resized between 40 and 160 pixels. The other two have widths of 2* and *, and cannot be resized using the mouse. The width proportions of the columns remain unchanged even on resizing the first column or the whole grid.

The following image shows how the FlexGrid appears on applying star sizing on the columns using the Width property. The example uses Sale.cs model added in the QuickStart section.

The following code examples demonstrate how to apply star sizing to the columns of the FlexGrid:

StarSizingController.cs

public ActionResult StarSizing()
{
    return View(Sales.GetData(10));
}

StarSizing.cshtml

@using TagFlexGrid.Models
@using C1.Web.Mvc.Grid
@model IEnumerable<Sale>

<c1-flex-grid auto-generate-columns="false" class="grid" is-read-only="true">
    <c1-flex-grid-column binding="Start" width="80" max-width="160" min-width="40"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Product" width="2*" allow-resizing="false"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Country" format="c" width="*"></c1-flex-grid-column>
    <c1-items-source source-collection="@Model"></c1-items-source>
</c1-flex-grid>