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:
Here is the code for the Splitters:
Thanks,
Mike
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