Events
This article explains the events available in the Telerik DropDownList for Blazor:
The examples in this article use string values and simple data sources for brevity. You can use full models, see the data binding article for more details.
ValueChanged
The ValueChanged event fires upon every change of the user selection.
The example below uses binding to string data for brevity. You can use full models as well. The type of the argument in the lambda expression must match the Value type of the component, and the ValueField type (if ValueField is set).
Handle DropDownList ValueChanged
The event is an
EventCallback. It can be synchronous and returnvoid, or asynchronous and returnasync Task. Do not useasync void.
The lambda expression in the handler is required by the framework: https://github.com/aspnet/AspNetCore/issues/12226.
OnChange
The OnChange event represents a user action - confirmation of the current value. In inputs, it fires when the user presses Enter in the input, or when the input loses focus. In the DropDownList, it fires when the user selects an item as well. See here for sample logic on executing it only once per value selection.
The
OnChangeevent is a custom event and does not interfere with bindings, so you can use it together with models and forms.
Handle the OnChange event and use two-way binding
The event is an
EventCallback. It can be synchronous and returnvoid, or asynchronous and returnasync Task. Do not useasync void.
OnRead
You can use the OnRead event to provide data to the component based on custom logic and the current user input and/or scroll position (when using virtualization). The event fires when:
- The component initializes.
- The user filters.
- The user scrolls with virtualization enabled.
Find out how to get the applied filtering and grouping criteria.
You can also call remote data through async operations.
Custom Data according to the user input in the DropDownList
You can also debounce the service calls and implement minimum filter length. An example of such approach is available in this knowledge base article for the ComboBox. The same approach is applicable for the DropDownList.
The
OnReadhandler should change only the data of the component, and not other parameters such asValue. This can lead to issues with the asynchronous nature of the event, and race conditions can occur with the arrival of the new data. Moreover, such a change is likely to be unexpected by the user and cause bad UX.
This example uses plain strings for brevity, you can use full models - see the data binding article for examples.
Filter large local data through the Telerik DataSource extensions
OnOpen
The OnOpen event fires before the DropDownList popup renders.
The event handler receives as an argument an DropDownListOpenEventArgs object that contains:
| Property | Description |
|---|---|
IsCancelled | Set the IsCancelled property to true to cancel the opening of the popup. |
OnClose
The OnClose event fires before the DropDownList popup closes.
The event handler receives as an argument an DropDownListCloseEventArgs object that contains:
| Property | Description |
|---|---|
IsCancelled | Set the IsCancelled property to true to cancel the closing of the popup. |
OnItemRender
The OnItemRender event fires when each item in the DropDownList popup renders.
The event handler receives as an argument an DropDownListItemRenderEventArgs<TItem> object that contains:
| Property | Description |
|---|---|
Item | The current item that renders in the DropDownList. |
Class | The custom CSS class that will be added to the item. |
OnBlur
The OnBlur event fires when the component loses focus.
Handle the OnBlur event