From 3727536bf3eec353cb770db5a46cea856fcd3247 Mon Sep 17 00:00:00 2001
From: James Silberbauer <jamessil@telkomsa.net>
Date: Mon, 24 Jun 2013 21:46:42 +0200
Subject: [PATCH 1/8] sortAvailable option.

Defaults to true. When false the sort ascending and descending menu
items are not available. Set to false when using slick grid's multi
column sorting.
---
 ext.headerfilter.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/ext.headerfilter.js b/ext.headerfilter.js
index 62841cf..69ebecb 100644
--- a/ext.headerfilter.js
+++ b/ext.headerfilter.js
@@ -23,7 +23,8 @@
             buttonImage: "../images/down.png",
             filterImage: "../images/filter.png",
             sortAscImage: "../images/sort-asc.png",
-            sortDescImage: "../images/sort-desc.png"
+            sortDescImage: "../images/sort-desc.png",
+            sortAvailable: true
         };
         var $menu;
 
@@ -99,6 +100,7 @@
         }
 
         function showFilter(e) {
+            e.stopPropagation();
             var $menuButton = $(this);
             var columnDef = $menuButton.data("column");
 
@@ -124,8 +126,10 @@
 
             $menu.empty();
 
-            addMenuItem($menu, columnDef, 'Sort Ascending', 'sort-asc', options.sortAscImage);
-            addMenuItem($menu, columnDef, 'Sort Descending', 'sort-desc', options.sortDescImage);
+            if(options.sortAvailable) {
+              addMenuItem($menu, columnDef, 'Sort Ascending', 'sort-asc', options.sortAscImage);
+              addMenuItem($menu, columnDef, 'Sort Descending', 'sort-desc', options.sortDescImage);
+            }
 
             var filterOptions = "<label><input type='checkbox' value='-1' />(Select All)</label>";
 
@@ -269,4 +273,4 @@
             "onCommand": new Slick.Event()
         });
     }
-})(jQuery);
\ No newline at end of file
+})(jQuery);

From a41ae4c54c7ee4dd49067794ea65d66139054960 Mon Sep 17 00:00:00 2001
From: James Silberbauer <jamessil@telkomsa.net>
Date: Mon, 24 Jun 2013 22:36:17 +0200
Subject: [PATCH 2/8] Add sortAvailable option to README.

---
 README.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/README.md b/README.md
index 6e6ec07..fb4898a 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,9 @@ This adds a filter to the column header, displaying an ordered list of the value
 
 The plugin relies on the grid data being sourced from a DataView as it handles the filtering.
 
+Options:
+* sortAvailable (default: true). Set to false to remove the ability to sort columns via the plugin.
+
 Overlays (ext.overlays.js)
 --------
 

From a1e5d8d4c59ee2bd6b9283be991a5e8e3bfb819a Mon Sep 17 00:00:00 2001
From: James Silberbauer <jamessil@telkomsa.net>
Date: Mon, 24 Jun 2013 22:41:32 +0200
Subject: [PATCH 3/8] Add ability to have unfiltered columns.

---
 README.md           | 1 +
 ext.headerfilter.js | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index fb4898a..b492dcf 100644
--- a/README.md
+++ b/README.md
@@ -12,6 +12,7 @@ The plugin relies on the grid data being sourced from a DataView as it handles t
 
 Options:
 * sortAvailable (default: true). Set to false to remove the ability to sort columns via the plugin.
+* Column option: unfiltered (If set to true, that column will not have a header filter available).
 
 Overlays (ext.overlays.js)
 --------
diff --git a/ext.headerfilter.js b/ext.headerfilter.js
index 69ebecb..145e3bb 100644
--- a/ext.headerfilter.js
+++ b/ext.headerfilter.js
@@ -60,8 +60,9 @@
         }
 
         function handleHeaderCellRendered(e, args) {
-            console.log('handleHeaderCellRendered');
+            //console.log('handleHeaderCellRendered');
             var column = args.column;
+            if(column.unfiltered) { return false; }
 
             var $el = $("<div></div>")
                 .addClass("slick-header-menubutton")

From c7cef520358e0f1a98451e672108f08f3ca0da3b Mon Sep 17 00:00:00 2001
From: James Silberbauer <jamessil@telkomsa.net>
Date: Tue, 2 Jul 2013 10:48:30 +0200
Subject: [PATCH 4/8] Make label css more specific.

---
 plugins-common.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins-common.css b/plugins-common.css
index d25c1aa..b665d5a 100644
--- a/plugins-common.css
+++ b/plugins-common.css
@@ -46,7 +46,7 @@
     width: 200px;
 }
 
