Merge branch 'master' of https://github.com/6pac/SlickGrid

Author: ghiscoding-SE

cypress/e2e/example-grid-menu.cy.ts

@@ -287,4 +287,135 @@ describe('Example - Grid Menu', () => {
       .should('be.visible')
       .click({ force: true });
   });
+
+  it('should be able to open Grid Menu and click on Export->Text and expect alert triggered with Text Export', () => {
+    const subCommands1 = ['Text', 'Excel'];
+    const stub = cy.stub();
+    cy.on('window:alert', stub);
+
+    cy.get('#myGrid')
+      .find('button.slick-gridmenu-button')
+      .click({ force: true });
+
+    cy.get('.slick-gridmenu.slick-menu-level-0 .slick-gridmenu-command-list')
+      .find('.slick-gridmenu-item')
+      .contains('Export')
+      .click();
+
+    cy.get('.slick-gridmenu.slick-menu-level-1 .slick-gridmenu-command-list')
+      .should('exist')
+      .find('.slick-gridmenu-item')
+      .each(($command, index) => expect($command.text()).to.contain(subCommands1[index]));
+
+    cy.get('.slick-gridmenu.slick-menu-level-1 .slick-gridmenu-command-list')
+      .find('.slick-gridmenu-item')
+      .contains('Text')
+      .click()
+      .then(() => expect(stub.getCall(0)).to.be.calledWith('Exporting as Text'));
+  });
+
+  it('should be able to open Grid Menu and click on Export->Excel->xls and expect alert triggered with Excel (xls) Export', () => {
+    const subCommands1 = ['Text', 'Excel'];
+    const subCommands2 = ['Excel (csv)', 'Excel (xls)'];
+    const stub = cy.stub();
+    cy.on('window:alert', stub);
+
+    cy.get('#myGrid')
+      .find('button.slick-gridmenu-button')
+      .click({ force: true });
+
+    cy.get('.slick-gridmenu.slick-menu-level-0 .slick-gridmenu-command-list')
+      .find('.slick-gridmenu-item')
+      .contains('Export')
+      .click();
+
+    cy.get('.slick-gridmenu.slick-menu-level-1 .slick-gridmenu-command-list')
+      .should('exist')
+      .find('.slick-gridmenu-item')
+      .each(($command, index) => expect($command.text()).to.contain(subCommands1[index]));
+
+    cy.get('.slick-submenu').should('have.length', 1);
+    cy.get('.slick-gridmenu.slick-menu-level-1 .slick-gridmenu-command-list')
+     .find('.slick-gridmenu-item')
+      .contains('Excel')
+      .click();
+
+    cy.get('.slick-gridmenu.slick-menu-level-2 .slick-gridmenu-command-list').as('subMenuList2');
+
+    cy.get('@subMenuList2')
+      .find('.slick-menu-title')
+      .contains('available formats');
+
+    cy.get('@subMenuList2')
+      .should('exist')
+      .find('.slick-gridmenu-item')
+      .each(($command, index) => expect($command.text()).to.contain(subCommands2[index]));
+    cy.get('.slick-submenu').should('have.length', 2);
+
+    cy.get('.slick-gridmenu.slick-menu-level-2 .slick-gridmenu-command-list')
+      .find('.slick-gridmenu-item')
+      .contains('Excel (xls)')
+      .click()
+      .then(() => expect(stub.getCall(0)).to.be.calledWith('Exporting as Excel (xls)'));
+    cy.get('.slick-submenu').should('have.length', 0);
+  });
+
+  it('should open Export->Excel context sub-menu then open Feedback->ContactUs sub-menus and expect previous Export menu to no longer exists', () => {
+    const subCommands1 = ['Text', 'Excel'];
+    const subCommands2 = ['Request update from shipping team', '', 'Contact Us'];
+    const subCommands2_1 = ['Email us', 'Chat with us', 'Book an appointment'];
+
+    const stub = cy.stub();
+    cy.on('window:alert', stub);
+
+    cy.get('#myGrid')
+      .find('button.slick-gridmenu-button')
+      .click({ force: true });
+
+    cy.get('.slick-gridmenu.slick-menu-level-0 .slick-gridmenu-command-list')
+      .find('.slick-gridmenu-item')
+      .contains('Export')
+      .click();
+
+    cy.get('.slick-gridmenu.slick-menu-level-1 .slick-gridmenu-command-list')
+      .should('exist')
+      .find('.slick-gridmenu-item')
+      .each(($command, index) => expect($command.text()).to.contain(subCommands1[index]));
+
+    // click different sub-menu
+    cy.get('.slick-gridmenu.slick-menu-level-0')
+      .find('.slick-gridmenu-item')
+      .contains('Feedback')
+      .should('exist')
+      .click();
+
+    cy.get('.slick-submenu').should('have.length', 1);
+    cy.get('.slick-gridmenu.slick-menu-level-1')
+      .should('exist')
+      .find('.slick-gridmenu-item')
+      .each(($command, index) => expect($command.text()).to.contain(subCommands2[index]));
+
+    // click on Feedback->ContactUs
+    cy.get('.slick-gridmenu.slick-menu-level-1.dropleft') // left align
+      .find('.slick-gridmenu-item')
+      .contains('Contact Us')
+      .should('exist')
+      .click();
+
+    cy.get('.slick-submenu').should('have.length', 2);
+    cy.get('.slick-gridmenu.slick-menu-level-2.dropright') // right align
+      .should('exist')
+      .find('.slick-gridmenu-item')
+      .each(($command, index) => expect($command.text()).to.eq(subCommands2_1[index]));
+
+    cy.get('.slick-gridmenu.slick-menu-level-2');
+
+    cy.get('.slick-gridmenu.slick-menu-level-2 .slick-gridmenu-command-list')
+      .find('.slick-gridmenu-item')
+      .contains('Chat with us')
+      .click()
+      .then(() => expect(stub.getCall(0)).to.be.calledWith('Command: contact-chat'));
+
+    cy.get('.slick-submenu').should('have.length', 0);
+  });
 });

examples/example-grid-menu.html

@@ -87,6 +87,12 @@
     .slick-columnpicker-list input[type=checkbox]:checked + label:before {
       opacity: 1; /* checked icon */
     }
+    .slick-gridmenu.slick-submenu {
+      background-color: #fbfbfb;
+      /* border-width: 2px; */
+      box-shadow: 0 2px 4px 2px rgba(146, 152, 163, 0.4);
+      /* min-width: 150px; */
+    }
   </style>
 </head>
 <body>
@@ -175,6 +181,7 @@ <h2>View Source:</h2>
     // when not passed, it will act as a regular Column Picker (with default Grid Menu image of drag-handle.png)
     gridMenu: {
       useClickToRepositionMenu: false, // defaults to true (false would use the icon offset to reposition the grid menu)
+      subItemChevronClass: 'sgi sgi-chevron-right',
       menuUsabilityOverride: function (args) {
         // we could disable the menu entirely by returning false
         return true;
@@ -244,6 +251,36 @@ <h2>View Source:</h2>
           title: "Disabled Command",
           disabled: true,
           command: "custom-command"
+        },
+        "divider",
+        {
+          // we can also have multiple nested sub-menus
+          command: 'export', title: 'Export',
+          customItems: [
+            { command: "export-txt", title: "Text" },
+            {
+              command: 'sub-menu', title: 'Excel', cssClass: "green", subMenuTitle: "available formats", subMenuTitleCssClass: "italic orange",
+              customItems: [
+                { command: "export-csv", title: "Excel (csv)" },
+                { command: "export-xls", title: "Excel (xls)" },
+              ]
+            }
+          ]
+        },
+        {
+          command: 'feedback', title: 'Feedback',
+          customItems: [
+            { command: "request-update", title: "Request update from shipping team", iconCssClass: "sgi sgi-tag-outline", tooltip: "this will automatically send an alert to the shipping team to contact the user for an update" },
+            "divider",
+            {
+              command: 'sub-menu', title: 'Contact Us', iconCssClass: "sgi sgi-user", subMenuTitle: "contact us...", subMenuTitleCssClass: "italic",
+              customItems: [
+                { command: "contact-email", title: "Email us", iconCssClass: "sgi sgi-pencil-outline" },
+                { command: "contact-chat", title: "Chat with us", iconCssClass: "sgi sgi-message-outline" },
+                { command: "contact-meeting", title: "Book an appointment", iconCssClass: "sgi sgi-coffee-outline" },
+              ]
+            }
+          ]
         }
       ]
     }
@@ -383,7 +420,16 @@ <h2>View Source:</h2>
         grid.setSortColumns([]);
         dataView.refresh();
       } else {
-        alert("Command: " + args.command);
+        switch (args.command) {
+          case "export-csv":
+          case "export-txt":
+          case "export-xls":
+            alert("Exporting as " + args.item.title);
+            break;
+          default:
+            alert("Command: " + args.command);
+            break;
+        }
       }
     });
 
@@ -404,6 +450,11 @@ <h2>View Source:</h2>
     gridMenuControl.onMenuClose.subscribe(function(e, args) {
       console.log('Menu is closing');
       grid.autosizeColumns();
+
+      // you can prevent Grid Menu from closing
+      // e.preventDefault();
+      // console.log('default prevented')
+      // return false;
     });
 
     grid.onAutosizeColumns.subscribe(function(e, args) {