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):

From

Sales

Expenses

Amount

Extra

Austria

Belgium

5,879.86

3,319.90

9,314.16

6,264.58

Belgium

Chile

2,882.01

3,260.81

6,927.63

2,311.54

Chile

Denmark

5,580.63

3,604.31

6,140.30

4,788.78

Denmark

Finland

7,130.30

1,303.32

8,878.38

4,564.67

Finland

Japan

850.92

1,532.43

9,084.54

3,934.81

Japan

1,595.81

2,234.91

3,034.32

6,518.81

Austria

561.31

2,099.15

7,231.49

9,847.08

Austria

Belgium

9,050.61

1,693.22

7,926.60

1,446.98

Belgium

Chile

2,920.48

3,034.95

5,719.02

617.33

Chile

Denmark

5,955.28

3,469.01

223.70

7,017.18

Denmark

Finland

4,829.94

3,628.87

4,730.71

3,048.00

Finland

Japan

7,082.56

4,282.92

8,584.88

2,352.54

Japan

740.14

2,267.94

7,812.98

5,422.25

Austria

1,845.05

1,201.07

9,156.30

4,242.02

Austria

Belgium

1,231.63

964.02

168.84

4,960.11

// 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;
}());

// 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;
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexGridController : Controller
    {
        // GET: MultiRangeSelection
        public ActionResult MultiRangeSelection()
        {
            return View();
        }
    }
}

@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)