-label
+div .filter label
 {
     display: block;
     margin-bottom: 5px;

From 5fb89c1cbf39bdf879031f6d919bc9e5839554e8 Mon Sep 17 00:00:00 2001
From: James Silberbauer <jamessil@telkomsa.net>
Date: Tue, 2 Jul 2013 10:49:23 +0200
Subject: [PATCH 5/8] Multi-column sorting example.

---
 css/slick.grid.css                          |   4 +-
 examples/example-3-with-sort-and-search.htm | 218 ++++++++++++++++++++
 ext.headerfilter.js                         |   5 +-
 3 files changed, 224 insertions(+), 3 deletions(-)
 create mode 100644 examples/example-3-with-sort-and-search.htm

diff --git a/css/slick.grid.css b/css/slick.grid.css
index 6a416db..8b2f35f 100644
--- a/css/slick.grid.css
+++ b/css/slick.grid.css
@@ -53,11 +53,11 @@ classes should alter those!
 }
 
 .slick-sort-indicator-desc {
-  background: url(images/sort-desc.gif);
+  background: url(../images/sort-desc.png);
 }
 
 .slick-sort-indicator-asc {
-  background: url(images/sort-asc.gif);
+  background: url(../images/sort-asc.png);
 }
 
 .slick-resizable-handle {
diff --git a/examples/example-3-with-sort-and-search.htm b/examples/example-3-with-sort-and-search.htm
new file mode 100644
index 0000000..894914c
--- /dev/null
+++ b/examples/example-3-with-sort-and-search.htm
@@ -0,0 +1,218 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        
+        <!--Example based on SlickGrid examples - https://github.com/mleibman/SlickGrid/tree/master/examples -->
+        <meta http-equiv="Content-Type" content="text/html">
+        <title>SlickGrid Filter and Overlay example</title>
+        <link rel="stylesheet" href="../css/slick.grid.css" type="text/css" />
+        <link rel="stylesheet" href="../plugins-common.css" type="text/css" />
+        <link rel="stylesheet" href="../plugins-excel-style.css" type="text/css" />
+        <style>
+            #status {
+                position: absolute;
+                bottom: 0;
+                background-color: #217346;
+                color: white;
+                height: 26px;
+                width: 100%;
+            }
+
+            .excel-grid {
+                position: absolute;
+                top: 95px;
+                left: 0;
+                right: 0;
+                bottom: 26px;
+            }
+            .slick-sort-indicator {
+              float:right;
+              margin-right:20px;
+              margin-top: -10px;
+            }
+
+            #status-label {
+                margin: 4px;
+            }
+        </style>
+    </head>
+<body>
+    <div>
+        <ul>
+            <li>Demonstrates the Row and Header overlays, the Selected Cell overlay, filter, and Fill Down</li>
+            <li>The <i>Title</i> column is editable so has the fill down function enabled</li>
+            <li>Sorting from the filer menu is turned off. Columns can be sorted by clicking on the header. Multi-sort works by holding down shift when clicking on a second header</li>
+            <li>The search box allows for searching all columns within filtered rows</li>
+            <li>The Row column has filtering turned off</li>
+        </ul>
+    </div>
+    <div id="grid" class="excel-grid">
+    </div>
+    <div id="status">
+        <label id="status-label"></label>
+    </div>
+    <script type="text/javascript" src="../scripts/jquery-1.10.1.js"></script>
+    <script type="text/javascript" src="../scripts/jquery.event.drag.js"></script>
+    <script type="text/javascript" src="../scripts/SlickGrid/slick.core.js"></script>
+    <script type="text/javascript" src="../scripts/SlickGrid/slick.grid.js"></script>
+    <script type="text/javascript" src="../scripts/SlickGrid/slick.dataview.js"></script>
+    <script type="text/javascript" src="../scripts/SlickGrid/slick.editors.js"></script>
+    <script type="text/javascript" src="../scripts/SlickGrid/Plugins/slick.cellrangeselector.js"></script>
+    <script type="text/javascript" src="../scripts/SlickGrid/Plugins/slick.cellselectionmodel.js"></script>
+    <script type="text/javascript" src="../scripts/SlickGrid/Plugins/slick.cellrangedecorator.js"></script>
+    <script type="text/javascript" src="../scripts/underscore.js"></script>
+    <script type="text/javascript" src="../ext.headerfilter.js"></script>
+    <script type="text/javascript" src="../ext.overlays.js"></script>
+    <script>
+        var grid;
+        var columns = [
+            { id: "rn", name: "row", field: "rn", width: 40, cannotTriggerInsert:true, resizable:false, unselectable:true, sortable:false, unfiltered:true },
+            { id: "id", name: "Id", field: "id", width: 80, sortable:true },
+            { id: "title", name: "Title", field: "title", editor: Slick.Editors.Text, width: 180, sortable:true },
+            { id: "duration", name: "Duration", field: "duration", width: 100, sortable:true },
+            { id: "pc", name: "% Complete", field: "percentComplete", width: 100, sortable:true },
+            { id: "start", name: "Start", field: "start", width: 80, sortable:true },
+            { id: "finish", name: "Finish", field: "finish", width: 80, sortable:true },
+            { id: "effort-driven", name: "Effort Driven", field: "effortDriven", width: 120, sortable:true }
+        ];
+
+        var options = {
+            enableCellNavigation: true,
+            enableColumnReorder: false,
+            explicitInitialization: true,
+            editable: true,
+            rowHeight: 22,
+            multiColumnSort: true
+        };
+
+        $(function () {
+            var data = [];
+            for (var i = 0; i < 500; i++) {
+                data[i] = {
+                    rn: i+1,
+                    id: i,
+                    title: "Task " + i,
+                    duration: i % 20 + " days",
+                    percentComplete: Math.round(Math.random() * 100),
+                    start: "01/01/2013",
+                    finish: "01/05/2013",
+                    effortDriven: (i % 5 == 0)
+                };
+            }
+
+            // Need to use a DataView for the filter plugin
+            var dataView = new Slick.Data.DataView();
+
+            grid = new Slick.Grid("#grid", dataView, columns, options);
+
+            grid.setSelectionModel(new Slick.CellSelectionModel());
+
+            dataView.onRowCountChanged.subscribe(function (e, args) {
+                grid.updateRowCount();
+                grid.render();
+            });
+
+            dataView.onRowsChanged.subscribe(function (e, args) {
+                grid.invalidateRows(args.rows);
+                grid.render();
+            });
+
+            grid.onSort.subscribe(function (e, args) {
+              gridSorter(args.sortCols, dataView);
+            });
+
+            function gridSorter(sortCols, dataview) {
+              dataview.sort(function (row1, row2) {
+                for (var i = 0, l = sortCols.length; i < l; i++) {
+                    var field = sortCols[i].sortCol.field;
+                    var sign = sortCols[i].sortAsc ? 1 : -1;
+                    var x = row1[field], y = row2[field];
+                    var result = (x < y ? -1 : (x > y ? 1 : 0)) * sign;
+                    if (result != 0) {
+                        return result;
+                    }
+                }
+                return 0;
+              }, true);
+            }
+
+            dataView.beginUpdate();
+            dataView.setItems(data);
+            dataView.setFilter(filter);
+            dataView.endUpdate();
+
+            var filterPlugin = new Ext.Plugins.HeaderFilter({sortAvailable: false});
+
+            // This event is fired when a filter is selected
+            filterPlugin.onFilterApplied.subscribe(function () {
+                dataView.refresh();
+                grid.resetActiveCell();
+
+                // Excel like status bar at the bottom
+                var status;
+
+                if (dataView.getLength() === dataView.getItems().length) {
+                    status = "";
+                } else {
+                    status = dataView.getLength() + ' OF ' + dataView.getItems().length + ' RECORDS FOUND';
+                }
+                $('#status-label').text(status);
+            });
+
+            // Event fired when a menu option is selected
+            filterPlugin.onCommand.subscribe(function (e, args) {
+                dataView.fastSort(args.column.field, args.command === "sort-asc");
+            });
+
+            grid.registerPlugin(filterPlugin);
+
+            var overlayPlugin = new Ext.Plugins.Overlays({});
+
+            // Event fires when a range is selected
+            overlayPlugin.onFillUpDown.subscribe(function (e, args) {
+                var column = grid.getColumns()[args.range.fromCell];
+
+                // Ensure the column is editable
+                if (!column.editor) {
+                    return;
+                }
+
+                // Find the initial value
+                var value = dataView.getItem(args.range.fromRow)[column.field];
+
+                dataView.beginUpdate();
+
+                // Copy the value down
+                for (var i = args.range.fromRow + 1; i <= args.range.toRow; i++) {
+                    dataView.getItem(i)[column.field] = value;
+                    grid.invalidateRow(i);
+                }
+
+                dataView.endUpdate();
+                grid.render();
+            });
+
+            grid.registerPlugin(overlayPlugin);
+
+            grid.init();
+
+            // Filter the data (using userscore's _.contains)
+            function filter(item) {
+                var columns = grid.getColumns();
+
+                var value = true;
+
+                for (var i = 0; i < columns.length; i++) {
+                    var col = columns[i];
+                    var filterValues = col.filterValues;
+
+                    if (filterValues && filterValues.length > 0) {
+                        value = value & _.contains(filterValues, item[col.field]);
+                    }
+                }
+                return value;
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/ext.headerfilter.js b/ext.headerfilter.js
index 145e3bb..35df437 100644
--- a/ext.headerfilter.js
+++ b/ext.headerfilter.js
@@ -101,7 +101,6 @@
         }
 
         function showFilter(e) {
-            e.stopPropagation();
             var $menuButton = $(this);
             var columnDef = $menuButton.data("column");
 
@@ -175,6 +174,10 @@
 
             $menu.css("top", offset.top + $(this).height())
                  .css("left", (left > 0 ? left : 0));
+            // Stop propagation so that it doesn't register as a header click event.
+            // THIS CORRECTLY STOPS THE HEADER SORT, BUT THEN ALSO BLOCKS BEHAVIOUR OF THE CLEAR BUTTON...
+            // e.preventDefault();
+            // e.stopPropagation();
         }
 
         function columnsResized() {

From 3baa8ace4a1fea1f041305032fabf38fd84dd837 Mon Sep 17 00:00:00 2001
From: James Silberbauer <jamessil@telkomsa.net>
Date: Tue, 2 Jul 2013 11:58:49 +0200
Subject: [PATCH 6/8] Search within filtered rows.

---
 examples/example-3-with-sort-and-search.htm | 43 +++++++++++++++++++--
 1 file changed, 40 insertions(+), 3 deletions(-)

diff --git a/examples/example-3-with-sort-and-search.htm b/examples/example-3-with-sort-and-search.htm
index 894914c..5a355b0 100644
--- a/examples/example-3-with-sort-and-search.htm
+++ b/examples/example-3-with-sort-and-search.htm
@@ -42,7 +42,7 @@
             <li>Demonstrates the Row and Header overlays, the Selected Cell overlay, filter, and Fill Down</li>
             <li>The <i>Title</i> column is editable so has the fill down function enabled</li>
             <li>Sorting from the filer menu is turned off. Columns can be sorted by clicking on the header. Multi-sort works by holding down shift when clicking on a second header</li>
-            <li>The search box allows for searching all columns within filtered rows</li>
+            <li>The search box allows for searching all columns within filtered rows: <input type='text' id='search' placeholder='Search...' style='width:100px;margin-left:20px;' /></li>
             <li>The Row column has filtering turned off</li>
         </ul>
     </div>
@@ -65,6 +65,7 @@
     <script type="text/javascript" src="../ext.overlays.js"></script>
     <script>
         var grid;
+        var searchString = '';
         var columns = [
             { id: "rn", name: "row", field: "rn", width: 40, cannotTriggerInsert:true, resizable:false, unselectable:true, sortable:false, unfiltered:true },
             { id: "id", name: "Id", field: "id", width: 80, sortable:true },
@@ -138,6 +139,9 @@
 
             dataView.beginUpdate();
             dataView.setItems(data);
+            dataView.setFilterArgs({
+              searchString: searchString
+            });
             dataView.setFilter(filter);
             dataView.endUpdate();
 
@@ -196,11 +200,35 @@
 
             grid.init();
 
+            $('#search').keyup(function (e) {
+              Slick.GlobalEditorLock.cancelCurrentEdit();
+
+              // clear on Esc
+              if (e.which == 27) {
+                this.value = "";
+              }
+
+              searchString = this.value;
+              updateFilter();
+            });
+
+            function updateFilter() {
+              dataView.setFilterArgs({
+                searchString: searchString
+              });
+              dataView.refresh();
+            }
+
             // Filter the data (using userscore's _.contains)
-            function filter(item) {
-                var columns = grid.getColumns();
+            function filter(item, args) {
+                // Get columns, but exclude non-filterable ones.
+                var columns = [];
+                $.each(grid.getColumns(), function(i,val) {
+                  if(!val.unfiltered) { columns.push(val); }
+                });
 
                 var value = true;
+                var searchHit = false;
 
                 for (var i = 0; i < columns.length; i++) {
                     var col = columns[i];
@@ -210,6 +238,15 @@
                         value = value & _.contains(filterValues, item[col.field]);
                     }
                 }
+                if(value && args.searchString != '') {
+                  for (var i = 0; i < columns.length; i++) {
+                      var col = columns[i];
+                      if (String(item[col.field]).toLowerCase().indexOf(args.searchString.toLowerCase()) !== -1) {
+                        searchHit = true;
+                      }
+                  }
+                  return searchHit;
+                }
                 return value;
             }
         });

From 7b881e947863a3a68ac0214f0c78b78118ef17eb Mon Sep 17 00:00:00 2001
From: James Silberbauer <jamessil@telkomsa.net>
Date: Fri, 5 Jul 2013 22:16:17 +0200
Subject: [PATCH 7/8] Stop propagation of header click.

---
 ext.headerfilter.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/ext.headerfilter.js b/ext.headerfilter.js
index 35df437..43c6ba5 100644
--- a/ext.headerfilter.js
+++ b/ext.headerfilter.js
@@ -155,10 +155,10 @@
 
             $('<button>Clear</button>')
                 .appendTo($menu)
-                .bind('click', function () {
+                .bind('click', function (ec) {
                     columnDef.filterValues.length = 0;
                     setButtonImage($menuButton, false);
-                    handleApply(e, columnDef);
+                    handleApply(ec, columnDef);
                 });
 
             $('<button>Cancel</button>')
@@ -174,10 +174,10 @@
 
             $menu.css("top", offset.top + $(this).height())
                  .css("left", (left > 0 ? left : 0));
+
             // Stop propagation so that it doesn't register as a header click event.
-            // THIS CORRECTLY STOPS THE HEADER SORT, BUT THEN ALSO BLOCKS BEHAVIOUR OF THE CLEAR BUTTON...
-            // e.preventDefault();
-            // e.stopPropagation();
+            e.preventDefault();
+            e.stopPropagation();
         }
 
         function columnsResized() {

From a7a6322f9e6a4612abb351c3a1c9c2577a00a03c Mon Sep 17 00:00:00 2001
From: James Silberbauer <jamessil@telkomsa.net>
Date: Sat, 6 Jul 2013 18:55:38 +0200
Subject: [PATCH 8/8] Example 3 - show status on search as well as on filter.

---
 examples/example-3-with-sort-and-search.htm | 23 +++++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/examples/example-3-with-sort-and-search.htm b/examples/example-3-with-sort-and-search.htm
index 5a355b0..8b5a03a 100644
--- a/examples/example-3-with-sort-and-search.htm
+++ b/examples/example-3-with-sort-and-search.htm
@@ -137,6 +137,18 @@
               }, true);
             }
 
+            function showStatusCounts() {
+                // Excel like status bar at the bottom
+                var status;
+
+                if (dataView.getLength() === dataView.getItems().length) {
+                    status = "";
+                } else {
+                    status = dataView.getLength() + ' OF ' + dataView.getItems().length + ' RECORDS FOUND';
+                }
+                $('#status-label').text(status);
+            }
+
             dataView.beginUpdate();
             dataView.setItems(data);
             dataView.setFilterArgs({
@@ -151,16 +163,8 @@
             filterPlugin.onFilterApplied.subscribe(function () {
                 dataView.refresh();
                 grid.resetActiveCell();
+                showStatusCounts();
 
-                // Excel like status bar at the bottom
-                var status;
-
-                if (dataView.getLength() === dataView.getItems().length) {
-                    status = "";
-                } else {
-                    status = dataView.getLength() + ' OF ' + dataView.getItems().length + ' RECORDS FOUND';
-                }
-                $('#status-label').text(status);
             });
 
             // Event fired when a menu option is selected
@@ -217,6 +221,7 @@
                 searchString: searchString
               });
               dataView.refresh();
+              showStatusCounts();
             }
 
             // Filter the data (using userscore's _.contains)