1:
2: <gaia:ExtendedButton
3: ID="btnStartApplication"
4: runat="server"
5: Text="Open Application"
6: Width="150px"
7: Toggled="false"
8: OnClick="btnStartApplication_Click" />
9:
10: <gaia:Window
11: id="applicationWindow"
12: Width="600px"
13: Height="470px"
14: Visible="false"
15: Draggable="true"
16: Minimizable="true"
17: OpacityWhenMoved="1"
18: Resizable="true"
19: Maximizable="true"
20: Caption="Calendar Application inside a Gaia Window"
21: Closable="true"
22: OnClosing="applicationWindow_Closing"
23: runat="server">
24:
25: <div style="margin:20px 15px 20px 15px;">
26:
27: <gaia:TabControl
28: runat="server"
29: OnActiveTabViewIndexChanged="tab1_ActiveTabViewIndexChanged"
30: ForceDynamicRendering="true"
31: ID="tab1">
32:
33: <gaia:TabView
34: ID="tabExtView2"
35: Caption="Calendar Activities"
36: runat="server">
37:
38: <calendar:CalendarApplication id="CalendarApplication1" runat="server">
39: </calendar:CalendarApplication>
40:
41: </gaia:TabView>
42:
43: <gaia:TabView
44: ID="tabExtView1"
45: Caption="Accordion inside TabView"
46: runat="server">
47:
48: <gaia:Accordion
49: runat="server"
50: AnimationDuration="300"
51: ID="accordionWrapper">
52: <gaia:ExtendedPanel
53: runat="server"
54: Collapsed="false"
55: Caption="Ajax Accordion example"
56: id="accordion1">
57:
58: <div style="padding:15px;margin-bottom:150px;">
59:
60: <gaia:DateTimePicker
61: runat="server"
62: HasDropDownButton="true"
63: Format="d.MMM yyyy"
64: ID="datePicker1"
65: OnSelectedDateChanged="datePicker1_TextChanged"
66: Visible="true" />Here's an example of what you can do in Gaia Ajax combining controls like
67: Ajax DateTimePickers, Ajax TabControls, Ajax Accordions and Ajax GridView.
68: <br />
69:
70: <br />
71:
72: <gaia:Label
73: runat="server"
74: ID="lbl1"
75: style="font-weight:bold;" />
76: </div>
77:
78: </gaia:ExtendedPanel>
79:
80: <gaia:ExtendedPanel
81: runat="server"
82: Caption="Second Accordion"
83: id="accordion2"
84: Collapsed="true">
85:
86: <div style="padding:15px;">
87:
88: As you can see hosting an Accordion inside a TabControl is quite easy even though the
89: Ajax TabControl is in itself hosted inside a Gaia Ajax Window.<br />
90: <strong>Flexible building blocks which just makes sense! :)</strong>
91: <br />
92: Think of it like Lego: the power to express yourself in any way you choose...
93: <br />
94: Try to resize, maximize, minimize etc the Window.
95:
96: </div>
97:
98: </gaia:ExtendedPanel>
99:
100: <gaia:ExtendedPanel
101: runat="server"
102: Caption="Last Accordion"
103: id="accordion3"
104: Collapsed="true">
105:
106: <div style="padding:15px;">
107:
108: Also opening an Ajax Window from inside an Accordion which is hosted inside an Ajax TabControl
109: which again is hosted inside another Gaia Ajax Window is as natural and easy as doing everything else
110: in Gaia ;)
111: <br />
112: <b>Type your first name and click the Button</b>
113: <br />
114: <br />
115: Your name: <gaia:TextBox
116: runat="server"
117: AutoPostBack="true"
118: KeyChangeEvents="true"
119: KeyChangeEventsInterval="250"
120: OnTextChanged="txtName_TextChanged"
121: ID="txtName" />
122: <br />
123: <br />
124: <gaia:ExtendedButton
125: runat="server"
126: ID="btnOpenWindow"
127: OnClick="btnOpenWindow_Click"
128: Text="Click" />
129:
130: </div>
131:
132: </gaia:ExtendedPanel>
133: </gaia:Accordion>
134:
135: </gaia:TabView>
136:
137:
138: </gaia:TabControl>
139: </div>
140: </gaia:Window>
141:
142: <gaia:Window
143: id="wndYourName"
144: Width="400px"
145: Height="300px"
146: Draggable="true"
147: Minimizable="true"
148: Resizable="true"
149: Maximizable="true"
150: CenterInForm="true"
151: Closable="true"
152: Visible="false"
153: runat="server">
154: <div style="margin:50px;">
155: <h2 runat="server" id="nameOfPerson"></h2>
156: </div>
157: </gaia:Window>
158:
159:
160: