Log in to start a topic

How to remove default context menu in Spreadjs 16?

Posted by: priyatama.bhadke on 27 August 2023, 6:37 pm EST

  • priyatama.bhadke

    • Post Options:
    • Link
      Copy

    Posted 27 August 2023, 6:37 pm EST

    Hi,

    How to remove default context menu and add custom context menu in Spread Js 16?

    Regards,

    Priya B

  • chandan.rawat

    Posted 28 August 2023, 9:27 pm EST

    Hi Priya,

    As I can understand, you want to show the custom context menu instead of the default context menu in SpreadJS on right-click.

    For the above use case, you could bind an event handler to the host element of Workbook and prevent the default behavior by stopping the event.

    spread.getHost().addEventListener('contextmenu', event => {
        let sheet = spread.getActiveSheet();
        let hitTestInfo = sheet.hitTest(event.offsetX, event.offsetY);
        if (hitTestInfo && hitTestInfo.hitTestType && hitTestInfo.hitTestType === GC.Spread.Sheets.SheetArea.viewport) {
            sheet.setActiveCell(hitTestInfo.row, hitTestInfo.col);
            showCustomContextMenu(options, event.offsetX, event.offsetY);
            event.stopImmediatePropagation();
            event.preventDefault();
        }
    }, true);

    Then you could create your own custom context menu to show on right-click. You could also use SpreadJS APIs to perform operations based on the option selected in the context menu.

    Please refer to the attached sample.

    sample: https://jscodemine.grapecity.com/share/Uu645aZE_UGSa4QYl0LM5Q/?IsEmbed=false&Theme=Unset&PreviewDirection=0&IsEditorShow=true&IsExplorerShow=true&IsPreviewShow=true&IsConsoleShow=true&IsRunBTNShow=false&IsResetBTNShow=false&IsOpenInCodemineBTNShow=false&PanelWidth=20&PanelWidth=50&PanelWidth=30&defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

    Additionally, you can utilize the ContextMenu and MenuView classes in SpreadJS to modify the context menu in SpreadJS.

    References:

    Context menu demo: https://www.grapecity.com/spreadjs/demos/features/worksheet/context-menu/basic-context-menu/purejs

    ContextMenu: https://www.grapecity.com/spreadjs/api/v16/classes/GC.Spread.Sheets.ContextMenu.ContextMenu

    MenuView: https://www.grapecity.com/spreadjs/api/v16/classes/GC.Spread.Sheets.ContextMenu.MenuView

    Regards,

    Chandan

  • priyatama.bhadke

    Posted 29 August 2023, 6:34 pm EST - Updated 29 August 2023, 6:39 pm EST

    Hi Chandan,

    Please find attached my sample file and error I am getting. Can you please have a look at it and let me know why its not wotking.

    Regards,

    Priya B

    login.zip

  • chandan.rawat

    Posted 30 August 2023, 10:51 pm EST

    Hi Priya,

    After investigating the sample provided by you, we found that the designer files were missing from the sample. Also, the error was thrown because the “spread” object was undefined as it was not initialized properly at line no. 66 in “login.html” file.

    Additionally, we have added a style.css file to style the custom context menu.

    Please refer to the attached sample.

    solution.zip

    In the attached sample, we have added code lines 13~15, 48~52, 103~104, and commented code lines 66~67 in “login.html” file.

    Please note that the custom context menu in the provided sample covers very basic functionality. You would need to implement your own custom context menu for your specific use case and functionalities.

    Please feel free to reach out to us if you face any issues.

    Regards,

    Chandan

  • priyatama.bhadke

    Posted 7 September 2023, 6:28 pm EST

    Hi Chandan,

    How to open a popup on click of any custom context menu item?

    Regards,

    Priya B

  • chandan.rawat

    Posted 10 September 2023, 10:29 pm EST - Updated 10 September 2023, 10:34 pm EST

    Hello,

    You can open the popup menu by binding an event listener to the ‘click’ event of the option element of the custom context menu. The event listener then opens a custom popup.

    Please refer to the attached sample and GIF.

    sample: solution.zip

    In the attached sample, the function createPopupElement() is used to create HTML for popup. This method is called when the click event listener of the context menu option(“Open Popup”) is invoked.

    Please note that in the attached sample, a basic custom context menu and popup are implemented. This is just to explain how a custom context menu and popup can be implemented in SpreadJS. However, you would need to create your own custom context menu and popup based on your requirements.

    Regards

  • priyatama.bhadke

    Posted 19 September 2023, 1:02 am EST

    Hi Chandan,

    I have used your reference code for creating custom context menu. adding it to further-

    I want to show sheet wise context menu.

    Example- Add text and delete text custom context menu will be visible only to Sheet1 and Add Skill and delete skill will be visible only to sheet2.

    Can you please help me with the example to achieve this?

    Regards,

    Priya B

  • chandan.rawat

    Posted 20 September 2023, 6:02 pm EST - Updated 20 September 2023, 6:07 pm EST

    Hi,

    As I can understand, you want to show some context menu items(options) in Sheet1 and some context menu items in Sheet2.

    For the above use case, you can add a property in the config of the custom options that can be used to determine whether the option should be shown in the context menu or not. Based on the value of that property, options can be shown sheet-wise in the context menu.

    Please refer to the attached sample that extends the previous solution that we have shared with you.

    sample: solution_modified.zip

    In the above sample, the property “visibleContext” is added to the custom options objects. It is used to determine whether to show the option on the context menu.

    Additionally, we would recommend you to use the interface provided by SpreadJS for the context menu. It provides a simple interface to add new context menu options as well as handles different scenarios internally such as adjusting the context menu when the context menu may spill out of the viewport area of the sheet. You can remove the default options from the context menu and use your custom options.

    In SpreadJS Designer, you can add custom options for the context menu in the config.contextMenu array and create corresponding commands for those custom options.

    To show the options sheet-wise, you can utilize the “visibleContext” property of the ICommand interface. This property takes a data variable from the designer that evaluates to true or false and based on that an option is shown/hidden in the context menu.

    Please refer to the attached sample below.

    sample: customize_designer_context_menu.zip

    In the above sample, the designer.setData() method is used to set variables on the designer and these variables are used by the context menu to show/hide the custom options sheet-wise. The value of these variables is changed on the ActiveSheetChanged event.

    In SpreadJS(without designer), the ContextMenu class and its onOpenMenu() method can be utilized to show custom options and sheet-wise options in the context menu.

    References:

    Custom context menu docs(Designer): https://www.grapecity.com/spreadjs/docs/spreadjs_designer_component/customizations/add_context_menu_item

    Custom context menu demo(SpreadJS): https://www.grapecity.com/spreadjs/demos/features/worksheet/context-menu/custom-menu-view/purejs

    IDesignerConfig.contextMenu: https://www.grapecity.com/spreadjs/api/designer/interfaces/GC.Spread.Sheets.Designer.IDesignerConfig#contextmenu

    ICommand interface: https://www.grapecity.com/spreadjs/api/designer/interfaces/GC.Spread.Sheets.Designer.ICommand#interface-icommand

    ICommand.visibleContext: https://www.grapecity.com/spreadjs/api/designer/interfaces/GC.Spread.Sheets.Designer.ICommand#visiblecontext

    designer.setData(): https://www.grapecity.com/spreadjs/api/designer/classes/GC.Spread.Sheets.Designer.Designer#setdata

    ContextMenu class: https://www.grapecity.com/spreadjs/api/v16/classes/GC.Spread.Sheets.ContextMenu.ContextMenu#class-contextmenu

    ContextMenu.onOpenMenu(): https://www.grapecity.com/spreadjs/api/v16/classes/GC.Spread.Sheets.ContextMenu.ContextMenu#onopenmenu

    Regards

  • priyatama.bhadke

    Posted 24 September 2023, 5:36 pm EST

    Hi Chandan,

    Thanks for help. I do not want to show default context menu items all. My spreadsheet will show only custom context only. How to do that using above code. I can see this line show default context menu items.

    config.contextMenu = config.contextMenu.filter((option) => commandsToKeep.has(option));

    but if I comment it , this brings all other menu items. how to get rid of it?

    Regards,

    Priya B

  • chandan.rawat

    Posted 25 September 2023, 6:17 pm EST

    Hello,

    To remove all the default options from the context menu, you can simply remove all the options from config.contextMenu array of the default config and add only the custom options that are needed in the context menu. Lastly, set the updated config with designer.setConfig() method.

    Please refer to the below code snippet and the attached sample for more understanding.

                // removes the default context menu options which are not specified to be kept
            if (config && config.contextMenu) {
                config.contextMenu = [];
            }

    sample: sample.zip

    Please let us know if you face any issues.

    Regards

  • priyatama.bhadke

    Posted 25 September 2023, 9:34 pm EST

    Hi Chandan,

    Thanks this works for me. Can we add any html icon in context menu text something like

    EditStandardSkill: {

    text: “**:construction_worker_man: ** Edit Standard Skill”,

    commandName: “EditStandardSkill”,

    }

    Regards,

    Priya B

  • chandan.rawat

    Posted 26 September 2023, 8:46 pm EST

    Hello,

    As I can understand, you want to add the icons in the context menu options.

    For this, you can use the “iconClass” property of the ICommand interface. Using this property, you can specify the CSS class name which will be used to show the icon in the context menu options.

    Please refer to the attached sample.

    sample: sample_custom_icons.zip

    Please note that the CSS icon classes are defined in the “style.css” file and those CSS class names are used in the “iconClass” property of commands.

    If the issue still persists, please let us know.

    References:

    ICommand.iconClass: https://www.grapecity.com/spreadjs/api/designer/interfaces/GC.Spread.Sheets.Designer.ICommand#iconclass

    Regards

  • priyatama.bhadke

    Posted 20 February 2024, 3:33 pm EST

    Hi,

    Opening this ticket so that you will get to know what code I am using for creating context menu. Using this code context menu on right click of spreadsheet works fine.

    At the bottom where sheet names are listed right clcik of that a context menu appears with sheet hide/show option. Can you please help me to understand how to get that context menu working?

    Regards,

    Priya B

  • chandan.rawat

    Posted 21 February 2024, 4:56 pm EST - Updated 21 February 2024, 5:04 pm EST

    Hi Priya,

    As per my understanding, you want to show the default context menu for the sheets tabs when right click is performed on the sheet tabs.

    Previously, the default sheet tabs context menu(& options) was not showing because all the options from the context menu were removed to show only the custom context menu options.

    // removes the default context menu options which are not specified to be kept
