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

Expand a Header Item While Clicking on the ImageUrl Only


       <script type="text/javascript">
           function OnLoad(sender, eventArgs) {
               var panelBar = sender;
               var allItems = panelBar.get_allItems();
               for (var i = 0; i < allItems.length; i++) {
                   var panelItem = allItems[i];
                   var imageElement = panelItem.get_imageElement();
                   if (imageElement) {
                       imageElement.AssociatedItem = panelItem;
                       imageElement.onclick = function (e) {
                           if (!e) e = window.event;
                           if (this.AssociatedItem.get_expanded()) {
                           else {
                           e.cancelBubble = true;
                           if (e.stopPropagation) {
                           return false;
       <telerik:RadPanelBar RenderMode="Lightweight" ID="RadPanelBar1" runat="server" Skin="Outlook" OnClientLoad="OnLoad">
               <telerik:RadPanelItem ImageUrl="Img/inbox.gif" Text="Index" runat="server" NavigateUrl="" Target="_blank">
                       <telerik:RadPanelItem runat="server" Text="Feel comfortable gambling with Golden" ImageUrl="Img/3.gif">
                       <telerik:RadPanelItem runat="server" Text="English Lessons - homework" ImageUrl="Img/4.gif">
                       <telerik:RadPanelItem runat="server" Text=" RadControls for ASP.NET AJAX" ImageUrl="Img/5.gif">
           <CollapseAnimation Duration="100" Type="None" />
           <ExpandAnimation Duration="100" Type="None" />
       <br />

In this article
Not finding the help you need? Improve this article