Auto-Sizing

FlexGrid has autoSizeColumns and autoSizeRows methods to automatically size rows and columns to fit their content.

The auto-size methods take special styles and formats applied to the cells into account.

For example, click this button to size the columns of the grid below to fit their content.

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

31,459.18

40,845.40

Automatically resizing rows and columns is one of the most time-consuming grid operations. If your grid has more than a few hundred rows, avoid auto-sizing and consider setting the column sizes to explicit numeric values instead.

// This file locates: "Scripts/Lesson/C1FlexGrid/ColumnsAutoSizing.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
 
    // autosize when pressing button
    document.getElementById('autoSizeColumns').addEventListener('click', function () {
        theGrid.autoSizeColumns();
    })
});

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

@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.ColumnsAutoSizing_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.ColumnsAutoSizing_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.ColumnsAutoSizing_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.ColumnsAutoSizing_Text3)
</p>
<button id="autoSizeColumns" class="btn byn-default">
    @Html.Raw(Resources.C1FlexGrid.ColumnsAutoSizing_Text4)
</button>
 
@(Html.C1().FlexGrid().Id("theGrid").Height(150)
    .AutoGenerateColumns(false)
    .Bind(Model)
    .Columns(cs=>
    {
        cs.Add().Binding("Id").Header("ID").Width("60");
        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.ColumnsAutoSizing_Text5)
    </div>
</div>