feat(plugins): add "hidden" property to all plugins with menu items (#…

…532) * feat(plugins): add header/grid menu item "hidden" property - in some cases we might want to use "disabled" but in other cases we might want to use "hidden"
6pac · Sep 22, 2020 · efc5608 · efc5608
1 parent 6b7519e
commit efc5608
Show file tree

Hide file tree

Showing 9 changed files with 69 additions and 9 deletions.
diff --git a/controls/slick.gridmenu.css b/controls/slick.gridmenu.css
@@ -81,6 +81,7 @@
   padding: 2px 4px;
   border: 1px solid transparent;
   border-radius: 3px;
+  display: block;
 }
 .slick-gridmenu-item:hover {
   border-color: silver;
@@ -111,6 +112,11 @@
   color: silver;
 }
 
+/* Hidden */
+.slick-gridmenu-item-hidden {
+  display: none;
+}
+
 /* Excluded item from Grid Menu will be hidden */
 .slick-gridmenu-list li.hidden {
   display: none;

diff --git a/controls/slick.gridmenu.js b/controls/slick.gridmenu.js
@@ -59,7 +59,8 @@
  *    action:                     Optionally define a callback function that gets executed when item is chosen (and/or use the onCommand event)
  *    title:                      Menu item text.
  *    divider:                    Whether the current item is a divider, not an actual command.
- *    disabled:                   Whether the item is disabled.
+ *    disabled:                   Whether the item/command is disabled.
+ *    hidden:                     Whether the item/command is hidden.
  *    tooltip:                    Item tooltip.
  *    command:                    A command identifier to be passed to the onCommand event handlers.
  *    cssClass:                   A CSS class to be added to the menu item container.
@@ -154,7 +155,7 @@
 
     // when a grid changes from a regular grid to a frozen grid, we need to destroy & recreate the grid menu
     // we do this change because the Grid Menu is on the left container on a regular grid but is on the right container on a frozen grid
-    grid.onSetOptions.subscribe(function(e, args) {
+    grid.onSetOptions.subscribe(function (e, args) {
       if (args && args.optionsBefore && args.optionsAfter) {
         var switchedFromRegularToFrozen = args.optionsBefore.frozenColumn >= 0 && args.optionsAfter.frozenColumn === -1;
         var switchedFromFrozenToRegular = args.optionsBefore.frozenColumn === -1 && args.optionsAfter.frozenColumn >= 0;
@@ -295,6 +296,10 @@
           $li.addClass("slick-gridmenu-item-disabled");
         }
 
+        if (item.hidden) {
+          $li.addClass("slick-header-menuitem-hidden");
+        }
+
         if (item.cssClass) {
           $li.addClass(item.cssClass);
         }

diff --git a/examples/example-plugin-headermenu.html b/examples/example-plugin-headermenu.html
@@ -37,8 +37,7 @@
       border: 1px solid #718BB7;
       background: #f0f0f0;
       padding: 2px;
-      -moz-box-shadow: 2px 2px 2px silver;
-      -webkit-box-shadow: 2px 2px 2px silver;
+      box-shadow: 2px 2px 2px silver;
       z-index: 20;
     }
 
@@ -47,6 +46,7 @@
       padding: 2px 4px;
       border: 1px solid transparent;
       border-radius: 3px;
+      display: block;
     }
 
     .slick-header-menuitem:hover {
@@ -58,6 +58,9 @@
       border-color: transparent !important;
       background: inherit !important;
     }
+    .slick-header-menuitem-hidden {
+      display: none;
+    }
 
     .icon-help {
       background-image: url(../images/help.png);
@@ -127,12 +130,14 @@ <h2>View Source:</h2>
               iconImage: "../images/sort-asc.gif",
               title: "Sort Ascending",
               disabled: !columns[i].sortable,
+              // hidden: !columns[i].sortable, // you could disable or hide the command completely
               command: "sort-asc"
             },
             {
               iconImage: "../images/sort-desc.gif",
               title: "Sort Descending",
               disabled: !columns[i].sortable,
+              // hidden: !columns[i].sortable, // you could disable or hide the command completely
               cssClass: !columns[i].sortable ? 'italic' : '',
               command: "sort-desc"
             },

diff --git a/plugins/slick.cellmenu.css b/plugins/slick.cellmenu.css
@@ -79,6 +79,7 @@
   padding: 2px 4px;
   border: 1px solid transparent;
   border-radius: 3px;
+  display: block;
 }
 .slick-cell-menu-item:hover {
   border-color: silver;
@@ -110,6 +111,11 @@
   color: silver;
 }
 
+/* Hidden */
+.slick-cell-menu-item-hidden {
+  display: none;
+}
+
 /* Excluded item from Grid Menu will be hidden */
 .slick-cell-menu-list li.hidden {
   display: none;

diff --git a/plugins/slick.cellmenu.js b/plugins/slick.cellmenu.js
@@ -72,7 +72,8 @@
    *    option:                     An option to be passed to the onOptionSelected event handlers (when using "optionItems").
    *    title:                      Menu item text label.
    *    divider:                    Boolean which tells if the current item is a divider, not an actual command. You could also pass "divider" instead of an object
-   *    disabled:                   Whether the item is disabled.
+   *    disabled:                   Whether the item/command is disabled.
+   *    hidden:                     Whether the item/command is hidden.
    *    tooltip:                    Item tooltip.
    *    cssClass:                   A CSS class to be added to the menu item container.
    *    iconCssClass:               A CSS class to be added to the menu item icon.
@@ -89,7 +90,7 @@
    *            cell:         Cell or column index
    *            row:          Row index
    *            grid:         Reference to the grid.
-   * 
+   *
    *    onBeforeMenuShow: Fired before the menu is shown.  You can customize the menu or dismiss it by returning false.
    *        Event args:
    *            cell:         Cell or column index
@@ -462,6 +463,11 @@
           $li.addClass("slick-cell-menu-item-disabled");
         }
 
+        // if the item is hidden then add the hidden css class
+        if (item.hidden) {
+          $li.addClass("slick-cell-menu-item-hidden");
+        }
+
         if (item.cssClass) {
           $li.addClass(item.cssClass);
         }
@@ -537,6 +543,11 @@
           $li.addClass("slick-cell-menu-item-disabled");
         }
 
+        // if the item is hidden then add the hidden css class
+        if (item.hidden) {
+          $li.addClass("slick-cell-menu-item-hidden");
+        }
+
         if (item.cssClass) {
           $li.addClass(item.cssClass);
         }

diff --git a/plugins/slick.contextmenu.css b/plugins/slick.contextmenu.css
@@ -116,6 +116,11 @@
   color: silver;
 }
 
