Demo - FlexGrid Text Selection (not cell)

HTML

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

  <h1>
    FlexGrid Text Selection (not cell)
  </h1>
  <p>
    By default, the FlexGrid behaves like Excel: you may use
    the mouse to select cell ranges, and copy the selection
    to the clipboard by pressing ctrl+C.</p>
  <p>
    But you can change this behavior and make the grid behave
    more like a regular HTML table, so users may select parts
    of the text in a cell.</p>
  <p>
    To do this, you must do three things:</p>
  <ol>
    <li>
      Change the grid's <b>selectionMode</b> to <b>None</b>.
      so the grid will not select cells as you select text,
    </li>  
    <li>
      Add a CSS rule to set the grid's <b>user-select</b>
      CSS property to <b>auto</b> (or <b>text</b>), and
    </li>  
    <li>
      Remove the grid's handler for the <b>selectstart</b>
      event.
    </li>  
  </ol>
  <p>
    Here's an example: select parts of a cell's text using
    the mouse, or uncheck the box to restore regular cell-based
    selection:
  </p>
  <label>
    Allow text selection within the grid
    <input id="user-select" type="checkbox" checked>
  </label>
  <div id="theGrid" class="user-select">
  </div>
</div>

CSS

.wj-flexgrid {
  max-height: 250px;
  margin-bottom: 12px;
}

.wj-flexgrid.user-select {
  user-select: auto;
}

JavaScript

onload = function() {

  // default grid
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    itemsSource: getData(),
    selectionMode: 'None',
    showAlternatingRows: false
  });
  
  // allow user selection
  theGrid.removeEventListener(theGrid.hostElement, 'selectstart')
  document.getElementById('user-select').addEventListener('click', function(e) {
		wijmo.toggleClass(theGrid.hostElement, 'user-select', e.target.checked);
    theGrid.selectionMode = e.target.checked ? 'None' : 'CellRange';
  })
  
  // create some random data
  function getData() {
	  var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
  		  data = [];
  	for (var i = 0; i < 200; i++) {
	    data.push({
	      id: i,
	      country: countries[i % countries.length],
	      active: i % 5 != 0,
	      downloads: Math.round(Math.random() * 200000),
	      sales: Math.random() * 100000,
	      expenses: Math.random() * 50000
	    });
	  }
    return data;
  }
}