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:

Country

Downloads

Sales

Expenses

Num1

Num2

Num3

Num4

Num5

Num6

Num7

Num8

Num9

Num10

13,447

224.72

3,187.12

348.84

2,743.98

161.30

4,552.49

3,295.62

1,683.16

802.58

4,048.35

3,665.58

3,484.69

Germany

144

2,037.85

3,751.35

3,033.61

101.24

426.29

1,513.19

2,362.46

3,728.89

555.08

3,111.99

760.42

4,796.84

588

2,362.97

2,540.14

449.96

3,739.61

4,182.07

128.82

298.22

3,479.31

3,027.97

2,975.47

3,646.76

1,562.87

Japan

18,842

7,588.44

1,122.64

2,288.08

1,723.60

3,685.19

1,422.84

3,526.56

3,901.69

3,388.56

4,874.43

4,667.32

2,443.48

Italy

14,848

3,926.98

1,422.23

863.24

2,030.38

1,596.79

4,209.56

3,328.19

3,816.25

1,079.63

3,076.70

3,232.01

1,650.08

Greece

3,114

9,414.81

2,599.90

3,288.58

619.64

3,290.69

4,217.70

2,976.00

171.46

2,140.29

2,691.78

3,748.54

2,296.28

16,806

1,288.79

1,873.20

151.05

2,042.62

1,851.06

824.73

1,608.40

54.54

2,027.46

2,297.01

3,056.73

1,965.62

Germany

13,607

7,355.23

553.01

1,554.59

4,823.80

3,713.53

3,272.56

2,879.53

883.51

2,869.11

3,155.69

1,941.75

3,464.25

2,991

7,297.56

3,151.59

2,870.56

3,959.16

3,685.92

252.20

3,886.28

3,242.14

1,495.73

1,371.65

815.59

96.94

Japan

16,248

8,633.35

648.16

1,524.17

4,032.47

3,429.46

3,142.23

3,804.94

2,083.19

2,719.70

1,379.48

1,006.95

3,001.63

Italy

14,085

6,125.13

49.31

1,491.72

3,634.01

3,700.59

4,625.27

4,646.50

1,871.11

92.82

4,755.50

1,160.04

1,840.85

Greece

10,497

4,423.96

1,830.09

117.92

1,502.03

2,522.75

2,673.37

1,480.34

1,843.55

1,352.97

4,559.06

4,436.23

2,255.27

1,614

2,864.35

3,804.68

4,247.23

4,791.43

1,500.04

3,063.99

988.68

1,184.27

3,794.58

3,726.45

3,525.97

3,455.55

// 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;
    });
});

// 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
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexGridController : Controller
    {
        // GET: ColumnsFreezing
        public ActionResult ColumnsFreezing()
        {
            return View();
        }
    }
}

<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>