splitter resizing when page load

7 posts, 1 answers
  1. Webster Velasco
    Webster Velasco avatar
    114 posts
    Member since:
    Jun 2012

    Posted 20 Apr 2010 Link to this post

    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
  2. Answer
    Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 23 Apr 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Webster Velasco
    Webster Velasco avatar
    114 posts
    Member since:
    Jun 2012

    Posted 23 Apr 2010 Link to this post

    thanks
  5. Webster Velasco
    Webster Velasco avatar
    114 posts
    Member since:
    Jun 2012

    Posted 23 Apr 2010 Link to this post

    hi

    another question again.. i want to change the appearance of my page code posted above

    like this one

    thanks



  6. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 26 Apr 2010 Link to this post

    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

    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.
  7. Webster Velasco
    Webster Velasco avatar
    114 posts
    Member since:
    Jun 2012

    Posted 30 Apr 2010 Link to this post

    how cn i change the back color of this?

    <telerik:RadSplitBar ID="Radsplitbar1" runat="server" CollapseMode="None" />  

  8. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 04 May 2010 Link to this post

    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:
    1. 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
    2. 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>
    3. 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

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017