Events

Updated on Dec 10, 2025

The DropDownButton component exposes the Click(), Open(), and Close() events that you can handle and further customize the functionality of the component.

For a complete example on basic DropDownButton events, refer to the demo on using the events of the DropDownButton.

Razor

    @(Html.Kendo().DropDownButton()
        .Name("dropDownButton")
        .Text("User Settings")
        .Icon("user")
        .ThemeColor(ThemeColor.Primary)
        .FillMode(FillMode.Solid)
        .Items(items=>{
            items.Add().Id("profile").Text("My Profile").Icon("image");
            items.Add().Id("friend-request").Text("Friend Requests").Icon("tell-a-friend");
            items.Add().Id("settings").Text("Account Settings").Icon("gear");
            items.Add().Id("support").Text("Support").Icon("question-circle");
            items.Add().Id("logout").Text("Log Out").Icon("logout");
        })
        .Events(e=>e.Click("onClick").Open("onOpen").Close("onClose"))
    )

    <script>
        function onClick(e) {
            console.log("event :: click (#" + e.id + ")" );
        }

        function onOpen(e) {
            console.log("event :: open" );
        }

        function onClose(e) {
            console.log("event :: close" );
        }
    </script>

Next Steps

• Using the DropDownButton Events (Demo)
• API for Configuring DropDownButton events

See Also

• Using the API of the DropDownButton for ASP.NET MVC (Demo)
• DropDownButton Server-Side API
• DropDownButton Client-Side API