This is a migrated thread and some comments may be shown as answers.

Hide splitter while formatting layout

4 Answers 142 Views

Splitter

This is a migrated thread and some comments may be shown as answers.

4 Answers, 1 is accepted

Accepted

answered on 22 Feb 2008, 01:05 PM

Hi Daron,

Basically this problem can be handled by setting the RadSplitter's VisibleDuringInit property to "false".
However, we recently found a problem with this property when used with nested RadSplitters. The problem that I refer to is the following - the nested RadSplitter initializes first and becomes visible. After that, the parent RadSplitter calculates its size (at this point it is not visible) and resizes its child splitter (at this point it is visible). We have prepared a workaround that you can use for the time being until we are able to fix the problem. Please have a look at the code bellow that demonstrates the idea:

    
            <body>       
        
                <form id="form1" runat="server">        
        
                    <telerik:RadSplitter ID="RadSplitter1" runat="server" OnClientLoaded="MainSplitterLoaded" Height="100%" Width="100%">        
        
                           ......................     
        
                            <telerik:RadSplitter ID="RadSplitter2" runat="server">     
        
                            .....     
        
                            </telerik:RadSplitter>        
        
                    </telerik:RadSplitter>       
        
                </form>       
        
                <script type="text/javascript">            
        
                var mainSplitterElement = $get('RAD_SPLITTER_<%= RadSplitter1.ClientID %>');        
        
                mainSplitterElement.style.visibility = "hidden";        
        
                var nestedSplitterElement = $get('RAD_SPLITTER_<%= RadSplitter2.ClientID %>');        
        
                nestedSplitterElement.style.visibility = "hidden";        
        
                function MainSplitterLoaded()        
        
                {        
        
                    mainSplitterElement.style.visibility = "visible";        
        
                    nestedSplitterElement.style.visibility = "visible";        
        
                }        
        
                </script>       
        
            </body>

Note that I have removed VisibleDuringInit=true for the RadSplitter controls. I hide the splitters manually, until the main splitter has finished loading.

Let us know how it goes.

All the best,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 17 Apr 2008, 05:07 PM

the solution almost works - except that when the page first loads the splitter layout appears on the screen - then goes hidden after the suggested javascript, then appears again when everything is ready. How do you get a splitter to start out hidden? For exmaple:

<telerik:RadSplitter ID="RadOuter" Height="100%" Width="100%" OnClientLoaded="ScreenLoaded"style="visibility:hidden" runat="server" Orientation="Horizontal" Skin="Black" >

... this does not make the splitter hidden when the page is first loaded as I would expect. So it starts out visible when page first starts loading, then goes blank when I hide it via javascript, then appears again aftery everything is all set.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Hide splitter while formatting layout

4 Answers, 1 is accepted