How to: Provide a Context Menu

• Dec 17, 2020

This example demonstrates how to display a context menu. When an end-user right-clicks within the ASPxTreeList, the client-side ASPxClientTreeList.ContextMenu event is fired. In this example, the context menu is invoked when a node is right-clicked.

The image below shows the result:

ASPX

<dx:ASPxTreeList ID="ASPxTreeList1" runat="server" AutoGenerateColumns="False"
    ClientInstanceName="clientTreeList" CssFilePath="~/App_Themes/Soft Orange/{0}/styles.css"
    CssPostfix="Soft_Orange" DataSourceID="AccessDataSource1" KeyFieldName="ID"
    ParentFieldName="ParentID" Width="360px">

    <ClientSideEvents ContextMenu="function(s, e) {
        if (e.objectType != 'Node') return;
        clientPopupMenu.ShowAtPos(ASPxClientUtils.GetEventX(e.htmlEvent), ASPxClientUtils.GetEventY(e.htmlEvent));
    }" />
</dx:ASPxTreeList>

<dx:ASPxPopupMenu ID="ASPxPopupMenu1" runat="server"
    ClientInstanceName="clientPopupMenu"
    CssFilePath="~/App_Themes/Soft Orange/{0}/styles.css"
    CssPostfix="Soft_Orange" GutterWidth="0px"
    ImageFolder="~/App_Themes/Soft Orange/{0}/" ItemSpacing="1px">
        <Items>
            <dx:MenuItem Name="miCollapseAll" Text="Collapse All">
            </dx:MenuItem>
            <dx:MenuItem Name="miExpandAll" Text="Expand All">
            </dx:MenuItem>
        </Items>
        <ClientSideEvents ItemClick="function(s, e) {
            if (e.item.name == 'miExpandAll') {
                clientTreeList.ExpandAll();
                return;
            }
            if (e.item.name == 'miCollapseAll') {
                clientTreeList.CollapseAll();
                return;
            }
        }" />     
</dx:ASPxPopupMenu>