Telerik Extensions for ASP.NET MVC

This topic shows how to use the ComboBox family of UI components in an ASP.NET MVC application.

Important

All Telerik UI components need a ScriptRegistrar component in order to output their JavaScript objects and register their JavaScript files. The ScriptRegistrar component should be defined *after* all other UI components in the page. If you create the components on the client-side and do not use the MVC extensions, you need to manually register all requried JavaScript files. For further information check this help topic (Step 4 - Register Scripts)

Prerequisites

Before proceeding make sure that:
  • You have all the required components installed.
  • Make sure that your ASP.NET MVC project refers the Telerik.Web.Mvc.dll assembly and you have a ScriptRegistrar and a StyleSheetRegistrar defined in your application (either in the master page or in the view where you are going to use the numericTextBox).
  • All required JavaScript and CSS files are properly copied to your project. This is outlined in here - steps 4 and 5.

Introduction

Telerik Extensions for ASP.NET MVC ships three components which are referred to as the "ComboBox family". Namely:
  • AutoComplete - a TextBox which shows a suggestion list of predefined values.
  • ComboBox - an input component allowing the end user to pick an item from a predefined list or to input a custom value.
  • DropDownList - a themeable equivalent of Html.DropDownList which allows the user to pick an item from a predefined list.
The following table shows the supported features of those components:
FeatureAutoCompleteComboBoxDropDownList
The user can enter custom value YesYesNo
Data binding Supports server and client (Ajax or WebService) data binding.
Note
It is up to the developer whether to perform filtering on the server based on the text input of the end user. If no server filtering is done the AutoComplete UI component can filter on the client-side.
Supports server and client (Ajax or WebService) data binding.
Note
It is up to the developer whether to perform filtering on the server based on the text input of the end user. If no server filtering is done the ComboBox UI component can filter on the client-side.
Supports server and client (Ajax or WebService) data binding.
Note
The DropDownList UI component makes only one request for data when configured for client binding.
Filtering Supports "StartsWith" or "Contains" filtering. Filtering is always enabled. Supports "StartsWith" or "Contains" filtering. Filtering can be disabled. Then the ComboBox component will scroll to the matching element upon user input. Does not support filtering. The DropDownList component will scroll to the matching element upon user input.
Multiple valuesYesNoNo
Auto FillYesYesNo
Highlight first matching itemYesYesYes

ComboBox Declaration

The following example shows how to add the ComboBox UI component to an existing ASP.NET MVC view:
CopyView
<%= Html.Telerik().ComboBox()
        .Name("ComboBox")
        .Items(item => 
        {
            item.Add().Text("Item1").Value("1").Selected(true);
            item.Add().Text("Item2").Value("2");
            item.Add().Text("Item3").Value("3");
        }) 
%>
The simplest way to populate the combobox with items is to use Items method. With it you can add DropDownItem objects.
Important
Note that the ComboBox and DropDownList components do not allow multiple selected items. In other words you can select only one item.
Here is the result of the aforementioned code:
Combo Box Sample

Configuring the DropDown

By default, the dropdown of the ComboBox, DropDownList and AutoComplete is as wide as the component itself. You can change this by setting a width style in DropDownHtmlAttributes, especially if you want to make the dropdown wider. Another option might be to disable item text wrapping.
CopyView
<%= Html.Telerik().ComboBox()
        .Name("ComboBox")
        .DropDownHtmlAttributes( new { style = "width:200px; white-space:nowrap;" })
%>

Getting the ComboBox Value

Getting the value of the combobox is very similar to getting the value of a textbox. The following example shows how to get the value of the combobox after posting a form.
  1. Make sure the combobox is placed within a <form>.
    CopyView
    <% Html.BeginForm("Save", "Home"); %>
    <%= Html.Telerik().ComboBox()
        .Name("productID")
        .Items(item => 
        {
            item.Add().Text("Chai").Value("1").Selected(true);
            item.Add().Text("Chang").Value("2");
            item.Add().Text("Tofu").Value("3");
        }) 
    %>
    <% Html.EndForm(); %>
  2. In your controller add an action method which has a parameter named after the Name of the combobox (which is "productID" in this case):
    CopyController
    public ActionResult Save(int productID)
    {
    return View();
    }
    Important
    That parameter will contain the value of the selected item.
You can get the value of the DropDownList and AutoComplete UI components in the exact same way.
Important
If an item does not have a Value specified then its Text property will be used as value when the item is selected.