Text On Rad Split bar

2 posts, 0 answers
  1. Arvind
    Arvind avatar
    40 posts
    Member since:
    Sep 2010

    Posted 08 Feb 2012 Link to this post

    Hi Telerik Team,

    I am using the Rad Split bar in my application, as follows:

    <div style="width: 700px; height: 500px; border: 2px solid orange;">
            <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width="100%">
                <telerik:RadPane runat="server" ID="RadPane1" Width="30%">
                    Left Pane
    <telerik:RadSplitBar runat="server" ID="RadSplitbar1" CollapseMode="Both" CollapseExpandPaneText="Click Here To Collapse/Expand" >

    <telerik:RadPane runat="server" ID="Radpane2" Width="70%">
                    Right Pane

    Now my requirement is to put some text on the radSplit Bar vertically so that it will be help for the user,
    for example "Click here Collapse/Expand".
    I have referred the following link for help:
    but i was not help full to me
    Please help me in doing this.

    Thanks & Regards
    N Aravinda Chary.

  2. Niko
    Niko avatar
    383 posts

    Posted 10 Feb 2012 Link to this post

    Hello Arvind,

    Please, note the splitter property CollapseExpandPaneText that sets the title of the expand/collapse button. This way you can set a tooltip to the button without introducing extra HTML.
    Still if you need to have additional HTML inside the splitbar as an information panel, then you can get a reference to the splitbar's element and insert the HTML element there. Note that this element will inherit very small values for font-size and line-height and you will need to additionally change those to appropriate values so that the text appears readable.
    Here is a sample implementation to what I am suggesting:
    function changeSplitbar(splitter, args)
        var splitbar = splitter.getSplitBarByIndex(0);
    function createInfoDiv()
        var infoDiv = document.createElement("div");
        infoDiv.className = "infoDiv";
        infoDiv.innerHTML = "t<br/>e<br/>x<br/>t";
        return infoDiv;
    With this styles set:
        font-size: 10px;
        font-family: Monospace;
        line-height: 10px;
    If you need more info on the specific client-side API of the splitter, then I suggest the following help articles - http://www.telerik.com/help/aspnet-ajax/splitter-client-side-radsplitter.html and http://www.telerik.com/help/aspnet-ajax/splitter-client-side-radsplitbar.html.

    Kind regards,
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. DevCraft R3 2016 release webinar banner
Back to Top