Progress Telerik UI for Blazor
Blazor DropDownList
- The Blazor DropDownList control lets you predefine a list of items and control the data, sizes and appearance options. Allowing you to change what is rendered in its items, body, header, and footer through templates.
- This component is part of the largest truly native Blazor component suite - Telerik UI for Blazor designed to perfectly fit in any app’s requirement.
- The Blazor UI suite also comes with professionally designed themes enabled with a flip of a switch, document processing library, rich docs & demos to help you get started in no time.
-
DropDownList Overview
The Blazor DropDownList lets the user choose one option from a list of choices. It provides flexible data binding, appearance customization through templates, events, validation, accessibility and keyboard navigation. You can also have a placeholder message for no selection. The DropDownList works in both Blazor WebAssembly (WASM) and Server-side Blazor apps
Telerik UI for Blazor DropDownList demo
-
DropDownList Data Binding
You can bind the Telerik dropdown to a simple collection of numbers or strings, or entire models from your Blazor app.
-
DropDownList Events
The DropDownList component exposes 3 events – OnChange, ValueChanged & OnBlur to let you handle user input any way you need to. They are triggered as their names suggest – when the value is submitted, on every keystroke and whenever it loses focus.
-
DropDownList Popup Settings
Within a single dedicated tag, the Blazor DropDownList allows you to simply configure minimum and maximum dimensions along with width, height and class that are already exposed parameters.
-
Customizing DropDownList with Templates
You can customize the appearance of the Telerik dropdown component through templates so that you can show the data in the desired manner – from adding more data than just the text (such as price), to implementing a grid-like multi-column dropdown with a few lines of CSS. You can modify the:
- ValueTemplate – what the user sees from the selected item
- Header – your own content above the list of items in the dropdown
- Footer – Always visible below the list of items
- ItemTemplate – how the individual items render, so you can add more than just their text
Check out the Blazor DropDownList appearance customization demo
-
DropDownList Forms Validation
Built-in support for EditForm and DataAnnotation validation is a must, and it is available out-of-the box in all Telerik Blazor components, including the DropDownList.
-
DropDownList TabIndex
The Blazor DropDownList component, just like all other Telerik UI for Blazor input components, supports keyboard navigation to switch between components thanks to the HTML TabIndex property. Pressing Tab will normally focus the next available input component, the same way your users are accustomed to when standard HTML inputs are used. Having the TabIndex setting lets you customize that order. -
DropDownList Grouping
The built-in grouping functionality enables category distinction within the DropDownList. You can easily separate options in different groups and categories, the category that is currently displayed is shown at the top of the list for easier navigation with the control.
Check out the Blazor DropDownList Grouping functionality
-
Virtualization
Virtualization enables on-demand loading of the items in the DropDownList, significantly speeding up the time needed to display the list. Combine virtualization with the filtering feature and you get a blazing-fast DropDownList even for large amount of entries. -
DropDownList Accessibility and Keyboard Navigation
Semantic HTML and support for the accessibility standards (WCAG, Section 508 and WAI-ARIA attributes for screen readers) let users with disabilities use the Telerik dropdown list with ease. The built-in keyboard support lets you navigate the component and select the desired item without having to touch a pointing device.
-
DropDownList Theming
The Telerik Blazor DropDownList has several built-in themes such as Default (our own styling), Material (based on the Material Design guidelines) and Bootstrap (which looks like the Bootstrap styling to integrate better). You can easily customize any of out-of-the-box themes with a few lines of CSS, or create new theme to match your colors and branding by using the Telerik SASS ThemeBuilder application.
Next Steps
See Telerik UI for Blazor in action and check out how much it can do out-of-the-box.
Try Telerik UI for Blazor with dedicated technical support.