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

Custom Attributes

  • Inbox
    • Weekly Report
    • Product Delivery
    • Product Newsletter
    • Product Feedback
    • Product feature request
    • Forum - Web Parts Sharepoint
    • Support - Telerik Controls
  • Outbox
    • Meeting!
    • Schedule
    • RE: Support - Telerik Controls
  • Drafts
    • Meeting!
    • Schedule draft!
    • RE: Support - Telerik Controls

Custom attributes are a convenient way to store custom data for panel items.

There are three ways of defining custom attributes:

  • Define custom attributes inline (in the ASPX/ASCX file) 
      <telerik:RadPanelItem Text="Inbox" runat="server" Messages="4" New="1" ... />
  • Define custom attributes in the code-behind.

         [C#] 
      RadPanelItem item = new RadPanelItem();
  item.Attributes["Messages"] = "4";					
  item.Attributes["New"] = "1";
         [VB] 
      Dim item As RadPanelItem = New RadPanelItem()
  item.Attributes("Messages") = "4"
  item.Attributes("New") = "1"
  • Define custom attributes at the client-side:

     <script type="text/javascript">
   function setCustomAttributes ()
   {
 	var panelBar = $find("<%=RadPanelBar1.ClientID %>");

            
 	var item1 = panelBar.get_items().getItem(0);

            
 	//Pass the "AttributeName" and "AttributeValue" as parameters of the setAttribute method
	item1.get_attributes().setAttribute("Messages", "4");
    
        item1.get_attributes().setAttribute("New", "1");
        
    
                
    
            
    
    //You can obtain the value of a custom attribute like shown below

            //Pass the "AttributeName" as a parameter of the getAttribute method:
    

    
    
    var messagesCount = item1.get_attributes().getAttribute("Messages");    
   }
 </script>
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="PanelBar.Examples.ApplicationScenarios.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" />
    <script type="text/javascript">
        function clientClicking(sender, args) {
            args.set_cancel(true);
        }
    </script>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg">
        <telerik:RadPanelBar RenderMode="Lightweight" ID="RadPanelBar1" runat="server" Skin="Outlook" Width="100%" Height="100%"
            ExpandMode="FullExpandedItem" OnClientItemClicking="clientClicking">
            <ItemTemplate>
                <telerik:RadToolTip RenderMode="Lightweight" runat="server" ID="ToolTip1" Width="230px" Height="60px" RelativeTo="Element" Skin="Outlook"
                    ShowCallout="false">
                    <dl>
                        <dt>From: </dt>
                        <dd><%#Container.Attributes["SenderName"]%></dd>
                        <dt>Subject: </dt>
                        <dd><%#Container.Attributes["Subject"]%></dd>
                    </dl>
                </telerik:RadToolTip>
            </ItemTemplate>
            <Items>
                <telerik:RadPanelItem Expanded="True" Text="Inbox" messages="8" new="3"
                    size="114,30KB" lastdate="24/12/2007" ImageUrl="images/inbox.gif">
                    <ItemTemplate>
                        <telerik:RadToolTip RenderMode="Lightweight" runat="server" ID="ToolTip1" Width="200px" Height="60px" RelativeTo="Element" Skin="Outlook"
                            ShowCallout="false">
                            <dl>
                                <dd>
                                    <strong><%#Container.Attributes["Messages"]%> Messages</strong>
                                    <span style="color: Red">(<%#Container.Attributes["New"]%> New)</span>
                                </dd>
                                <dd>
                                    <%#Container.Attributes["Size"]%> on disk
                                </dd>
                                <dd>
                                    <em>Last archived: <%#Container.Attributes["LastDate"]%></em>
                                </dd>
                            </dl>
                        </telerik:RadToolTip>
                    </ItemTemplate>
                    <Items>
                        <telerik:RadPanelItem sendername="John Sith" subject="Weekly Report" Text="Weekly Report"
                            ImageUrl="images/5.gif">
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem sendername="Peter Howlett" subject="Product Delivery" Text="Product Delivery"
                            ImageUrl="images/4.gif">
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem sendername="Marry  Johnes" subject="Product Newsletter" Text="Product Newsletter"
                            ImageUrl="images/4.gif">
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem sendername="Sarah Smith" subject="Product Feedback" Text="Product Feedback"
                            ImageUrl="images/4.gif">
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem sendername="Benita Pyle" subject="Feature_Request - Telerik Controls"
                            Text="Product feature request" ImageUrl="images/5.gif">
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem sendername="Carina Cox" subject="Forum - Web Parts for SharePoint"
                            Text="Forum - Web Parts Sharepoint" ImageUrl="images/5.gif">
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem sendername="Olive Pratt" subject="Support - Telerik Controls" Text="Support - Telerik Controls"
                            ImageUrl="images/4.gif">
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="Outbox" messages="4" size="87,50 KB" lastdate="08/02/2008"
                    ImageUrl="images/outbox.gif">
                    <ItemTemplate>
                        <telerik:RadToolTip RenderMode="Lightweight" runat="server" ID="ToolTip1" Width="200px" Height="60px" RelativeTo="Element" Skin="Outlook"
                            ShowCallout="false">
                            <dl>
                                <dd>
                                    <strong><%#Container.Attributes["Messages"]%> Messages</strong>
                                </dd>
                                <dd>
                                    <%#Container.Attributes["Size"]%> on disk
                                </dd>
                                <dd>
                                    <em>Last archived: <%#Container.Attributes["LastDate"]%></em>
                                </dd>
                            </dl>
                        </telerik:RadToolTip>
                    </ItemTemplate>
                    <Items>
                        <telerik:RadPanelItem sendername="Joe Schmoe" subject="Meeting!" Text="Meeting!"
                            ImageUrl="images/3.gif">
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem sendername="Ami Davolio" subject="Schedule" Text="Schedule"
                            ImageUrl="images/3.gif">
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem sendername="Olive Pratt" subject="RE: Support - Telerik Controls"
                            Text="RE: Support - Telerik Controls" ImageUrl="images/3.gif">
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="Drafts" runat="server" messages="2" size="100,0 KB" lastdate="24/12/2007">
                    <ItemTemplate>
                        <telerik:RadToolTip RenderMode="Lightweight" runat="server" ID="ToolTip1" Width="200px" Height="60px" RelativeTo="Element" Skin="Outlook"
                            ShowCallout="false">
                            <dl>
                                <dd>
                                    <strong><%#Container.Attributes["Messages"]%> Messages</strong>
                                </dd>
                                <dd>
                                    <%#Container.Attributes["Size"]%> on disk
                                </dd>
                                <dd>
                                    <em>Last archived: <%#Container.Attributes["LastDate"]%></em>
                                </dd>
                            </dl>
                        </telerik:RadToolTip>
                    </ItemTemplate>
                    <Items>
                        <telerik:RadPanelItem sendername="Joe Schmoe" subject="Meeting!" Text="Meeting!"
                            ImageUrl="images/4.gif">
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem sendername="Ami Davolio" subject="Schedule draft" Text="Schedule draft!"
                            ImageUrl="images/4.gif">
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem sendername="Olive Pratt" subject="RE: Support - Telerik Controls"
                            Text="RE: Support - Telerik Controls" ImageUrl="images/4.gif">
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
            </Items>
            <CollapseAnimation Duration="0" Type="None" />
            <ExpandAnimation Duration="0" Type="None" />
        </telerik:RadPanelBar>
    </div>

    <telerik:RadToolTipManager RenderMode="Lightweight" ID="RadToolTipManager1" runat="server" Skin="Outlook" />

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

Support & Learning Resources

Find Assistance