Skip to content

Commit 5ac1d99

Browse files
marin-bratanovmarin-bratanov
committed
chore(multiselect): docs skeleton
1 parent e4d72d8 commit 5ac1d99

File tree

10 files changed

+670
-5
lines changed

10 files changed

+670
-5
lines changed

‎_config.yml‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -267,6 +267,13 @@ intro_columns:
267267
items:
268268
"Scheduler": "scheduler-overview"
269269
"Calendar": "components/calendar/overview"
270+
271+
-
272+
title: "Layout"
273+
items:
274+
"Window": "components/window/overview"
275+
"Animation Container": "components/animationcontainer/overview"
276+
270277
-
271278
categories:
272279
-
@@ -281,12 +288,8 @@ intro_columns:
281288
"DropDownList": "components/dropdownlist/overview"
282289
"ComboBox": "components/combobox/overview"
283290
"AutoComplete": "autocomplete-overview"
291+
"MultiSelect": "multiselect-overview"
284292

285-
-
286-
title: "Layout"
287-
items:
288-
"Window": "components/window/overview"
289-
"Animation Container": "components/animationcontainer/overview"
290293
-
291294
categories:
292295
-
@@ -406,6 +409,7 @@ footer:
406409
title: "Sample Applications"
407410
links:
408411
"Dashboard": https://demos.telerik.com/blazor-dashboard-app/
412+
"PWA - Stocks": https://demos.telerik.com/blazor-financial-portfolio
409413

410414

411415
footer_social:

‎components/multiselect/data-bind.md‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
---
2+
title: Data Binding
3+
page_title: MultiSelect for Blazor | Data Binding
4+
description: Data Binding the MultiSelect for Blazor
5+
slug: multiselect-databind
6+
tags: telerik,blazor,multiselect,data,bind,binding,databind
7+
published: True
8+
position: 1
9+
---
10+
11+
# MultiSelect Data Binding
12+
13+
This article explains the different ways to provide data to an AutoComplete component, the properties related to data binding and their results. The key requirements is to have a string field for the suggestions.
14+
15+
There are two key ways to bind data:
16+
17+
* [Primitive Type](#primitive-type)
18+
* [Model](#bind-to-a-model)
19+
20+
There are also some [considerations](#considerations) to keep in mind.
21+
22+
## Primitive Types
23+
24+
You can data bind the AutoComplete to a simple collection of `string` data. When you have a concrete list of options for the user to choose from, their string representation is often suitable for display and you do not need special models.
25+
26+
To bind the AutoComplete, you need to:
27+
28+
1. provide an `IEnumerable<string>` to its `Data` property,
29+
1. point the `Value` parameter to a `string` field.
30+
31+
>caption Data binding an AutoComplete to a simple data source
32+
33+
````CSHTML
34+
@*Bind to an IEnumerable<string>*@
35+
36+
User input 1: @TheValue
37+
<br />
38+
<TelerikAutoComplete Data="@Suggestions" @bind-Value="@TheValue" />
39+
40+
<br />
41+
User input 2: @SecondValue
42+
<br />
43+
<TelerikAutoComplete Data="@ArraySuggestions" @bind-Value="@SecondValue" />
44+
45+
@code{
46+
string TheValue { get; set; }
47+
List<string> Suggestions { get; set; } = new List<string> { "first", "second", "third" };
48+
49+
string SecondValue { get; set; }
50+
string[] ArraySuggestions = new string[] { "one", "two", "three" };
51+
}
52+
````
53+
54+
## Bind to a Model
55+
56+
You can bind the AutoComplete to a model in your application. This is useful when you have the data in some form already and you don't need to prepare a separate collection of suggestions.
57+
58+
To bind the AutoComplete to a model:
59+
60+
1. populate its `Data` property with the collection of items you want in the dropdown
61+
1. set the `ValueField` to point to the corresponding name of the model that contains the string data for the suggestions
62+
1. point the `Value` parameter to a `string` field in the view-model.
63+
64+
>caption Data binding an AutoComplete to a model
65+
66+
````CSHTML
67+
@TheValue
68+
<br />
69+
<TelerikAutoComplete Data="@Suggestions" ValueField="@( nameof(SuggestionsModel.Suggestion) )" @bind-Value="@TheValue" />
70+
71+
@code{
72+
string TheValue { get; set; }
73+
74+
List<SuggestionsModel> Suggestions { get; set; } = new List<SuggestionsModel>
75+
{
76+
new SuggestionsModel { Suggestion = "first", SomeOtherField = 1 },
77+
new SuggestionsModel { Suggestion = "second", SomeOtherField = 2 },
78+
new SuggestionsModel { Suggestion = "third", SomeOtherField = 3 }
79+
};
80+
81+
public class SuggestionsModel
82+
{
83+
public string Suggestion { get; set; }//the auto complete needs only the string field
84+
public int SomeOtherField { get; set; }
85+
}
86+
}
87+
````
88+
89+
## Considerations
90+
91+
### Reference
92+
93+
The AutoComplete component is generic and its type depends on the type of the model you provide as its `Data` collection.
94+
95+
````Primitive
96+
@*Reference type when binding to primitive collections*@
97+
98+
<TelerikAutoComplete @ref="@AutoCompleteRefWithPrimitiveData" Data="@Suggestions" @bind-Value="@TheValue" />
99+
100+
@code{
101+
TelerikAutoComplete<string> AutoCompleteRefWithPrimitiveData { get; set; }
102+
103+
string TheValue { get; set; }
104+
List<string> Suggestions { get; set; } = new List<string> { "first", "second", "third" };
105+
}
106+
````
107+
````Model
108+
@*Reference when binding to model collections*@
109+
110+
<TelerikAutoComplete @ref="@AutoCompleteRefWithModel" Data="@Suggestions" ValueField="@( nameof(SuggestionsModel.Suggestion) )" @bind-Value="@TheValue" />
111+
112+
@code{
113+
TelerikAutoComplete<SuggestionsModel> AutoCompleteRefWithModel { get; set; }
114+
115+
string TheValue { get; set; }
116+
117+
List<SuggestionsModel> Suggestions { get; set; } = new List<SuggestionsModel>
118+
{
119+
new SuggestionsModel { Suggestion = "first", SomeOtherField = 1 },
120+
new SuggestionsModel { Suggestion = "second", SomeOtherField = 2 },
121+
new SuggestionsModel { Suggestion = "third", SomeOtherField = 3 }
122+
};
123+
124+
public class SuggestionsModel
125+
{
126+
public string Suggestion { get; set; }//the auto complete needs only the string field
127+
public int SomeOtherField { get; set; }
128+
}
129+
}
130+
````
131+
132+
### Missing Data
133+
134+
The AutoComplete is, essentially, a textbox. This means that its `Value` is always a string and it is up to you to bind and/or use it. The `Data` parameter, however, is required for the functionality of the component, and it must never be `null`. If there are no suggestions that you wish to provide to the user, consider using a regular TextBox, or creating an empty collection.
135+
136+
>caption Minimal AutoComplete configuration for it to run
137+
138+
````CSHTML
139+
@* If you cannot provide suggestions list, use an empty collection and the component will show "No Data" to the user in the suggestions list *@
140+
141+
<TelerikAutoComplete Data="@Suggestions" />
142+
143+
@code{
144+
List<string> Suggestions { get; set; } = new List<string>();
145+
}
146+
````
147+
148+
149+
## See Also
150+
151+
* [AutoComplete Overview]({%slug autocomplete-overview%})
152+
* [Live Demo: AutoComplete](https://demos.telerik.com/blazor-ui/autocomplete/overview)

0 commit comments

Comments
 (0)