Demo - Dragging Bound Rows

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>
<div class="container">

  <h1>
    Dragging Bound Rows
  </h1>
  <p>
    The <b>allowDragging</b> property can be used to enable row
    and/or column dragging within FlexGrid controls. By default,
    it is set to allow dragging columns but not rows.</p>
  <p>
    This setting works well for bound data. When the grid is bound 
    to a data source, columns have bindings that move along with 
    the columns and to not affect the data source. Rows, on the 
    other hand, have references to the data objects they represent;
    if they move, they become out of sync with the data source.</p>
  <p>
    Furthermore, data sources are often sorted, and in this case
    the row order is determined by the sorting algorithm, which
    is not compatible with explicit positions set by dragging the
    rows.</p>
  <p>
    This sample shows how you can implement row dragging in bound
    grids. This requires two steps:</p>
  <ol>
    <li>
      Set the grid's <b>allowSorting</b> property to false to
      prevent users from sorting the data.</li>
    <li>
      Handle the grid's <b>draggedRow</b> event to change the order
      of the items in the data source to match the new row order.</li>
  </ol>
  <p>
    Try dragging rows into new positions by dragging them by
    the row header:</p>
  <div id="theGrid"></div>
  <button id="currItem" class="btn btn-default">
    Show current item
  </button>
  
</div>

CSS

.wj-flexgrid {
  max-height: 250px;
  margin-bottom: 12px;
}
.wj-flexgrid .wj-cell {
  padding: 8px;
}
body {
  margin-bottom: 24pt;
}

JavaScript

onload = function() {

	// create the grid with draggable rows
	var dragIndex;
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    itemsSource: getData(6),
    selectionMode: 'ListBox',
    showAlternatingRows: false,
    allowSorting: false,
    allowDragging: 'Both',
    
    // save the drag row index when dragging starts
		draggingRow: function (s, e) {
    	dragIndex = e.row;
			s.collectionView.moveCurrentToPosition(dragIndex);
		},

    // reorder items in the data source when dragging ends
		draggedRow: function (s, e) {
			var dropIndex = e.row,
      		arr = s.collectionView.sourceCollection;
			s.collectionView.deferUpdate(function () {
      	var item = arr[dragIndex];
        arr.splice(dragIndex, 1);
        arr.splice(dropIndex, 0, item);
        s.collectionView.moveCurrentToPosition(dropIndex);
			});
		},
  });
  
  // show the current item
  document.getElementById('currItem').addEventListener('click', function(e) {
  	var currItem = JSON.stringify(theGrid.collectionView.currentItem);
    alert('The currentItem is: ' + currItem)
  })
  
  // generate some random data
	function getData(cnt) {
  	var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
	      data = [];
	  for (var i = 0; i < cnt; i++) {
	    data.push({
	      id: i,
	      country: countries[i % countries.length],
	      active: i % 5 != 0,
	      downloads: Math.round(Math.random() * 200000),
	      sales: Math.round(Math.random() * 100000 * 100)/100,
	      expenses: Math.round(Math.random() * 50000 * 100)/100 
	    });
	  }
  	return data;
	}
}