Fix #1147: ColumnResizer: Protect header cells from clicks on resize

css/dgrid.css

@@ -243,6 +243,7 @@ html.has-mozilla .dgrid-focus {
   border-right: 2px dotted #000 !important;
 }
 .dgrid-column-resizer {
+  cursor: col-resize;
   position: absolute;
   width: 2px;
   background-color: #666;
@@ -262,6 +263,14 @@ html.has-mozilla .dgrid-focus {
 .dgrid-resize-header-container {
   height: 100%;
 }
+.dgrid-resize-guard {
+  cursor: col-resize;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+}
 html.has-touch .dgrid-resize-handle {
   border-left: 20px solid transparent;
 }

css/extensions/ColumnResizer.styl

@@ -1,4 +1,5 @@
 .dgrid-column-resizer {
+	cursor: col-resize;
 	position: absolute;
 	width: 2px;
 	background-color: #666;
@@ -21,6 +22,16 @@
 	height:100%;
 }
 
+.dgrid-resize-guard {
+	// Used to prevent click events trickling down to the underlying header cell
+	cursor: col-resize;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	top: 0;
+}
+
 // make the resize handles larger on touch-capable devices
 html.has-touch .dgrid-resize-handle {
 	border-left: 20px solid transparent;

extensions/ColumnResizer.js

@@ -138,27 +138,32 @@ define([
 	// Functions for shared resizer node
 
 	var resizerNode, // DOM node for resize indicator, reused between instances
+		resizerGuardNode, // DOM node to guard against clicks registering on header cells (and inducing sort)
 		resizableCount = 0; // Number of ColumnResizer-enabled grid instances
 	var resizer = {
 		// This object contains functions for manipulating the shared resizerNode
 		create: function () {
 			resizerNode = domConstruct.create('div', { className: 'dgrid-column-resizer' });
+			resizerGuardNode = domConstruct.create('div', { className: 'dgrid-resize-guard' });
 		},
 		destroy: function () {
 			domConstruct.destroy(resizerNode);
-			resizerNode = null;
+			domConstruct.destroy(resizerGuardNode);
+			resizerNode = resizerGuardNode = null;
 		},
 		show: function (grid) {
 			var pos = geom.position(grid.domNode, true);
 			resizerNode.style.top = pos.y + 'px';
 			resizerNode.style.height = pos.h + 'px';
 			document.body.appendChild(resizerNode);
+			grid.domNode.appendChild(resizerGuardNode);
 		},
 		move: function (x) {
 			resizerNode.style.left = x + 'px';
 		},
 		hide: function () {
 			resizerNode.parentNode.removeChild(resizerNode);
+			resizerGuardNode.parentNode.removeChild(resizerGuardNode);
 		}
 	};
 
@@ -337,6 +342,7 @@ define([
 			// in all but IE < 9.  setSelectable works for those.
 			e.preventDefault();
 			dom.setSelectable(this.domNode, false);
+
 			this._startX = this._getResizeMouseLocation(e); //position of the target
 
 			this._targetCell = query('.dgrid-column-' + miscUtil.escapeCssIdentifier(target.columnId, '-'),