Auto-Size Columns
This grid automatically resizes columns to fit their content. It does this by calling the autoSizeColumns method in response to events that affect the content size.
ID
0
1
2
3
4
5
6
7
8
9
ID
0
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 36 37 | // This file locates: "Scripts/Lesson/C1FlexGrid/AutoColumnWidths.js". c1.documentReady(function () { // create some random data var countries = 'Austria,Belgium,Canada,Denmark,Estonia,Finland,Germany,Hungary,Ireland,Japan,Korea,Lebanon,Mexico,Norway,Portugal,Qatar,Romania,Spain,Turkey,Ukraine,Venezuela,Zaire' .split( ',' ); var data = []; for (var i = 0; i < 10; i++) { data.push({ id: i, countries: getCountries(), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } function getCountries() { var c = []; var cnt = Math.round(Math.random() * 2) + 1; var start = Math.round(Math.random() * countries.length); for (var i = 0; i < cnt; i++) { c.push(countries[(i + start) % countries.length]); } return c.join( ', ' ); } // show the data in a grid with fixed height var theGrid = wijmo.Control.getControl( '#theGrid' ); theGrid.loadedRows.addHandler(function (s, e) { // rows loaded/reloaded s.autoSizeColumns(); }); theGrid.cellEditEnded.addHandler(function (s, e) { // cell edited s.autoSizeColumn(e.col); }); theGrid.rowEditEnded.addHandler(function (s, e) { // whole row undo s.autoSizeColumns(); }); theGrid.itemsSource = data; }); |
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: AutoColumnWidths public ActionResult AutoColumnWidths() { return View(); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | < h1 > @Html .Raw(Resources.C1FlexGrid.AutoColumnWidths_Title) </ h1 > < p > @Html .Raw(Resources.C1FlexGrid.AutoColumnWidths_Text1) </ p > @ (Html.C1().FlexGrid().Id( "theGrid" ).Height(300) .AllowResizing(C1.Web.Mvc.Grid.AllowResizing.None) .AutoGenerateColumns( false ) .Columns(cs=> { cs.Add().Binding( "id" ).Header( "ID" ).MinWidth(60).IsReadOnly( true ); cs.Add().Binding( "countries" ).Header( "Countries" ); cs.Add().Binding( "sales" ).Header( "Sales" ).MinWidth(80); cs.Add().Binding( "expenses" ).Header( "Expenses" ).MinWidth(80); }) ) |