Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Splitter > Text On Rad Split bar

• Arvind

  Posted on Feb 8, 2012 (permalink)

  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.
  
  
  
  
  
  
  
  

  Reply

• Niko Niko

  Posted on Feb 10, 2012 (permalink)

  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

  Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Splitter > Text On Rad Split bar