Add control to PanelBar header

3 posts, 0 answers
  1. Daron
    Daron avatar
    80 posts
    Member since:
    Dec 2007

    Posted 27 May 2008 Link to this post

    All,
    I have a requirement to add a "help" icon to the top-right corner of all my PanelBar panes (which just pops up a help window). Is it possible to do this and how?

    ie, I need:
    ________________________
    |  Heading                      [?] |
    ----------------------------------

    And when you click the "help" button it obviously shouldn't expand the pane.

    Any ideas welcome!

    Cheers,
    Daron
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 28 May 2008 Link to this post

    Hi Daron,

    Try adding the Image in the RadPanleBar as shown below.

    CS:
    protected void RadPanelBar1_PreRender(object sender, EventArgs e) 
        { 
            foreach (RadPanelItem item in RadPanelBar1.Items) 
            { 
                Image img = new Image(); 
                img.ID = "Image1"
                img.ImageUrl = "RadControls/Hay/Dock/Close.gif"
                img.ImageAlign = ImageAlign.Right; 
                item.Controls.Add(img); 
            } 
        } 

    Thanks
    Shinu.

  3. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 29 May 2008 Link to this post

    Hello Daron,

    Please find below a sample code snippet that shows the needed approach.

    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <title>Untitled Page</title> 
        <style type="text/css">  
        div.RadPanelBar .rpTemplate  
        {  
            font-size: 0;  
            line-height: 0;  
            height: 0;  
        }  
          
        div.RadPanelBar .rpTemplate img  
        {  
            margin: -27px 0 0 180px;  
            position: relative;  
            top: -3px;  
        }  
     
        * html div.RadPanelBar .rpTemplate img  
        {  
            margin: -24px 0 0 90px;  
        }  
     
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
            <asp:ScriptManager ID="ScriptManager1" runat="server">  
            </asp:ScriptManager> 
            <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Outlook">  
                <CollapseAnimation Duration="100" Type="None" /> 
                <Items> 
                    <telerik:RadPanelItem runat="server" Text="Root RadPanelItem1">  
                        <Items> 
                            <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">  
                            </telerik:RadPanelItem> 
                            <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">  
                            </telerik:RadPanelItem> 
                            <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 3">  
                            </telerik:RadPanelItem> 
                        </Items> 
                    </telerik:RadPanelItem> 
                    <telerik:RadPanelItem runat="server" Text="Root RadPanelItem2">  
                        <Items> 
                            <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">  
                            </telerik:RadPanelItem> 
                            <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">  
                            </telerik:RadPanelItem> 
                        </Items> 
                    </telerik:RadPanelItem> 
                </Items> 
                <ExpandAnimation Duration="100" Type="None" /> 
                <ItemTemplate> 
                    <img src="1.jpg" /> 
                </ItemTemplate> 
            </telerik:RadPanelBar> 
        </form> 
    </body> 
    </html> 


    Greetings,
    Paul
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
Back to Top