Events

The Telerik UI ContextMenu for ASP.NET Core exposes a number of events that allow you to control and customize the UI component.

Handling by Handler Names

The following example demonstrates how to subscribe to events by a handler name.

Razor

@(Html.Kendo().ContextMenu()
        .Name("menu")
        .Target("body")
        .Events(e => e
            .Open("menu_open")
            .Close("menu_close")
            .Select("onSelect)
        )
)

Razor

    <kendo-contextmenu name="contextmenu" target="body" 
        on-open="menu_open"
        on-close="menu_close"
        on-select="onSelect">
    </kendo-contextmenu>

JavaScript

    <script>
        function openMenu(){
            // Handle the open event.
        }

        function closeMenu(){
            // Handle the close event.
        }

        function onSelect(){
            // Handle the select event.
        }
    </script>

Handling by Template Delegates

The following example demonstrates how to subscribe to events by a template delegate.

Razor

@(Html.Kendo().ContextMenu()
    .Name("menu")
    .Target("body")
    .Events(e => e
        .Open(@<text>
            function() {
                // Handle the open event inline.
            }
        </text>)
        .Close(@<text>
            function() {
                // Handle the close event inline.
            }
        </text>)
    )
)

Razor

    <kendo-contextmenu name="contextmenu" target="body" 
        on-open="function() {
             // Handle the open event inline.
        }"
        on-close="function() {
             // Handle the close event inline.
        }">
    </kendo-contextmenu>

Handling by HTML Attributes

The following example demonstrates how to subscribe to the select event of a single Context Menu item.

Razor

@(Html.Kendo().ContextMenu()
    .Name("menu")
    .Target("body")
    .Items(items =>
    {
        items.Add().Text("First Item");
        items.Add().Text("Second Item").HtmlAttributes(new { @onclick = "alert('select');" });
    })
)

Razor

    <kendo-contextmenu name="menu" target="body">
        <items>
            <menu-item text="First Item"></menu-item>
            <menu-item text="Second Item" onclick="alert('select');"></menu-item>
        </items>
    </kendo-contextmenu>

Next Steps

• Using the Menu Events (Demo)

See Also

• Using the API of the Menu for ASP.NET Core (Demo)
• Menu Server-Side API
• Menu Client-Side API
• Knowledge Base Section