DropDownList HtmlHelper Overview

The Telerik UI DropDownList HtmlHelper for ASP.NET Core is a server-side wrapper for the Kendo UI DropDownList widget.

The DropDownList displays a list of values and allows for a single selection from the list. The user input is restricted within the predefined options.

Basic Configuration

This runnable demo demonstrates how to define a DropDownList by using the DropDownList HtmlHelper.

Functionality and Features

Events

You can subscribe to all DropDownList events. For a complete example on basic DropDownList events, refer to the demo on using the events of the DropDownList.

Handling by Handler Name

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

    <%: Html.Kendo().DropDownList()
        .Name("dropdownlist")
        .BindTo(new string[] { "Item1", "Item2", "Item3" })
        .Events(e => e
            .Select("dropdownlist_select")
            .Change("dropdownlist_change")
        )
    %>
    <script>
        function dropdownlist_select() {
            // Handle the select event.
        }

        function dropdownlist_change() {
            // Handle the change event.
        }
    </script>
    @(Html.Kendo().DropDownList()
        .Name("dropdownlist")
        .BindTo(new string[] { "Item1", "Item2", "Item3" })
        .Events(e => e
            .Select("dropdownlist_select")
            .Change("dropdownlist_change")
        )
    )
    <script>
        function dropdownlist_select() {
            // Handle the select event.
        }

        function dropdownlist_change() {
            // Handle the change event.
        }
    </script>

Handling by Template Delegate

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

@(Html.Kendo().DropDownList()
    .Name("dropdownlist")
    .BindTo(new string[] { "Item1", "Item2", "Item3" })
    .Events(e => e
        .Select(@<text>
        function() {
            // Handle the select event inline.
        }
        </text>)
        .Change(@<text>
        function() {
            // Handle the change event inline.
        }
        </text>)
    )
)

Referencing Existing Instances

To reference an existing Kendo UI DropDownList instance, use the jQuery.data() configuration option. Once a reference is established, use the DropDownList client-side API to control its behavior.

// Place the following after the DropDownList for ASP.NET MVC declaration.
<script>
    $(function() {
        // The Name() of the DropDownList is used to get its client-side instance.
        var dropdownlist = $("#productDropDownList").data("kendoDropDownList");
    });
</script>

See Also

In this article
Not finding the help you need? Improve this article