Forums Home / Spread / SpreadJS
Posted by: adisa.craig on 13 September 2024, 1:12 pm EST
adisa.craig
Posted 13 September 2024, 1:12 pm EST - Updated 13 September 2024, 1:24 pm EST
I am looking to add options for users to rename, duplicate or protect sheets from the tabstrip context menu, how would I go about adding a new context menu item.
Also is it possible to rename or remove any of the current tabstrip context menu items
ankit.kumar
Posted 16 September 2024, 6:15 am EST - Updated 16 September 2024, 6:20 am EST
Hi,
You could refer to the attached sample that demonstrates adding the context menu options to the Sheet Tab.
To add the menu items to the context menu, it will be similar to the following demo https://developer.mescius.com/spreadjs/demos/features/worksheet/context-menu/extend-context-menu#demo_source_name, however, the workArea property will be sheetTab.
To modify the name or delete the existing context menu options, you could use the following:
spread.contextMenu.menuData.forEach((item, index) => {
// Remove Delete Sheet Option
if (item.name === "gc.spread.deleteSheet") {
spread.contextMenu.menuData.splice(index, 1);
}
// Change the Menu Item Name from "Insert" to "Insert Sheet"
if (item.name === "gc.spread.insertSheet") {
item.text = "Insert Sheet"
}
});For duplicate sheet, you could us our existing “copySheet” command. For renaming the sheet, you could rename by double tapping the sheet name, and enter the new name or take input using a dialog/prompt.
Please refer to the above sample and let us know if you face any issues. Similarly you could add other context menu items.
References:
copySheet command: https://developer.mescius.com/spreadjs/api/modules/GC.Spread.Sheets.Commands#copysheet
menuData method: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.ContextMenu.ContextMenu#menudata
You could also override the onOpenMenu method to change the command names in runtime: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.ContextMenu.ContextMenu#onopenmenu
Regards,
Ankit
adisa.craig
Posted 16 September 2024, 5:29 pm EST
Hi thanks for the quick response, and above did answer all of my questions. I just had one more.
On the contextmenu there is the class “gc-ui-contextmenu-icon” on each option, how do I enable the icons to show and is it possible to add icons to newly created options or change icons of the current options
ankit.kumar
Posted 17 September 2024, 12:30 am EST
Hi,
To add the Icon, you could define the “iconClass” property on the menu item similar to the following:
// Protect Sheet
var protectSheet = {
text: "Protect Sheet",
name: "protectSheet",
command: "protectSheetCmd",
workArea: "sheetTab",
iconClass: "protectSheet-icon"
};For existing items, it is same as the above, you could either loop, or get the item directly from the “menuData” array and change/add the “iconClass” property.
spread.contextMenu.menuData.forEach((item, index) => {
// Remove Delete Sheet Option
if (item.name === "gc.spread.deleteSheet") {
spread.contextMenu.menuData.splice(index, 1);
}
// Change the Menu Item Name from "Insert" to "Insert Sheet"
if (item.name === "gc.spread.insertSheet") {
item.text = "Insert Sheet";
}
// Add Icon to Already Existing Context Menu Item
if (item.name === "gc.spread.hideSheet") {
item.iconClass = "hideSheet-icon";
}
});Further, like mentioned earlier, if you want to perform some actions like disabling, removing icons, changing text dynamically or based on some condition, you could override the “onOpenMenu” method. Refer to the following code:
// Override the OnOpenMenu Method
let oldOnOpenMenu = spread.contextMenu.onOpenMenu;
spread.contextMenu.onOpenMenu = function (menuData, itemsDataForShown, hitInfo, spread) {
let result = oldOnOpenMenu.apply(this, arguments);
console.log(menuData);
console.log(itemsDataForShown);
console.log(hitInfo);
console.log(spread);
// Peform Custom Actions Like Removing Items, Changing Text, Changing Icons, Disabling Item (Based on Custom Condition)
let activeSheet = spread.getActiveSheet();
itemsDataForShown.forEach((item, index) => {
// Remove the Insert Sheet Option From Sheet1
if (item.name === "gc.spread.insertSheet" && activeSheet.name() === "Sheet1") {
itemsDataForShown.splice(index, 1);
}
// Protect Sheet Option is Disabled for Sheet2
if (item.name === "protectSheet" && activeSheet.name() === "Sheet2") {
item.disable = true;
}
})
//you can change itemsDataForShown to change filter result
//if you only want to change filter result,return false or don't return anything
//you also can open your own context menu,if you want to do this,return true
//return true;
return result;
};In the sample, the background image is applied on the “index.html” page of the sample. Further, you could refer to the all the options available on the menuData item: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.ContextMenu.ContextMenu#menudata
Regards,
Ankit
adisa.craig
Posted 13 March 2025, 10:44 am EST
Hi Ankit,
Is it possible for the rename context menu option, instead of opening a separate dialog box, that it can trigger the sheet tab input to become editable instead, to match the behavior when double clicking the sheet tab
priyam.kushwaha
Posted 17 March 2025, 5:10 am EST
Hi,
It looks like you have created a similar case on the forum: Rename Sheet in Tab Context Menu: https://developer.mescius.com/forums/spreadjs/rename-sheet-in-tab-context-menu) Since this query differs from the initial one in this forum thread, we will address it there to avoid confusion. Our team will respond to that thread soon.
Regards,
Priyam
