Row Styling

By default, the grid adds a 'wj-alt' class to every other row, and the 'wijmo.css' file uses this class to style alternating rows. You can disable this using some custom CSS, but it is often easier just to set the grid's showAlternatingRows property to false if you don't want alternating row styles applied at all.

FlexGrid re-generates rows whenever the data source refreshes, which happens when the data is sorted, filtered, grouped, or edited. Because of this, you should not expect row properties to retain their values in most cases.

If you do want to apply custom styles to rows, you should do this when handling the loadedRows event, which fires whenever the grid re-generates the rows.

The row properties that affect styling are:

  • cssClass: Specifies a class name to be added to cells in this row. The class name can be used in CSS rules to modify the style of cells in this row.
  • height: Specifies height of the row in pixels.

The grid below shows the effect of the grid's showAlternatingRows and the row's cssClass properties.

ID
Country
Product
Sales
Expenses
0
US
Phones
$81,733
$38,401
1
Germany
Computers
$20,603
$27,944
2
UK
Cameras
$44,218
$48,877
3
Japan
Stereos
$29,191
$23,366
4
Italy
Phones
$46,951
$49,108
5
Greece
Computers
$86,237
$49,767
6
US
Cameras
$31,459
$40,845
7
Germany
Stereos
$99,190
$1,631
8
UK
Phones
$52,628
$46,701
9
Japan
Computers
$54,682
$4,055
10
Italy
Cameras
$45,333
$14,859
11
Greece
Stereos
$64,270
$38,148
12
US
Phones
$38,100
$17,157
13
Germany
Computers
$50,513
$35,799
14
UK
Cameras
$27,345
$45,355
15
Japan
Stereos
$33,716
$22,860
16
Italy
Phones
$22,131
$20,504
17
Greece
Computers
$61,983
$24,398
18
US
Cameras
$87,819
$41,271
19
Germany
Stereos
$85,822
$33,987
20
UK
Phones
$21,841
$44,768
21
Japan
Computers
$8,658
$41,929
22
Italy
Cameras
$64,412
$41,341
23
Greece
Stereos
$99,997
$24,068
24
US
Phones
$71,973
$40,473
25
Germany
Computers
$72,909
$35,923
26
UK
Cameras
$90,518
$9,456
27
Japan
Stereos
$54,080
$16,275
28
Italy
Phones
$46,840
$41,675
29
Greece
Computers
$79,363
$38,225
30
US
Cameras
$29,500
$26,139
31
Germany
Stereos
$33,259
$14,336
32
UK
Phones
$22,252
$9,344
33
Japan
Computers
$62,462
$34,652
34
Italy
Cameras
$92,764
$11,067
35
Greece
Stereos
$6,652
$45,005
36
US
Phones
$9,398
$7,455
37
Germany
Computers
$60,987
$47,652
38
UK
Cameras
$14,806
$33,881
39
Japan
Stereos
$22,540
$30,909
40
Italy
Phones
$36,094
$42,524
41
Greece
Computers
$28,165
$35,249
42
US
Cameras
$98,881
$19,357
43
Germany
Stereos
$28,033
$25,329
44
UK
Phones
$5,701
$14,028
45
Japan
Computers
$84,642
$30,658
46
Italy
Cameras
$74,233
$20,094
47
Greece
Stereos
$13,070
$34,983
48
US
Phones
$83,057
$34,256
49
Germany
Computers
$17,277
$9,227
50
UK
Cameras
$25,075
$49,856
51
Japan
Stereos
$6,344
$13,184
52
Italy
Phones
$56,809
$32,300
53
Greece
Computers
$97,013
$3,885
54
US
Cameras
$15,577
$40,683
55
Germany
Stereos
$57,539
$27,643
56
UK
Phones
$99,455
$15,082
57
Japan
Computers
$46,570
$24,154
58
Italy
Cameras
$7,169
$11,512
59
Greece
Stereos
$44,690
$22,554
60
US
Phones
$38,884
$40,802
61
Germany
Computers
$91,363
$1,479
62
UK
Cameras
$96,289
$49,679
63
Japan
Stereos
$65,352
$13,916
64
Italy
Phones
$58,779
$38,610
65
Greece
Computers
$42,043
$48,747
66
US
Cameras
$97,289
$12,759
67
Germany
Stereos
$89,725
$8,911
68
UK
Phones
$54,466
$39,252
69
Japan
Computers
$35,238
$49,587
70
Italy
Cameras
$69,173
$6,059
71
Greece
Stereos
$49,652
$29,064
72
US
Phones
$31,036
$12,107
73
Germany
Computers
$13,306
$30,625
74
UK
Cameras
$65,562
$17,051
75
Japan
Stereos
$9,729
$43,896
76
Italy
Phones
$89,214
$32,563
77
Greece
Computers
$26,483
$23,701
78
US
Cameras
$88,758
$24,579
79
Germany
Stereos
$31,971
$18,449
80
UK
Phones
$99,542
$30,525
81
Japan
Computers
$98,343
$48,090
82
Italy
Cameras
$77,226
$4,564
83
Greece
Stereos
$6,250
$5,503
84
US
Phones
$10,192
$41,991
85
Germany
Computers
$57,297
$12,082
86
UK
Cameras
$85,958
$22,369
87
Japan
Stereos
$80,317
$23,012
88
Italy
Phones
$77,814
$21,345
89
Greece
Computers
$99,901
$30,447
90
US
Cameras
$62,384
$49,533
91
Germany
Stereos
$53,954
$6,882
92
UK
Phones
$55,747
$33,610
93
Japan
Computers
$86,617
$16,251
94
Italy
Cameras
$51,996
$41,482
95
Greece
Stereos
$52,251
$8,145
96
US
Phones
$55,323
$15,731
97
Germany
Computers
$80,063
$23,007
98
UK
Cameras
$33,740
$9,613
99
Japan
Stereos
$66,134
$10,265
100
Italy
Phones
$50,997
$38,663
101
Greece
Computers
$10,121
$21,933
102
US
Cameras
$85,963
$28,119
103
Germany
Stereos
$64,067
$775
104
UK
Phones
$45,796
$49,671
105
Japan
Computers
$12,050
$14,160
106
Italy
Cameras
$79,928
$12,781
107
Greece
Stereos
$1,299
$22,289
108
US
Phones
$83,975
$41,161
109
Germany
Computers
$95,156
$10,107
110
UK
Cameras
$85,174
$44,806
111
Japan
Stereos
$84,434
$17,810
112
Italy
Phones
$30,429
$20,938
113
Greece
Computers
$42,179
$33,144
114
US
Cameras
$93,200
$45,628
115
Germany
Stereos
$68,051
$17,134
116
UK
Phones
$79,926
$10,845
117
Japan
Computers
$51,965
$43,103
118
Italy
Cameras
$27,091
$24,849
119
Greece
Stereos
$18,802
$13,073
120
US
Phones
$58,889
$45,403
121
Germany
Computers
$75,680
$39,447
122
UK
Cameras
$10,254
$30,681
123
Japan
Stereos
$57,056
$40,810
124
Italy
Phones
$23,963
$18,874
125
Greece
Computers
$66,346
$4,050
126
US
Cameras
$99,522
$7,962
127
Germany
Stereos
$6,380
$7,615
128
UK
Phones
$3,634
$16,604
129
Japan
Computers
$51,723
$28,671
130
Italy
Cameras
$22,430
$5,814
131
Greece
Stereos
$77,552
$41,645
132
US
Phones
$24,030
$8,760
133
Germany
Computers
$17,972
$28,898
134
UK
Cameras
$82,950
$11,435
135
Japan
Stereos
$4,459
$14,001
136
Italy
Phones
$35,692
$30,373
137
Greece
Computers
$79,427
$9,640
138
US
Cameras
$13,491
$26,255
139
Germany
Stereos
$37,498
$36,023
140
UK
Phones
$8,532
$29,265
141
Japan
Computers
$77,800
$17,313
142
Italy
Cameras
$70,716
$23,205
143
Greece
Stereos
$83,794
$21,158
144
US
Phones
$40,959
$40,775
145
Germany
Computers
$75,148
$11,715
146
UK
Cameras
$58,456
$49,588
147
Japan
Stereos
$54,949
$8,016
148
Italy
Phones
$44,322
$21,502
149
Greece
Computers
$5,509
$32,030
150
US
Cameras
$99,904
$43,266
151
Germany
Stereos
$66,677
$4,720
152
UK
Phones
$68,887
$2,575
153
Japan
Computers
$70,075
$16,872
154
Italy
Cameras
$93,998
$25,949
155
Greece
Stereos
$51,020
$19,234
156
US
Phones
$52,093
$19,172
157
Germany
Computers
$83,215
$39,521
158
UK
Cameras
$40,479
$26,792
159
Japan
Stereos
$7,422
$16,739
160
Italy
Phones
$77,647
$32,603
161
Greece
Computers
$23,678
$41,945
162
US
Cameras
$45,106
$37,141
163
Germany
Stereos
$58,861
$3,131
164
UK
Phones
$4,118
$44,190
165
Japan
Computers
$23,615
$30,475
166
Italy
Cameras
$78,168
$46,651
167
Greece
Stereos
$54,618
$26,708
168
US
Phones
$1,702
$8,344
169
Germany
Computers
$72,604
$13,099
170
UK
Cameras
$56,767
$30,733
171
Japan
Stereos
$96,619
$46,214
172
Italy
Phones
$99,241
$35,160
173
Greece
Computers
$62,645
$2,957
174
US
Cameras
$65,618
$46,616
175
Germany
Stereos
$10,800
$39,549
176
UK
Phones
$7,438
$8,432
177
Japan
Computers
$78,366
$14,627
178
Italy
Cameras
$87,089
$11,515
179
Greece
Stereos
$56,632
$10,988
180
US
Phones
$48,296
$36,251
181
Germany
Computers
$16,256
$1,047
182
UK
Cameras
$46,606
$3,750
183
Japan
Stereos
$96,896
$12,187
184
Italy
Phones
$96,125
$7,761
185
Greece
Computers
$40,349
$44,500
186
US
Cameras
$93,636
$45,451
187
Germany
Stereos
$16,828
$32,583
188
UK
Phones
$63,223
$39,201
189
Japan
Computers
$31,498
$4,765
190
Italy
Cameras
$56,746
$21,304
191
Greece
Stereos
$808
$7,175
192
US
Phones
$16,102
$24,681
193
Germany
Computers
$87,286
$32,097
194
UK
Cameras
$94,709
$5,271
195
Japan
Stereos
$2,002
$41,120
196
Italy
Phones
$52,786
$23,370
197
Greece
Computers
$51,606
$31,498
198
US
Cameras
$29,609
$15,734
199
Germany
Stereos
$38,751
$26,516
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
// This file locates: "Scripts/Lesson/C1FlexGrid/RowsStyling.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
 
    applyRowsStyle();
    theGrid.loadedRows.addHandler(function (s, e) {
        applyRowsStyle();
    });
 
    function applyRowsStyle()
    {
        // apply cssClass to rows after loading them
        for (var i = 0; i < theGrid.rows.length; i++) {
            var row = theGrid.rows[i];
            var item = row.dataItem;
            if (item.Sales > 60000) {
                row.cssClass = 'high-value';
            } else if (item.Sales < 10000) {
                row.cssClass = 'low-value';
            }
        }
    }
 
    // toggle showAlternatingRows
    document.getElementById('showAlternatingRows').addEventListener('click', function (e) {
        theGrid.showAlternatingRows = e.target.checked;
    })
});
1
2
3
4
5
6
7
8
9
10
11
12
// This file locates: "Content/css/Lesson/C1FlexGrid/RowsStyling.css".
.wj-flexgrid {
  max-height: 250px;
}
.wj-cell.high-value {
  font-weight: bold;
  color: green;
}
.wj-cell.low-value {
  font-style: italic;
  color: red;
}
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: RowsStyling
        public ActionResult RowsStyling()
        {
            return View(Models.FlexGridData.GetSales(200));
        }
    }
}
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
@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.RowsStyling_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.RowsStyling_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.RowsStyling_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.RowsStyling_Text3)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.RowsStyling_Text4)
</p>
<ul>
    <li>
        @Html.Raw(Resources.C1FlexGrid.RowsStyling_Text5)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexGrid.RowsStyling_Text6)
    </li>
</ul>
<p>
    @Html.Raw(Resources.C1FlexGrid.RowsStyling_Text7)
</p>
 
<label>
    @Html.Raw(Resources.C1FlexGrid.RowsStyling_Text8)
    <input id="showAlternatingRows" type="checkbox" checked="true">
</label>
@(Html.C1().FlexGrid().Id("theGrid").Bind(Model)
    .AutoGenerateColumns(false)
    .Columns(cs=>
    {
        cs.Add().Binding("Id").Header("ID").Width("50");
        cs.Add().Binding("Country").Header("Country");
        cs.Add().Binding("Product").Header("Product");
        cs.Add().Binding("Sales").Header("Sales").Format("c0");
        cs.Add().Binding("Expenses").Header("Expenses").Format("c0");
    })
)