Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

ComboBox - Custom Attributes

My Profile

  • select

BorBou Ken Edwards (23 y)

RadComboBox provides support for custom attributes. You can specify custom attributes declaratively in the RadComboBoxItem tag or programmatically using the Attributes collection of RadComboBoxItem. On the client, custom attributes can be accessed using the get_attributes collection of the RadComboBoxItem client object.

Databinding expressions can be used in the ItemTemplate of RadComboBox. They have the typical ASP.NET format and syntax. Example:
<%# DataBinder.Eval(Container, "Attributes['ImagePath']") %>

When accessing the values of the attributes defined for the items via a databinding expressions, the items should be explicitly bound. The items are bound either using the DataBind() method of the RadComboBoxItem object itself, or using the DataBind() method of the RadComboBox. The last will automaticaly bind all the items in the Items collection of RadComboBox.

In RadComboBox, the Container object contains two data objects: DataItem and Item. The DataItem represents the current row of the respective datasource. The column needed is accessed using the column name as a second argument of the Eval method.
Example: <%# DataBinder.Eval(Container.DataItem, "Author") %>
The Item, on the other hand, represents the current RadComboBoxItem. All properties and custom attributes of the current RadComboBox item can be accessed from within it.
Example: <%# DataBinder.Eval(Container, "Text") %>

Show code in new window Demo isolation steps
<%@ Page Language="c#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ComboBox.Examples.Programming.CustomAttributes.DefaultCS" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns=''>
<head runat="server">
    <title>ASP.NET ComboBox Demo - Custom Attributes</title>
     <link rel="stylesheet" type="text/css" href="styles.css" />

    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
     <telerik:RadFormDecorator ID="FormDecorator1" runat="server" Skin="Black" />
     <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
               <telerik:AjaxSetting AjaxControlID="UpdateButton">
                         <telerik:AjaxUpdatedControl ControlID="qsfexPreview" />

     <div class="qsf-demo-canvas">

          <h2>My <strong>Profile</strong></h2>

          <div class="qsf-fb qsf-ex-profile">
                         <asp:Label ID="Label1" runat="server" AssociatedControlID="RadTextBox_ScreenName">Screen Name:</asp:Label>
                         <asp:TextBox runat="server" ID="RadTextBox_ScreenName" Text="BorBou" />
                         <asp:Label ID="Label2" runat="server" AssociatedControlID="RadTextBox_Name">Name:</asp:Label>
                         <asp:TextBox runat="server" ID="RadTextBox_Name" Text="Ken Edwards" />
                         <asp:Label ID="Label3" runat="server" AssociatedControlID="RadTextBox_Age">Age:</asp:Label>
                         <asp:TextBox runat="server" ID="RadTextBox_Age" Text="23" Width="30" />
                         <asp:Label ID="Label4" runat="server" AssociatedControlID="RadComboBox_AvatarSelection">Avatar:</asp:Label>
                         <telerik:RadComboBox ID="RadComboBox_AvatarSelection" runat="server" Width="220"
                              HighlightTemplatedItems="True" skin="Black">
                                        ImageClassName, Popularity and Artist are custom attributes of the items.
                                        You can add as many as you wish.
                                   <div class="<%# DataBinder.Eval(Container, "Attributes['ImageClassName']") %>">
                                        <span class="qsfexAvatarContainer"></span>
                                        <span class="qsfexField">
                                             Popularity: <%# DataBinder.Eval(Container, "Attributes['Popularity']")%>
                                        </span><br />
                                        <span class="qsfexField">
                                             Artist: <%# DataBinder.Eval(Container, "Attributes['Artist']")%>
                                   <telerik:RadComboBoxItem imageclassname="qsfexGeeky" popularity="358" artist="Jone Larragne"
                                        Text="Geeky" />
                                   <telerik:RadComboBoxItem imageclassname="qsfexGirly" popularity="1,005" artist="Jone Larragne"
                                        Text="Girly" />
                                   <telerik:RadComboBoxItem imageclassname="qsfexGrumpy" popularity="1,345" artist="Jone Larragne"
                                        Text="Grumpy" />
                                   <telerik:RadComboBoxItem imageclassname="qsfexGroovie" popularity="2,043" artist="Jone Larragne"
                                        Text="Groovie" />
               <p class="buttons">
                    <asp:Button runat="server" ID="UpdateButton" Text="Update" OnClick="UpdateButton_Click" />

          <div id="qsfexPreview" class="qsf-result" runat="server">
               <span class="qsfexAvatarContainer"></span><span class="qsfexDisplayName">BorBou</span>
               <span class="qsfexRealName">Ken Edwards (23 y)</span>