Context Menu Customization

The Bootstrap Spreadsheet enables you to programmatically customize its context menu. By handling the PopupMenuShowing client-side event, you can perform the following actions with the Spreadsheet's context menu:

  • Manipulate menu items - add new items, remove or disable existing ones (use the e.menuItems property);
  • Identify a worksheet element (e.g., a cell, row or column header, chart or picture) for which the context menu is invoked (use the e.menuType property);
  • Prevent the context menu from being displayed (use the e.cancel property).

This demo illustrates how to implement a custom context menu and display it only for certain sheet cells (non-empty cells that are highlighted with the gray background color in the demo). The context menu is dynamically populated in the PopupMenuShowing client event with custom menu items depending upon the type of data contained within cells (such as the weight, currency or discount values). The custom menu items are implemented as new items containing custom command names. Clicks on the custom menu items with custom command names are processed by using the CustomCommandExecuted client event. Within its handler, the activated custom command is identified and the corresponding action is performed either on the client side or through a callback to the server. For instance, commands for the weight and currency conversions are performed right on the client side and display a hint with converted values; and a command for getting information on how discounts are calculated requires sending a callback to the server to obtain additional information.

ASPXJSCopy 
<dx:BootstrapSpreadsheet runat="server" Height="550px"
    ShowConfirmOnLosingChanges="false" ShowFormulaBar="false" RibbonMode="None" ShowSheetTabs="false">
    <ClientSideEvents
        PopupMenuShowing="function(s, e) { SpreadsheetPopupMenuShowing(s, e); }"
        CustomCommandExecuted ="function(s, e) { SpreadsheetCustomCommandExecuted(s, e); }" />
</dx:BootstrapSpreadsheet>
var minRowIndex = 9, maxRowIndex = 17;
var currencyColumns = [3, 5, 6, 7],
    weightColumns = [2];
var convertCurrencyCommand = { name: "ConvertCurrency", text: "Get Value In Euros", conversionRate: 0.87},
    convertUnitsCommand = {name: "ConvertUnits", text: "Get Value In Lbs", conversionRate: 2.20462};
function SpreadsheetPopupMenuShowing(s, e) {
    if(e.menuType === ASPxClientSpreadsheetPopupMenuType.Cell) {
        e.menuItems.Clear();
        if(needToAddCustomMenuItems(s)) {
            if(isSelectedCellOfType(s, currencyColumns))
                addCustomMenuItem(e.menuItems, convertCurrencyCommand);
            if(isSelectedCellOfType(s, weightColumns))
                addCustomMenuItem(e.menuItems, convertUnitsCommand);
        }
    }
    else if(e.menuType !== ASPxClientSpreadsheetPopupMenuType.AutoFilter)
        e.cancel = true;
}
function SpreadsheetCustomCommandExecuted(s, e) {
    var command = (e.commandName === convertCurrencyCommand.name) ? convertCurrencyCommand : convertUnitsCommand;
    ASPxClientHint.Show(getActiveCellElement(s), {
        content: convertActiveCellValue(s, command),
        position: "right",
        className: "cellHint",
        onShowing: function(sender, e) {
            hideHintOnTimeout(e.hintElement);
        }
    });
}
function ShowCallbackResultInHint(hintElement, callbackResult) {
    hintElement.lastElementChild.innerHTML = callbackResult;
    hideHintOnTimeout(hintElement);
}
function hideHintOnTimeout(hintElement) {
    window.setTimeout(function() {
        ASPxClientHint.Hide(hintElement);
    }, 3000);
}
function needToAddCustomMenuItems(spreadsheet){
    var selection = spreadsheet.GetSelection();
    return isSingleCellSelected(selection) && isSelectionWithinTable(selection) && spreadsheet.GetActiveCellValue() !== null;
}
function isSingleCellSelected(selection){
    return selection.leftColumnIndex === selection.rightColumnIndex && selection.topRowIndex === selection.bottomRowIndex;
}
function isSelectionWithinTable(selection){
    return selection.activeCellRowIndex >= minRowIndex && selection.activeCellRowIndex <= maxRowIndex;
}
function isSelectedCellOfType(spreadsheet, typedColumnsIndices) {
    var selection = spreadsheet.GetSelection();
    return typedColumnsIndices.indexOf(selection.activeCellColumnIndex) >= 0
}
function addCustomMenuItem(menuItems, command) {
    var item = new ASPxClientSpreadsheetPopupMenuItem(command.name, command.text, null, null);
    menuItems.Add(item);
}
function getActiveCellElement(spreadsheet) {
    var renderHelper = spreadsheet.getRenderHelper();
    return renderHelper.getActiveCellElement();
}
function convertActiveCellValue(spreadsheet, command) {
    var convertedValue = convertNumericValue(getActiveCellNumericValue(spreadsheet), command);
    if(command.name === convertUnitsCommand.name)
        convertedValue = convertedValue + " lbs";
    else
        convertedValue = "€" + convertedValue;
    return convertedValue;
}
function getActiveCellNumericValue(spreadsheet) {
    return spreadsheet.GetActiveCellValue().replace(/\$|(?:\skg)/g, "");
}
function convertNumericValue(value, conversionCommand) {
    return Math.round(value * conversionCommand.conversionRate * 100) / 100;
}
Screen Size
Color Themes
Demo QR Code