Sizing and Auto Sizing
By default, the FlexGrid sets its height automatically to fit its content.
However, generally, grid height needs to be adjusted using CSS as per the application design. In that case, the grid automatically shows scrollbars as needed and virtualizes the content to improve performance.
Below grid has its maximum height set to 150 pixels:
Id
Country
Product
Active
Downloads
Sales
Expenses
Overdue
0
US
Phones
145,248
81,732.54
38,401.13
1
Germany
Computers
111,632
20,603.32
27,944.24
2
UK
Cameras
181,205
44,217.79
48,877.49
3
Japan
Stereos
54,740
29,190.63
23,365.74
4
Italy
Phones
126,531
46,951.19
49,107.56
5
Greece
Computers
6,073
86,237.02
49,767.35
6
US
Cameras
135,436
31,459.18
40,845.40
Id
Country
Product
Active
Downloads
Sales
Expenses
Overdue
0
And this one demonstrates the default behavior of the grid where it automatically takes the height required to show all its content without vertical scrollbars:
Id
Country
Product
Active
Downloads
Sales
Expenses
Overdue
0
US
Phones
145,248
81,732.54
38,401.13
1
Germany
Computers
111,632
20,603.32
27,944.24
2
UK
Cameras
181,205
44,217.79
48,877.49
3
Japan
Stereos
54,740
29,190.63
23,365.74
4
Italy
Phones
126,531
46,951.19
49,107.56
5
Greece
Computers
6,073
86,237.02
49,767.35
6
US
Cameras
135,436
31,459.18
40,845.40
7
Germany
Stereos
169,610
99,190.22
1,631.26
8
UK
Phones
139,988
52,628.41
46,700.93
9
Japan
Computers
137,524
54,681.54
4,055.50
10
Italy
Cameras
37,424
45,332.72
14,858.59
11
Greece
Stereos
197,708
64,269.75
38,148.18
12
US
Phones
6,078
38,100.45
17,157.09
13
Germany
Computers
191,491
50,512.92
35,798.63
14
UK
Cameras
23,791
27,345.15
45,354.90
15
Japan
Stereos
158,953
33,716.03
22,860.44
16
Italy
Phones
29,365
22,131.47
20,503.66
17
Greece
Computers
143,745
61,983.03
24,398.40
18
US
Cameras
38,982
87,819.15
41,271.16
19
Germany
Stereos
147,079
85,821.92
33,987.45
20
UK
Phones
124,973
21,840.68
44,768.12
21
Japan
Computers
179,287
8,657.99
41,928.95
22
Italy
Cameras
34,028
64,411.53
41,340.72
23
Greece
Stereos
43,837
99,997.27
24,068.28
24
US
Phones
130,441
71,972.60
40,473.13
25
Germany
Computers
20,187
72,909.41
35,922.53
26
UK
Cameras
25,105
90,517.64
9,456.19
27
Japan
Stereos
95,361
54,079.52
16,275.03
28
Italy
Phones
134,207
46,839.77
41,674.85
29
Greece
Computers
161,840
79,363.03
38,225.30
30
US
Cameras
187,508
29,499.68
26,139.26
31
Germany
Stereos
132,678
33,258.90
14,336.12
32
UK
Phones
164,122
22,251.79
9,343.58
33
Japan
Computers
13,703
62,462.28
34,652.25
34
Italy
Cameras
126,078
92,763.74
11,067.10
35
Greece
Stereos
185,741
6,652.16
45,005.22
36
US
Phones
135,701
9,397.80
7,454.87
37
Germany
Computers
21,394
60,987.02
47,652.14
38
UK
Cameras
98,125
14,805.63
33,880.58
39
Japan
Stereos
113,972
22,540.31
30,909.11
40
Italy
Phones
1,016
36,093.90
42,524.25
41
Greece
Computers
12,461
28,164.73
35,248.79
42
US
Cameras
191,716
98,881.24
19,356.85
43
Germany
Stereos
104,548
28,032.53
25,328.81
44
UK
Phones
106,315
5,700.84
14,027.68
45
Japan
Computers
99,215
84,641.55
30,657.89
46
Italy
Cameras
20,831
74,232.90
20,093.81
47
Greece
Stereos
186,678
13,069.83
34,982.62
48
US
Phones
123,081
83,056.79
34,256.33
49
Germany
Computers
113,948
17,276.76
9,226.64
Id
Country
Product
Active
Downloads
Sales
Expenses
Overdue
0
1 2 3 4 5 | // This file locates: "Scripts/Lesson/C1FlexGrid/SizingScrolling.js".c1.documentReady(function () { var theGrid = wijmo.Control.getControl('#theGrid');}); |
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: SizingScrolling public ActionResult SizingScrolling() { return View(Models.FlexGridData.GetSales(50)); } }} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | @model IEnumerable<FlexGridData.Sale><h1> @Html.Raw(Resources.C1FlexGrid.SizingScrolling_Title)</h1><p> @Html.Raw(Resources.C1FlexGrid.SizingScrolling_Text1)</p><p> @Html.Raw(Resources.C1FlexGrid.SizingScrolling_Text2)</p><p> @Html.Raw(Resources.C1FlexGrid.SizingScrolling_Text3)</p>@Html.C1().FlexGrid().Id("theGrid").Bind(Model).Height(150)<p> @Html.Raw(Resources.C1FlexGrid.SizingScrolling_Text4)</p>@Html.C1().FlexGrid().Id("theGridAuto").Bind(Model) |