1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ClientAPI.aspx.cs" Inherits="ZeeControls2Demo.WebDock.Advanced.ClientApi" Theme="Default" %>
2
3 <%@ Register Assembly="ZettaCube.ZeeControls" Namespace="ZettaCube.ZeeControls" TagPrefix="cc1" %>
4
5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
6
7 <html xmlns="http://www.w3.org/1999/xhtml" >
8 <head runat="server">
9 <title>Client API</title>
10
11 <script type="text/javascript" src="../../common.js"></script>
12
13 <script type="text/javascript">
14
15 var webDockId, demoPanelId;
16
17 function $(e){
18 return document.getElementById(e);
19 };
20
21 function RefreshValues() {
22 var dim;
23 var container = ZCWD.GetContainer(webDockId);
24 var demoPanel = ZCWD.GetPanel(demoPanelId);
25
26 dim = container.GetDimensions();
27 $('TopDim').innerHTML = [dim.width, dim.height].join(',');
28 dim = container.GetContentDimensions();
29 $('TopContentDim').innerHTML = [dim.width, dim.height].join(',');
30 $('PanelCount').innerHTML = container.GetPanelCount();
31
32 dim = demoPanel.GetDimensions();
33 $('PanelDim').innerHTML = [dim.width, dim.height].join(',');
34 $('PanelState').options[demoPanel.GetDockingState()].selected = true;
35
36 $('TabCount').innerHTML = demoPanel.GetTabCount();
37 $('TabIndex').value = demoPanel.GetActiveTabIndex();
38 }
39
40 function UpdatePanelState() {
41 var ddl = $('PanelState');
42 var demoPanel = ZCWD.GetPanel(demoPanelId);
43
44 demoPanel.SetDockingState(ddl.options[ddl.selectedIndex].value);
45 }
46
47 function SetTabIndex() {
48 ZCWD.GetPanel(demoPanelId).SetActiveTabIndex($('TabIndex').value);
49 }
50
51 </script>
52
53 </head>
54 <body>
55 <form id="form1" runat="server">
56 <div>
57
58 <cc1:WebDock ID="WebDock1" runat="server" FitParent="FitWindow" Height="689px" Width="838px">
59 <TabStripProps ImagesFolderUrl="~/images/tabs" />
60 <Panels>
61 <cc1:WebDockPanelGroup runat="server" Dock="Bottom" PreferredSize="200">
62 <Panels>
63 <cc1:WebDockPanel runat="server">
64 <Tabs>
65 <cc1:WebDockTabbedPanel runat="server" ImageFileName="Projects.gif" Title="Projects">
66 <Content>
67 <span style="background-color: lightgreen">
68 Content of Projects </span>
69 </Content>
70 </cc1:WebDockTabbedPanel>
71 <cc1:WebDockTabbedPanel runat="server" ImageFileName="Breakpoints.gif" Title="Breakpoints">
72 <Content>
73 <span style="background-color: paleturquoise">
74 Content of Breakpoints </span>
75 </Content>
76 </cc1:WebDockTabbedPanel>
77 </Tabs>
78 </cc1:WebDockPanel>
79 <cc1:WebDockPanel ID="DemoPanel" runat="server">
80 <Tabs>
81 <cc1:WebDockTabbedPanel runat="server" ImageFileName="Output.gif" Title="Output">
82 <Content>
83 <span style="background-color: wheat">DemoPanel<br />
84 Content of Output </span>
85 <div id="blah1" class="blah"></div>
86 </Content>
87 </cc1:WebDockTabbedPanel>
88 <cc1:WebDockTabbedPanel runat="server" ImageFileName="FindResults.gif" Title="Find Results">
89 <Content>
90 <span style="background-color: thistle">DemoPanel<br />
91 Content of Find Results </span>
92 </Content>
93 </cc1:WebDockTabbedPanel>
94 </Tabs>
95 </cc1:WebDockPanel>
96 </Panels>
97 </cc1:WebDockPanelGroup>
98 <cc1:WebDockPanelGroup runat="server" Dock="Right" PreferredSize="200">
99 <Panels>
100 <cc1:WebDockPanel runat="server" Dock="Top">
101 <Tabs>
102 <cc1:WebDockTabbedPanel runat="server" ImageFileName="Servers.gif" Title="Servers">
103 <Content>
104 <span style="background-color: lightskyblue">
105 Content of Servers</span>
106 </Content>
107 </cc1:WebDockTabbedPanel>
108 </Tabs>
109 </cc1:WebDockPanel>
110 <cc1:WebDockPanel runat="server" Dock="Top">
111 <Tabs>
112 <cc1:WebDockTabbedPanel runat="server" ImageFileName="References.gif" Title="References">
113 <Content>
114 <span style="background-color: violet">
115 Content of References</span>
116 </Content>
117 </cc1:WebDockTabbedPanel>
118 <cc1:WebDockTabbedPanel runat="server" ImageFileName="Properties.gif" Title="Properties">
119 <Content>
120 <span style="background-color: khaki">
121 Content of Properties </span>
122 </Content>
123 </cc1:WebDockTabbedPanel>
124 </Tabs>
125 </cc1:WebDockPanel>
126 </Panels>
127 </cc1:WebDockPanelGroup>
128 <cc1:WebDockPanel runat="server">
129 <Tabs>
130 <cc1:WebDockTabbedPanel runat="server" ImageFileName="Folders.gif" Title="Folders">
131 <Content>
132 <span style="background-color: lightgreen">
133 Content of Folders</span>
134 </Content>
135 </cc1:WebDockTabbedPanel>
136 </Tabs>
137 </cc1:WebDockPanel>
138 </Panels>
139 <MainContent>
140 <strong>Client API</strong><br />
141 <br />
142 Container and panel properties can be retrieved at the client-side via JavaScript.
143 Certain properties are settable.<br />
144 <br />
145 <asp:Panel ID="Panel1" runat="server">
146 Selected methods on WebDock container:<asp:Panel ID="Panel2" runat="server" CssClass="indent">
147 GetDimensions():
148 <span id="TopDim"></span><br />
149 GetContentDimensions():
150 <span id="TopContentDim"></span><br />
151 GetPanelCount():
152 <span id="PanelCount"></span><br />
153 </asp:Panel>
154 </asp:Panel>
155 <asp:Panel ID="Panel3" runat="server">
156 Selected methods on DemoPanel (at bottom-right):<asp:Panel ID="Panel4" runat="server" CssClass="indent">
157 GetDimensions():
158 <span id="PanelDim"></span><br />
159 Get/SetDockingState():
160 <select id="PanelState" onchange="UpdatePanelState();">
161 <option value="0" selected="selected">Pinned</option>
162 <option value="1">AutoHidden</option>
163 <option value="2">Maximized</option>
164 <option value="3">Hidden</option>
165 </select>
166 <br />
167 GetTabCount():
168 <span id="TabCount"></span><br />
169 Get/SetActiveTabIndex():
170 <input id="TabIndex" style="width: 25px" /><input type="button" value="Set" onclick="SetTabIndex();" />
171 </asp:Panel>
172 </asp:Panel>
173 <input id="Refresh" type="button" value="Refresh" onclick="RefreshValues();" />
174 </MainContent>
175 <ActionButtonProps ShowMaximize="True" />
176 </cc1:WebDock>
177
178 <script type="text/javascript">
179 GenLongContent('blah1', 1);
180 webDockId = '<%= WebDock1.ClientID %>';
181 demoPanelId = '<%= DemoPanel.ClientID %>';
182
183 setTimeout('RefreshValues();', 500);
184 </script>
185
186 </div>
187 </form>
188 </body>
189 </html>
190
1 using System;
2 using System.Data;
3 using System.Configuration;
4 using System.Collections;
5 using System.Web;
6 using System.Web.Security;
7 using System.Web.UI;
8 using System.Web.UI.WebControls;
9 using System.Web.UI.WebControls.WebParts;
10 using System.Web.UI.HtmlControls;
11
12 namespace ZeeControls2Demo.WebDock.Advanced
13 {
14 public partial class ClientApi : System.Web.UI.Page
15 {
16 protected void Page_Load(object sender, EventArgs e)
17 {
18
19 }
20 }
21 }
22
1 body
2 {
3 font-family: Tahoma, Geneva;
4 font-size: 10pt;
5 }
6
7 .ZCWDMainContent, .ZCWDPanelContent
8 {
9 padding: 3px;
10 }
11
12 .ZCWDPanelTitleBar
13 {
14 padding-left: 3px;
15 }
16
17 .ZCWSPanel
18 {
19 padding: 3px;
20 }
21
22 .title
23 {
24 display: block;
25 font-weight:bold;
26 line-height: 24px;
27 }
28
29 .indent
30 {
31 padding: 10px;
32 padding-left: 30px;
33 }
34
35 .blah
36 {
37 color: Gray;
38 }
39
40 .tableRowHeader
41 {
42 color: #666666;
43 }
44
45 .tableColumnHeader
46 {
47 color: #666666;
48 }
49
1 <%--
2 Default skin template. The following skins are provided as examples only.
3
4 1. Named control skin. The SkinId should be uniquely defined because
5 duplicate SkinId's per control type are not allowed in the same theme.
6
7 <asp:GridView runat="server" SkinId="gridviewSkin" BackColor="White" >
8 <AlternatingRowStyle BackColor="Blue" />
9 </asp:GridView>
10
11 2. Default skin. The SkinId is not defined. Only one default
12 control skin per control type is allowed in the same theme.
13
14 <asp:Image runat="server" ImageUrl="~/images/image1.jpg" />
15 --%>