FlexGrid
Star Sizing
Features
Example 1:
This grid has four columns. The first is 80 pixels wide and can be resized between 40 and 160 pixels. The other three have widths of 2*, *, and *, and cannot be resized using the mouse.
Notice that the second column is twice as wide as the third and fourth columns, and that they keep these proportions even as you resize the first column or the whole grid.
Example 2:
This grid shows how you can make any column stretch to fill the available space. In this case, we set the width of the second column to * to achieve that effect.
We also set the minimum width of the second column to 100 pixels in order to prevent it from getting too narrow when the other columns in the grid are resized, and we prevent users from resizing this column with the mouse.
Example 3:
This example sets all widths to *, which means the space available is divided equally among them. Resize the browser and notice how the grid resizes and the columns fill it up equally.
Also, unlike the other examples, this one sets the allowResizing property of the entire grid rather than an individual column. We set this one to None, but you may also choose Columns, Rows, or Both.
Description
using MvcExplorer.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcExplorer.Controllers
{
public partial class FlexGridController : Controller
{
public ActionResult StarSizing()
{
return View(Sale.GetData(50));
}
}
}
@using C1.Web.Mvc.Grid
@model IEnumerable<Sale>
<h4>
@Html.Raw(Resources.FlexGrid.StarSizing_Example1)</h4>
<p>@Html.Raw(Resources.FlexGrid.StarSizing_Text0)</p>
<p>@Html.Raw(Resources.FlexGrid.StarSizing_Text1)</p>
@(Html.C1().FlexGrid<Sale>()
.AutoGenerateColumns(false)
.CssClass("grid")
.IsReadOnly(true)
.Columns(columns =>
{
columns.Add(column => column.Binding("Start").Width("80").MaxWidth(160).MinWidth(40));
columns.Add(column => column.Binding("Product").Width("2*").AllowResizing(false));
columns.Add(column => column.Binding("Amount").Format("c"));
columns.Add(column => column.Binding("Amount2").Format("c"));
})
.Bind(Model)
)
<br />
<br />
<h4>
@Html.Raw(Resources.FlexGrid.StarSizing_Example2)</h4>
<p>@Html.Raw(Resources.FlexGrid.StarSizing_Text2)</p>
<p>@Html.Raw(Resources.FlexGrid.StarSizing_Text3)</p>
@(Html.C1().FlexGrid<Sale>()
.AutoGenerateColumns(false)
.CssClass("grid")
.IsReadOnly(true)
.Columns(columns =>
{
columns.Add(column => column.Binding("Start").Width("80"));
columns.Add(column => column.Binding("Product").Width("*").MinWidth(100).AllowResizing(false));
columns.Add(column => column.Binding("Amount").Format("c").Width("120"));
})
.Bind(Model)
)
<br />
<br />
<h4>
@Html.Raw(Resources.FlexGrid.StarSizing_Example3)</h4>
<p>@Html.Raw(Resources.FlexGrid.StarSizing_Text4)</p>
<p>@Html.Raw(Resources.FlexGrid.StarSizing_Text5)</p>
@(Html.C1().FlexGrid<Sale>()
.AutoGenerateColumns(false)
.CssClass("grid")
.IsReadOnly(true)
.Columns(columns =>
{
columns.Add(column => column.Binding("Start").Width("*"));
columns.Add(column => column.Binding("Product").Width("*").MinWidth(100));
columns.Add(column => column.Binding("Amount").Format("c").Width("*"));
columns.Add(column => column.Binding("Amount2").Format("c").Width("*"));
})
.Bind(Model)
)
@section Description{
@Html.Raw(Resources.FlexGrid.StarSizing_Text6)
}