1 <%@ Page Language="C#" AutoEventWireup="true" Codebehind="Events.aspx.cs" Inherits="ZeeControls2Demo.WebSplitter.Advanced.Events"
2 Theme="Default" %>
3
4 <%@ Register Assembly="ZettaCube.ZeeControls" Namespace="ZettaCube.ZeeControls" TagPrefix="cc1" %>
5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
6 <html xmlns="http://www.w3.org/1999/xhtml">
7 <head id="Head1" runat="server">
8 <title>Client And Server-Side Events</title>
9
10 <script type="text/javascript" src="../../common.js"></script>
11
12 </head>
13 <body>
14 <form id="form1" runat="server">
15 <div>
16
17 <script type="text/javascript">
18
19 var stateStr = ['Normal', 'ForwardCollapsed', 'BackwardCollapsed', 'Hidden'];
20
21 function Msg(msg) {
22 document.getElementById('status').value += "\n" + msg;
23 }
24
25 function PanelStateChangingHandler(panelId, oldState, newState) {
26 Msg('PanelStateChanging: Panel ID=' + panelId + ', Old state=' + stateStr[oldState] + ', New state=' + stateStr[newState]);
27 return true; // return false to cancel the state change
28 }
29
30 function PanelStateChangedHandler(panelId, oldState, newState) {
31 Msg('PanelStateChanged: Panel ID=' + panelId + ', Old state=' + stateStr[oldState] + ', New state=' + stateStr[newState]);
32 }
33
34 function ResizedHandler (containerId, oldWidth, oldHeight, newWidth, newHeight) {
35 Msg('Resized: Container ID=' + containerId + ', Old width/height=' + oldWidth + 'x' + oldHeight + ', New width/height=' + newWidth + 'x' + newHeight);
36 }
37
38 function PanelResizedHandler (panelId, oldWidth, oldHeight, newWidth, newHeight) {
39 Msg('PanelResized: Panel ID=' + panelId + ', Old width/height=' + oldWidth + 'x' + oldHeight + ', New width/height=' + newWidth + 'x' + newHeight);
40
41 var h, w;
42
43 if (panelId == '<%= PanelMiddle.ClientID %>') {
44 h = Math.max(0, newHeight - 8);
45 w = Math.max(0, newWidth - 8);
46 document.getElementById('image1').style.height = h + 'px';
47 document.getElementById('image1').style.width = w + 'px';
48 }
49
50 if (panelId == '<%= PanelBottom.ClientID %>') {
51 h = Math.max(0, newHeight - 150);
52 w = Math.max(0, newWidth - 14);
53 document.getElementById('status').style.height = h + 'px';
54 document.getElementById('status').style.width = w + 'px';
55 }
56
57 }
58 </script>
59
60 <cc1:WebSplitterContainer ID="WebSplitterContainer1" runat="server" Height="660px"
61 Width="870px" OnClientPanelResized="PanelResizedHandler" OnClientPanelStateChanged="PanelStateChangedHandler"
62 OnClientPanelStateChanging="PanelStateChangingHandler" OnClientResized="ResizedHandler"
63 OnPanelStateChanged="WebSplitterContainer1_PanelStateChanged" Orientation="Horizontal"
64 FitParent="FitWindow" InheritSplitterProps="false">
65 <Panels>
66 <cc1:WebSplitterPanel runat="server" CanCollapse="Both" ID="PanelTop">
67 <Content>
68 <strong>Client And Server-Side Events</strong>
69 <br />
70 <br />
71 Resize or collapse/expand panels to generate events.
72 <br />
73 On this page, the OnClientPanelResized event handler will resize the image and the
74 text area below whenever the size of the containing panels changes.
75 </Content>
76 </cc1:WebSplitterPanel>
77 <cc1:WebSplitterPanel runat="server" CanCollapse="Both" ID="PanelMiddle" Overflow="hidden">
78 <Content>
79 <img id="image1" src="../../images/sunrise.jpg" />
80 </Content>
81 </cc1:WebSplitterPanel>
82 <cc1:WebSplitterPanel runat="server" Filled="True" CanCollapse="Both" ID="PanelBottom">
83 <Content>
84 <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="True" OnCheckedChanged="CheckBox1_CheckedChanged"
85 Text="LiveRefresh" />
86 (if enabled, will generate resize events while dragging the splitter)<br />
87 Events handled on client-side:<br />
88 <textarea id="status" style="width: 600px; height: 300px"></textarea><br />
89 <br />
90 Collapse/expand panels and click
91 <asp:Button ID="Button1" runat="server" Text="Postback" />
92 to generate server events.<br />
93 Events handled on server:<br />
94 <asp:Label ID="Label1" runat="server" EnableViewState="False"></asp:Label>
95 </Content>
96 </cc1:WebSplitterPanel>
97 </Panels>
98 </cc1:WebSplitterContainer>
99 </div>
100 </form>
101 </body>
102 </html>
103