use position cell selection

treegrid.js

@@ -25,11 +25,6 @@
  * TG.table - grid <table> element
  * TG.root - root node
  *
- * Callbacks:
- *
- * // called before expanding node. should return false if you want to prevent expanding the node
- * TG.onExpand = function(node) {};
- *
  * Methods:
  *
  * // change header and clear grid contents
@@ -42,14 +37,28 @@
  * node.toggle();
  *
  * // use simple cell editing
- * // onStartEdit = function(node, colIndex, td) { return { abort: <whether to prevent editing>, value: <initial textbox value> } }
- * // onStopEdit = function (node, colIndex, value, td) { return { html: <new cell content> } }
- * TG.initCellEditing(onStartEdit, onStopEdit);
+ * TG.initCellEditing();
  *
  * // use simple mouse cell selection
- * // onSelect = function(node, colIndex, td) { return <whether to allow selection (boolean)>; }
- * // onDeselect = function(node, colIndex, td) {}
- * TG.initCellSelection(onSelect, onDeselect);
+ * // HTMLElement restrictToNode: the element to listen for mousedown events
+ * TG.initCellSelection(restrictToNode);
+ *
+ * Callbacks:
+ *
+ * // called before expanding node. should return false if you want to prevent expanding the node
+ * TG.onExpand = function(node) {};
+ * // called before a cell is selected with mouse
+ * TG.onCellSelect = function(node, colIndex, td) { return <whether to allow selection (boolean)>; }
+ * // called when a cell is deselected with mouse
+ * TG.onCellDeselect = function(node, colIndex, td) {}
+ * // called before a cell is edited
+ * TG.onStartCellEdit = function(node, colIndex, td) { return {
+ *     abort: <whether to prevent editing>,
+ *     value: <override initial textbox value>
+ * } }
+ * // called before a cell is stopped being edited
+ * TG.onStopCellEdit = function (node, colIndex, value, td) { return { html: <new cell content> } }
+ *
  */
 function TreeGrid(items, header)
 {
@@ -109,11 +118,9 @@ TreeGrid.prototype.getNodeIndex = function(n)
     return i;
 }
 
-TreeGrid.prototype.initCellEditing = function(onStartEdit, onStopEdit)
+TreeGrid.prototype.initCellEditing = function()
 {
     var self = this;
-    self.onStartCellEdit = onStartEdit;
-    self.onStopCellEdit = onStopEdit;
     self.editedCells = []; // FIXME maybe remove and use just class selector
     addListener(this.table, 'dblclick', function(evt)
     {
@@ -179,22 +186,24 @@ TreeGrid.prototype.stopCellEditing = function(td, _int)
 
 // Simple cell selection
 
-TreeGrid.prototype.initCellSelection = function(onSelect, onDeselect)
+TreeGrid.prototype.initCellSelection = function(restrictToNode)
 {
-    this.onCellSelect = onSelect;
-    this.onCellDeselect = onDeselect;
     var startDrag, dragDiv;
 
     var self = this;
-    addListener(document.body, 'mousedown', function(evt)
+
+    addListener(restrictToNode || document.body, 'mousedown', function(evt)
     {
-        var els = self.table.querySelectorAll('td.selected');
-        for (var i = 0; i < els.length; i++)
-        {
-            self.onCellDeselect && self.onCellDeselect(els[i].parentNode._node, self.getNodeIndex(els[i]), els[i]);
-            els[i].className = els[i].className.replace(' selected', '');
-        }
         evt = getEventCoord(evt);
+        if (!evt.shiftKey)
+        {
+            var els = self.table.querySelectorAll('td.selected');
+            for (var i = 0; i < els.length; i++)
+            {
+                self.onCellDeselect && self.onCellDeselect(els[i].parentNode._node, self.getNodeIndex(els[i]), els[i]);
+                els[i].className = els[i].className.replace(' selected', '');
+            }
+        }
         if (evt.which != 1)
             return;
         startDrag = [ evt.pageX, evt.pageY ];
@@ -260,10 +269,13 @@ TreeGrid.prototype.initCellSelection = function(onSelect, onDeselect)
                 rectangleSelect(self.table.getElementsByTagName('td'), x1, y1, x2, y2, function()
                 {
                     var i = self.getNodeIndex(this);
-                    if (!self.onCellSelect || self.onCellSelect(td.parentNode._node, i, this))
+                    if (!self.onCellSelect || self.onCellSelect(this.parentNode._node, i, this))
                         this.className += ' selected';
                 });
-                return false;
+                if (document.selection)
+                    document.selection.empty();
+                else
+                    window.getSelection().removeAllRanges();
             }
         }
     });

treegridtest.htm

@@ -50,10 +50,11 @@ onDomReady(function()
     TG.initCellEditing();
 
     // Cell selection by mouse drag example
-    TG.initCellSelection(function(node, i, td)
+    TG.initCellSelection();
+    TG.onCellSelect = function(node, i, td)
     {
         return i > 0;
-    });
+    };
 });
 //-->
 </script>