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

splitter resizing when page load

6 Answers 176 Views

Splitter

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

Webster Velasco asked on 20 Apr 2010, 04:04 PM

hi

is there any method to remove the annoying resizing thing of the radsplitter when
my page load?
btw it master page..
here is my code:

    
            <%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Main.master.vb" Inherits="GRC30.Main" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head id="Head1" runat="server"> 
        
                <title>Xyou</title> 
        
                <link href="styles/Main.css" type="text/css" rel="stylesheet" /> 
        
                <style type="text/css"> 
        
                html, body, form 
        
                { 
        
                    height: 100%; 
        
                    margin: 0px; 
        
                    padding: 0px; 
        
                    overflow: hidden; 
        
                } 
        
                </style> 
        
            </head> 
        
            <body> 
        
                <form id="form2" runat="server"> 
        
                    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> 
        
                        <telerik:RadFormDecorator ID="RadFormDecorator1" DecoratedControls="All" runat="server" EnableRoundedCorners="false" /> 
        
                        <div style="display:none"> 
        
                            <telerik:RadTextBox runat="server" ID="Num" /> 
        
                        </div>           
        
                    <div id="ParentDivElement" style="height: 100%;"> 
        
                        <telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%" 
        
                            Orientation="Horizontal"> 
        
                            <telerik:RadPane ID="paneTitle" runat="server" Width="100%" Height="100px" BackColor="#000000" Locked="true" Scrolling="None"> 
        
                                <div id="mHeader"> 
        
                                    <table width="100%" cellspacing="0" cellpadding="0"> 
        
                                        <tr> 
        
                                            <td> 
        
                                                <img id="Img1" src="img/LogoGextra.png" alt="logo" runat="server" style="border:none; height:100px" /> 
        
                                            </td> 
        
                                            <td align="center"> 
        
                                                <h2 style="color:Red"><asp:Label runat="server" ID="lblNotice"></asp:Label></h2> 
        
                                            </td> 
        
                                            <td align="right"> 
        
                                                <div class="skin-chooser"> 
        
                                                    <label for="ctl00_RadMenu1_i3_SkinChooser_Input" class="skinLabel">Skin:</label> 
        
                                                        <telerik:RadSkinManager ID="RadSkinManager" runat="server" ShowChooser="true" Skin="Office2007" 
        
                                                            PersistenceKey="Skin" PersistenceMode="Session"> 
        
                                                        </telerik:RadSkinManager> 
        
                                                </div> 
        
                                            </td> 
        
                                        </tr> 
        
                                    </table> 
        
                                </div> 
        
                            </telerik:RadPane> 
        
                            <telerik:RadSplitBar ID="RadsplitbarTop" runat="server" CollapseMode="None" /> 
        
                            <telerik:RadPane ID="MainPane" runat="server" Scrolling="none" MinWidth="500"> 
        
                                <telerik:RadSplitter ID="NestedSplitter" runat="server" LiveResize="true"> 
        
                                    <telerik:RadPane ID="LeftPane" runat="server" Width="230" MinWidth="150" MaxWidth="400"> 
        
                                        <telerik:RadPanelBar ID="panelMenu" runat="server" PersistStateInCookie="true" ExpandMode="SingleExpandedItem" Height="100%" Width="225px"> 
        
                                            <Items> 
        
                                                <telerik:RadPanelItem runat="server" Text="Mio Profilo"> 
        
                                                    <Items> 
        
                                                        <telerik:RadPanelItem runat="server" Text="Anagrafica" NavigateUrl="grcEditAnagrafica.aspx" />                                                                                   
        
                                                        <telerik:RadPanelItem runat="server" Text="Documenti" NavigateUrl=""/> 
        
                                                        <telerik:RadPanelItem runat="server" Text="Cambia password" Navigateurl="grcCambiaPswd.aspx"/> 
        
                                                    </Items> 
        
                                                </telerik:RadPanelItem>                                                                              
        
                                                <telerik:RadPanelItem runat="server" Text="I servizi XYOU" NavigateUrl="grcElencoProdotti.aspx"> 
        
                                                </telerik:RadPanelItem> 
        
                                                <telerik:RadPanelItem runat="server" Text="Acquisto servizi XYOU" NavigateUrl="grcElencoOrdini.aspx"> 
        
                                                </telerik:RadPanelItem> 
        
                                                <telerik:RadPanelItem runat="server" Text="Situazione Acquisti"> 
        
                                                    <Items> 
        
                                                        <telerik:RadPanelItem runat="server" Text="Elenco Acquisti" NavigateUrl="grcVisualizzaOrdini.aspx" /> 
        
                                                        <telerik:RadPanelItem runat="server" Text="Estratto Conto" NavigateUrl="grcElencoEstrattoConto.aspx" /> 
        
                                                        <telerik:RadPanelItem runat="server" Text="Segnalazione Scadenza dei Crediti" NavigateUrl="grcElencoEsaurimentoCrediti.aspx" />                                          
        
                                                    </Items> 
        
                                                </telerik:RadPanelItem>                                  
        
                                                <telerik:RadPanelItem runat="server" Text="Caricamento pratica" > 
        
                                                    <Items> 
        
                                                        <telerik:RadPanelItem runat="server" Text="Azienda" NavigateUrl="grcInsertPratica.aspx?D=A" /> 
        
                                                        <telerik:RadPanelItem runat="server" Text="Privato" NavigateUrl="grcInsertPratica.aspx?D=P" />                                           
        
                                                    </Items> 
        
                                                </telerik:RadPanelItem> 
        
                                                <telerik:RadPanelItem runat="server" Text="Caricamento pratica Unico Form" > 
        
                                                    <Items> 
        
                                                        <telerik:RadPanelItem runat="server" Text="Azienda" NavigateUrl="grcInsertPraticaUnica.aspx?D=A" /> 
        
                                                        <telerik:RadPanelItem runat="server" Text="Privato" NavigateUrl="grcInsertPraticaUnica.aspx?D=P" />                                          
        
                                                    </Items> 
        
                                                </telerik:RadPanelItem>                                  
        
                                                <telerik:RadPanelItem runat="server" Text="Richiesta storno pratica" NavigateUrl="grcRichiestaStorno.aspx"> 
        
                                                </telerik:RadPanelItem>  
        
                                                <telerik:RadPanelItem runat="server" Text="Visualizza la Gestione Pratiche"> 
        
                                                    <Items> 
        
                                                        <telerik:RadPanelItem runat="server" Text="Dettaglio Affidamenti" NavigateUrl="grcDettaglioAffidamento.aspx" /> 
        
                                                        <telerik:RadPanelItem runat="server" Text="Cerca Pratica" NavigateUrl="grcCercaPratica.aspx" /> 
        
                                                    </Items> 
        
                                                </telerik:RadPanelItem> 
        
                                                <telerik:RadPanelItem runat="server" Text="Comunicazioni con Gextra" NavigateUrl="grcMessaggistica.aspx" />                                                                                                                  
        
                                                <telerik:RadPanelItem runat="server" Text="Log out" NavigateUrl="~/Login.aspx?action=logout"/>                                                   
        
                                                <telerik:RadPanelItem runat="server" Text="Assistenza" NavigateUrl=""/> 
        
                                            </Items>                         
        
                                    </telerik:RadPanelBar> 
        
                                    </telerik:RadPane> 
        
                                    <telerik:RadSplitBar ID="VerticalSplitBar" runat="server" CollapseMode="Forward" /> 
        
                                    <telerik:RadPane ID="ContentPane" runat="server"> 
        
                                          <asp:ContentPlaceHolder ID="cphMain" runat="server"></asp:ContentPlaceHolder> 
        
                                    </telerik:RadPane> 
        
                                </telerik:RadSplitter> 
        
                            </telerik:RadPane> 
        
                            <telerik:RadSplitBar ID="Radsplitbar1" runat="server" CollapseMode="None" /> 
        
                            <telerik:RadPane ID="FOoter" runat="server" Width="100%" Height="50px" BackColor="#FFFFFF" Locked="true" Scrolling="None"> 
        
                                <table align="center" cellpadding="0" width="85%" cellspacing="0"> 
        
                                    <tr> 
        
                                        <td align="center"><p><b>Contact Number: 051-xxx xxx </b></p></td> 
        
                                        <td align="center"><p><img src="img/skype.gif" alt="skype" /><b>: </b></p></td> 
        
                                        <td align="center"><asp:Button runat="server" ID="Button2" Text="Manuale utilizzo servizi" /></td> 
        
                                    </tr> 
        
                                </table> 
        
                            </telerik:RadPane>                 
        
                        </telerik:RadSplitter> 
        
                    </div> 
        
                </form> 
        
            </body> 
        
            </html>

