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

Text with Icons

  • Index
    • Feel comfortable gambling
    • English Lessons - homework
    • Telerik UI for ASP.NET AJAX
  • Outbox
    • Free Exam Retakes with Second Shot
    • Feel comfortable with Gate Casino!
    • Update and resources from Microsoft
  • Trash
    • Update and resources from Microsoft
    • MCP Flash: March 2008
  • Contacts
    • My Contacts
    • Address Cards
    • Phone List

With RadPanelBar you can disaply images inside the items, in front of the item's text.

You can use the ImageUrl property to determine the image to be displayed when the panel item is collapsed, the ExpandedImageUrl to change the image when the item is expanded and HoveredImageUrl to change the image when the item is hovered.

Furthermore, you can change the image position by using ImagePosition property.

  • DefaultCS.aspx
<%@ Page Inherits="Telerik.QuickStart.QsfPage"  %>

<%@ 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>
</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 size-thin">
        <telerik:RadPanelBar RenderMode="Lightweight" ID="RadPanelBar1" runat="server" Width="100%">
            <Items>
                <telerik:RadPanelItem ImageUrl="images/inbox.gif" Text="Index" runat="server" Expanded="True">
                    <Items>
                        <telerik:RadPanelItem runat="server" Text="Feel comfortable gambling" ImageUrl="images/3.gif" />
                        <telerik:RadPanelItem runat="server" Text="English Lessons - homework" ImageUrl="images/4.gif" />
                        <telerik:RadPanelItem runat="server" Text=" Telerik UI for ASP.NET AJAX" ImageUrl="images/5.gif" />
                    </Items>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem ImageUrl="images/outbox.gif" Text="Outbox" runat="server">
                    <Items>
                        <telerik:RadPanelItem runat="server" Text="Free Exam Retakes with Second Shot" ImageUrl="images/3.gif" />
                        <telerik:RadPanelItem runat="server" Text="Feel comfortable with Gate Casino!" ImageUrl="images/3.gif" />
                        <telerik:RadPanelItem runat="server" Text="Update and resources from Microsoft" ImageUrl="images/3.gif" />
                    </Items>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem ImageUrl="images/trash.gif" Text="Trash" runat="server">
                    <Items>
                        <telerik:RadPanelItem runat="server" Text="Update and resources from Microsoft" ImageUrl="images/3.gif" />
                        <telerik:RadPanelItem runat="server" Text="MCP Flash: March 2008" ImageUrl="images/4.gif" />
                    </Items>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="Contacts" ImageUrl="images/contacts.gif">
                    <Items>
                        <telerik:RadPanelItem ImageUrl="images/contactsItems.gif" Text="My Contacts" />
                        <telerik:RadPanelItem ImageUrl="images/contactsItems.gif" Text="Address Cards" />
                        <telerik:RadPanelItem ImageUrl="images/contactsItems.gif" Text="Phone List" />
                    </Items>
                </telerik:RadPanelItem>
            </Items>
            <CollapseAnimation Duration="0" Type="None" />
            <ExpandAnimation Duration="0" Type="None" />
        </telerik:RadPanelBar>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance