Frozen Rows and Columns
You can freeze rows and columns by setting the grid's frozenRows and frozenColumns properties.
Frozen cells do not scroll but are selectable/editable like regular cells:
Id
Country
Downloads
Sales
Expenses
Num1
Num2
Num3
Num4
Num5
Num6
Num7
Num8
Num9
Num10
0
US
5,170
8,435.56
2,575.16
4,034.34
1,448.81
2,746.16
2,562.78
3,773.26
2,696.66
1,430.35
2,633.95
2,897.29
979.59
1
Germany
7,893
6,283.38
2,917.08
3,412.20
4,189.34
212.03
796.53
1,224.65
2,557.93
3,423.56
4,185.73
1,287.48
4,738.06
2
UK
8,852
504.42
3,359.11
4,618.18
4.36
1,438.75
3,020.73
90.46
1,336.16
4,947.41
2,521.64
889.95
3,563.19
3
Japan
9,795
9,640.22
4,535.34
1,299.97
171.68
103.00
1,919.17
3,963.74
1,277.74
2,626.12
4,309.00
2,572.88
794.67
4
Italy
6,595
9,338.42
4,466.91
3,222.53
2,075.11
2,148.47
206.40
2,131.12
3,505.86
4,159.70
4,018.64
3,139.08
3,416.87
5
Greece
15,390
3,828.63
4,805.38
4,672.59
673.72
3,327.01
3,900.37
524.11
3,404.29
2,500.72
4,053.01
4,352.66
1,802.45
6
US
2,687
2,996.76
2,470.76
4,578.40
474.89
1,044.75
308.75
4,537.36
1,295.97
30.56
2,079.99
2,617.38
1,210.56
7
Germany
2,547
7,449.67
2,267.25
1,425.75
747.14
829.73
4,792.08
3,927.77
1,179.21
1,253.95
2,365.01
3,229.67
659.16
8
UK
153
1,952.35
412.86
1,743.54
3,698.55
1,595.97
1,952.79
4,193.26
3,066.19
4,730.70
2,716.61
1,554.08
3,628.46
9
Japan
5,483
8,764.77
1,043.83
1,512.79
1,549.00
3,289.23
3,711.07
651.61
689.76
2,271.37
2,570.58
4,639.05
4,258.53
10
Italy
17,874
5,599.68
4,253.73
497.37
4,276.92
1,138.72
3,389.05
4,708.39
981.91
4,199.05
3,291.09
4,235.63
2,122.59
11
Greece
12,524
9,088.53
3,581.96
2,513.39
4,232.23
2,385.48
2,506.73
1,543.64
985.61
4,966.47
1,401.53
610.71
3,097.21
12
US
2,852
8,985.38
4,169.58
362.87
1,802.16
2,586.43
3,296.54
789.16
2,859.08
591.98
3,395.84
826.43
3,142.91
Id
Country
Downloads
Sales
Expenses
Num1
Num2
Num3
Num4
Num5
Num6
Num7
Num8
Num9
Num10
0
- C1FlexGrid/ColumnsFreezing.js
- C1FlexGrid/ColumnsFreezing.css
- ColumnsFreezingController.cs
- ColumnsFreezing.cshtml
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 | // This file locates: "Scripts/Lesson/C1FlexGrid/ColumnsFreezing.js". c1.documentReady(function () { // generate some random data var countries = 'US,Germany,UK,Japan,Italy,Greece' .split( ',' ), data = []; for (var i = 0; i < 200; i++) { data.push({ id: i, country: countries[i % countries.length], downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000, num1: Math.random() * 5000, num2: Math.random() * 5000, num3: Math.random() * 5000, num4: Math.random() * 5000, num5: Math.random() * 5000, num6: Math.random() * 5000, num7: Math.random() * 5000, num8: Math.random() * 5000, num9: Math.random() * 5000, num10: Math.random() * 5000, }); } var theGrid = wijmo.Control.getControl( '#theGrid' ); theGrid.itemsSource = data; theGrid.frozenRows = 2; theGrid.frozenColumns = 1; // toggle frozen rows document.getElementById( 'btnFreezeRows' ).addEventListener( 'click' , function () { theGrid.frozenRows = theGrid.frozenRows > 0 ? 0 : 2; }); document.getElementById( 'btnFreezeCols' ).addEventListener( 'click' , function () { theGrid.frozenColumns = theGrid.frozenColumns > 0 ? 0 : 1; }); }); |
1 2 3 4 5 6 | // This file locates: "Content/css/Lesson/C1FlexGrid/ColumnsFreezing.css". /* style frozen cells */ .wj-cell.wj-frozen:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected), .wj-cell.wj-frozen.wj-alt:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected) { background: #fffff5 } |
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: ColumnsFreezing public ActionResult ColumnsFreezing() { return View(); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | < h1 > @Html .Raw(Resources.C1FlexGrid.ColumnsFreezing_Title) </ h1 > < p > @Html .Raw(Resources.C1FlexGrid.ColumnsFreezing_Text1) </ p > < p > @Html .Raw(Resources.C1FlexGrid.ColumnsFreezing_Text2) </ p > @Html .C1().FlexGrid().Id( "theGrid" ).Height(250) < button id = "btnFreezeRows" class = "btn btn-default" > @Html .Raw(Resources.C1FlexGrid.ColumnsFreezing_Text3) </ button > < button id = "btnFreezeCols" class = "btn btn-default" > @Html .Raw(Resources.C1FlexGrid.ColumnsFreezing_Text4) </ button > |