Html5 Grid

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

by txhi

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">
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<div id='jqxWidget'>
  <div id="grid1"></div>
</div>

JavaScript

var source =
    {
      localdata: generatedata(100),
      datafields:
      [
        { name: 'firstname', type: 'string' },
        { name: 'lastname', type: 'string' },
        { name: 'productname', type: 'string' }
      ],
      datatype: "array"
    };

var dataAdapter = new $.jqx.dataAdapter(source);
var cellDrag;
var cellDrop;

// create data grids.
$("#grid1").jqxGrid(
  {
    width: 850,
    source: dataAdapter,
    pageable: true,
    autoheight: true,
    sortable: true,
    rendered: function(type)
    {
      // select all grid cells.
      var gridCells = $('#grid1').find('.jqx-grid-cell');

      // initialize the jqxDragDrop plug-in. Set its drop target to the second Grid.
      gridCells.jqxDragDrop({
        appendTo: 'body',  dragZIndex: 99999,
        dropAction: 'none',
        initFeedback: function (feedback) {
          feedback.height(25);
        },
        dropTarget: $('#grid1'), revert: true
      });
      gridCells.off('dragStart');
      gridCells.off('dragEnd');
      gridCells.off('dropTargetEnter');
      gridCells.off('dropTargetLeave');

      // disable revert when the dragged cell is over the second Grid.
      gridCells.on('dropTargetEnter', function () {
        gridCells.jqxDragDrop({ revert: false });
      });
      // enable revert when the dragged cell is outside the second Grid.
      gridCells.on('dropTargetLeave', function () {
        gridCells.jqxDragDrop({ revert: true });
      });
      // initialize the dragged object.
      gridCells.on('dragStart', function (event) {
        var value = $(this).text();
        var position = $.jqx.position(event.args);
        cellDrag = $("#grid1").jqxGrid('getcellatposition', position.left, position.top);
        
        $(this).jqxDragDrop('data', {
          value: value
        });
      });
      // set the new cell value when the dragged cell is dropped over the second Grid.      
      gridCells.on('dragEnd', function (event) {
        var value =...