if (config && config.contextMenu) {
    config.contextMenu = [];
}

    To keep showing the default context menu options for sheet tabs, you can keep the context menu options for sheet tabs in the config.contextMenu array.

    // default sheet tabs context menu options
let sheetTabsContextMenuOptions = ['gc.spread.contextMenu.insertSheet', 'gc.spread.contextMenu.deleteSheet', 'sheetTabMoveOrCopy', 'gc.spread.contextMenu.changeSheetTabPosition', 'protectSheet', 'unprotectSheet', 'showTabColor', 'contextMenuUnhideSheet', 'contextMenuUnhideSheet', 'sheetTag'];

// removes the default context menu options which are not specified to be kept
if (config && config.contextMenu) {
    config.contextMenu = [];
}
// add the sheet tabs context menu options
config.contextMenu.push(...sheetTabsContextMenuOptions);

    Also, previously the custom context menu options were showing when right click was performed on sheet tabs. You can show them only when the viewport is clicked. For this, we have made changes to the custom options in the attached sample.

    customAddText: {
    text: "Add text",
    commandName: "customAddText",
    // specifies when this option would be visible on the context menu
    // "Sheet1_visible" is a variable on designer which return boolean value
    visibleContext: "Sheet1_visible&&ClickViewport",
    // executes when the option is clicked in context menu
    execute: () => {
        console.log('Add text option clicked')
    },
    iconClass: 'custom-icon-insert-text'
},

    Notice that &&ClickViewport is added in the visibleContext property.

    Kindly find the attached sample for more understanding.

    sample: sample_default_sheet_tab_options.zip

    Regards

  • priyatama.bhadke

    Posted 21 February 2024, 11:11 pm EST

    Hi Chandan,

    Thanks for your reply and my context menu on sheet tab is back but it doesnt show, hide/show sheet menu options. what could be the reason?

    Regards,

    Priya B

  • priyatama.bhadke

    Posted 22 February 2024, 4:30 am EST

    Hi Chandan,

    I have fixed this issue. I am good to close the ticket.

    Regards,

    Priya b

  • chandan.rawat

    Posted 22 February 2024, 4:11 pm EST

    Hi Priya,

    We are glad that your issue has been resolved. Kindly let us know if you face any issues.

    Regards

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels

  • © 2023 MESCIUS inc. All Rights Reserved.  ·  1.800.858.2739

    All product and company names herein may be trademarks of their respective owners.