Text On Rad Split bar

[Arvind]

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:RadPane>
            <telerik:RadSplitBar runat="server" ID="RadSplitbar1" CollapseMode="Both" CollapseExpandPaneText="Click Here To Collapse/Expand" >
            </telerik:RadSplitBar>
            <telerik:RadPane runat="server" ID="Radpane2" Width="70%">
                Right Pane
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>

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:
http://www.telerik.com/community/forums/aspnet-ajax/splitter/customized-radsplitbar.aspx 
but i was not help full to me
Please help me in doing this.

Thanks & Regards
N Aravinda Chary.

[Niko]

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);
    splitbar.get_element().appendChild(createInfoDiv());
}

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:

.infoDiv
{
    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,
Niko
the Telerik team