i can add a demo to show u what i mean if u need it..
thanks
regard webster

6 Answers, 1 is accepted

Accepted

answered on 23 Apr 2010, 12:48 PM

Hi Webster,

By design RadSplitter expects fixed size to render properly, and having width and height set as percent values might cause decrease of the performance due to high amount of calculations. To avoid this behavior I suggest you to set RadSplitter's VisibleDuringInit property to false, which will cause the control to show its content after the complete load, e.g:

<telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%"

Orientation="Horizontal" VisibleDuringInit="false">

Regards,
Dobromir
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

answered on 26 Apr 2010, 08:22 AM

Hello Webster,

RadSplitter uses skins to control its overall look-and-feel. A skin is a set of images and a CSS stylesheet that can be applied to the control elements (items, images, etc.) and defines their look and feel. The RadSplitter skin affects the appearance of any RadPane, RadSplitBar, RadSlidingZone, and RadSlidingPane controls nested inside the splitter. You can however, assign a different skin to any nested splitters.

RadSplitter is installed with a number of preset skins. These are shown here.

RadSplitter shown on that page uses a custom skin to have different look and feel than the preset skins included in RadTelerik Controls.

You can tweak the existing skins or create your own. Each skin has two main elements: images and a stylesheet. When creating your own, it is a good idea to start with the stylesheet for an existing skin and alter that. See Tutorial: Creating a Custom Skin for a step-by-step walk through.

