Row Properties

The wijmo.grid.Row class has almost 20 properties which you can use to configure rows's appearance and behavior.

Note that when grids refresh, the scrollable rows are re-created (so they can be bound to the new data). Because of this, you should normally apply row properties in response to the loadedRows event, which fires after the rows have been created.

Most rows are instances of the Row class, but grouped grids may also contain GroupRow objects, which extend the regular Row class.

The most important properties in the Row class are:

  • dataItem: Contains a reference to the data item that is bound to the row. This property is set by the grid when it creates bound rows, and is often used in formatItem event handlers. In GroupRow objects, the dataItem property contains a reference to the row's Group rather than to a regular data item.
  • isReadOnly: Gets or sets whether the row is editable. By default, Row instances are editable and GroupRow instances are not.
  • isSelected: This property is important when the grid's selectionMode property is set to ListBox. In this case, users may select non-contiguous sets of rows, and the isSelected property allows you to get or set the selected state of individual rows.
  • visible: Gets or sets whether the row is visible. You can use this property to conditionally hide rows.
  • isVisible: Gets a value that indicates whether the row is currently visible. Even if the visible property is set to true, rows may be hidden because they are part of collapsed groups.

For example, click the button below to hide or show every alternate row on the grid.

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// This file locates: "Scripts/Lesson/C1FlexGrid/RowsProperties.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
    theGrid.loadedRows.addHandler(function () {
        if (hideRows) {
            theGrid.rows.forEach(function (row, index) {
                row.visible = index % 2 == 0;
            });
        }
    });
 
    // toggle row visibility
    var hideRows = false;
    document.getElementById('btnToggleVis').addEventListener('click', function (e) {
        hideRows = !hideRows;
        theGrid.collectionView.refresh(); // force row re-load
    });
});
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: RowsProperties
        public ActionResult RowsProperties()
        {
            return View(Models.FlexGridData.GetSales());
        }
    }
}
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
@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.RowsProperties_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.RowsProperties_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.RowsProperties_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.RowsProperties_Text3)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.RowsProperties_Text4)
</p>
<ul>
    <li>
        @Html.Raw(Resources.C1FlexGrid.RowsProperties_Text5)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexGrid.RowsProperties_Text6)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexGrid.RowsProperties_Text7)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexGrid.RowsProperties_Text8)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexGrid.RowsProperties_Text9)
    </li>
</ul>
 
<p>
    @Html.Raw(Resources.C1FlexGrid.RowsProperties_Text10)
</p>
<button id="btnToggleVis" class="btn btn-default">
    @Html.Raw(Resources.C1FlexGrid.RowsProperties_Text11)
</button>
@Html.C1().FlexGrid().Id("theGrid").Bind(Model).Height(150)