reworked the click mouse handler to use similar code as header menu plugin

Author: ghiscoding

controls/slick.columnpicker.css

@@ -5,13 +5,10 @@
   -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;
-
-  width: 200px;
-  max-height: 300px;
 	overflow:auto;
   resize: both;
 }

controls/slick.columnpicker.js

@@ -22,29 +22,30 @@
         $title.appendTo($menu);
       }
 
-      // hide if is not withing the picker div or if user click on the close button
-      $(document).on("click.columnpicker", function(e) {
-        var $parent = $(e.target).closest("div.slick-columnpicker");
-        if((e.target.className != "slick-columnpicker" && $parent.length === 0) || e.target.className == "close") {
-          $("div.slick-columnpicker").hide(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).off("click.columnpicker");
+      $(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();
       $list.empty();