Please see my other Telerik articles.

Displaying dropdown choices with special formatting

In this article I’ll demonstrate how to create a Telerik dropdown using templates to display data in a tabular format.

First, I’ll create a ViewModel to serve as the data layer. Note: Ensure you’ve decorated the CustomerID property with the [Key] attribute or the Controller wizard can’t auto-generate a new controller/View.

Now, I’ll define my dropdown in the View.

Note:

• The dropdown is bound to the CustomerID. Not only is this used for the .DataValueField property to return to the selected value to the controller, but CustomerID is used in CSS (below) to style the dropdown and its template.
• The .Name() property is not used because using it prevents the selected value from being returned to the controller.
• The CustomerName data field is displayed in the dropdown after the user make’s a selection.
• Though the CustomerName and CustomerID data fields from the ViewModel are specified, other data fields are referenced in the template – you aren’t limited by these fields in what you can display in the template.
• .Filter() uses Contains to allow the user to find choices based on a partial search in case they can’t remember what they’re searching for begins or ends with, they can find it only using what they remember to search.
• read.Action() specifies the action, then controller to populate the dropdown choices.
• .HtmlAttributes defines the width of the control displayed to the user in its default state and after selection. This doesn’t apply to the template displayed when the user make’s a selection.
• .Height() affects the container used to display templated choices (box which appears after clicking the dropdown).
• .HeaderTemplate() applies to the column header of choices displayed to the user.
• .Template() applies to the choices displayed to the user.
• .FooterTemplate() applies to the row below the choices displayed to the user.
• Note the “k-…” named CSS classes, these are required for styling the dropdown.
• Note CSS id and classes for tags, these control the width and other settings.
• Data is bound to the ViewModel using “#: data.[column] #.”

PopulateChoicesDropdownWithTemplate() retrieves data and populates the dropdown.

Note: JsonRequestBehavior.AllowGet is required for the data being returned to be loaded into the control.

Now I’ll return data to my controller using a static dataset.

Note the return type IEnumerable which supports iterating through objects.

Now I’ll finish by styling the dropdown, beginning by including a reference to the style sheet.

Choices.css defines properties common to all dropdowns.

DropdownWithTemplate.css defines properties specific to this dropdown.

The first block defines properties of the choices’ column headers.

The second block defines properties of the choices’ column cells.

Note: The ID names specified in the View are case-sensitive and must match those in the CSS.

This block defines the properties of the container for choices.

The final block defines properties used in the footer of the choices.

Now you can see the final product – a Telerik dropdown displaying data with a custom template.

Also, you may filter choices and have it select the first matching item.