Skip to content

Commit ba9604f

Browse files
vveesseelliinnaapepinho24
authored andcommitted
docs(mulstiselect): Update Templates article
1 parent 02dcb4f commit ba9604f

File tree

1 file changed

+61
-0
lines changed

1 file changed

+61
-0
lines changed

controls/multiselect/functionality/templates.md

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ position: 1
1818
- [Header Template](#header-template)
1919
- [Footer Template](#footer-template)
2020
- [No Data Template](#no-data-template)
21+
- [Group Template](#group-template)
2122
- [See Also](#see-also)
2223

2324
>caption Figure 1: Structure of the popup and where you can use templates.
@@ -64,6 +65,62 @@ You can see the source code used for producing the image in [RadMultiSelect Temp
6465
</telerik:RadMultiSelect>
6566
````
6667

68+
When **RadMultiSelect** is [bound on the server-side]({%slug multiselect/data-binding/server-side%}), you can add custom attributes in the [ItemDataBound]({%slug multiselect/server-side-programming/events/itemdatabound%}) event that can be accessed in the templates through the `attributes` parameter:
69+
````ASP.NET
70+
<telerik:RadMultiSelect ID="RadMultiSelect1" runat="server" Filter="contains"
71+
DataTextField="Name" DataValueField="ID" OnItemDataBound="RadMultiSelect1_ItemDataBound">
72+
<ItemTemplate>
73+
<span>#:attributes.myAttribute#</span>
74+
</ItemTemplate>
75+
</telerik:RadMultiSelect>
76+
````
77+
78+
````C#
79+
protected void Page_Load(object sender, EventArgs e)
80+
{
81+
if (!IsPostBack)
82+
{
83+
RadMultiSelect1.DataSource = Enumerable.Range(1, 10).Select(x => new MyCustomItem()
84+
{
85+
ID = x,
86+
Name = "Name #" + x
87+
});
88+
89+
RadMultiSelect1.DataBind();
90+
}
91+
}
92+
93+
protected void RadMultiSelect1_ItemDataBound(object sender, Telerik.Web.UI.RadMultiSelectItemEventArgs e)
94+
{
95+
e.Item.Attributes.Add("myAttribute", "Attribute " + e.Item.Value);
96+
}
97+
98+
public class MyCustomItem
99+
{
100+
public int ID { get; set; }
101+
public string Name { get; set; }
102+
}
103+
````
104+
````VB
105+
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
106+
If Not IsPostBack Then
107+
RadMultiSelect1.DataSource = Enumerable.Range(1, 10).[Select](Function(x) New MyCustomItem() With {
108+
.ID = x,
109+
.Name = "Name #" & x
110+
})
111+
RadMultiSelect1.DataBind()
112+
End If
113+
End Sub
114+
115+
Protected Sub RadMultiSelect1_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadMultiSelectItemEventArgs)
116+
e.Item.Attributes.Add("myAttribute", "Attribute " & e.Item.Value)
117+
End Sub
118+
119+
Public Class MyCustomItem
120+
Public Property ID As Integer
121+
Public Property Name As String
122+
End Class
123+
````
67124

68125
## Item template
69126

@@ -109,6 +166,10 @@ A [https://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect/configuration
109166

110167
This is the [https://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect/configuration/footertemplate](https://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect/configuration/footertemplate) used to render the footer. The footer is re-rendered on every change of the Data Source. The context of the footer template is the underlying Kendo Widget itself that you can access through the `instance` argument.
111168

169+
## Group Template
170+
171+
The template for the header of the group that is not the current topmost group. By default the value of the field by which the data is grouped is displayed and it is sent to the template via the `data` argument.
172+
112173
## No Data Template
113174

114175
This [template](https://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect/configuration/nodatatemplate) is shown when the data source is empty or the current filter operation returned no results.

0 commit comments

Comments
 (0)