diff --git a/README.md b/README.md index 6e6ec07..b492dcf 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,10 @@ 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. +* Column option: unfiltered (If set to true, that column will not have a header filter available). + Overlays (ext.overlays.js) -------- 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..8b5a03a --- /dev/null +++ b/examples/example-3-with-sort-and-search.htm @@ -0,0 +1,260 @@ + + + + + + + SlickGrid Filter and Overlay example + + + + + + +
+ +
+
+
+
+ +
+ + + + + + + + + + + + + + + diff --git a/ext.headerfilter.js b/ext.headerfilter.js index 62841cf..43c6ba5 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; @@ -59,8 +60,9 @@ } function handleHeaderCellRendered(e, args) { - console.log('handleHeaderCellRendered'); + //console.log('handleHeaderCellRendered'); var column = args.column; + if(column.unfiltered) { return false; } var $el = $("
") .addClass("slick-header-menubutton") @@ -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 = ""; @@ -151,10 +155,10 @@ $('') .appendTo($menu) - .bind('click', function () { + .bind('click', function (ec) { columnDef.filterValues.length = 0; setButtonImage($menuButton, false); - handleApply(e, columnDef); + handleApply(ec, columnDef); }); $('') @@ -170,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. + e.preventDefault(); + e.stopPropagation(); } function columnsResized() { @@ -269,4 +277,4 @@ "onCommand": new Slick.Event() }); } -})(jQuery); \ No newline at end of file +})(jQuery); 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;