AutoComplete Events
This article explains the events available in the Telerik AutoComplete for Blazor:
ValueChanged
The ValueChanged event fires on every user keystroke that changes the textbox value.
Handle AutoComplete ValueChanged
AutoComplete Value: @AutoCompleteValue <br />
<TelerikAutoComplete Data="@AutoCompleteData"
Value="@AutoCompleteValue"
ValueChanged="@( (string newValue) => OnAutoCompleteValueChanged(newValue) )">
</TelerikAutoComplete>
@code{
private List<string> AutoCompleteData { get; set; } = new List<string> {
"Manager", "Developer", "QA", "Technical Writer", "Support Engineer"
};
private string AutoCompleteValue { get; set; }
private void OnAutoCompleteValueChanged(string newValue)
{
AutoCompleteValue = newValue;
}
}
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.
Handle ValueChanged and provide initial value
@result
<br />
from model: @Role
<br />
<TelerikAutoComplete Data="@Suggestions" Value="@Role" ValueChanged="@( (string v) => MyValueChangeHandler(v) )">
</TelerikAutoComplete>
@code{
string result;
private void MyValueChangeHandler(string theUserChoice)
{
result = string.Format("The user wrote: {0}", theUserChoice);
//you have to update the model manually because handling the ValueChanged event does not let you use @bind-Value
Role = theUserChoice;
}
string Role { get; set; } = "Intern";
List<string> Suggestions { get; set; } = new List<string> {
"Manager", "Developer", "QA", "Technical Writer", "Support Engineer", "Sales Agent", "Architect", "Designer"
};
}
OnChange
The OnChange event represents a user action - confirmation of the current value/item. 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 input or dropdown). It does not fire on every keystroke, but it fires when an item is selected from the dropdown.
Handle OnChange
@result
<br />
from model: @Role
<br />
<TelerikAutoComplete Data="@Suggestions" @bind-Value="@Role" OnChange="@MyOnChangeHandler" >
</TelerikAutoComplete>
@code{
string result;
private void MyOnChangeHandler(object theUserChoice)
{
result = string.Format("The user confirmed: {0}", (string)theUserChoice);
}
string Role { get; set; }
List<string> Suggestions { get; set; } = new List<string> {
"Manager", "Developer", "QA", "Technical Writer", "Support Engineer", "Sales Agent", "Architect", "Designer"
};
}
OnRead
You can use the he OnRead event to provide data to the component according to some custom logic and according to the current user input and/or scroll position (for 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.
When using OnRead, make sure to set TItem and TValue.
Custom Data according to the user input in the AutoComplete
<p>@AutoCompleteValue</p>
<TelerikAutoComplete TItem="@String"
OnRead="@ReadItems"
@bind-Value="@AutoCompleteValue"
Filterable="true"
Placeholder="Type anything">
</TelerikAutoComplete>
@code {
public string AutoCompleteValue { get; set; }
List<string> Suggestions { get; set; } = new List<string>();
async Task ReadItems(AutoCompleteReadEventArgs args)
{
if (args.Request.Filters.Count > 0) // wait for user filter input
{
Telerik.DataSource.FilterDescriptor filter = args.Request.Filters[0] as Telerik.DataSource.FilterDescriptor;
string userInput = filter.Value.ToString();
string method = filter.Operator.ToString();
//new data collection comes down from the service
args.Data = await GetSuggestionsData(userInput, method);
}
}
async Task<List<string>> GetSuggestionsData(string userInput, string filterOperator)
{
await Task.Delay(500); // simulate network delay, remove it for a real app
//sample logic for getting suggestions - here they are generated, you can call a remote service
//for brevity, this example does not use the filter operator, but your actual service can
List<string> suggestionsData = new List<string>();
for (int i = 1; i <= 5; i++)
{
suggestionsData.Add($"suggestion {i} for input {userInput}");
}
return suggestionsData;
}
}
Filter large local data through the Telerik DataSource extensions
@using Telerik.DataSource.Extensions
<p>@AutoCompleteValue</p>
<TelerikAutoComplete TItem="@Car"
OnRead="@ReadItems"
@bind-Value="@AutoCompleteValue"
ValueField="@nameof(Car.Make)"
Filterable="true"
Placeholder="Type a car brand">
</TelerikAutoComplete>
@code {
public string AutoCompleteValue { get; set; }
List<Car> AllSuggestions { get; set; }
protected async Task ReadItems(AutoCompleteReadEventArgs args)
{
//using Telerik extension methods to filter the data
var datasourceResult = AllSuggestions.ToDataSourceResult(args.Request);
args.Data = datasourceResult.Data;
}
protected override void OnInitialized()
{
AllSuggestions = new List<Car> {
new Car { Id = 1, Make = "Honda" },
new Car { Id = 2, Make = "Opel" },
new Car { Id = 3, Make = "Audi" },
new Car { Id = 4, Make = "Lancia" },
new Car { Id = 5, Make = "BMW" },
new Car { Id = 6, Make = "Mercedes" },
new Car { Id = 7, Make = "Tesla" },
new Car { Id = 8, Make = "Vw" },
new Car { Id = 9, Make = "Alpha Romeo" },
new Car { Id = 10, Make = "Chevrolet" },
new Car { Id = 11, Make = "Ford" },
new Car { Id = 12, Make = "Cadillac" },
new Car { Id = 13, Make = "Dodge" },
new Car { Id = 14, Make = "Jeep" },
new Car { Id = 15, Make = "Chrysler" },
new Car { Id = 16, Make = "Lincoln" }
};
base.OnInitialized();
}
public class Car
{
public int Id { get; set; }
public string Make { get; set; }
}
}
OnOpen
The OnOpen event fires before the AutoComplete popup renders.
The event handler receives as an argument an AutoCompleteOpenEventArgs object that contains:
| Property | Description |
|---|---|
IsCancelled |
Set the IsCancelled property to true to cancel the opening of the popup. |
<TelerikAutoComplete Data="@Suggestions"
@bind-Value="@AutoCompleteValue"
OnOpen="@OnOpenEventHandler" />
@code {
private string AutoCompleteValue { get; set; }
private void OnOpenEventHandler(AutoCompleteOpenEventArgs args)
{
//set the IsCancelled to true to cancel the opening of the popup.
args.IsCancelled = false;
}
private List<string> Suggestions { get; set; } = new List<string> {
"Manager", "Developer", "QA", "Technical Writer", "Support Engineer", "Sales Agent", "Architect", "Designer"
};
}
OnClose
The OnClose event fires before the AutoComplete popup closes.
The event handler receives as an argument an AutoCompleteCloseEventArgs object that contains:
| Property | Description |
|---|---|
IsCancelled |
Set the IsCancelled property to true to cancel the closing of the popup. |
@* Cancel the OnClose event based on a condition *@
<TelerikAutoComplete Data="@Suggestions"
@bind-Value="@AutoCompleteValue"
OnClose="OnCloseEventHandler" />
@code {
private string AutoCompleteValue { get; set; }
private void OnCloseEventHandler(AutoCompleteCloseEventArgs args)
{
//cancel the OnClose event based on a condition
if (AutoCompleteValue != "Manager")
{
args.IsCancelled = true;
}
}
private List<string> Suggestions { get; set; } = new List<string> {
"Manager", "Developer", "QA", "Technical Writer", "Support Engineer", "Sales Agent", "Architect", "Designer"
};
}
OnItemRender
The OnItemRender event fires when each item in the AutoComplete dropdown renders.
The event handler receives as an argument an AutoCompleteItemRenderEventArgs<TItem> object that contains:
| Property | Description |
|---|---|
Item |
The current item that renders in the AutoComplete. |
Class |
The custom CSS class that will be added to the item. |
@* Customize an item in the AutoComplete *@
<style>
.customized-item{
font-weight:bold;
color: white;
background-color: blue;
}
</style>
<TelerikAutoComplete Data="@Suggestions"
OnItemRender="@OnItemRenderHandler"
ValueField="@(nameof(SuggestionsModel.Suggestion))"
@bind-Value="@AutoCompleteValue" />
@code {
private string AutoCompleteValue { get; set; }
private void OnItemRenderHandler(AutoCompleteItemRenderEventArgs<SuggestionsModel> args)
{
SuggestionsModel currentItem = args.Item;
if (currentItem.Suggestion == "second" && currentItem.UniqueIdentifier == 2)
{
args.Class = "customized-item";
}
}
List<SuggestionsModel> Suggestions { get; set; } = new List<SuggestionsModel>
{
new SuggestionsModel { Suggestion = "first", UniqueIdentifier = 1 },
new SuggestionsModel { Suggestion = "second", UniqueIdentifier = 2 },
new SuggestionsModel { Suggestion = "third", UniqueIdentifier = 3 }
};
public class SuggestionsModel
{
public string Suggestion { get; set; }
public int UniqueIdentifier { get; set; }
}
}
OnBlur
The OnBlur event fires when the component loses focus.
Handle the OnBlur event
@* You do not have to use OnChange to react to loss of focus *@
<TelerikAutoComplete @bind-Value="@TheValue" Data="@Suggestions"
OnBlur="@OnBlurHandler">
</TelerikAutoComplete>
@code{
async Task OnBlurHandler()
{
Console.WriteLine($"BLUR fired, current value is {TheValue}.");
}
string TheValue { get; set; }
List<string> Suggestions { get; set; } = new List<string> { "one", "two", "three" };
}