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.
ID
Country
Sales
Expenses
0
US
81,732.54
38,401.13
1
Germany
20,603.32
27,944.24
2
UK
44,217.79
48,877.49
3
Japan
29,190.63
23,365.74
4
Italy
46,951.19
49,107.56
5
Greece
86,237.02
49,767.35
6
US
31,459.18
40,845.40
ID
Country
Sales
Expenses
0
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.
1 2 3 4 5 6 7 8 9 | // 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(); }) }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc; namespace LearnMvcClient.Controllers { public partial class C1FlexGridController : Controller { // GET: ColumnsAutoSizing public ActionResult ColumnsAutoSizing() { return View(Models.FlexGridData.GetSales(200)); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | @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 > |