ASP.NET Core Handle Unique Identifiers with Menu Items

New to Telerik UI for ASP.NET Core? Start a free 30-day trial

Environment

Product	Telerik UI for ASP.NET Core Menu
Product Version	Created with version 2024.4.1112

Description

How can I set custom identifiers to the Telerik UI for ASP.NET Core Menu items and implement custom logic when the respective item is clicked?

Solution

Commonly, you are required to handle custom identifiers with click handlers or, as in this case, by using the client-side Select event of the component.

To provide for the functionality, the Menu mainly uses the HTML elements that are rendered, so you can use custom HTML attributes to serve as unique identifiers.

In this way, you can programmatically:

Identify the clicked item.
Utilize values that are specific to the item other than text.
Remove a specific item from the Menu by identifying it through an attribute.
Run a custom logic for particular items.

The following example demonstrates how to handle a custom command attribute to accomplish specific application requirements, such as the ones mentioned in the above list.

Razor
    @(Html.Kendo().Menu()
        .Name("menu")
        .Items(items => {
            items.Add()
                .Text("Command 1")
                .HtmlAttributes(new { data_command = "command1" });

            items.Add()
                .Text("Command 2")
                .HtmlAttributes(new { data_command = "command2" });

            items.Add()
                .Text("Remove Command 2")
                .HtmlAttributes(new { @class = "remove-command", data_removecommand = "command2" });
        })
        .Events(events => events.Select("onSelect"))
    )
Razor
    @addTagHelper *, Kendo.Mvc

    <kendo-menu name="menu" on-select="onSelect">
        <items>
            <menu-item text="Command 1" data-command="command1"></menu-item>
            <menu-item text="Command 2" data-command="command2"></menu-item>
            <menu-item text="Remove Command 2" class="remove-command" data_removecommand="command2"></menu-item>
        </items>
    </kendo-menu>
JavaScript
    <script>
        function onSelect(ev) {
            var clickedItem = $(ev.item);
            var command = clickedItem.data("command"); // Select the value of the "data-command" attribute to identify the clicked Menu item.

            if (command) { // Execute custom logic based on the clicked Menu item.
                alert(command);
            }
        }

        $(document).ready(function(){
            $(".remove-command").click(function(ev){
                var commandToRemove = $(ev.target).parent("li").data("removecommand");
                removeCommand(commandToRemove);
            })
        })

        function removeCommand(command){
            $("#menu").data("kendoMenu").remove("[data-command='" + command + "']"); // Remove the Menu item.
        }
    </script>

Handle Unique Identifiers with Menu Items

Environment

Description

Solution

More ASP.NET Core Menu Resources

See Also