Skip to content

Commit a5d5248

Browse files
pepinho24pepinho24
committed
docs(mccb): Update/add articles for new functionalities in R2 2019
1 parent 621287f commit a5d5248

File tree

8 files changed

+392
-18
lines changed

8 files changed

+392
-18
lines changed

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

+112-3
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,11 @@ position: 1
1414

1515
There are three ways to bind to data on the client:
1616

17-
* [Built-in Settings](#webservicesettings)
18-
* [Using RadClientDataSource](#radclientdatasource)
19-
* [Create a JavaScript Object at Runtime](#javascript-object-at-runtime)
17+
- [Client-Side Data Binding](#client-side-data-binding)
18+
- [WebServiceSettings](#webservicesettings)
19+
- [RadClientDataSource](#radclientdatasource)
20+
- [JavaScript Object at Runtime](#javascript-object-at-runtime)
21+
- [See Also](#see-also)
2022

2123
## WebServiceSettings
2224

@@ -40,6 +42,113 @@ The widget only shows data and so only the **Select** settings and `ServiceType`
4042
</telerik:RadMultiColumnComboBox>
4143
````
4244

45+
As of R2 2019, the Schema can also be configured via the <Schema> tag. That would allow easy parsing of the response from various web services, such as .asmx web service.
46+
47+
````ASP.NET
48+
<telerik:RadMultiColumnComboBox runat="server" ID="RadMultiColumnComboBox1"
49+
DropDownWidth="600px" Width="350px" Height="200" DataTextField="Title"
50+
EnforceMinLength="false">
51+
<ColumnsCollection>
52+
<telerik:MultiColumnComboBoxColumn Field="Title" Title="ID" />
53+
<telerik:MultiColumnComboBoxColumn Field="Author" Title="Name" />
54+
</ColumnsCollection>
55+
<WebServiceSettings>
56+
<Select Url="BooksService.asmx/GetBooks" RequestType="Post" DataType="JSON" ContentType="application/json; charset=utf-8" />
57+
</WebServiceSettings>
58+
<Schema DataName="d">
59+
</Schema>
60+
</telerik:RadMultiColumnComboBox>
61+
````
62+
63+
````C#
64+
[WebService(Namespace = "http://tempuri.org/")]
65+
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
66+
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
67+
[System.Web.Script.Services.ScriptService]
68+
public class BooksService : System.Web.Services.WebService
69+
{
70+
[WebMethod]
71+
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
72+
public List<Book> GetBooks()
73+
{
74+
var books = new List<Book>();
75+
books.Add(new Book
76+
{
77+
Title = "Professional ASP.NET 4.5 in C# and VB",
78+
Author = "Jason N. Gaylord",
79+
Cover = "http://ecx.images-amazon.com/images/I/51MQP2rwsZL.jpg",
80+
Url = "http://www.amazon.com/Professional-ASP-NET-4-5-C-VB/dp/1118311825"
81+
});
82+
books.Add(new Book
83+
{
84+
Title = "Pro ASP.NET 4.5 in C#",
85+
Author = "Adam Freeman",
86+
Cover = "http://ecx.images-amazon.com/images/I/51h6duC3kmL.jpg",
87+
Url = "http://www.amazon.com/Pro-ASP-NET-4-5-Adam-Freeman/dp/143024254X"
88+
});
89+
books.Add(new Book
90+
{
91+
Title = "Beginning ASP.NET 4.5 in C#",
92+
Author = "Matthew MacDonald",
93+
Cover = "http://ecx.images-amazon.com/images/I/51xvkzeTRbL.jpg",
94+
Url = "http://www.amazon.com/Beginning-ASP-NET-4-5-1-Wrox-Programmer/dp/111884677X"
95+
});
96+
books.Add(new Book
97+
{
98+
Title = "Beginning ASP.NET 4.5.1: in C# and VB ",
99+
Author = "Imar Spaanjaars",
100+
Cover = "http://ecx.images-amazon.com/images/I/51xvkzeTRbL.jpg",
101+
Url = "http://www.amazon.com/Beginning-ASP-NET-4-5-1-Wrox-Programmer/dp/111884677X"
102+
});
103+
books.Add(new Book
104+
{
105+
Title = "Pro C# 5.0 and the .NET 4.5 Framework",
106+
Author = "Andrew Troelsen",
107+
Cover = "http://ecx.images-amazon.com/images/I/7165No4MIpL._SL1500_.jpg",
108+
Url = "http://www.amazon.com/Beginning-ASP-NET-Databases-Sandeep-Chanda/dp/1430243805"
109+
});
110+
books.Add(new Book
111+
{
112+
Title = "Ultra-Fast ASP.NET 4.5",
113+
Author = "Rick Kiessig",
114+
Cover = "http://ecx.images-amazon.com/images/I/51Pu1Z8pgsL.jpg",
115+
Url = "http://www.amazon.com/Ultra-Fast-ASP-NET-Experts-Voice-ASP-Net/dp/1430243384"
116+
});
117+
books.Add(new Book
118+
{
119+
Title = "ASP.NET 4.5 Unleashed",
120+
Author = "Stephen Walther",
121+
Cover = "http://ecx.images-amazon.com/images/I/41V4tb3L%2BFL.jpg",
122+
Url = "http://www.amazon.com/ASP-NET-4-5-Unleashed-Stephen-Walther/dp/067233688X"
123+
});
124+
books.Add(new Book
125+
{
126+
Title = "Pro ASP.NET MVC 4",
127+
Author = "Adam Freeman",
128+
Cover = "http://ecx.images-amazon.com/images/I/51mKVgdmZpL.jpg",
129+
Url = "http://www.amazon.com/Pro-ASP-NET-MVC-Adam-Freeman/dp/1430242361"
130+
});
131+
books.Add(new Book
132+
{
133+
Title = "Professional C# 5.0 and .NET 4.5.1",
134+
Author = "Christian Nagel",
135+
Cover = "http://ecx.images-amazon.com/images/I/516-BPVWURL.jpg",
136+
Url = "http://www.amazon.com/Professional-C-5-0-NET-4-5-1/dp/1118833031"
137+
});
138+
139+
return books;
140+
}
141+
}
142+
143+
public class Book
144+
{
145+
public string Title { get; set; }
146+
public string Author { get; set; }
147+
public string Cover { get; set; }
148+
public string Url { get; set; }
149+
}
150+
````
151+
43152
## RadClientDataSource
44153

45154
To bind to a RadClientDataSource instance, set the `ClientDataSourceID` property to the ID of the client data source control.

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

+61-5
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,65 @@ position: 0
1010

1111
# Server-Side Data Binding
1212

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.
13+
**RadMultiColumnComboBox** can be bound to standard server data sources like `List<T>`, `SqlDataSource` or a `DataTable`. The data from the server data source creates MultiColumnComboBox items which are serialized as a JSON literal to the client-side. It is parsed on the client-side as the RadMultiColumnComboBox is a wrapper over the Kendo UI for jQuery widget which are entirely client-side.
1414

15-
>caption Example 1: Bind to an SqlDataSource
15+
As of R2 2019, the fields that you would like to have rendered and 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 the MultiColumnComboBoxColumns 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:RadMultiColumnComboBox runat="server" ID="RadMultiColumnComboBox1"
24+
Width="220px" Height="400"
25+
DataTextField="text" DataValueField="value">
26+
<ColumnsCollection>
27+
<telerik:MultiColumnComboBoxColumn Field="text" Title="Text">
28+
</telerik:MultiColumnComboBoxColumn>
29+
<telerik:MultiColumnComboBoxColumn Field="value" Title="Value">
30+
</telerik:MultiColumnComboBoxColumn>
31+
</ColumnsCollection>
32+
<Items>
33+
<telerik:MultiColumnComboBoxItem Text="Item 1" Value="1" />
34+
<telerik:MultiColumnComboBoxItem Text="Item 2" Value="2" />
35+
<telerik:MultiColumnComboBoxItem Text="Item 3" Value="3" />
36+
<telerik:MultiColumnComboBoxItem Text="Item 4" Value="4" />
37+
</Items>
38+
</telerik:RadMultiColumnComboBox>
39+
````
40+
41+
>caption Example 2: Add items programmatically
42+
43+
````ASP.NET
44+
<telerik:RadMultiColumnComboBox runat="server" ID="RadMultiColumnComboBox1"
45+
Width="220px" Height="400"
46+
DataTextField="text" DataValueField="value">
47+
<ColumnsCollection>
48+
<telerik:MultiColumnComboBoxColumn Field="text" Title="Text">
49+
</telerik:MultiColumnComboBoxColumn>
50+
<telerik:MultiColumnComboBoxColumn Field="value" Title="Value">
51+
</telerik:MultiColumnComboBoxColumn>
52+
</ColumnsCollection>
53+
</telerik:RadMultiColumnComboBox>
54+
````
55+
56+
````C#
57+
protected void Page_Load(object sender, EventArgs e)
58+
{
59+
for (int i = 0; i < 5; i++)
60+
{
61+
var newItem = new MultiColumnComboBoxItem();
62+
newItem.Text = "Item #" + i;
63+
newItem.Value = i.ToString();
64+
65+
RadMultiColumnComboBox1.Items.Add(newItem);
66+
}
67+
}
68+
````
69+
70+
71+
>caption Example 3: Bind to an SqlDataSource
1672
1773
````ASP.NET
1874
<telerik:RadMultiColumnComboBox runat="server" ID="RadMultiColumnComboBox0" Skin="Default"
@@ -35,7 +91,7 @@ position: 0
3591
SelectCommand="SELECT * FROM [Customers]"></asp:SqlDataSource>
3692
````
3793

38-
>caption Example 2: Bind to a List of anonymous objects
94+
>caption Example 4: Bind to a List of anonymous objects
3995
4096
````ASP.NET
4197
<telerik:RadMultiColumnComboBox runat="server" ID="RadMultiColumnComboBox1" Skin="Default"
@@ -83,7 +139,7 @@ Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me
83139
End Sub
84140
````
85141

86-
>caption Example 3: Bind to a List of named objects
142+
>caption Example 5: Bind to a List of named objects
87143
88144
````ASP.NET
89145
<telerik:RadMultiColumnComboBox ID="RadMultiColumnComboBox2" Skin="Default" DropDownWidth="400" Width="220px" runat="server"
@@ -140,7 +196,7 @@ Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me
140196
End Sub
141197
````
142198

143-
>caption Example 4: Bind to a DataTable
199+
>caption Example 6: Bind to a DataTable
144200
145201
````ASP.NET
146202
<telerik:RadMultiColumnComboBox runat="server" ID="RadMultiColumnComboBox3" Skin="Default" DropDownWidth="800" Width="220px"

‎controls/multicolumncombobox/functionality/templates.md

+44-8
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,15 @@ position: 1
1212

1313
**RadMultiColumnComboBox** uses [Kendo UI Templates](https://docs.telerik.com/kendo-ui/framework/templates/overview) to provide full control over the way pop-up items are rendered in the dropdown:
1414

15-
* [Column Template](#column-template)
16-
* [Column Header Template](#column-header-template)
17-
* [Header Template](#header-template)
18-
* [Footer Template](#footer-template)
19-
* [No Data Template](#no-data-template)
20-
* [Group Template](#group-template)
21-
* [Fixed Group Template](#fixed-group-template)
15+
- [Templates](#templates)
16+
- [Column Template](#column-template)
17+
- [Column Header Template](#column-header-template)
18+
- [Header Template](#header-template)
19+
- [Footer Template](#footer-template)
20+
- [No Data Template](#no-data-template)
21+
- [Group Template](#group-template)
22+
- [Fixed Group Template](#fixed-group-template)
23+
- [See Also](#see-also)
2224

2325
>caption Figure 1: Structure of the dropdown and where you can use templates. Produced by the code in Example 1 below.
2426
@@ -100,7 +102,41 @@ position: 1
100102

101103
## Column Template
102104

103-
This is the template that is rendered in each individual column. It receives the `data` parameter that points to the dataItem for the corresponding item, so you can use all its data source fields.
105+
This is the template that is rendered in each individual column. It receives the `data` parameter that points to the dataItem for the corresponding item, so you can use all its data source fields. The data from the attributes can be accessed via `attributes.AttributeKeyName` parameter.
106+
107+
````ASP.NET
108+
<telerik:RadMultiColumnComboBox DataTextField="Name" DataValueField="Id" runat="server" ID="RadMultiColumnComboBox1">
109+
<ColumnsCollection>
110+
<telerik:MultiColumnComboBoxColumn Field="Id" Width="30px" Title="Id" />
111+
<telerik:MultiColumnComboBoxColumn Field="Title" Width="250px">
112+
<Template>
113+
Position of <strong>#:data.Title#</strong>: #: attributes.customAttrText #
114+
</Template>
115+
</telerik:MultiColumnComboBoxColumn>
116+
</ColumnsCollection>
117+
</telerik:RadMultiColumnComboBox>
118+
````
119+
120+
````C#
121+
protected void Page_Load(object sender, EventArgs e)
122+
{
123+
var items = Enumerable.Range(0, 10).Select(x => new MyClass() { Id = x, Name = "Name " + x, Title = "Title " + x });
124+
RadMultiColumnComboBox1.DataSource = items;
125+
RadMultiColumnComboBox1.DataBind();
126+
foreach (var item in RadMultiColumnComboBox1.Items)
127+
{
128+
item.Attributes.Add("customAttrText", "#" + item.Value);
129+
}
130+
}
131+
public class MyClass
132+
{
133+
public int Id { get; set; }
134+
public string Name { get; set; }
135+
public string Title { get; set; }
136+
}
137+
````
138+
139+
104140

105141
## Column Header Template
106142

‎controls/multicolumncombobox/getting-started.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ The following tutorial demonstrates how you can add **RadMultiColumnComboBox** b
3838

3939
* `Field` - the field from the data source that will be rendered.
4040
* `Title` - the header text.
41-
* `Width`d - the width of the column. They should add up to the value of DropDownWidth.
41+
* `Width` - the width of the column. They should add up to the value of DropDownWidth.
4242

4343
The end result should be similar to the following:
4444

‎controls/multicolumncombobox/server-side-programming/events/itemdatabound.md

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
---
2+
title: ItemDataBound
3+
page_title: ItemDataBound | RadMultiColumnComboBox for ASP.NET AJAX Documentation
4+
description: ItemDataBound
5+
slug: multicolumncombobox/server-side-programming/events/itemdatabound
6+
tags: itemdatabound
7+
published: True
8+
position: 0
9+
---
10+
11+
# ItemDataBound
12+
13+
14+
15+
##
16+
17+
The **ItemDataBound** event occurs for each new item that is added to the **Items** collection of the dropdownlist when it is bound. This event only occurs if the items are loaded from a data source (the **DataSource** or **DataSourceID** property is set).
18+
19+
For each item that is added from a data source, the following events occur:
20+
21+
1. A new item is created and added to the Items collection.
22+
23+
2. The **Text** and **Value** properties of the item are set, based on the data.
24+
25+
3. The **ItemDataBound** event occurs.
26+
27+
The **ItemDataBound** event handler receives two arguments:
28+
29+
1. The **RadMultiColumnComboBox** that is loading items. This argument is of type object, but can be cast to the **RadMultiColumnComboBox** type.
30+
31+
2. An EventArgs object. This object has an **Item** property, which provides access to the item that was just bound. This item, in turn, has a **DataItem** property, which lets you access the item in the data source to which the **RadMultiColumnComboBox** is being bound.
32+
33+
Use the **ItemDataBound** event handler to make changes to items as they are bound to the data. For example, you can set custom attributes based on other fields in the DataItem:
34+
35+
````ASPNET
36+
<telerik:RadMultiColumnComboBox DataTextField="Name" DataValueField="Id" runat="server" ID="RadMultiColumnComboBox1" OnItemDataBound="RadMultiColumnComboBox1_ItemDataBound">
37+
<ColumnsCollection>
38+
<telerik:MultiColumnComboBoxColumn Field="Id" Width="30px" Title="Id" />
39+
<telerik:MultiColumnComboBoxColumn Field="Title" Width="250px">
40+
<Template>
41+
Position of <strong>#:data.Title#</strong>: #: attributes.customAttrText #
42+
</Template>
43+
</telerik:MultiColumnComboBoxColumn>
44+
</ColumnsCollection>
45+
</telerik:RadMultiColumnComboBox>
46+
````
47+
48+
49+
````C#
50+
protected void RadMultiColumnComboBox1_ItemDataBound(object sender, RadMultiColumnComboBoxItemEventArgs e)
51+
{
52+
var dataItem = e.Item.DataItem as MyClass;
53+
e.Item.Attributes.Add("customAttrText", "#" + dataItem.Id);
54+
}
55+
56+
protected void Page_Load(object sender, EventArgs e)
57+
{
58+
var items = Enumerable.Range(0, 10).Select(x => new MyClass() { Id = x, Name = "Name " + x, Title = "Title " + x });
59+
RadMultiColumnComboBox1.DataSource = items;
60+
RadMultiColumnComboBox1.DataBind();
61+
}
62+
63+
public class MyClass
64+
{
65+
public int Id { get; set; }
66+
public string Name { get; set; }
67+
public string Title { get; set; }
68+
}
69+
````
70+
````VB.NET
71+
Protected Sub RadMultiColumnComboBox1_ItemDataBound(ByVal sender As Object, ByVal e As RadMultiColumnComboBoxItemEventArgs)
72+
Dim dataItem = TryCast(e.Item.DataItem, [MyClass])
73+
e.Item.Attributes.Add("customAttrText", "#" & dataItem.Id)
74+
End Sub
75+
76+
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
77+
Dim items = Enumerable.Range(0, 10).[Select](Function(x) New [MyClass]() With {
78+
.Id = x,
79+
.Name = "Name " & x,
80+
.Title = "Title " & x
81+
})
82+
RadMultiColumnComboBox1.DataSource = items
83+
RadMultiColumnComboBox1.DataBind()
84+
End Sub
85+
86+
Public Class [MyClass]
87+
Public Property Id As Integer
88+
Public Property Name As String
89+
Public Property Title As String
90+
End Class
91+
````
92+

0 commit comments

Comments
 (0)