Skip to content

Commit 87cf18d

Browse files
marin-bratanovmarin-bratanov
committed
docs(autoComplete): events
1 parent 31adb1e commit 87cf18d

File tree

1 file changed

+33
-123
lines changed

1 file changed

+33
-123
lines changed

‎components/autocomplete/events.md‎

Lines changed: 33 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -10,193 +10,103 @@ position: 20
1010

1111
# AutoComplete Events
1212

13-
This article explains the events available in the Telerik ComboBox for Blazor:
13+
This article explains the events available in the Telerik AutoComplete for Blazor:
1414

1515
* [ValueChanged](#valuechanged)
1616
* [OnChange](#onchange)
1717

1818

1919
## ValueChanged
2020

21-
The `ValueChanged` event fires upon every change of the user selection. When [custom values]({%slug components/combobox/custom-value%}) are enabled, it fires upon every keystroke, like in a regular `<input>` element.
22-
23-
The examples below use binding to primitive types for brevity, you can use [full models]({%slug components/combobox/databind%}) as well. Make sure to review the [Data Binding - Missing Value or Data]({%slug components/combobox/databind%}#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 type of the `Value` of the component.
21+
The `ValueChanged` event fires upon every keystroke the user input.
2422

2523
>caption Handle ValueChanged
2624
2725
````CSHTML
2826
@result
2927
<br />
30-
<TelerikComboBox Data="@MyList" ValueChanged="@( (string v) => MyValueChangeHandler(v) )">
31-
</TelerikComboBox>
28+
<TelerikAutoComplete Data="@Suggestions" ValueChanged="@( (string v) => MyValueChangeHandler(v) )">
29+
</TelerikAutoComplete>
3230
33-
@code {
31+
@code{
3432
string result;
3533
3634
private void MyValueChangeHandler(string theUserChoice)
3735
{
38-
result = string.Format("The user chose: {0}", theUserChoice);
36+
result = string.Format("The user wrote: {0}", theUserChoice);
3937
}
4038
41-
protected List<string> MyList = new List<string>() { "first", "second", "third" };
39+
List<string> Suggestions { get; set; } = new List<string> {
40+
"Manager", "Developer", "QA", "Technical Writer", "Support Engineer", "Sales Agent", "Architect", "Designer"
41+
};
4242
}
4343
````
4444

45-
>caption Handle ValueChanged with custom values - the event fires on every keystroke
46-
47-
````CSHTML
48-
@result
49-
<br />
50-
<TelerikComboBox Data="@MyList" AllowCustom="true" ValueChanged="@( (string v) => MyValueChangeHandler(v) )">
51-
</TelerikComboBox>
52-
53-
@code {
54-
string result;
55-
56-
private void MyValueChangeHandler(string theUserChoice)
57-
{
58-
result = string.Format("The user chose: {0}", theUserChoice);
59-
}
60-
61-
protected List<string> MyList = new List<string>() { "first", "second", "third" };
62-
}
63-
````
6445

6546
@[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async)
6647

6748
@[template](/_contentTemplates/common/issues-and-warnings.md#valuechanged-lambda-required)
6849

69-
>caption Handle ValueChanged and provide initial value (it is *not* required to enable custom values)
50+
>caption Handle ValueChanged and provide initial value
7051
7152
````CSHTML
7253
@result
7354
<br />
74-
from model: @MyItem
55+
from model: @Role
7556
<br />
76-
<br />
77-
<TelerikComboBox Data="@MyList" Value="@MyItem" AllowCustom="true" ValueChanged="@( (string v) => MyValueChangeHandler(v) )">
78-
</TelerikComboBox>
57+
<TelerikAutoComplete Data="@Suggestions" Value="@Role" ValueChanged="@( (string v) => MyValueChangeHandler(v) )">
58+
</TelerikAutoComplete>
7959
80-
@code {
60+
@code{
8161
string result;
8262
8363
private void MyValueChangeHandler(string theUserChoice)
8464
{
85-
result = string.Format("The user chose: {0}", theUserChoice);
65+
result = string.Format("The user wrote: {0}", theUserChoice);
8666
8767
//you have to update the model manually because handling the ValueChanged event does not let you use @bind-Value
88-
MyItem = theUserChoice;
68+
Role = theUserChoice;
8969
}
9070
91-
protected List<string> MyList = new List<string>() { "first", "second", "third" };
71+
string Role { get; set; } = "Intern";
9272
93-
protected string MyItem { get; set; } = "second";
94-
}
95-
````
96-
97-
>caption Get selected item - check if the new value is present in the data source
98-
99-
````CSHTML
100-
@result
101-
<br />
102-
Is selection from dropdown: @isLastSelectionInData
103-
<br />
104-
from model: @MyItem
105-
<br />
106-
<br />
107-
<TelerikComboBox Data="@MyList" Value="@MyItem" AllowCustom="true" ValueChanged="@( (string v) => MyValueChangeHandler(v) )">
108-
</TelerikComboBox>
109-
110-
@code {
111-
string result;
112-
bool isLastSelectionInData { get; set; } = true;//default to true as the default in this sample is from the predefined data
113-
114-
private void MyValueChangeHandler(string theUserChoice)
115-
{
116-
isLastSelectionInData = MyList.Contains(theUserChoice); //adapt to your actual data source
117-
118-
result = string.Format("The user chose: {0}", theUserChoice);
119-
120-
MyItem = theUserChoice;
121-
}
122-
123-
protected List<string> MyList = new List<string>() { "first", "second", "third" };
124-
125-
protected string MyItem { get; set; } = "second";
73+
List<string> Suggestions { get; set; } = new List<string> {
74+
"Manager", "Developer", "QA", "Technical Writer", "Support Engineer", "Sales Agent", "Architect", "Designer"
75+
};
12676
}
12777
````
12878

12979

13080
## OnChange
13181

132-
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:
82+
The `OnChange` event represents a user action - confirmation of the current value/item. The key differences with `ValueChanged` are:
13383

13484
* `OnChange` does not prevent two-way binding (the `@bind-Value` syntax)
135-
* `OnChange` fires when the user presses `Enter` in the input, or blurs the input (for example, clicks outside of the combo box). It does not fire on every keystroke, even when `AllowCustom="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.
136-
137-
See the [ComboBox Overview - Selected Item]({%slug components/combobox/overview%}#selected-item) article for details on when the event fires and how item selection and `Value` work.
85+
* `OnChange` fires when the user presses `Enter` in 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.
13886

139-
>caption 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").
87+
>caption Handle OnChange
14088
14189
````CSHTML
14290
@result
14391
<br />
144-
@selectedValue
145-
<br /><br />
146-
<TelerikComboBox Data="@myComboData" TextField="MyTextField" ValueField="MyValueField"
147-
@bind-Value="@selectedValue" OnChange="@MyOnChangeHandler">
148-
</TelerikComboBox>
149-
150-
@code {
151-
string result;
152-
int selectedValue { get; set; } = 3;
153-
154-
private void MyOnChangeHandler(object theUserInput)
155-
{
156-
// the handler receives an object that you may need to cast to the type of the component
157-
// if you do not provide a Value, you must provide the Type parameter to the component
158-
result = string.Format("The user entered: {0}", (int)theUserInput);
159-
}
160-
161-
public class MyComboModel
162-
{
163-
public int MyValueField { get; set; }
164-
public string MyTextField { get; set; }
165-
}
166-
167-
IEnumerable<MyComboModel> myComboData = Enumerable.Range(1, 20).Select(x => new MyComboModel { MyTextField = "item " + x, MyValueField = x });
168-
}
169-
````
170-
171-
>caption Handle OnChange with custom values - the event fires on blur or enter
172-
173-
````CSHTML
174-
@result
92+
from model: @Role
17593
<br />
176-
@selectedValue
177-
<br /><br />
178-
<TelerikComboBox Data="@myComboData" TextField="MyTextField" ValueField="MyValueField"
179-
@bind-Value="@selectedValue" OnChange="@MyOnChangeHandler" AllowCustom="true">
180-
</TelerikComboBox>
94+
<TelerikAutoComplete Data="@Suggestions" @bind-Value="@Role" OnChange="@MyOnChangeHandler" >
95+
</TelerikAutoComplete>
18196
182-
@code {
97+
@code{
18398
string result;
184-
string selectedValue { get; set; } = "3";
18599
186-
private void MyOnChangeHandler(object theUserInput)
100+
private void MyOnChangeHandler(object theUserChoice)
187101
{
188-
// the handler receives an object that you may need to cast to the type of the component
189-
// if you do not provide a Value, you must provide the Type parameter to the component
190-
result = string.Format("The user entered: {0}", (string)theUserInput);
102+
result = string.Format("The user confirmed: {0}", (string)theUserChoice);
191103
}
192104
193-
public class MyComboModel
194-
{
195-
public string MyValueField { get; set; }
196-
public string MyTextField { get; set; }
197-
}
105+
string Role { get; set; }
198106
199-
IEnumerable<MyComboModel> myComboData = Enumerable.Range(1, 20).Select(x => new MyComboModel { MyTextField = "item " + x, MyValueField = x.ToString() });
107+
List<string> Suggestions { get; set; } = new List<string> {
108+
"Manager", "Developer", "QA", "Technical Writer", "Support Engineer", "Sales Agent", "Architect", "Designer"
109+
};
200110
}
201111
````
202112

0 commit comments

Comments
 (0)