Skip to content

Commit bd908f3

Browse files
marin-bratanovmarin-bratanov
committed
docs(mccb): add server binding article
1 parent efaf5a3 commit bd908f3

File tree

2 files changed

+235
-3
lines changed

2 files changed

+235
-3
lines changed

‎controls/multicolumncombobox/data-binding/client-side.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
---
22
title: Client-Side
3-
page_title: Client-Side | RadMultiColumnComboBox for ASP.NET AJAX Documentation
3+
page_title: Client-Side Data Binding | RadMultiColumnComboBox for ASP.NET AJAX Documentation
44
description: Client data binding overview of RadMultiColumnComboBox
55
slug: multicolumncombobox/data-binding/client-side
66
tags: data,binding,overview,client,side,web,service
77
published: True
8-
position: 0
8+
position: 1
99
---
1010

11-
# Client-Side
11+
# Client-Side Data Binding
1212

1313
**RadMultiColumnComboBox** can be bound to a **web service** through its inner `WebServiceSettings` tag or through a [RadClientDataSource]({%slug clientdatasource/overview%}). Since the control is a wrapper over the Kendo UI for jQuery widget, it always operates on the client and binds to data with JavaScript.
1414

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

Lines changed: 232 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,232 @@
1+
---
2+
title: Server-Side
3+
page_title: Server-Side Data Binding | RadMultiColumnComboBox for ASP.NET AJAX Documentation
4+
description: Server data binding overview of RadMultiColumnComboBox
5+
slug: multicolumncombobox/data-binding/server-side
6+
tags: data,binding,overview,server,side,list,object,data,table,sqldatasource,declarative
7+
published: True
8+
position: 0
9+
---
10+
11+
# Server-Side Data Binding
12+
13+
**RadMultiColumnComboBox** can be bound to standard server data sources like `List<T>`, `SqlDataSource` or a `DataTable`. The data from the server data source is serialized as a JSON literal to the client-side when the page loads, because RadMultiColumnComboBox is a wrapper over the Kendo UI for jQuery widget and so it always operates on the client. This includes fields that are not rendered, and they will be part of the client-side dataItem associated with each row.
14+
15+
>caption Example 1: Bind to an SqlDataSource
16+
17+
````ASP.NET
18+
<telerik:RadMultiColumnComboBox runat="server" ID="RadMultiColumnComboBox0" Skin="Default"
19+
20+
DataSourceID="SqlDataSource1"
21+
22+
Width="220px" Height="400" DropDownWidth="400"
23+
DataTextField="ContactName" DataValueField="CustomerID"
24+
Filter="StartsWith" FilterFields="CustomerID, ContactName">
25+
<ColumnsCollection>
26+
<telerik:MultiColumnComboBoxColumn Field="ContactName" Title="ContactName">
27+
</telerik:MultiColumnComboBoxColumn>
28+
<telerik:MultiColumnComboBoxColumn Field="CustomerID" Title="CustomerID">
29+
</telerik:MultiColumnComboBoxColumn>
30+
</ColumnsCollection>
31+
</telerik:RadMultiColumnComboBox>
32+
33+
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
34+
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
35+
SelectCommand="SELECT * FROM [Customers]"></asp:SqlDataSource>
36+
````
37+
38+
>caption Example 2: Bind to a List of anonymous objects
39+
40+
````ASP.NET
41+
<telerik:RadMultiColumnComboBox runat="server" ID="RadMultiColumnComboBox1" Skin="Default"
42+
DataTextField="TheText" DataValueField="ID"
43+
Width="300" DropDownWidth="300">
44+
<ColumnsCollection>
45+
<telerik:MultiColumnComboBoxColumn Field="ID" Title="ID" />
46+
<telerik:MultiColumnComboBoxColumn Field="TheText" Title="Name" />
47+
<telerik:MultiColumnComboBoxColumn Field="MoreData" Title="Extra Info" />
48+
</ColumnsCollection>
49+
<PopupSettings />
50+
</telerik:RadMultiColumnComboBox>
51+
````
52+
53+
````C#
54+
protected void Page_Load(object sender, EventArgs e)
55+
{
56+
if (!Page.IsPostBack)
57+
{
58+
var data = Enumerable.Range(0, 10).Select(x => new
59+
{
60+
ID = x,
61+
TheText = "Name " + x,
62+
MoreData = "Extra " + x
63+
});
64+
65+
RadMultiColumnComboBox1.DataSource = data;
66+
RadMultiColumnComboBox1.DataBind();
67+
68+
}
69+
}
70+
````
71+
````VB
72+
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
73+
If Not Page.IsPostBack Then
74+
Dim data = Enumerable.Range(0, 10).[Select](Function(x) New With {
75+
Key .ID = x,
76+
Key .TheText = "Name " & x,
77+
Key .MoreData = "Extra " & x
78+
})
79+
80+
RadMultiColumnComboBox1.DataSource = data
81+
RadMultiColumnComboBox1.DataBind()
82+
End If
83+
End Sub
84+
````
85+
86+
>caption Example 3: Bind to a List of named objects
87+
88+
````ASP.NET
89+
<telerik:RadMultiColumnComboBox ID="RadMultiColumnComboBox2" Skin="Default" DropDownWidth="400" Width="220px" runat="server"
90+
DataTextField="Name" DataValueField="Id">
91+
<ColumnsCollection>
92+
<telerik:MultiColumnComboBoxColumn Field="Id" Title="Id" />
93+
<telerik:MultiColumnComboBoxColumn Field="Name" Title="Name" />
94+
<telerik:MultiColumnComboBoxColumn Field="Title" Title="Title" />
95+
</ColumnsCollection>
96+
</telerik:RadMultiColumnComboBox>
97+
````
98+
99+
````C#
100+
public class MyClass
101+
{
102+
public int Id { get; set; }
103+
public String Name { get; set; }
104+
public String Title { get; set; }
105+
}
106+
107+
protected void Page_Load(object sender, EventArgs e)
108+
{
109+
if (!Page.IsPostBack)
110+
{
111+
var items = Enumerable.Range(0, 10).Select(x => new MyClass()
112+
{
113+
Id = x,
114+
Name = "Name " + x,
115+
Title = "Title " + x
116+
});
117+
118+
RadMultiColumnComboBox2.DataSource = items;
119+
RadMultiColumnComboBox2.DataBind();
120+
}
121+
}
122+
````
123+
````VB
124+
Public Class [MyClass]
125+
Public Property Id As Integer
126+
Public Property Name As String
127+
Public Property Title As String
128+
End Class
129+
130+
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
131+
If Not Page.IsPostBack Then
132+
Dim items = Enumerable.Range(0, 10).[Select](Function(x) New [MyClass]() With {
133+
.Id = x,
134+
.Name = "Name " & x,
135+
.Title = "Title " & x
136+
})
137+
RadMultiColumnComboBox2.DataSource = items
138+
RadMultiColumnComboBox2.DataBind()
139+
End If
140+
End Sub
141+
````
142+
143+
>caption Example 4: Bind to a DataTable
144+
145+
````ASP.NET
146+
<telerik:RadMultiColumnComboBox runat="server" ID="RadMultiColumnComboBox3" Skin="Default" DropDownWidth="800" Width="220px"
147+
DataTextField="ShipName" DataValueField="OrderID">
148+
<ColumnsCollection>
149+
<telerik:MultiColumnComboBoxColumn Field="OrderID" Title="OrderID" />
150+
<telerik:MultiColumnComboBoxColumn Field="OrderDate" Title="OrderDate">
151+
<Template>
152+
#= kendo.toString(data.OrderDate, "dd/MM/yyyy") #
153+
</Template>
154+
</telerik:MultiColumnComboBoxColumn>
155+
<telerik:MultiColumnComboBoxColumn Field="Freight" Title="Freight" />
156+
<telerik:MultiColumnComboBoxColumn Field="ShipName" Title="ShipName" />
157+
</ColumnsCollection>
158+
</telerik:RadMultiColumnComboBox>
159+
````
160+
161+
````C#
162+
protected void Page_Load(object sender, EventArgs e)
163+
{
164+
if (!Page.IsPostBack)
165+
{
166+
RadMultiColumnComboBox3.DataSource = GetGridSource();
167+
RadMultiColumnComboBox3.DataBind();
168+
}
169+
}
170+
171+
private DataTable GetGridSource()
172+
{
173+
DataTable dataTable = new DataTable();
174+
175+
dataTable.Columns.Add(new DataColumn("OrderID", typeof(int)));
176+
dataTable.Columns.Add(new DataColumn("OrderDate", typeof(DateTime)));
177+
dataTable.Columns.Add(new DataColumn("Freight", typeof(decimal)));
178+
dataTable.Columns.Add(new DataColumn("ShipName", typeof(string)));
179+
dataTable.Columns.Add(new DataColumn("ShipCountry", typeof(string)));
180+
181+
dataTable.PrimaryKey = new DataColumn[] { dataTable.Columns["OrderID"] };
182+
183+
for (int i = 0; i < 70; i++)
184+
{
185+
DataRow row = dataTable.NewRow();
186+
row["OrderID"] = i + 1;
187+
row["OrderDate"] = DateTime.Now;
188+
row["Freight"] = (i + 1) + (i + 1) * 0.1 + (i + 1) * 0.01;
189+
row["ShipName"] = "Name " + (i + 1);
190+
row["ShipCountry"] = "Country " + (i + 1);
191+
192+
dataTable.Rows.Add(row);
193+
}
194+
195+
return dataTable;
196+
}
197+
````
198+
````VB
199+
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
200+
If Not Page.IsPostBack Then
201+
RadMultiColumnComboBox3.DataSource = GetGridSource()
202+
RadMultiColumnComboBox3.DataBind()
203+
End If
204+
End Sub
205+
206+
Private Function GetGridSource() As DataTable
207+
Dim dataTable As DataTable = New DataTable()
208+
dataTable.Columns.Add(New DataColumn("OrderID", GetType(Integer)))
209+
dataTable.Columns.Add(New DataColumn("OrderDate", GetType(DateTime)))
210+
dataTable.Columns.Add(New DataColumn("Freight", GetType(Decimal)))
211+
dataTable.Columns.Add(New DataColumn("ShipName", GetType(String)))
212+
dataTable.Columns.Add(New DataColumn("ShipCountry", GetType(String)))
213+
dataTable.PrimaryKey = New DataColumn() {dataTable.Columns("OrderID")}
214+
215+
For i As Integer = 0 To 70 - 1
216+
Dim row As DataRow = dataTable.NewRow()
217+
row("OrderID") = i + 1
218+
row("OrderDate") = DateTime.Now
219+
row("Freight") = (i + 1) + (i + 1) * 0.1 + (i + 1) * 0.01
220+
row("ShipName") = "Name " & (i + 1)
221+
row("ShipCountry") = "Country " & (i + 1)
222+
dataTable.Rows.Add(row)
223+
Next
224+
225+
Return dataTable
226+
End Function
227+
````
228+
229+
## See Also
230+
231+
* [Get Server Text and Value]({%slug multicolumncombobox/server-side-programming/overview%}#get-selected-text-and-value)
232+

0 commit comments

Comments
 (0)