You could also find useful the following resources: RadSplitter CSS Skin File Selectors and Understanding the RadSplitter Skin CSS File.

Regards,

Bozhidar Ruzhenov

the Telerik team

answered on 04 May 2010, 11:17 AM

Hi Webster,

By design, RadSplitBar is using an image for its background which is a part of the skin's sprite. In order to change it you can use one of the following approaches:

Modify the sprite of the used skin and register it as an external skin. Additional information about how to register external skin to RadControls in the following help article:
Skin registration
Override the preset CSS declarations accessing the SplitBar element by its ID programmatically, e.g.:

<telerik:RadSplitter ID="RadSplitter1" runat="server" OnClientLoad="OnClientLoad">

    <telerik:RadPane ID="RadPane1" runat="server"></telerik:RadPane>

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

    <telerik:RadPane ID="RadPane2" runat="server"></telerik:RadPane>

</telerik:RadSplitter>

<script type="text/javascript">

    function OnClientLoad(splitter, args)

    {

        //get reference to the splitbar

        var splitBar1 = splitter.getSplitBarById("RadSplitBar1");

        //get reference to the splitbar's DOM element

        var splitBarElem = splitBar1.get_element();

        //add background style declarations to override the preset image and set background color to red

        splitBarStyle = splitBarElem.getAttribute("style");

        splitBarElem.setAttribute("style", splitBarStyle + "background-image:none !important;" + "background-color: #ff0000;");

    }

</script>
Overriding the CSS declarations inline:

<style type="text/css">

    .RadSplitter td.rspResizeBar

    {

        background-image: none !important;

        background-color: Red;

    }

</style>

Please note that using 2 approach you can / need to modify the appearance of the different splitbars separately.

Sincerely yours,
Dobromir
the Telerik team