Skip to content

Commit f1ded54

Browse files
vveesseelliinnaapepinho24
vveesseelliinnaa
authored and
pepinho24
committed
docs(multiselect): Add Server-side binding article
1 parent 51384c6 commit f1ded54

File tree

1 file changed

+207
-0
lines changed

1 file changed

+207
-0
lines changed

‎controls/multiselect/data-binding/server-side.md‎

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,211 @@ published: True
88
position: 0
99
---
1010

11+
# Server-Side Data Binding
12+
13+
**RadMultiSelect** can be bound to standard server data sources like `List<T>`, `SqlDataSource` or a `DataTable`. The data from the server data source creates MultiSelect items which are serialized as a JSON literal to the client-side. It is parsed on the client-side as the **RadMultiSelect** is a wrapper over the Kendo UI for jQuery widget which are entirely client-side.
14+
15+
The fields that you would like to have available on the client-side should be passed to the `DataKeyNames` property, comma-separated. Also, you can add additional data to the items via the Attributes collection which will be serialized and available on the client-side.
16+
17+
>note The DataTextField, DataValueField and the Fields declared in **RadMultiSelect** are added by default to the DataKeyNames, so it is not necessary to add them explicitly.
18+
>
19+
20+
>caption Example 1: Declare items in the Markup
21+
22+
````ASP.NET
23+
<telerik:RadMultiSelect ID="RadMultiSelect1" runat="server" DataTextField="text" DataValueField="value" Filter="Contains" Width="400px"
24+
Placeholder="Select attendees...">
25+
<Items>
26+
<telerik:MultiSelectItem Text="Steven White" Value="1"></telerik:MultiSelectItem>
27+
<telerik:MultiSelectItem Text="Nancy King" Value="2"></telerik:MultiSelectItem>
28+
<telerik:MultiSelectItem Text="Nancy Davolio" Value="3"></telerik:MultiSelectItem>
29+
<telerik:MultiSelectItem Text="Robert Davolio" Value="4"></telerik:MultiSelectItem>
30+
<telerik:MultiSelectItem Text="Michael Leverling" Value="5"></telerik:MultiSelectItem>
31+
</Items>
32+
</telerik:RadMultiSelect>
33+
````
34+
35+
>caption Example 2: Add items programmatically
36+
37+
````ASP.NET
38+
<telerik:RadMultiSelect ID="RadMultiSelect1" runat="server" DataTextField="text" DataValueField="value" Filter="Contains" Width="400px"
39+
Placeholder="Select attendees...">
40+
</telerik:RadMultiSelect>
41+
````
42+
43+
````C#
44+
protected void Page_Load(object sender, EventArgs e)
45+
{
46+
for (int i = 0; i < 5; i++)
47+
{
48+
MultiSelectItem newItem = new MultiSelectItem() { Text = "Item " + i, Value = i.ToString() });
49+
RadMultiSelect1.Items.Add(newItem);
50+
}
51+
}
52+
````
53+
````VB
54+
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
55+
For i As Integer = 0 To 5 - 1
56+
Dim newItem As MultiSelectItem = New MultiSelectItem() With {
57+
.Text = "Item " & i,
58+
.Value = i.ToString()
59+
}
60+
RadMultiSelect1.Items.Add(newItem)
61+
Next
62+
End Sub
63+
````
64+
65+
66+
>caption Example 3: Bind to an `SqlDataSource`
67+
68+
````ASP.NET
69+
<telerik:RadMultiSelect ID="RadMultiSelect1" runat="server"
70+
DataSourceID="SqlDataSource1" DataTextField="ProductName" DataValueField="ProductID" />
71+
72+
<asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
73+
ProviderName="System.Data.SqlClient" SelectCommand="SELECT [ProductID], [ProductName] FROM [Products] ORDER By ProductName" />
74+
````
75+
76+
>caption Example 4: Bind to a List of anonymous objects
77+
78+
````ASP.NET
79+
<telerik:RadMultiSelect ID="RadMultiSelect1" runat="server" DataTextField="TheText" DataValueField="ID" />
80+
````
81+
82+
````C#
83+
protected void Page_Load(object sender, EventArgs e)
84+
{
85+
if (!Page.IsPostBack)
86+
{
87+
var data = Enumerable.Range(0, 10).Select(x => new
88+
{
89+
ID = x,
90+
TheText = "Name " + x,
91+
MoreData = "Extra " + x
92+
});
93+
94+
RadMultiSelect1.DataSource = data;
95+
RadMultiSelect1.DataBind();
96+
97+
}
98+
}
99+
````
100+
````VB
101+
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
102+
If Not Page.IsPostBack Then
103+
Dim data = Enumerable.Range(0, 10).[Select](Function(x) New With {
104+
Key .ID = x,
105+
Key .TheText = "Name " & x,
106+
Key .MoreData = "Extra " & x
107+
})
108+
109+
RadMultiSelect1.DataSource = data
110+
RadMultiSelect1.DataBind()
111+
End If
112+
End Sub
113+
````
114+
115+
>caption Example 5: Bind to a List of named objects
116+
117+
````ASP.NET
118+
<telerik:RadMultiSelect ID="RadMultiSelect2" runat="server" DataTextField="Name" DataValueField="Id" />
119+
````
120+
121+
````C#
122+
public class MyClass
123+
{
124+
public int Id { get; set; }
125+
public String Name { get; set; }
126+
public String Title { get; set; }
127+
}
128+
129+
protected void Page_Load(object sender, EventArgs e)
130+
{
131+
if (!Page.IsPostBack)
132+
{
133+
var items = Enumerable.Range(0, 10).Select(x => new MyClass()
134+
{
135+
Id = x,
136+
Name = "Name " + x,
137+
Title = "Title " + x
138+
});
139+
140+
RadMultiSelect2.DataSource = items;
141+
RadMultiSelect2.DataBind();
142+
}
143+
}
144+
````
145+
````VB
146+
Public Class [MyClass]
147+
Public Property Id As Integer
148+
Public Property Name As String
149+
Public Property Title As String
150+
End Class
151+
152+
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
153+
If Not Page.IsPostBack Then
154+
Dim items = Enumerable.Range(0, 10).[Select](Function(x) New [MyClass]() With {
155+
.Id = x,
156+
.Name = "Name " & x,
157+
.Title = "Title " & x
158+
})
159+
RadMultiSelect2.DataSource = items
160+
RadMultiSelect2.DataBind()
161+
End If
162+
End Sub
163+
````
164+
165+
>caption Example 6: Bind to a DataTable
166+
167+
````ASP.NET
168+
<telerik:RadMultiSelect ID="RadMultiSelect3" runat="server" DataTextField="ShipName" DataValueField="OrderID" />
169+
````
170+
171+
````C#
172+
protected void Page_Load(object sender, EventArgs e)
173+
{
174+
if (!Page.IsPostBack)
175+
{
176+
RadMultiSelect3.DataSource = GetData();
177+
RadMultiSelect3.DataBind();
178+
}
179+
}
180+
181+
private DataTable GetData()
182+
{
183+
DataTable dataTable = new DataTable();
184+
dataTable.Columns.Add(new DataColumn("OrderID", typeof(int)));
185+
dataTable.Columns.Add(new DataColumn("ShipName", typeof(String)));
186+
187+
for (int i = 0; i < 70; i++)
188+
{
189+
dataTable.Rows.Add(i + 1, "Name " + (i + 1));
190+
}
191+
192+
return dataTable;
193+
}
194+
````
195+
````VB
196+
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
197+
If Not Page.IsPostBack Then
198+
RadMultiSelect3.DataSource = GetData()
199+
RadMultiSelect3.DataBind()
200+
End If
201+
End Sub
202+
203+
Private Function GetData() As DataTable
204+
Dim dataTable As DataTable = New DataTable()
205+
dataTable.Columns.Add(New DataColumn("OrderID", GetType(Integer)))
206+
dataTable.Columns.Add(New DataColumn("ShipName", GetType(String)))
207+
208+
For i As Integer = 0 To 70 - 1
209+
dataTable.Rows.Add(i + 1, "Name " & (i + 1))
210+
Next
211+
212+
Return dataTable
213+
End Function
214+
````
215+
216+
## See Also
217+
* [Get Server Text and Value]({%slug multiselect/server-side-programming/overview%}#get-selected-text-and-value)
11218

0 commit comments

Comments
 (0)