Spreadsheet - Context Menu

  • Home
  • Insert
  • Data
  • Undo
  • Redo
  • Save
  • Paste
  • Cut
  • Copy
  • Bold
  • Italic
  • Underline
  • Link
  • Arial
  • Pick Color(Current Color is blank)
  • Pick Color(Current Color is blank)
  • All borders
    • All borders
    • Inside borders
    • Inside horizontal borders
    • Inside vertical borders
    • Outside borders
    • Left border
    • Top border
    • Right border
    • Bottom border
    • No border
  • Pick Color(Current Color is blank)
  • Horizontal alignment
    • Align Left
    • Align Center
    • Align Right
    • Justify
  • Vertical alignment
    • Align Top
    • Align Middle
    • Align Bottom
  • Wrap text
  • Merge Cells
    • Merge Cells
    • Merge Horizontally
    • Merge Vertically
    • Unmerge
  • Format
    • Automatic
    • Number
    • Percent
    • Financial
    • Currency
    • Date
    • Time
    • Date time
    • Duration
    • More formats...
  • Increase decimal
  • Decrease decimal
  • Freeze panes
    • Freeze panes
    • Freeze rows
    • Freeze columns
    • Unfreeze panes
  • Filter
  • Toggle gridlines
  • Add column left
    • Add column left
    • Add column right
    • Add row above
    • Add row below
  • Delete cells
    • Delete column
    • Delete row
  • Sort range A to Z
    • Sort range A to Z
    • Sort range Z to A
  • Filter
  • Data Validation
  • Copy
  • Paste
  • HideRow
  • HideColumn
  • Alert
  • HideRow
  • DeleteRow
  • HideColumn
  • DeleteColumn
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

You can invoke the built-in context menus of RadSpreasheet by right clicking on a cell, on heading row number or a column letter. This will open a contextual menu which will allow you to hide or delete a row/column as well as cut, copy and paste sell content.

This demo shows how you can use the three types of ContextMenu that the control exposes, but in a custom manner. You can define your own items with a desirable Text, but assign them a command from the built-in context menu. You can use the Value property of the RadMenuItem, in order to assign a preferable command.

Note the implementation of the CellContextMenu, where the Alert item's click event is manually handled trough the CellContextMenuItemClicked client-side event of the control.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb"  Inherits="Spreadsheet.Examples.ContextMenu.DefaultVB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script type="text/javascript" src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    </telerik:RadScriptBlock>

    <div class="demo-container no-bg">
        <telerik:RadSpreadsheet runat="server" ID="RadSpreadsheet1">
            <ContextMenus>
                <CellContextMenu OnClientItemClicked="CellContextMenuItemClicked">
                    <Items>
                        <telerik:RadMenuItem Text="Copy" Value="CommandCopy"></telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Paste" Value="CommandPaste"></telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="HideRow" Value="CommandHideRow"></telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="HideColumn" Value="CommandHideColumn"></telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Alert" Value="CustomAlert"></telerik:RadMenuItem>
                    </Items>
                </CellContextMenu>
                <RowHeaderContextMenu>
                    <Items>
                        <telerik:RadMenuItem Text="HideRow" Value="CommandHideRow"></telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="DeleteRow" Value="CommandDeleteRow"></telerik:RadMenuItem>
                    </Items>
                </RowHeaderContextMenu>
                <ColumnHeaderContextMenu>
                    <Items>
                        <telerik:RadMenuItem Text="HideColumn" Value="CommandHideColumn"></telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="DeleteColumn" Value="CommandDeleteColumn"></telerik:RadMenuItem>
                    </Items>
                </ColumnHeaderContextMenu>
            </ContextMenus>
        </telerik:RadSpreadsheet>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?