Column Sizing

You can specify the column widths when creating them. Ater that, users may resize the FlexGrid columns using mouse. As in the case of Excel, users may either drag the column header's right edge to adjust the width, or they may double-click the edge to auto-size the column to fits its content.

If you want to prevent users from resizing the columns, you can either set the grid's allowResizing property to 'None', or prevent them from resizing specific columns by setting the column's allowResizing property to 'false'.

For example, the grid below does not allow resizing the 'ID' column. Other columns may be resized and auto-sized:

Country

Sales

Expenses

81,732.54

38,401.13

Germany

20,603.32

27,944.24

44,217.79

48,877.49

Japan

29,190.63

23,365.74

Italy

46,951.19

49,107.56

Greece

86,237.02

49,767.35

The grid also allows you to resize multiple columns at once. Select a range of columns and press the 'control' key while resizing them with the mouse, and all selected columns will be resized at once.

C1 MVC uses the HTML5 drag/drop API for column resizing. Unfortunately, most of the mobile devices do not support this API. If you want to support column resizing on mobile devices, we suggest to use the DragDropTouch polyfill .

// This file locates: "Scripts/Lesson/C1FlexGrid/ColumnsSizing.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
    theGrid.deferResizing = true;
    theGrid.columns[0].allowResizing = false;
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexGridController : Controller
    {
        // GET: ColumnsSizing
        public ActionResult ColumnsSizing()
        {
            return View(Models.FlexGridData.GetSales());
        }
    }
}

@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.ColumnsSizing_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.ColumnsSizing_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.ColumnsSizing_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.ColumnsSizing_Text3)
</p>
@(Html.C1().FlexGrid().Id("theGrid").Bind(Model)
    .AutoGenerateColumns(false)
    .Columns(cs=>
    {
        cs.Add().Binding("Id").Header("ID");
        cs.Add().Binding("Country").Header("Country");
        cs.Add().Binding("Sales").Header("Sales");
        cs.Add().Binding("Expenses").Header("Expenses");
    })
)
 
<div class="panel panel-warning">
    <div class="panel-heading">
        @Html.Raw(Resources.C1FlexGrid.ColumnsSizing_Text4)
    </div>
</div>
 
<div class="panel panel-warning">
    <div class="panel-heading">
        @Html.Raw(Resources.C1FlexGrid.ColumnsSizing_Text5)
    </div>
</div>