customized RadSplitBar in UI for ASP.NET AJAX Splitter

Leonid

4 posts

Member since:
Dec 2008

Posted 09 Dec 2008 Link to this post

Hi all,

is it possible to insert smth inside splitBar? vertical text for example?

I just need some info for user after the pane was collapsed...

Regards,

Leonid

Tsvetie

Admin

1517 posts

Posted 12 Dec 2008 Link to this post

Hello Leonid,
The RadSplitBar definition below:

    
            <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Both" />

renders the following HTML:

    
            <TD class=resizeBar id=RadSplitBar1 style="WIDTH: 19px; CURSOR: w-resize">  
        
                <DIV class=collapseBarWrapper id=RAD_SPLITTER_BAR_COLLAPSE_WRAPPER_RadSplitBar1 style="WIDTH: 20px">  
        
                    <DIV class=collapseBarCollapseOver id=RAD_SPLITTER_BAR_COLLAPSE_Forward_RadSplitBar1 title="Collapse/expand the left pane"><!-- / --></DIV>  
        
                    <DIV class=collapseBarExpand id=RAD_SPLITTER_BAR_COLLAPSE_Backward_RadSplitBar1 title="Collapse/expand the right pane"><!-- / --></DIV>  
        
                </DIV> 
        
                <INPUT id=RadSplitBar1_ClientState type=hidden name=RadSplitBar1_ClientState autocomplete="off">  
        
            </TD>

You can get a reference to the wrapper element of the RadSplitBar the following way:

    
            var splitBar = $find('<%= RadSplitBar1.ClientID %>');  
        
            var wrapperElement = splitBar.get_element();

Apart from this, you can use the naming convention to get a reference to any element of the HTML of the splitBar. For example:

    
            var splitBar = $find('<%= RadSplitBar1.ClientID %>');  
        
            var collapseWrapper = $get('RAD_SPLITTER_BAR_COLLAPSE_WRAPPER_' + splitBar.get_id());

Once you get a reference to the HTML element you need, you can modify it so that it meets your requirement by means of javascript.

Regards,
Tsvetie
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

Leonid

4 posts

Member since:
Dec 2008

Posted 14 Dec 2008 Link to this post

Hi,

sounds great but... I tried to put inside this div any other html elements - but I cant see them at all:( probably in case of parent styles.. I dont know... what I need is just put inside split bar some text when it is collapsed and make it a bit wider, then when used expand panel - hide this text...

Tsvetie

Admin

1517 posts

Posted 17 Dec 2008 Link to this post

Hello Leonid,
I am not quite sure which DIV you refer to, but please note that all DIV elements of the RadSplitBar have size, which is set either with CSS or with code. I would recommend that you review the styles, applied to the elements of the RadSplitBar before you try to modify its HTML. You can use tools as IE Developer Toolbar (for IE) or Firebug (for Firefox) in order to do this. I suppose that you will not only have to add another HTML element, but modify the styles, applied to the elements of the RadSplitBar as well.

In case you need additional assistance, please send us you code that demonstrates how you modify the RadSplitBar and detailed information (a screenshot would be best) on the expected result.

Greetings,
Tsvetie
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.