JavaScript Grid

Set the enablebrowserselection property of the jqxGrid. Author: http://jqwidgets.com

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
Default browser text selection is enabled. 
<div id="jqxgrid"></div>

JavaScript

var data = new Array();
  var firstNames = ["Andrew", "Nancy", "Shelley", "Regina", "Yoshi"];
  var lastNames = ["Fuller", "Davolio", "Burke", "Murphy", "Nagase"];
  var ids = ["1", "2", "3", "4", "5"];    
   
  for (var i = 0; i < 5; i++) {
      var row = {};
      row["id"] = ids[i];
      row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
      row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
      data[i] = row;
  }
  
   var data2 = new Array();
  var d2 = ["Chocolate", "Tea", "Coffee", "Juice", "Milk"];
  var d3 = ["Steam", "Boiled", "Extract", "Pressed", "Evaporate"];
  for (var i = 0; i < 5; i++) {
      var row = {};
      row["id"] = ids[i];
      row["d2"] = d2[i];
      row["d3"] = d3[i];
      data2[i] = row;
  }
  
  
  var source = {
      localdata: data,
      datatype: "array"
  };
  var dataAdapter = new $.jqx.dataAdapter(source, {
      loadComplete: function (data) {},
      loadError: function (xhr, status, error) {}
  });
  
  var source2 = {
      localdata: data2,
      datatype: "array"
  };
  var dataAdapter2 = new $.jqx.dataAdapter(source2, {
      loadComplete: function (data) {},
      loadError: function (xhr, status, error) {}
  });
  
  var initrowdetails = function (index, parentElement, gridElement, record) {
                var id = record.uid.toString();
                
                var contentdiv = $($(parentElement).children()[0]);  
        				contentdiv[0].setAttribute('id','dna_' + id + "_derivedcontents");
                
                var dnaBar = ' \
        <ul style="margin-left: 10px;"> \
            <li> \
                <div style="height: 40px;"> \
                    <div id="spinnerdnagenotypes" style="margin-left: 4px; float: left;"> Genotypes </div> \
                </div> \
            </li> \
        </ul> \
        <div style="overflow: hidden;"> \
            <div> \
                <div name="pps" id="dnagenotypesgrid' + id  + '"></div> \
 ...