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

Custom Skins not working with Dynamic Splitters

5 Answers 144 Views

Splitter

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

Michael Ash asked on 02 May 2010, 06:02 PM

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

5 Answers, 1 is accepted

answered on 05 May 2010, 04:04 PM

radsplitterexternalskinfromcodebehind.zip

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.

answered on 05 May 2010, 09:02 PM

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

answered on 10 May 2010, 12:50 PM

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

answered on 10 May 2010, 04:15 PM

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

answered on 12 May 2010, 09:07 AM

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