Auto-Size Rows
This grid automatically resizes rows to fit their content. It does this by calling the autoSizeRows method in response to events that affect the content size.
ID
Countries
Sales
Expenses
0
Japan, Korea, Lebanon, Mexico, Norway
8,792.75
2,808.92
1
Zaire, Austria, Belgium, Canada
8,441.51
1,777.78
2
Ukraine, Venezuela, Zaire, Austria, Belgium, Canada
5,074.06
4,880.51
3
Spain, Turkey, Ukraine, Venezuela, Zaire, Austria
3,718.36
4,841.49
4
Portugal, Qatar, Romania, Spain, Turkey
4,115.92
2,384.93
5
Japan, Korea, Lebanon, Mexico, Norway
374.04
4,415.59
6
Portugal, Qatar, Romania
4,143.76
207.40
7
Portugal, Qatar, Romania, Spain, Turkey, Ukraine, Venezuela, Zaire, Austria, Belgium
5,085.75
3,944.79
8
Norway, Portugal, Qatar, Romania, Spain, Turkey, Ukraine, Venezuela, Zaire, Austria, Belgium, Canada, Denmark
2,930.77
2,471.70
9
Hungary, Ireland
2,690.27
1,242.19
10
Austria, Belgium, Canada, Denmark, Estonia, Finland, Germany, Hungary
318.03
2,028.39
11
Norway, Portugal, Qatar, Romania, Spain, Turkey, Ukraine, Venezuela, Zaire, Austria, Belgium
2,025.31
3,817.20
12
Venezuela, Zaire, Austria, Belgium, Canada, Denmark, Estonia, Finland, Germany, Hungary, Ireland
8,167.47
2,740.04
13
Spain, Turkey, Ukraine, Venezuela, Zaire, Austria, Belgium, Canada
6,326.59
2,809.94
14
Finland, Germany, Hungary, Ireland, Japan, Korea, Lebanon, Mexico, Norway, Portugal, Qatar
8,105.95
4,715.94
ID
Countries
Sales
Expenses
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 38 39 40 41 42 43 44 45 46 | // This file locates: "Scripts/Lesson/C1FlexGrid/AutoRowHeights.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 < 100; 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() * 12) + 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 setTimeout(function () { s.autoSizeRows(); }, 50); }); theGrid.resizedColumn.addHandler(function (s, e) { // column resized if (s.columns[e.col].wordWrap) { s.autoSizeRows(); } }); theGrid.cellEditEnded.addHandler(function (s, e) { // cell edited if (s.columns[e.col].wordWrap) { s.autoSizeRow(e.row); } }); theGrid.rowEditEnded.addHandler(function (s, e) { // whole row undo s.autoSizeRow(e.row); }); 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: AutoRowHeights public ActionResult AutoRowHeights() { return View(); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | < h1 > @Html .Raw(Resources.C1FlexGrid.AutoRowHeights_Title) </ h1 > < p > @Html .Raw(Resources.C1FlexGrid.AutoRowHeights_Text1) </ p > @ (Html.C1().FlexGrid().Id( "theGrid" ).Height(300) .AutoGenerateColumns( false ) .Columns(cs => { cs.Add().Binding( "id" ).Header( "ID" ).Width( "60" ).IsReadOnly( true ); cs.Add().Binding( "countries" ).Header( "Countries" ).Width( "*" ).WordWrap( true ); cs.Add().Binding( "sales" ).Header( "Sales" ); cs.Add().Binding( "expenses" ).Header( "Expenses" ); }) ) |