diff --git a/treegrid.css b/treegrid.css index 2ac871f..c38914a 100644 --- a/treegrid.css +++ b/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 > * @@ -169,6 +170,15 @@ table.grid .celleditor input z-index: 4; } +.grid-fixed-col-sizer +{ + position: absolute; + left: 0; + top: 0; + width: 1px; + z-index: 0; +} + .grid-fixed-col-wrapper2 { position: absolute; diff --git a/treegrid.js b/treegrid.js index 4802a90..53e8bd9 100644 --- a/treegrid.js +++ b/treegrid.js @@ -85,6 +85,7 @@ function TreeGrid(options) this.bindProps[i] = 1; this.levelIndent = 20; this.table = document.createElement('table'); + this.table.tabIndex = 0; this.table.className = 'grid'; this.thead = document.createElement('thead'); this.tbody = document.createElement('tbody'); @@ -122,6 +123,9 @@ function TreeGrid(options) this.fixedCol.appendChild(this.fixedColBody); this.fixedColWrapper = document.createElement('div'); this.fixedColWrapper.className = 'grid-fixed-col-wrapper'; + this.fixedColSizer = document.createElement('div'); + this.fixedColSizer.className = 'grid-fixed-col-sizer'; + this.fixedColWrapper.appendChild(this.fixedColSizer); this.fixedColWrapper.appendChild(this.fixedCol); this.fixedColWrapper2 = document.createElement('div'); this.fixedColWrapper2.className = 'grid-fixed-col-wrapper2'; @@ -131,6 +135,9 @@ function TreeGrid(options) this.wrapper.className = 'grid-wrapper'; this.tableWrapper = document.createElement('div'); this.tableWrapper.className = 'grid-body-wrapper'; + this.tableSizer = document.createElement('div'); + this.tableSizer.className = 'grid-fixed-col-sizer'; + this.tableWrapper.appendChild(this.tableSizer); this.tableWrapper.appendChild(this.table); this.wrapper.appendChild(this.tableWrapper); // sticky column width @@ -486,6 +493,8 @@ TreeGrid.prototype.syncView = function() var lastFirst = endStart+this._findVisibleNodeOffset(lastNodes, offsetHeight); var avgItemHeight = this.endItemHeight / lastNodes.length; avgItemHeight = (avgItemHeight < this.minItemHeight ? this.minItemHeight : avgItemHeight); + this.fixedColSizer.style.height = (this.nodeCount*avgItemHeight)+'px'; + this.tableSizer.style.height = (this.nodeCount*avgItemHeight)+'px'; var scrollPos = this.nodeCount*avgItemHeight > this.tableWrapper.offsetHeight ? this.tableWrapper.scrollTop / (this.nodeCount*avgItemHeight - this.tableWrapper.offsetHeight) : 0; if (scrollPos > 1) @@ -493,7 +502,7 @@ TreeGrid.prototype.syncView = function() var firstVisible = scrollPos*lastFirst; var rangeStart = Math.floor(firstVisible); var rangeCount = visibleItems; - this._addPlaceholder('top'); + this._addPlaceholder('top', 0); var firstItemHeight; if (rangeStart >= endStart) { @@ -514,11 +523,16 @@ TreeGrid.prototype.syncView = function() var visibleNodes = this._findNodes(this.root, rangeStart, rangeCount); this._renderNodes(visibleNodes); this._syncStart(visibleNodes); - this._addPlaceholder('mid'); + this._addPlaceholder('mid', 0); firstItemHeight = getNodeHeight(visibleNodes[0])*(firstVisible-rangeStart); } this._setPlaceholder('top', this.tableWrapper.scrollTop-firstItemHeight); } + else + { + this.fixedColSizer.style.height = 0; + this.tableSizer.style.height = 0; + } this._finishSync(); // Then sync row sizes for fixed column to work properly var total = 0; @@ -545,7 +559,7 @@ TreeGrid.prototype.syncView = function() } this.syncStickyRow(); } - if (endStart > 0) + if (endStart > 0 && endStart > rangeStart+rangeCount) { this._setPlaceholder('mid', this.nodeCount*avgItemHeight - total - (this.tableWrapper.scrollTop-firstItemHeight)); }