Skip to content

Commit f1837fc

Browse files
h3trikah3trika
authored
Update Demos (#56)
1 parent 38aa75a commit f1837fc

File tree

12 files changed

+643
-100
lines changed

12 files changed

+643
-100
lines changed

‎demos/dockinglayout/defaultfunctionality/App.razor‎

Lines changed: 297 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,297 @@
1+
<JqxDockingLayout width=800 height=600 layout=layout>
2+
<!--The panel content divs can have a flat structure-->
3+
<!--autoHideGroup-->
4+
<div data-container="ToolboxPanel">
5+
List of tools
6+
</div>
7+
<div data-container="HelpPanel">
8+
Help topics
9+
</div>
10+
<!--documentGroup-->
11+
<div data-container="Document1Panel">
12+
Document 1 content
13+
</div>
14+
<div data-container="Document2Panel">
15+
Document 2 content
16+
</div>
17+
<!--bottom tabbedGroup-->
18+
<div data-container="ErrorListPanel">
19+
List of errors
20+
</div>
21+
<!--right tabbedGroup-->
22+
<div data-container="SolutionExplorerPanel">
23+
<JqxTree width=treeSize height=treeSize source=treeSource></JqxTree>
24+
</div>
25+
<div data-container="PropertiesPanel">
26+
List of properties
27+
</div>
28+
<!--floatGroup-->
29+
<div data-container="OutputPanel">
30+
<div style="font-family: Consolas;">
31+
<p>
32+
Themes installation complete.
33+
</p>
34+
<p>
35+
List of installed stylesheet files. Include at least one stylesheet Theme file and
36+
the images folder:
37+
</p>
38+
<ul>
39+
<li>
40+
styles/jqx.base.css: Stylesheet for the base Theme. The jqx.base.css file should
41+
be always included in your project.
42+
</li>
43+
<li>styles/jqx.arctic.css: Stylesheet for the Arctic Theme</li>
44+
<li>styles/jqx.web.css: Stylesheet for the Web Theme</li>
45+
<li>styles/jqx.bootstrap.css: Stylesheet for the Bootstrap Theme</li>
46+
<li>styles/jqx.classic.css: Stylesheet for the Classic Theme</li>
47+
<li>styles/jqx.darkblue.css: Stylesheet for the DarkBlue Theme</li>
48+
<li>styles/jqx.energyblue.css: Stylesheet for the EnergyBlue Theme</li>
49+
<li>styles/jqx.shinyblack.css: Stylesheet for the ShinyBlack Theme</li>
50+
<li>styles/jqx.office.css: Stylesheet for the Office Theme</li>
51+
<li>styles/jqx.metro.css: Stylesheet for the Metro Theme</li>
52+
<li>styles/jqx.metrodark.css: Stylesheet for the Metro Dark Theme</li>
53+
<li>styles/jqx.orange.css: Stylesheet for the Orange Theme</li>
54+
<li>styles/jqx.summer.css: Stylesheet for the Summer Theme</li>
55+
<li>styles/jqx.black.css: Stylesheet for the Black Theme</li>
56+
<li>styles/jqx.fresh.css: Stylesheet for the Fresh Theme</li>
57+
<li>styles/jqx.highcontrast.css: Stylesheet for the HighContrast Theme</li>
58+
<li>styles/jqx.blackberry.css: Stylesheet for the Blackberry Theme</li>
59+
<li>styles/jqx.android.css: Stylesheet for the Android Theme</li>
60+
<li>styles/jqx.mobile.css: Stylesheet for the Mobile Theme</li>
61+
<li>styles/jqx.windowsphone.css: Stylesheet for the Windows Phone Theme</li>
62+
<li>styles/jqx.ui-darkness.css: Stylesheet for the UI Darkness Theme</li>
63+
<li>styles/jqx.ui-lightness.css: Stylesheet for the UI Lightness Theme</li>
64+
<li>styles/jqx.ui-le-frog.css: Stylesheet for the UI Le Frog Theme</li>
65+
<li>styles/jqx.ui-overcast.css: Stylesheet for the UI Overcast Theme</li>
66+
<li>styles/jqx.ui-redmond.css: Stylesheet for the UI Redmond Theme</li>
67+
<li>styles/jqx.ui-smoothness.css: Stylesheet for the UI Smoothness Theme</li>
68+
<li>styles/jqx.ui-start.css: Stylesheet for the UI Start Theme</li>
69+
<li>styles/jqx.ui-sunny.css: Stylesheet for the UI Sunny Theme</li>
70+
<li>styles/images: contains images referenced in the stylesheet files</li>
71+
</ul>
72+
</div>
73+
</div>
74+
</JqxDockingLayout>
75+
76+
@code {
77+
string treeSize = "100%";
78+
79+
IDictionary<string, object>[] treeSource = new Dictionary<string, object>[]
80+
{
81+
new Dictionary<string, object>
82+
{
83+
{ "label", "Project" },
84+
{ "expanded", true },
85+
{ "icon", "../images/earth.png" },
86+
{
87+
"items",
88+
new Dictionary<string, object>[]
89+
{
90+
new Dictionary<string, object>
91+
{
92+
{ "label", "css" },
93+
{ "expanded", true },
94+
{ "icon", "../images/folder.png" },
95+
{
96+
"items",
97+
new Dictionary<string, object>[]
98+
{
99+
new Dictionary<string, object>
100+
{
101+
{ "label", "jqx.base.css" },
102+
{ "icon", "../images/nav1.png" },
103+
},
104+
new Dictionary<string, object>
105+
{
106+
{ "label", "jqx.energyblue.css" },
107+
{ "icon", "../images/nav1.png" },
108+
},
109+
new Dictionary<string, object>
110+
{
111+
{ "label", "jqx.orange.css" },
112+
{ "icon", "../images/nav1.png" },
113+
}
114+
}
115+
}
116+
},
117+
new Dictionary<string, object>
118+
{
119+
{ "label", "scripts" },
120+
{ "icon", "../images/folder.png" },
121+
{
122+
"items",
123+
new Dictionary<string, object>[]
124+
{
125+
new Dictionary<string, object>
126+
{
127+
{ "label", "jqxcore.js" },
128+
{ "icon", "../images/nav1.png" },
129+
},
130+
new Dictionary<string, object>
131+
{
132+
{ "label", "jqxdata.js" },
133+
{ "icon", "../images/nav1.png" },
134+
},
135+
new Dictionary<string, object>
136+
{
137+
{ "label", "jqxgrid.js" },
138+
{ "icon", "../images/nav1.png" },
139+
}
140+
}
141+
}
142+
},
143+
new Dictionary<string, object>
144+
{
145+
{ "label", "index.htm" },
146+
{ "icon", "../images/folder.png" }
147+
}
148+
}
149+
}
150+
}
151+
};
152+
153+
IDictionary<string, object>[] layout = new Dictionary<string, object>[]
154+
{
155+
new Dictionary<string, object>
156+
{
157+
{ "type", "layoutGroup" },
158+
{ "orientation", "horizontal" },
159+
{
160+
"items",
161+
new Dictionary<string, object>[]
162+
{
163+
new Dictionary<string, object>
164+
{
165+
{ "type", "autoHideGroup" },
166+
{ "alignment", "left" },
167+
{ "width", 80 },
168+
{ "unpinnedWidth", 200 },
169+
{
170+
"items",
171+
new Dictionary<string, object>[]
172+
{
173+
new Dictionary<string, object>
174+
{
175+
{ "type", "layoutPanel" },
176+
{ "title", "Toolbox" },
177+
{ "contentContainer", "ToolboxPanel" }
178+
},
179+
new Dictionary<string, object>
180+
{
181+
{ "type", "layoutPanel" },
182+
{ "title", "Help" },
183+
{ "contentContainer", "HelpPanel" }
184+
}
185+
}
186+
}
187+
},
188+
new Dictionary<string, object>
189+
{
190+
{ "type", "layoutGroup" },
191+
{ "orientation", "vertical" },
192+
{ "width", 500 },
193+
{
194+
"items",
195+
new Dictionary<string, object>[]
196+
{
197+
new Dictionary<string, object>
198+
{
199+
{ "type", "documentGroup" },
200+
{ "height", 400 },
201+
{ "minHeight", 200 },
202+
{
203+
"items",
204+
new Dictionary<string, object>[]
205+
{
206+
new Dictionary<string, object>
207+
{
208+
{ "type", "documentPanel" },
209+
{ "title", "Document 1" },
210+
{ "contentContainer", "Document1Panel" }
211+
},
212+
new Dictionary<string, object>
213+
{
214+
{ "type", "documentPanel" },
215+
{ "title", "Document 2" },
216+
{ "contentContainer", "Document2Panel" }
217+
}
218+
}
219+
}
220+
},
221+
new Dictionary<string, object>
222+
{
223+
{ "type", "tabbedGroup" },
224+
{ "height", 200 },
225+
{ "pinnedHeight", 30 },
226+
{
227+
"items",
228+
new Dictionary<string, object>[]
229+
{
230+
new Dictionary<string, object>
231+
{
232+
{ "type", "layoutPanel" },
233+
{ "title", "Error List" },
234+
{ "contentContainer", "ErrorListPanel" }
235+
}
236+
}
237+
}
238+
}
239+
}
240+
}
241+
},
242+
new Dictionary<string, object>
243+
{
244+
{ "type", "tabbedGroup" },
245+
{ "width", 220 },
246+
{ "minWidth", 200 },
247+
{
248+
"items",
249+
new Dictionary<string, object>[]
250+
{
251+
new Dictionary<string, object>
252+
{
253+
{ "type", "layoutPanel" },
254+
{ "title", "Solution Explorer" },
255+
{ "contentContainer", "SolutionExplorerPanel" }
256+
},
257+
new Dictionary<string, object>
258+
{
259+
{ "type", "layoutPanel" },
260+
{ "title", "Properties" },
261+
{ "contentContainer", "PropertiesPanel" }
262+
}
263+
}
264+
}
265+
}
266+
}
267+
}
268+
},
269+
new Dictionary<string, object>
270+
{
271+
{ "type", "floatGroup" },
272+
{ "width", 500 },
273+
{ "height", 300 },
274+
{
275+
"position",
276+
new Dictionary<string, object>
277+
{
278+
{ "x", 350 },
279+
{ "y", 250 }
280+
}
281+
},
282+
{
283+
"items",
284+
new Dictionary<string, object>[]
285+
{
286+
new Dictionary<string, object>
287+
{
288+
{ "type", "layoutPanel" },
289+
{ "title", "Output" },
290+
{ "contentContainer", "OutputPanel" },
291+
{ "selected", true }
292+
}
293+
}
294+
}
295+
}
296+
};
297+
}

0 commit comments

Comments
 (0)