Added a fixed header row and an example of how to use it to implement inline column filters.

Renamed "secondary header row" to "top panel" for clarity.

1 files changed, 77 insertions, 31 deletions

diff --git a/slick.grid.js b/slick.grid.js
index 08e982f..8a3a09b 100644
--- a/slick.grid.js
+++ b/slick.grid.js
@@ -73,8 +73,10 @@ if (typeof Slick === "undefined") {
             asyncPostRenderDelay: 60,
             autoHeight: false,
             editorLock: Slick.GlobalEditorLock,
-            showSecondaryHeaderRow: false,
-            secondaryHeaderRowHeight: 25,
+            showHeaderRow: false,
+            headerRowHeight: 25,
+            showTopPanel: false,
+            topPanelHeight: 25,
             syncColumnCellResize: false,
             formatterFactory: null,
             editorFactory: null,
@@ -88,7 +90,9 @@ if (typeof Slick === "undefined") {
             name: "",
             resizable: true,
             sortable: false,
-            minWidth: 30
+            minWidth: 30,
+            rerenderOnResize: false,
+            unselectable: false
         };
 
         // scroller
@@ -109,8 +113,9 @@ if (typeof Slick === "undefined") {
         var self = this;
         var $headerScroller;
         var $headers;
-        var $secondaryHeaderScroller;
-        var $secondaryHeaders;
+        var $headerRow, $headerRowScroller;
+        var $topPanelScroller;
+        var $topPanel;
         var $viewport;
         var $canvas;
         var $style;
@@ -203,11 +208,18 @@ if (typeof Slick === "undefined") {
             $headerScroller = $("<div class='slick-header ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container);
             $headers = $("<div class='slick-header-columns' style='width:100000px; left:-10000px' />").appendTo($headerScroller);
 
-            $secondaryHeaderScroller = $("<div class='slick-header-secondary ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container);
-            $secondaryHeaders = $("<div class='slick-header-columns-secondary' style='width:100000px' />").appendTo($secondaryHeaderScroller);
+            $headerRowScroller = $("<div class='slick-headerrow ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container);
+            $headerRow = $("<div class='slick-headerrow-columns' style='width:100000px;' />").appendTo($headerRowScroller);
 
-            if (!options.showSecondaryHeaderRow) {
-                $secondaryHeaderScroller.hide();
+            $topPanelScroller = $("<div class='slick-top-panel-scroller ui-state-default' style='overflow:hidden;position:relative;' />").appendTo($container);
+            $topPanel = $("<div class='slick-top-panel' style='width:100000px' />").appendTo($topPanelScroller);
+
+            if (!options.showTopPanel) {
+                $topPanelScroller.hide();
+            }
+
+            if (!options.showHeaderRow) {
+                $headerRowScroller.hide();
             }
 
             $viewport = $("<div class='slick-viewport' tabIndex='0' hideFocus style='width:100%;overflow-x:auto;outline:0;position:relative;overflow-y:auto;'>").appendTo($container);
@@ -217,10 +229,7 @@ if (typeof Slick === "undefined") {
             // calculate the diff so we can set consistent sizes
             measureCellPaddingAndBorder();
 
-            $viewport.height(
-                $container.innerHeight() -
-                $headerScroller.outerHeight() -
-                (options.showSecondaryHeaderRow ? $secondaryHeaderScroller.outerHeight() : 0));
+            resizeViewport();
 
             // for usability reasons, all text selection in SlickGrid is disabled
             // with the exception of input and textarea elements (selection must
@@ -370,6 +379,17 @@ if (typeof Slick === "undefined") {
             }
         }
 
+        function getHeaderRow() {
+            return $headerRow[0];
+        }
+
+        function getHeaderRowColumn(columnId) {
+            var idx = getColumnIndex(columnId);
+            var $header = $headerRow.children().eq(idx);
+            return $header && $header[0];
+        }
+
+
         function createColumnHeaders() {
             var i;
 
@@ -381,6 +401,7 @@ if (typeof Slick === "undefined") {
             }
 
             $headers.empty();
+            $headerRow.empty();
             columnsById = {};
 
             for (i = 0; i < columns.length; i++) {
@@ -401,6 +422,10 @@ if (typeof Slick === "undefined") {
                 if (m.sortable) {
                     header.append("<span class='slick-sort-indicator' />");
                 }
+
+                if (options.showHeaderRow) {
+                    $("<div class='ui-state-default slick-headerrow-column c" + i + "'></div>").appendTo($headerRow);
+                }
             }
 
             setSortColumn(sortColumnId,sortAsc);
@@ -651,7 +676,8 @@ if (typeof Slick === "undefined") {
 
             var rules = [
                 "." + uid + " .slick-header-column { left: 10000px; }",
-                "." + uid + " .slick-header-columns-secondary {  height:" + options.secondaryHeaderRowHeight + "px; }",
+                "." + uid + " .slick-top-panel { height:" + options.topPanelHeight + "px; }",
+                "." + uid + " .slick-headerrow-columns { height:" + options.headerRowHeight + "px; }",
                 "." + uid + " .slick-cell { height:" + rowHeight + "px; }"
             ];
 
@@ -895,18 +921,28 @@ if (typeof Slick === "undefined") {
             }
         }
 
-        function getSecondaryHeaderRow() {
-            return $secondaryHeaders[0];
+        function getTopPanel() {
+            return $topPanel[0];
+        }
+
+        function showTopPanel() {
+            options.showTopPanel = true;
+            $topPanelScroller.slideDown("fast", resizeCanvas);
+        }
+
+        function hideTopPanel() {
+            options.showTopPanel = false;
+            $topPanelScroller.slideUp("fast", resizeCanvas);
         }
 
-        function showSecondaryHeaderRow() {
-            options.showSecondaryHeaderRow = true;
-            $secondaryHeaderScroller.slideDown("fast", resizeCanvas);
+        function showHeaderRowColumns() {
+            options.showHeaderRow = true;
+            $headerRowScroller.slideDown("fast", resizeCanvas);
         }
 
-        function hideSecondaryHeaderRow() {
-            options.showSecondaryHeaderRow = false;
-            $secondaryHeaderScroller.slideUp("fast", resizeCanvas);
+        function hideHeaderRowColumns() {
+            options.showHeaderRow = false;
+            $headerRowScroller.slideUp("fast", resizeCanvas);
         }
 
         //////////////////////////////////////////////////////////////////////////////////////////////
@@ -1075,16 +1111,21 @@ if (typeof Slick === "undefined") {
             invalidatePostProcessingResults(row);
         }
 
+        function resizeViewport() {
+            $viewport.height(
+                $container.innerHeight() -
+                $headerScroller.outerHeight() -
+                (options.showTopPanel ? $topPanelScroller.outerHeight() : 0) -
+                (options.showHeaderRow ? $headerRow.outerHeight() : 0));
+        }
+
         function resizeCanvas() {
             var newViewportH = options.rowHeight * (getDataLength() + (options.enableAddRow ? 1 : 0) + (options.leaveSpaceForNewRows? numVisibleRows - 1 : 0));
             if (options.autoHeight) { // use computed height to set both canvas _and_ divMainScroller, effectively hiding scroll bars.
                 $viewport.height(newViewportH);
             }
             else {
-                $viewport.height(
-                        $container.innerHeight() -
-                        $headerScroller.outerHeight() -
-                        (options.showSecondaryHeaderRow ? $secondaryHeaderScroller.outerHeight() : 0));
+                resizeViewport();
             }
 
             viewportW = $viewport.innerWidth();
@@ -1274,7 +1315,8 @@ if (typeof Slick === "undefined") {
             if (scrollLeft !== prevScrollLeft) {
                 prevScrollLeft = scrollLeft;
                 $headerScroller[0].scrollLeft = scrollLeft;
-                $secondaryHeaderScroller[0].scrollLeft = scrollLeft;
+                $topPanelScroller[0].scrollLeft = scrollLeft;
+                $headerRowScroller[0].scrollLeft = scrollLeft;
             }
 
             if (!scrollDist) return;
@@ -2232,11 +2274,15 @@ if (typeof Slick === "undefined") {
             "navigateLeft":                 navigateLeft,
             "navigateRight":                navigateRight,
             "gotoCell":                     gotoCell,
-            "getSecondaryHeaderRow":        getSecondaryHeaderRow,
-            "showSecondaryHeaderRow":       showSecondaryHeaderRow,
-            "hideSecondaryHeaderRow":       hideSecondaryHeaderRow,
+            "getTopPanel":              getTopPanel,
+            "showTopPanel":                 showTopPanel,
+            "hideTopPanel":                 hideTopPanel,
+
+            "showHeaderRowColumns":         showHeaderRowColumns,
+            "hideHeaderRowColumns":         hideHeaderRowColumns,
+            "getHeaderRow":                 getHeaderRow,
+            "getHeaderRowColumn":           getHeaderRowColumn,
             "getGridPosition":              getGridPosition,
-
             "flashCell":                    flashCell,
             "addCellCssStyles":             addCellCssStyles,
             "setCellCssStyles":             setCellCssStyles,