Merge pull request #159 from ghiscoding/feature/columnpicker

made column picker more functional

Author: 6pac

controls/slick.columnpicker.css

@@ -5,8 +5,23 @@
   -moz-box-shadow: 2px 2px 2px silver;
   -webkit-box-shadow: 2px 2px 2px silver;
   box-shadow: 2px 2px 2px silver;
-  min-width: 100px;
+  min-width: 150px;
   cursor: default;
+  position:absolute;
+  z-index:20;
+	overflow:auto;
+  resize: both;
+}
+
+.slick-columnpicker > .close {
+  float: right;
+}
+
+.slick-columnpicker .title {
+  font-size: 16px;
+  width: 60%;
+  border-bottom: solid 1px #d6d6d6;
+  margin-bottom: 10px;
 }
 
 .slick-columnpicker li {

controls/slick.columnpicker.js

@@ -1,41 +1,60 @@
 (function ($) {
   function SlickColumnPicker(columns, grid, options) {
+    var $list;
     var $menu;
     var columnCheckboxes;
 
     var defaults = {
-      fadeSpeed:250
+      fadeSpeed: 250
     };
 
     function init() {
       grid.onHeaderContextMenu.subscribe(handleHeaderContextMenu);
       grid.onColumnsReordered.subscribe(updateColumnOrder);
       options = $.extend({}, defaults, options);
 
-      $menu = $("<span class='slick-columnpicker' style='display:none;position:absolute;z-index:20;overflow-y:scroll;' />").appendTo(document.body);
+      $menu = $("<div class='slick-columnpicker' style='display:none' />").appendTo(document.body);
+      $close = $("<button type='button' class='close' data-dismiss='slick-columnpicker' aria-label='Close'><span class='close' aria-hidden='true'>&times;</span></button>").appendTo($menu);
+
+      // user could pass a title on top of the columns list
+      if(options.columnPickerTitle) {
+        $title = $("<div class='title'/>").append(options.columnPickerTitle);
+        $title.appendTo($menu);
+      }
 
-      $menu.on("mouseleave", function (e) {
-        $(this).fadeOut(options.fadeSpeed)
-      });
       $menu.on("click", updateColumn);
+      $list = $("<span class='slick-columnpicker-list' />");
 
+      // Hide the menu on outside click.
+      $(document.body).on("mousedown", handleBodyMouseDown);
+
+      // destroy the picker if user leaves the page
+      $(window).on("beforeunload", destroy);
     }
 
     function destroy() {
       grid.onHeaderContextMenu.unsubscribe(handleHeaderContextMenu);
       grid.onColumnsReordered.unsubscribe(updateColumnOrder);
+      $(document.body).off("mousedown", handleBodyMouseDown);
+      $("div.slick-columnpicker").hide(options.fadeSpeed);
       $menu.remove();
     }
 
+    function handleBodyMouseDown(e) {
+      if (($menu && $menu[0] != e.target && !$.contains($menu[0], e.target)) || e.target.className == "close") {
+        $menu.hide(options.fadeSpeed);
+      }
+    }
+
     function handleHeaderContextMenu(e, args) {
       e.preventDefault();
-      $menu.empty();
+      $list.empty();
       updateColumnOrder();
       columnCheckboxes = [];
 
       var $li, $input;
       for (var i = 0; i < columns.length; i++) {
-        $li = $("<li />").appendTo($menu);
+        $li = $("<li />").appendTo($list);
         $input = $("<input type='checkbox' />").data("column-id", columns[i].id);
         columnCheckboxes.push($input);
 
@@ -49,8 +68,8 @@
             .appendTo($li);
       }
 
-      $("<hr/>").appendTo($menu);
-      $li = $("<li />").appendTo($menu);
+      $("<hr/>").appendTo($list);
+      $li = $("<li />").appendTo($list);
       $input = $("<input type='checkbox' />").data("option", "autoresize");
       $("<label />")
           .text("Force fit columns")
@@ -60,7 +79,7 @@
         $input.attr("checked", "checked");
       }
 
-      $li = $("<li />").appendTo($menu);
+      $li = $("<li />").appendTo($list);
       $input = $("<input type='checkbox' />").data("option", "syncresize");
       $("<label />")
           .text("Synchronous resize")
@@ -75,6 +94,8 @@
           .css("left", e.pageX - 10)
           .css("max-height", $(window).height() - e.pageY -10)
           .fadeIn(options.fadeSpeed);
+
+      $list.appendTo($menu);
     }
 
     function updateColumnOrder() {

examples/example4-model.html

@@ -125,6 +125,7 @@ <h2>View Source:</h2>
 ];
 
 var options = {
+  columnPickerTitle: "Columns",
   editable: true,
   enableAddRow: true,
   enableCellNavigation: true,