Skip rendering when node is offscreen

- fix cell editing when virtual scroll is in use
- fix slight height targeting problems in Chrome and IE
- fix node hover highlight
- fix dynamic node list modification

treegrid.css

@@ -34,6 +34,7 @@ table.grid
 {
 	border-collapse: separate;
 	border-spacing: 0;
+	outline: 0;
 }
 
 table.grid > *:first-child > tr:first-child > *, table.grid > tr:first-child > *
@@ -111,7 +112,7 @@ table.grid .collapser-expanded
 /* cell editor */
 table.grid .celleditor
 {
-	padding: 0;
+	padding: 0 !important;
 	position: relative;
 }
 
@@ -158,6 +159,16 @@ table.grid .celleditor input
 	z-index: 1;
 }
 
+.grid-no-sticky-col .grid-body-wrapper
+{
+	padding-left: 0;
+}
+
+.grid-no-sticky-col .grid-fixed-row-wrapper
+{
+	padding-left: 0;
+}
+
 .grid-fixed-cell
 {
 	position: absolute;
@@ -169,6 +180,15 @@ table.grid .celleditor input
 	z-index: 4;
 }
 
+.grid-fixed-col-sizer
+{
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	z-index: 0;
+}
+
 .grid-fixed-col-wrapper2
 {
 	position: absolute;

treegridtest.htm

@@ -16,10 +16,26 @@ th, td { border-width: 0 1px 1px 0 !important; }
 <!--
 (function()
 {
-    var i = {
-        data: [ 'Payment from Gazprom to Shell 2', '4', '5' ]
-    };
-    var TG = window.TG = new TreeGrid({ header: [], items: [], bind: { rowSpan: true }, stickyHeaders: true, stickyColumnWidth: '200px', renderer: function(node)
+    var items = [];
+    for (var i = 0; i < 1000; i++)
+    {
+        items[i] = {
+            data: [ 'Payment from Gazprom to Shell '+i, (Math.random()+'').substr(0, 6), '', (Math.random()+'').substr(0, 6) ],
+            collapsed: true,
+            children: []
+        };
+        for (var j = 0; j < 5; j++)
+        {
+            items[i].children[j] = {
+                data: [ 'Subpayment '+i+' / '+j, 231, 231 ],
+                leaf: true
+            };
+        }
+    }
+    //var TG = window.TG = new TreeGrid({ header: [], items: [], bind: { rowSpan: true }, stickyHeaders: true, stickyColumnWidth: '200px', renderer: function(node)
+    var TG = window.TG = new TreeGrid({ header: [
+        '', '15 фев', '16 фев', '17 фев', '18 фев'
+    ], items: items, bind: { rowSpan: true }, stickyHeaders: true, stickyColumnWidth: '200px', renderer: function(node)
     {
         var cells = [];
         for (var i = 0; i < node.data.length; i++)
@@ -32,11 +48,24 @@ th, td { border-width: 0 1px 1px 0 !important; }
         }
         return cells;
     } });
-    document.body.appendChild(TG.wrapper);
-    setTimeout(function() {
+    document.body.appendChild(TG.wrapper||TG.table);
+    TG.syncView();
+    /*setTimeout(function() {
         TG.setHeader([ '', '15 фев', '16 фев', '17 фев', '18 фев', '19 фев', '20 фев', '21 фев', '15 фев', '16 фев', '17 фев', '18 фев', '19 фев', '20 фев', '21 фев', '15 фев', '16 фев', '17 фев', '18 фев', '19 фев', '20 фев', '21 фев', '15 фев', '16 фев', '17 фев', '18 фев', '19 фев', '20 фев', '21 фев' ]);
         TG.root.setChildren(false, [ {
-            data: [ 'Payment from Gazprom to Shell', '2', '3' ]
+            data: [ 'Payment from Gazprom to Shell', '2', '3' ],
+            children: [ {
+                data: [ 'Payment from Gazprom to Shell', '2', '3' ],
+            }, {
+                data: [ 'Payment from Gazprom to Shell', '2', '31203' ],
+                rows: 2
+            }, {
+                data: [ 'Payment from Gazprom to Shell', '2', '329x<br>2' ]
+            }, {
+                data: [ 'Payment from Gazprom to Shell', '2', '239000' ]
+            }, {
+                data: [ 'Payment from Gazprom to Shell', '2', 'aaaaa' ]
+            } ]
         }, {
             data: [ 'Payment from Gazprom to Shell', '2', '31203' ],
             rows: 2
@@ -72,7 +101,7 @@ th, td { border-width: 0 1px 1px 0 !important; }
     TG.onCellSelect = function(node, i, td)
     {
         return i > 0;
-    };
+    };*/
 })();
 //-->
 </script>