New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Custom Attributes

My Profile

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") %>

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ 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>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator RenderMode="Lightweight" ID="FormDecorator1" runat="server" Skin="Black" DecorationZoneID="demo-container" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="UpdateButton">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="qsfexPreview" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <div class="demo-container" id="demo-container">

        <h2>My Profile</h2>

        <div class="wrapper">
            <ul>
                <li>
                    <asp:Label ID="Label1" runat="server" AssociatedControlID="RadTextBox_ScreenName">Screen Name:</asp:Label>
                    <asp:TextBox runat="server" ID="RadTextBox_ScreenName" Text="BorBou" />
                </li>
                <li>
                    <asp:Label ID="Label2" runat="server" AssociatedControlID="RadTextBox_Name">Name:</asp:Label>
                    <asp:TextBox runat="server" ID="RadTextBox_Name" Text="Ken Edwards" />
                </li>
                <li>
                    <asp:Label ID="Label3" runat="server" AssociatedControlID="RadTextBox_Age">Age:</asp:Label>
                    <asp:TextBox runat="server" ID="RadTextBox_Age" Text="23" Width="30" />
                </li>
                <li>
                    <asp:Label ID="Label4" runat="server" AssociatedControlID="RadComboBox_AvatarSelection">Avatar:</asp:Label>
                    <telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox_AvatarSelection" runat="server" Width="220" 
                        HighlightTemplatedItems="True" skin="Black">
                        <ItemTemplate>
                            <%--
                                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']")%>
                                </span>
                            </div>
                        </ItemTemplate>
                        <Items>
                            <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" />
                        </Items>
                    </telerik:RadComboBox>
                </li>
            </ul>
            <p class="buttons">
                <asp:Button runat="server" ID="UpdateButton" Text="Update" OnClick="UpdateButton_Click" />
            </p>
        </div>


        <div id="qsfexPreview" class="qsf-result" runat="server">
            <span class="qsfexAvatarContainer"></span>
            <span class="qsfexDisplayName">
                <asp:Literal ID="Literal_ScreenName" Text="BorBou" runat="server" />
            </span>
            <span class="qsfexRealName">
                <asp:Literal ID="Literal_Name" Text="Ken Edwards" runat="server" />
                <span>(</span>
                <asp:Literal ID="Literal_Age" Text="23" runat="server" />
                <span>y)</span>

            </span>
        </div>

    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance