Selection

By default, the FlexGrid allows you to select a range of cells with the mouse or keyboard, just like Excel.

The selectionMode property allows you to change this behavior so that users can be restricted from selecting rows, row ranges, non-contiguous rows (like in a list-box), single cells, or nothing at all.

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

Regardless of the current selectionMode, the grid raises selectionChanging and selectionChanged events when the selection changes. And you can use the selection property to get or set the current selection as a CellRange value.

Current selection: (0,0)-(0,0).

In ListBox mode, users can select individual rows using ctrl+click, and you can check whether rows are selected using the row's isSelected property.

The FlexGrid has built-in clipboard support. Press ctrl+c to copy the current selection to the clipboard.

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
// This file locates: "Scripts/Lesson/C1FlexGrid/Selection.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
    theGrid.selectionChanged.addHandler(function (s, e) {
        currSel.textContent = wijmo.format(
        '({row},{col})-({row2},{col2})',
        theGrid.selection);
    });
    theGrid.onSelectionChanged(); // initialize selection display
 
    // pick selectionMode
    var selectionMode = wijmo.Control.getControl('#selectionMode');
    selectionMode.textChanged.addHandler(function (s, e) {
        theGrid.selectionMode = selectionMode.text
    });
 
    // select first four cells in the grid
    document.getElementById('btnSelect').addEventListener('click', function () {
        theGrid.selection = new wijmo.grid.CellRange(0, 0, 1, 1);
    });
 
    // select rows 0, 2, and 4
    document.getElementById('btnListSelect').addEventListener('click', function () {
        selectionMode.text = 'ListBox';
        [0, 2, 4].forEach(function (index) {
            theGrid.rows[index].isSelected = true;
        })
    });
});
1
2
3
4
5
6
7
// This file locates: "Content/css/Lesson/C1FlexGrid/Selection.css".
 .wj-flexgrid {
  max-height: 250px;
 }
 #currSel {
   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: Selection
        public ActionResult Selection()
        {
            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
43
44
@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.Selection_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.Selection_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.Selection_Text2)
</p>
@Html.C1().FlexGrid().Id("theGrid").Bind(Model).ShowAlternatingRows(false)
<label>
    @Html.Raw(Resources.C1FlexGrid.Selection_Text3)
    @Html.C1().ComboBox().Id("selectionMode").Bind(new[] {"None", "Cell", "CellRange", "Row", "RowRange", "ListBox" }).Text("CellRange")
</label>
 
<p></p>
<p>
    @Html.Raw(Resources.C1FlexGrid.Selection_Text4)
</p>
<p>
    <button id="btnSelect" class="btn btn-default">
        @Html.Raw(Resources.C1FlexGrid.Selection_Text5)
    </button>
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.Selection_Text6)
</p>
 
<p></p>
<p>
    @Html.Raw(Resources.C1FlexGrid.Selection_Text7)
</p>
<p>
    <button id="btnListSelect" class="btn btn-default">
        @Html.Raw(Resources.C1FlexGrid.Selection_Text8)
    </button>
</p>
 
<p></p>
<p>
    @Html.Raw(Resources.C1FlexGrid.Selection_Text9)
</p>