Multi-Range Selection
FlexGrid has a ListBox selection mode that allows users to select non-contiguous ranges of rows. But, it does not have a built-in selection mode that allows user to select multiple, non-contiguous ranges of cells.
You can add multi-range selection support by handling a few events. For example, press the Control key while selecting ranges with the mouse on the grid below (the console shows the list of selected ranges as the selection changes):
Id
From
To
Sales
Expenses
Amount
Extra
0
Austria
Belgium
1,256.58
3,669.78
562.97
6,435.45
1
Belgium
Chile
3,489.39
2,996.34
6,889.24
649.82
2
Chile
Denmark
3,655.13
4,722.90
8,201.28
7,903.59
3
Denmark
Finland
4,723.59
4,401.29
6,618.47
2,345.91
4
Finland
Japan
7,976.25
1,271.35
8,987.92
2,211.59
5
Japan
UK
5,139.84
2,915.84
3,969.35
8,543.63
6
UK
Austria
1,295.99
3,106.07
211.73
3,729.08
7
Austria
Belgium
4,432.54
4,863.95
7,943.87
9,723.50
8
Belgium
Chile
4,273.72
1,832.64
4,163.96
2,589.85
9
Chile
Denmark
7,350.87
3,170.38
5,175.68
9,542.31
10
Denmark
Finland
5,513.99
4,332.68
373.29
5,961.74
11
Finland
Japan
8,708.74
1,492.60
2,743.10
5,774.47
12
Japan
UK
9,874.72
4,654.23
1,762.27
4,745.06
13
UK
Austria
460.38
425.07
2,092.93
3,931.55
14
Austria
Belgium
4,902.85
2,477.72
9,764.66
9,178.64
Id
From
To
Sales
Expenses
Amount
Extra
0
- C1FlexGrid/MultiRangeSelection.js
- C1FlexGrid/MultiRangeSelection.css
- MultiRangeSelectionController.cs
- MultiRangeSelection.cshtml
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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | // This file locates: "Scripts/Lesson/C1FlexGrid/MultiRangeSelection.js". c1.documentReady(function () { // create some random data var data = []; var countries = 'Austria,Belgium,Chile,Denmark,Finland,Japan,UK' .split( ',' ); for (var i = 0; i < 300; i++) { data.push({ id: i, from: countries[i % countries.length], to: countries[(i + 1) % countries.length], sales: Math.random() * 10000, expenses: Math.random() * 5000, amount: Math.random() * 10000, extra: Math.random() * 10000, }); } var theGrid = wijmo.Control.getControl( '#theGrid' ); theGrid.itemsSource = data; // add an extended selection manager to the grid var xsm = new ExtendedSelectionManager(theGrid); xsm.selectedRanges.collectionChanged.addHandler(function (s, e) { var arr = xsm.selectedRanges; console.log( 'selectedRanges: ' + arr.length); for (var i = 0; i < arr.length; i++) { console.log( ' ' + i + wijmo.format( ': ({row},{col})-({row2}-{col2})' , arr[i])); } }); }); // ** ExtendedSelectionManager (transpiled from TypeScript) 'use strict' ; var ExtendedSelectionManager = (function () { function ExtendedSelectionManager(flex) { var _this = this ; this ._selRanges = new wijmo.collections.ObservableArray(); this ._extending = false ; // start/end extended selection mode flex.addEventListener(flex.hostElement, 'mousedown' , function (e) { _this._extending = e.button == 0 && (e.ctrlKey || e.metaKey); if (!_this._extending && _this._selRanges.length) { _this._selRanges.clear(); } }, true ); // end extended selection mode flex.addEventListener(flex.hostElement, 'mouseup' , function (e) { _this._extending = false ; }); // extend selection when selection is changing flex.selectionChanging.addHandler(function (s, e) { if (_this._extending) { var xrng = _this._selRanges, curr = flex.selection, last = xrng.length ? xrng[xrng.length - 1] : null ; if (last && curr.intersects(last)) { xrng.setAt(xrng.length - 1, curr); } else { _this._selRanges.push(curr); } } }); // clear extended selection after a selection change flex.selectionChanged.addHandler(function (s, e) { var xrng = _this._selRanges; if (!_this._extending && xrng.length) { xrng.clear(); } }); // apply selected style to a cell flex.formatItem.addHandler(function (s, e) { if (e.panel == flex.cells) { _this._updateCellStyle(e.row, e.col, e.cell); } }); // update selection styles when extended selections change this ._selRanges.collectionChanged.addHandler(function () { setTimeout(function () { var rng = flex.viewRange; for (var r = rng.row; r <= rng.row2; r++) { for (var c = rng.col; c <= rng.col2; c++) { var cell = flex.cells.getCellElement(r, c); _this._updateCellStyle(r, c, cell); } } }); }); } Object.defineProperty(ExtendedSelectionManager.prototype, "selectedRanges" , { // gets the array of selected ranges get : function () { return this ._selRanges; }, enumerable: true , configurable: true }); // update the selected style for a given cell ExtendedSelectionManager.prototype._updateCellStyle = function (r, c, cell) { var selected = false ; for (var i = 0; i < this ._selRanges.length && !selected; i++) { selected = this ._selRanges[i].contains(r, c); } wijmo.toggleClass(cell, 'extended-selection' , selected); }; return ExtendedSelectionManager; }()); |
1 2 3 4 5 | // This file locates: "Content/css/Lesson/C1FlexGrid/MultiRangeSelection.css". .extended-selection.wj-cell:not(.wj-header):not(.wj-group):not(.wj-alt):not(.wj-state-selected):not(.wj-state-multi-selected) { color: white; background: #a47aff; } |
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: MultiRangeSelection public ActionResult MultiRangeSelection() { return View(); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 | @model IEnumerable< FlexGridData.Sale > < h1 > @Html .Raw(Resources.C1FlexGrid.MultiRangeSelection_Title) </ h1 > < p > @Html .Raw(Resources.C1FlexGrid.MultiRangeSelection_Text1) </ p > < p > @Html .Raw(Resources.C1FlexGrid.MultiRangeSelection_Text2) </ p > @Html .C1().FlexGrid().Id( "theGrid" ).ShowAlternatingRows( false ).Height(300) |