Pane title image

3 posts, 1 answers
  1. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 29 Jun 2011 Link to this post

    Hi All,

    Is there a way to get a title on a pane to include an image?  As per the attached.  The left part shows what it is now and the right is roughly how I'd like it to look.

    Obviously not a critical requirement but enhances the appearance of the page.

    Regards,

    Jon
  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 01 Jul 2011 Link to this post

    Hello Jon,

    I do not see an image attached, but I assume that you are referring to a RadSlidingPane, as the "regular" RadPane does not have a titlebar. To add an image to that you can add a custom CSS rule to add a background image to the titlebar. In the code snippets below you can see how to do that and also the usage of its parent RadPane's CssClass property to distinguish one splitter from the other. Please note that this approach has the limitation that the SlidingPanes that are declared in the same RadPane can only have the same image.
    The CSS rule:
    .myClass .rspSlideTitle
     {
         background-image: url(images/title.jpeg);
         background-position:left;
         background-repeat:no-repeat;
     }

    This splitter will have the icon in it titlebars:
    <telerik:RadSplitter runat="server" id="rs1" Skin="Black">
        <telerik:RadPane runat="server" ID="rp1" CssClass="myClass">
            <telerik:RadSlidingZone runat="server" ID="rsz1" Width="22px" >
                <telerik:RadSlidingPane runat="server" ID="rsp1" IconUrl="~/Images/title.jpeg" ></telerik:RadSlidingPane>
                <telerik:RadSlidingPane runat="server" ID="rsp2"></telerik:RadSlidingPane>
            </telerik:RadSlidingZone>
        </telerik:RadPane>
        <telerik:RadPane runat="server" ID="rp2"></telerik:RadPane>
    </telerik:RadSplitter>

    This one will not:
        <telerik:RadSplitter runat="server" id="RadSplitter1">
        <telerik:RadPane runat="server" ID="RadPane1">
            <telerik:RadSlidingZone runat="server" ID="RadSlidingZone1" Width="22px" >
                <telerik:RadSlidingPane runat="server" ID="RadSlidingPane1" IconUrl="~/Images/title.jpeg" ></telerik:RadSlidingPane>
            </telerik:RadSlidingZone>
        </telerik:RadPane>
        <telerik:RadPane runat="server" ID="RadPane2"></telerik:RadPane>
    </telerik:RadSplitter>


    You can also use the RadSlidingPane's IconUrl property to set an icon in the sliding zone as shown in the following demo: http://demos.telerik.com/aspnet-ajax/splitter/examples/sp_tabview/defaultcs.aspx.


    Best wishes,
    Marin
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 01 Jul 2011 Link to this post

    Many thanks Marin,  that's exactly what I needed.  I added padding-left:24px; to the css to move the text element over as it was on top of the text to start with - seems to work just fine (in IE anyway!).

    Yeah I'd already got the IconUrl bit done - I was kind of suprised that if you could set it for the tab that it wasn't a property for the pane title.  

    Best Regards,

    Jon
Back to Top