Demo - Multi-Range Selection

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<div class="container">

  <h1>
    Multi-Range Selection</h1>
  <p>
    The FlexGrid has a <b>ListBox</b> 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.</p>
  <p>
    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 will show the list of selected ranges
    as the selection changes):</p>
    <input type="button" value="get selected cells"  onclick="getSelectedCells()" id="btnSelectedCells" />  
  <div id="theGrid"></div>
  <input type="hidden" id="hfSelectedCells" value="" />
  
</div>

CSS

.wj-flexgrid {
    max-height: 300px;
}
.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;
}
body {
   margin-bottom: 20px;
}

JavaScript

onload = 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,
        });
    }

    // show the data in a grid
    var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
        showAlternatingRows: false,
        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;

        var hfSelectedCellsObj = document.getElementById("hfSelectedCells");
       
       hfSelectedCellsObj.value ="";
        for (var i = 0; i < arr.length; i++) 
        {
          hfSelectedCellsObj.value += ((i>0) ? ", " : "") + wijmo.format('({row}-{col})', arr[i]);
        }
        
    });
}


function getSelectedCells()
{
debugger;
var hfSelectedCellsObj = document.getElementById("hfSelectedCells");
alert('FinalResult :>> '  + hfSelectedCellsObj.value)

}

// ** 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);
...