+/* Hidden */
+.slick-context-menu-item-hidden {
+  display: none;
+}
+
 /* Excluded item from Grid Menu will be hidden */
 .slick-context-menu-list li.hidden {
   display: none;

diff --git a/plugins/slick.contextmenu.js b/plugins/slick.contextmenu.js
@@ -79,7 +79,8 @@
    *    option:                     An option to be passed to the onOptionSelected event handlers (when using "optionItems").
    *    title:                      Menu item text.
    *    divider:                    Boolean which tell if the current item is a divider, not an actual command. You could also pass "divider" instead of an object
-   *    disabled:                   Whether the item is disabled.
+   *    disabled:                   Whether the item/command is disabled.
+   *    hidden:                     Whether the item/command is hidden.
    *    tooltip:                    Item tooltip.
    *    cssClass:                   A CSS class to be added to the menu item container.
    *    iconCssClass:               A CSS class to be added to the menu item icon.
@@ -418,6 +419,11 @@
           $li.addClass("slick-context-menu-item-disabled");
         }
 
+        // if the item is hidden then add the hidden css class
+        if (item.hidden) {
+          $li.addClass("slick-context-menu-item-hidden");
+        }
+
         if (item.cssClass) {
           $li.addClass(item.cssClass);
         }
@@ -493,6 +499,11 @@
           $li.addClass("slick-context-menu-item-disabled");
         }
 
+        // if the item is hidden then add the hidden css class
+        if (item.hidden) {
+          $li.addClass("slick-context-menu-item-hidden");
+        }
+
         if (item.cssClass) {
           $li.addClass(item.cssClass);
         }

diff --git a/plugins/slick.headermenu.css b/plugins/slick.headermenu.css
@@ -35,6 +35,7 @@
   margin: 0;
   padding: 0;
   cursor: pointer;
+  display: block;
 }
 
 .slick-header-menuicon {
@@ -58,6 +59,11 @@
   color: silver;
 }
 
+/* Hidden */
+.slick-header-menuitem-hidden {
+  display: none;
+}
+
 /* Divider */
 .slick-header-menuitem.slick-header-menuitem-divider {
   cursor: default;

diff --git a/plugins/slick.headermenu.js b/plugins/slick.headermenu.js
@@ -52,7 +52,8 @@
    *    action:                   Optionally define a callback function that gets executed when item is chosen (and/or use the onCommand event)
    *    title:                    Menu item text.
    *    divider:                  Whether the current item is a divider, not an actual command.
-   *    disabled:                 Whether the item is disabled.
+   *    disabled:                 Whether the item/command is disabled.
+   *    hidden:                   Whether the item/command is hidden.
    *    tooltip:                  Item tooltip.
    *    command:                  A command identifier to be passed to the onCommand event handlers.
    *    cssClass:                 A CSS class to be added to the menu item container.
@@ -70,7 +71,7 @@
    *            grid:     Reference to the grid.
    *            column:   Column definition.
    *            menu:     Menu options.  Note that you can change the menu items here.
-   * 
+   *
    *    onBeforeMenuShow:   Fired before the menu is shown.  You can customize the menu or dismiss it by returning false.
    *        Event args:
    *            grid:     Reference to the grid.
@@ -252,6 +253,10 @@
           $li.addClass("slick-header-menuitem-disabled");
         }
 
+        if (item.hidden) {
+          $li.addClass("slick-header-menuitem-hidden");
+        }
+
         if (item.cssClass) {
           $li.addClass(item.cssClass);
         }