ComboBox Events
This article explains the events available in the Telerik ComboBox for Blazor:
ValueChanged
The ValueChanged event fires upon every change of the user selection. When custom values are enabled, it fires upon every keystroke, like in a regular <input> element.
The examples below use binding to string data for simplicity, but you can use full models as well. Make sure to review the Data Binding - Missing Value or Data section to provide all necessary parameters to the component if you do so. 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 ValueChanged with list values
Handle ValueChanged with custom values - the event fires on every keystroke
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/item. It is suitable for handling custom values the user can enter as if the combo box were an input. The key differences with ValueChanged are:
OnChangedoes not prevent two-way binding (the@bind-Valuesyntax)OnChangefires when the user pressesEnterin the input, or blurs the input (for example, clicks outside of the combo box). It does not fire on every keystroke, even whenAllowCustom="true", but it fires when an item is selected from the dropdown. To get the selected item, you can check if the new value is present in the data source.
See the ComboBox Overview - Selected Item article for details on when the event fires and how item selection and Value work.
Handle OnChange without custom values - to get a value from the list, you must write text that will match the text of an item (e.g, "item 5").
Handle OnChange with custom values - the event fires on blur or enter
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.
You can also call remote data through async operations.
Find out how to get the applied filtering and grouping criteria.
When using OnRead, make sure to set TItem and TValue.
Custom Data according to the user input in the ComboBox
You can also debounce the service calls and implement minimum filter length.
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. You can also use custom values.
Filter large local data through the Telerik DataSource extensions
OnOpen
The OnOpen event fires before the ComboBox popup renders.
The event handler receives as an argument an ComboBoxOpenEventArgs 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 ComboBox popup closes.
The event handler receives as an argument an ComboBoxCloseEventArgs 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 ComboBox dropdown renders.
The event handler receives as an argument an ComboBoxItemRenderEventArgs<TItem> object that contains:
| Property | Description |
|---|---|
Item | The current item that renders in the ComboBox. |
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