Custom Skins not working with Dynamic Splitters

6 posts, 0 answers
  1. Michael Ash
    Michael Ash avatar
    6 posts
    Member since:
    Apr 2010

    Posted 02 May 2010 Link to this post

    Hi,
    I have made a custom Skin for nested splitters that works OK when I put the splitter code directly in the .aspx page.
    When I attempt to create the splitters in C# code-behind with a Link to the skin's css in the .aspx header, the css is not used.
    Do I have to dynamically change the skins after the client-side onload event?
    Is there another way to specify the Skins css-path in the code-behind?
    If so, how would I go about doing so. All your demo's have a "change skin" dropdown (openSkinChooser), but I can't find any info on this.

    All this was based in your nested splitters demo and splitters\DynamicObjectCreation (which defaults to the Vista built-in skin)
    Here is the code for the .aspx:

    <%@ Page Language="c#" CodeFile="DefaultCS4.aspx.cs" AutoEventWireup="false" Inherits="Telerik.Web.Examples.Splitter.DynamicObjectCreation.DefaultCS4" %> 
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
     
    <!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 runat="server"
        <style type="text/css"
        html, body, form 
        { 
           height: 100%; 
           width: 100%; 
           margin: 0px; 
           padding: 0px; 
           overflow: hidden; 
        } 
        </style> 
        <link href="../../../Skins/Foobar/Foobar/Splitter.Foobar.css" rel="Stylesheet" type="text/css" /> 
    </head> 
    <body > 
        <form id="Form1" method="post" runat="server"
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
        </telerik:RadScriptManager> 
        <asp:Panel runat="server" ID="SplitterHolder" Width="100%" Height="100%"
            <%-- here will be added dynamically the splitter --%> 
        </asp:Panel> 
        </form> 
        <script type="text/javascript" src="JScript.js"></script> 
    </body> 
    </html> 

    Here is the code for the Splitters:

    using System; 
    using System.Collections; 
    using System.ComponentModel; 
    using System.Data; 
    using System.Drawing; 
    using System.Web; 
    using System.Web.SessionState; 
    using System.Web.UI; 
    using System.Web.UI.WebControls; 
    using System.Web.UI.HtmlControls; 
    using Telerik.Web.UI; 
     
    namespace Telerik.Web.Examples.Splitter.DynamicObjectCreation 
        /// <summary> 
        /// Summary description for DefaultCS. 
        /// </summary> 
        public partial class DefaultCS4 : Page 
        { 
            //protected Telerik.Web.UI.RadPane pane1; 
            //protected Telerik.Web.UI.RadSplitter splitter1; 
            //protected System.Web.UI.WebControls.Button Button1; 
                 
            private void Page_Load(object sender, System.EventArgs e) 
            { 
                /* Splitter1: Two panes, horizontal, NO Splitbar 
                   BottomPane contains two other nested splitters*/ 
                    RadSplitter Splitter1 = new RadSplitter(); 
                    Splitter1.ID="RadSplitter1"
                    Splitter1.Orientation = Orientation.Horizontal; 
                    Splitter1.BackColor = ColorTranslator.FromHtml("#00137F");  
                    Splitter1.Width = Unit.Percentage(100.0); 
                    Splitter1.Height = Unit.Percentage(100.0); 
                        RadPane TopPane = new RadPane(); //Fixed top pane 
                        TopPane.ID="TopPane"
                        TopPane.Height = Unit.Pixel(50); 
                        TopPane.Scrolling = SplitterPaneScrolling.None;  
                            Label label0 = new Label(); 
                            label0.Text = "<span style='color:White'>Top Pane</span>"
                            "<a href='javascript:togglenav('tree')' ><span style='color:White'>TOC</span></a><br />"
                            "<a href='javascript:togglenav('idx')' >Index</a><br />"
                            "<a href='javascript:togglenav('search')' >Search</a><br/>"
                        TopPane.Controls.Add(label0); 
                        RadPane BottomPane = new RadPane(); 
                        BottomPane.ID="BottomPane"
                    Splitter1.Items.Add(TopPane); 
                    //vertical splitter goes in BottomPane 
                        RadSplitter Splitter2 = new RadSplitter(); 
                        Splitter2.ID="RadSplitter2"
                        Splitter2.Width = Unit.Percentage(100.0); 
                        Splitter2.Height = Unit.Percentage(100.0); 
                        Splitter2.BackColor = System.Drawing.Color.White; 
                        Splitter2.EnableEmbeddedSkins=false
                        Splitter2.Skin="Foobar"
                    // LeftPane of Splitter2 
                            RadPane LeftPane = new RadPane(); 
                            LeftPane.ID="LeftPane"
                            LeftPane.Width = Unit.Percentage(25.0); 
                            LeftPane.Height= Unit.Percentage(100.0); 
                            // add content to LeftPane 
                                Label label1 = new Label(); 
                                label1.Text =   "<div id='tree' style='padding-left:10px;padding-top:10px;'>"
                                "left NAV content Tree"
                                "<br /><a href='http://google.com' target= TopContentPane>Open google.com</a><br />"
                                "<a href='http://flickr.com' target=TopContentPane>Open flickr.com</a>"
                                "</div>"
                                "<div id='idx' style='padding-left:10px;padding-top:10px;display: none;'>"
                                "left NAV content Index  </div>"
                                "<div id='search' style='padding-left:10px;padding-top:10px;display: none;'>"
                                "left NAV content Search </div>"
                            LeftPane.Controls.Add(label1); 
                     
                    // add the pane in to Splitter2 
                        Splitter2.Items.Add(LeftPane); 
     
                    // now create Splitter2 SplitBar 
                        RadSplitBar SplitBar2 = new RadSplitBar(); 
                        SplitBar2.ID="RadSplitbar2"
                        SplitBar2.CollapseMode = SplitBarCollapseMode.Forward; 
                     
                    // add the SplitBar2 to Splitter2 
                        Splitter2.Items.Add(SplitBar2); 
                     
                    // create Splitter2 right pane       
                            RadPane RightPane = new RadPane(); 
                            RightPane.ID="RightPane"
                            RightPane.Scrolling = SplitterPaneScrolling.None; //to avoid double scroll bars 
                    //create horizontal splitter in RightPane 
                                RadSplitter Splitter3 = new RadSplitter(); 
                                Splitter3.ID="RadSplitter3"
                                Splitter3.Orientation = Orientation.Horizontal; 
                                Splitter3.Width = Unit.Percentage(100.0); 
                                Splitter3.Height = Unit.Percentage(100.0); 
                                Splitter3.BackColor = System.Drawing.Color.White; 
                                Splitter3.EnableEmbeddedSkins=false
                                Splitter3.Skin="Foobar"
                    //Create top pane in Splitter3:  
                                RadPane TopContentPane = new RadPane(); 
                                TopContentPane.ID="TopContentPane"
                                TopContentPane.ContentUrl = "default.html"
                                Splitter3.Items.Add(TopContentPane); 
                    //Create SplitBar3 in Splitter3:  
                                RadSplitBar SplitBar3 = new RadSplitBar(); 
                                SplitBar3.ID="RadSplitBar3"
                                SplitBar3.CollapseMode = SplitBarCollapseMode.Backward; 
                                Splitter3.Items.Add(SplitBar3); 
                    //Create bottom pane in Splitter3: 
                                RadPane BottomContentPane = new RadPane(); 
                                BottomContentPane.ID="BottomContentPane"
                                BottomContentPane.Collapsed=true
                                BottomContentPane.Height=Unit.Pixel(330); 
                                BottomContentPane.MaxHeight=330; 
                                BottomContentPane.Scrolling = SplitterPaneScrolling.None; //Prevents double scrollbar 
                                BottomContentPane.MinHeight=0; 
                    //Add Preview <div> 
                                    Label label2 = new Label(); 
                                    label2.Text="<div style='width:100%; height:100%' id='preview'></div>"
                                BottomContentPane.Controls.Add(label2); 
                                Splitter3.Items.Add(BottomContentPane); 
                    //Add Content (Splitter3) to RightPane of Splitter2 
                            RightPane.Controls.Add(Splitter3); 
                    //Add RightPane to Splitter2 
                        Splitter2.Items.Add(RightPane); 
                    //Splitter2 to BottomPane of Splitter1 
                    BottomPane.Controls.Add(Splitter2); 
                    //BottomPane to Splitter1 
                    Splitter1.Items.Add(BottomPane); 
                    //Add Splitter1 to Placeholder 
                    SplitterHolder.Controls.Add(Splitter1); 
            } 
            override protected void OnInit(EventArgs e) 
            { 
                // 
                // CODEGEN: This call is required by the ASP.NET Web Form Designer. 
                // 
                InitializeComponent(); 
                base.OnInit(e); 
            } 
             
            /// <summary> 
            /// Required method for Designer support - do not modify 
            /// the contents of this method with the code editor. 
            /// </summary> 
            private void InitializeComponent() 
            {     
                this.Load += new System.EventHandler(this.Page_Load); 
     
            } 
        } 
     

    Thanks,
    Mike





  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 05 May 2010 Link to this post

    Hi Michael,

    This problem occurs because of the specific scenario - nested RadSplitter controls with different skins. This is not supported out-of-the-box and the embedded skin CSS rules override the ones of the external CSS file.

    As a workaround for this problem I suggest you to add !important to every rule in the external CSS file. Unfortunately this approach will work only for this scenario - it is not possible to assign multiple external skins for a single RadControl; it is not possible to set the external skin to the outer splitter.

    For your convenience I have attached a sample project with inline and codebehind implementation.

    All the best,
    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. Michael Ash
    Michael Ash avatar
    6 posts
    Member since:
    Apr 2010

    Posted 05 May 2010 Link to this post

    Hi Dobromir,
    Thanks for you answer and solution.
    As soon as I began reading your answer, I realized that I had caused a misunderstanding.
    I had never intended to "mix" styles in the nested splitters.
    I had forgotten to apply my custom style to the outer splitter by adding the lines:
    Splitter1.EnableEmbeddedSkins = false
    Splitter1.Skin = "Foobar"
     
    The dynamic splitters were rendered with the correct style after my correction.

    However, your solution has given me options I didn't know I had.
    My apologies.

    I am also experiencing "strange" behavior when running any standalone splitter pages (that don't include the Headers and Footers provided in the Examples) when displaying the pages in IE8 with IIS7 as the web server on the server machine (Server 2008 64-bit SP2).
    It takes up to 5 seconds for the resizing bar to appear the first time a splitter is dragged. After the first time, there are no further delays when resizing.
    This does not happen with Firefox, and it doesn't happen on remote machines running IE8.
    It also does not happen when I switch to VS2008 Development server...just IIS7.

    Any thoughts?

    Regards and thanks,
    Mike
  5. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 10 May 2010 Link to this post

    Hello Michael Ash,
    You are the first to report such a problem. Basically, when you mousedown the splitbar, the splitbar creates an additional HTML element that indicates where you will release the splitbar on mouseup. From the information you have provided, I assume that the JavaScript that creates this additional HTML element takes a lot of time to execute. However, I am not sure what could be causing this in the specific setup and not in any other. As you mention that you are using IE8, you should check that your page is being rendered in IE8 Standards mode. Rendering in IE7/quirks is much slower.

    In case you decide to research the problem further, I would suggest that you check the CPU usage of the processes in the Task Manager. Additionally, you can use a tool as DynaTrace - this will give you a better view on what resources are loaded and how much time it takes for them to load.

    The general articles on performance can be found here:
    http://www.telerik.com/products/aspnet-ajax/resources/top-performance.aspx

    Regards,
    Tsvetie
    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.
  6. Michael Ash
    Michael Ash avatar
    6 posts
    Member since:
    Apr 2010

    Posted 10 May 2010 Link to this post

    Hi Tsvetie,
    Thanks for responding.
    I believe the pages are being displayed in IE8 Standards mode.
    The Compatibility Mode button to the right of the address bar is absent or disappears when navigating to the page with the splitters.
    I also made sure the IIS7 site was not listed to be run in that mode in the Compatibility View Settings.
    I also inserted the <meta http-equiv="X-UA-Compatible" content="IE=8" /> in the start of the <head> tag.
    Regarding Task manager performance: the CPU use shoots up to almost 60% when I do the first mouse down. After that it only goes up to 5% when resizing.
    With FireFox, there is no delay, but the CPU usage goes up to 14% on every resize.
    Regards,
    Mike
  7. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 12 May 2010 Link to this post

    Hi Michael Ash,
    I am not sure what is causing the problem only when you view the page on the server machine and not when you view it on a remote machine. The only thing that I can suggest, is that you make sure that you have "debug=false" in the web.config file. In case this does not make a difference, you should give the DynaTrace  tool a try - it will help you find the "bottleneck".

    Kind regards,
    Tsvetie
    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