Selection Events

FlexGrid's selection property returns a CellRange object that contains the range of selected cells.

When the selection changes, the grid raises the selectionChanging and selectionChanged events.

The grid below uses the selectionChanged event to show a summary of the data selected.

please select a range on the grid
Id
Country
Product
Active
Downloads
Sales
Expenses
Overdue
Country: US (5 items)
0
US
Phones
145,248
81,732.54
38,401.13
4
US
Phones
126,531
46,951.19
49,107.56
8
US
Phones
139,988
52,628.41
46,700.93
12
US
Phones
6,078
38,100.45
17,157.09
16
US
Phones
29,365
22,131.47
20,503.66
Country: Germany (5 items)
1
Germany
Computers
111,632
20,603.32
27,944.24
5
Germany
Computers
6,073
86,237.02
49,767.35
9
Germany
Computers
137,524
54,681.54
4,055.50
13
Germany
Computers
191,491
50,512.92
35,798.63
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
// This file locates: "Scripts/Lesson/C1FlexGrid/EventsSelection.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
    var elLog = document.getElementById('log');
    var placeholder = elLog.innerHTML;
 
    theGrid.selectionChanged.addHandler(function (s, e) {
        var html = placeholder;
        if (!theGrid.selection.isSingleCell) {
            var stats = getSelectionStats(theGrid);
            var fmt = stats.sum != null
                ? 'Avg: <b>{avg:n2}</b>, Count: <b>{cnt:n0}</b>, Sum: <b>{sum:n2}</b>'
              : 'Count: {cnt:n2}';
            html = wijmo.format(fmt, stats);
        }
        elLog.innerHTML = html;
    });
 
    // get statistics for the current selection
    function getSelectionStats(grid) {
        var sel = grid.selection,
                cnt = 0,
            ncnt = 0,
            sum = 0;
        for (var r = sel.topRow; r <= sel.bottomRow; r++) {
            for (var c = sel.leftCol; c <= sel.rightCol; c++) {
                var val = grid.cells.getCellData(r, c, false);
                if (val != null) {
                    cnt++;
                    if (wijmo.isNumber(val)) {
                        ncnt++;
                        sum += val;
                    }
                }
            }
        }
        return {
            cnt: cnt,
            sum: ncnt > 0 ? sum : null,
            avg: ncnt > 0 ? sum / ncnt : null
        }
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// This file locates: "Content/css/Lesson/C1FlexGrid/EventsSelection.css".
#log {
  font-style: italic;
  text-align: center;
  margin-bottom: 10px;
  opacity: .5;
}
.my-button {
  opacity: .5;
  margin: 0 6px;
}
.my-button:hover {
  color: orange; 
}
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: EventsSelection
        public ActionResult EventsSelection()
        {
            return View(Models.FlexGridData.GetSales(Models.FlexGridData.Countries4, 20));
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.EventsSelection_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.EventsSelection_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.EventsSelection_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.EventsSelection_Text3)
</p>
<div id="log">
    @Html.Raw(Resources.C1FlexGrid.EventsSelection_Text4)
</div>
@Html.C1().FlexGrid().Id("theGrid").Bind(Model).GroupBy("Country").Height(220)