DropDownList Overview

Telerik UI for ASP.NET Core Ninja image

The DropDownList is part of Telerik UI for ASP.NET Core, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

The Telerik UI DropDownList TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers 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.

Initializing the DropDownList

The following example demonstrates how to define the DropDownList.

    @(Html.Kendo().DropDownList()
        .Name("dropdownlist")
        .DataTextField("ProductName")
        .DataValueField("ProductID")
        .DataSource(source => {
            source.Read(read =>
            {
                read.Action("Products_Read", "DropDownList");
            });
        })
    )
    <kendo-dropdownlist name="dropdownlist"
                    datatextfield="ProductName"
                    datavaluefield="ProductID">
    <datasource>
        <transport>
            <read url="@Url.Action("Products_Read", "DropDownList")" />
        </transport>
    </datasource>
</kendo-dropdownlist>

    public class DropDownListController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        public JsonResult Products_Read()
        {
            var result = Enumerable.Range(0, 50).Select(i => new ProductViewModel
            {
                ProductID = "" + i,
                ProductName = "Product " + i
            });

            return Json(result);
        }
    }

Basic Configuration

The DropDownList configuration options are passed as attributes.

    @(Html.Kendo().DropDownList()
          .Name("products")
          .DataTextField("ProductName")
          .DataValueField("ProductID")
          .HtmlAttributes(new { style = "width:100%;" })
          .Filter(FilterType.Contains)
          .DataSource(source => source
              .Read(read => read.Action("GetProducts", "Home"))
          )
    )
    <kendo-dropdownlist name="products" filter="FilterType.Contains"
                        placeholder="Select product"
                        datatextfield="ProductName"
                        datavaluefield="ProductID"
                        style="width: 100%;">
        <datasource>
            <transport>
                <read url="@Url.Action("GetProducts", "Home")" />
            </transport>
        </datasource>
    </kendo-dropdownlist>
    public JsonResult GetProducts(string text)
    {
        using (var northwind = GetContext())
        {
            var products = northwind.Products.Select(product => new ProductViewModel
            {
                ProductID = product.ProductID,
                ProductName = product.ProductName,
                UnitPrice = product.UnitPrice.Value,
                UnitsInStock = product.UnitsInStock.Value,
                UnitsOnOrder = product.UnitsOnOrder.Value,
                Discontinued = product.Discontinued
            });

            if (!string.IsNullOrEmpty(text))
            {
                products = products.Where(p => p.ProductName.Contains(text));
            }

            return Json(products.ToList());
        }
    }

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")
        )
    )

@{ 
    var Items = new string[] { "Item1", "Item2", "Item3" };
}

<kendo-dropdownlist name="dropdownlist"
                    bind-to="Items"
                    on-select="dropdownlist_select"
                    on-change="dropdownlist_change">
</kendo-dropdownlist>
    <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>)
        )
    )

Getting the current value

The following example demonstrates how to get the current value of a Telerik UI DropDownList in the Change Event handler.

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

@{ 
    var Items = new string[] { "Item1", "Item2", "Item3" };
}

<kendo-dropdownlist name="dropdownlist"
                    bind-to="Items"
                    on-change="dropdownlist_change">
</kendo-dropdownlist>
    <script>
        function dropdownlist_change(e) {
            var ddl = e.sender; //Get an instance of the DropDownList.
            var selectedValue = ddl.value(); //Get the current value.
            console.log(selectedValue);
        }
    </script>

Referencing Existing Instances

To reference an existing Telerik 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 your Telerik UI DropDownList for ASP.NET Core 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