Cells

The FlexGrid module defines Row and Column classes, but no Cell class. That is because cells are just DOM elements created to represent the intersection of a Row and a Column.

When rendering, FlexGrid scans the rows and columns in the viewRange and generates a cell element for each combination. Cell elements are created based on a dataItem provided by the row and a binding provided by the column (along with some other properties).

The formatItem event

In some situations, you may want to customize the cell element based on the data (dynamic formatting), to create custom cell elements (templating), or not to use bindings at all (calculated columns, unbound grids).

In these cases, use the formatItem event to create or modify the cell elements. For example, the grid below shows sales below 1,000 in red and sales over 5,000 in green:

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

Getting and setting cell data

In most of the cases, you modify the data directly in the binding source object, and let the grid show the results. But in a few cases, you may want to get or set the data through the grid instead.

You can do this using the getCellData and setCellData methods in the GridPanel class. These methods offer options for getting raw or formatted data, coercing data types when setting data, and getting or setting data on unbound grids.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// This file locates: "Scripts/Lesson/C1FlexGrid/Cells.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
    theGrid.formatItem.addHandler(function (s, e) {
        if (e.panel == s.cells && s.columns[e.col].binding == 'Sales') {
            var item = s.rows[e.row].dataItem;
            wijmo.toggleClass(e.cell, 'low', item.Sales < 10000);
            wijmo.toggleClass(e.cell, 'high', item.Sales > 50000);
        }
    });
 
    // demonstrate the getCellData method
    document.getElementById('getCellData').addEventListener('click', function () {
        var sel = theGrid.selection;
        var raw = theGrid.cells.getCellData(sel.row, sel.col, false);
        var formatted = theGrid.cells.getCellData(sel.row, sel.col, true);
        alert('The selected cell contains this data: ' + raw + '\n' +
                  'which is formatted as "' + formatted + '"')
    });
});
1
2
3
4
5
6
7
8
9
// This file locates: "Content/css/Lesson/C1FlexGrid/Cells.css".
.wj-cell.low:not(.wj-state-selected):not(.wj-state-multi-selected) {
  color: red;  
  font-weight: bold;
}
.wj-cell.high:not(.wj-state-selected):not(.wj-state-multi-selected) {
  color: green;  
  font-weight: bold;
}
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: Cells
        public ActionResult Cells()
        {
            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
@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.Cells_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.Cells_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.Cells_Text2)
</p>
 
<h2>
    @Html.Raw(Resources.C1FlexGrid.Cells_Title1)
</h2>
<p>
    @Html.Raw(Resources.C1FlexGrid.Cells_Text3)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.Cells_Text4)
</p>
 
@Html.C1().FlexGrid().Id("theGrid").Bind(Model).Height(250)
 
<h2>
    @Html.Raw(Resources.C1FlexGrid.Cells_Title2)
</h2>
<p>
    @Html.Raw(Resources.C1FlexGrid.Cells_Text5)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.Cells_Text6)
</p>
<p>
    <button id="getCellData" class="btn btn-default">
        @Html.Raw(Resources.C1FlexGrid.Cells_Text7)
    </button>
</p>