Skip to content

Update Demos #56

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 31, 2020
Merged

Update Demos #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
297 changes: 297 additions & 0 deletions demos/dockinglayout/defaultfunctionality/App.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,297 @@
<JqxDockingLayout width=800 height=600 layout=layout>
<!--The panel content divs can have a flat structure-->
<!--autoHideGroup-->
<div data-container="ToolboxPanel">
List of tools
</div>
<div data-container="HelpPanel">
Help topics
</div>
<!--documentGroup-->
<div data-container="Document1Panel">
Document 1 content
</div>
<div data-container="Document2Panel">
Document 2 content
</div>
<!--bottom tabbedGroup-->
<div data-container="ErrorListPanel">
List of errors
</div>
<!--right tabbedGroup-->
<div data-container="SolutionExplorerPanel">
<JqxTree width=treeSize height=treeSize source=treeSource></JqxTree>
</div>
<div data-container="PropertiesPanel">
List of properties
</div>
<!--floatGroup-->
<div data-container="OutputPanel">
<div style="font-family: Consolas;">
<p>
Themes installation complete.
</p>
<p>
List of installed stylesheet files. Include at least one stylesheet Theme file and
the images folder:
</p>
<ul>
<li>
styles/jqx.base.css: Stylesheet for the base Theme. The jqx.base.css file should
be always included in your project.
</li>
<li>styles/jqx.arctic.css: Stylesheet for the Arctic Theme</li>
<li>styles/jqx.web.css: Stylesheet for the Web Theme</li>
<li>styles/jqx.bootstrap.css: Stylesheet for the Bootstrap Theme</li>
<li>styles/jqx.classic.css: Stylesheet for the Classic Theme</li>
<li>styles/jqx.darkblue.css: Stylesheet for the DarkBlue Theme</li>
<li>styles/jqx.energyblue.css: Stylesheet for the EnergyBlue Theme</li>
<li>styles/jqx.shinyblack.css: Stylesheet for the ShinyBlack Theme</li>
<li>styles/jqx.office.css: Stylesheet for the Office Theme</li>
<li>styles/jqx.metro.css: Stylesheet for the Metro Theme</li>
<li>styles/jqx.metrodark.css: Stylesheet for the Metro Dark Theme</li>
<li>styles/jqx.orange.css: Stylesheet for the Orange Theme</li>
<li>styles/jqx.summer.css: Stylesheet for the Summer Theme</li>
<li>styles/jqx.black.css: Stylesheet for the Black Theme</li>
<li>styles/jqx.fresh.css: Stylesheet for the Fresh Theme</li>
<li>styles/jqx.highcontrast.css: Stylesheet for the HighContrast Theme</li>
<li>styles/jqx.blackberry.css: Stylesheet for the Blackberry Theme</li>
<li>styles/jqx.android.css: Stylesheet for the Android Theme</li>
<li>styles/jqx.mobile.css: Stylesheet for the Mobile Theme</li>
<li>styles/jqx.windowsphone.css: Stylesheet for the Windows Phone Theme</li>
<li>styles/jqx.ui-darkness.css: Stylesheet for the UI Darkness Theme</li>
<li>styles/jqx.ui-lightness.css: Stylesheet for the UI Lightness Theme</li>
<li>styles/jqx.ui-le-frog.css: Stylesheet for the UI Le Frog Theme</li>
<li>styles/jqx.ui-overcast.css: Stylesheet for the UI Overcast Theme</li>
<li>styles/jqx.ui-redmond.css: Stylesheet for the UI Redmond Theme</li>
<li>styles/jqx.ui-smoothness.css: Stylesheet for the UI Smoothness Theme</li>
<li>styles/jqx.ui-start.css: Stylesheet for the UI Start Theme</li>
<li>styles/jqx.ui-sunny.css: Stylesheet for the UI Sunny Theme</li>
<li>styles/images: contains images referenced in the stylesheet files</li>
</ul>
</div>
</div>
</JqxDockingLayout>

@code {
string treeSize = "100%";

IDictionary<string, object>[] treeSource = new Dictionary<string, object>[]
{
new Dictionary<string, object>
{
{ "label", "Project" },
{ "expanded", true },
{ "icon", "../images/earth.png" },
{
"items",
new Dictionary<string, object>[]
{
new Dictionary<string, object>
{
{ "label", "css" },
{ "expanded", true },
{ "icon", "../images/folder.png" },
{
"items",
new Dictionary<string, object>[]
{
new Dictionary<string, object>
{
{ "label", "jqx.base.css" },
{ "icon", "../images/nav1.png" },
},
new Dictionary<string, object>
{
{ "label", "jqx.energyblue.css" },
{ "icon", "../images/nav1.png" },
},
new Dictionary<string, object>
{
{ "label", "jqx.orange.css" },
{ "icon", "../images/nav1.png" },
}
}
}
},
new Dictionary<string, object>
{
{ "label", "scripts" },
{ "icon", "../images/folder.png" },
{
"items",
new Dictionary<string, object>[]
{
new Dictionary<string, object>
{
{ "label", "jqxcore.js" },
{ "icon", "../images/nav1.png" },
},
new Dictionary<string, object>
{
{ "label", "jqxdata.js" },
{ "icon", "../images/nav1.png" },
},
new Dictionary<string, object>
{
{ "label", "jqxgrid.js" },
{ "icon", "../images/nav1.png" },
}
}
}
},
new Dictionary<string, object>
{
{ "label", "index.htm" },
{ "icon", "../images/folder.png" }
}
}
}
}
};

IDictionary<string, object>[] layout = new Dictionary<string, object>[]
{
new Dictionary<string, object>
{
{ "type", "layoutGroup" },
{ "orientation", "horizontal" },
{
"items",
new Dictionary<string, object>[]
{
new Dictionary<string, object>
{
{ "type", "autoHideGroup" },
{ "alignment", "left" },
{ "width", 80 },
{ "unpinnedWidth", 200 },
{
"items",
new Dictionary<string, object>[]
{
new Dictionary<string, object>
{
{ "type", "layoutPanel" },
{ "title", "Toolbox" },
{ "contentContainer", "ToolboxPanel" }
},
new Dictionary<string, object>
{
{ "type", "layoutPanel" },
{ "title", "Help" },
{ "contentContainer", "HelpPanel" }
}
}
}
},
new Dictionary<string, object>
{
{ "type", "layoutGroup" },
{ "orientation", "vertical" },
{ "width", 500 },
{
"items",
new Dictionary<string, object>[]
{
new Dictionary<string, object>
{
{ "type", "documentGroup" },
{ "height", 400 },
{ "minHeight", 200 },
{
"items",
new Dictionary<string, object>[]
{
new Dictionary<string, object>
{
{ "type", "documentPanel" },
{ "title", "Document 1" },
{ "contentContainer", "Document1Panel" }
},
new Dictionary<string, object>
{
{ "type", "documentPanel" },
{ "title", "Document 2" },
{ "contentContainer", "Document2Panel" }
}
}
}
},
new Dictionary<string, object>
{
{ "type", "tabbedGroup" },
{ "height", 200 },
{ "pinnedHeight", 30 },
{
"items",
new Dictionary<string, object>[]
{
new Dictionary<string, object>
{
{ "type", "layoutPanel" },
{ "title", "Error List" },
{ "contentContainer", "ErrorListPanel" }
}
}
}
}
}
}
},
new Dictionary<string, object>
{
{ "type", "tabbedGroup" },
{ "width", 220 },
{ "minWidth", 200 },
{
"items",
new Dictionary<string, object>[]
{
new Dictionary<string, object>
{
{ "type", "layoutPanel" },
{ "title", "Solution Explorer" },
{ "contentContainer", "SolutionExplorerPanel" }
},
new Dictionary<string, object>
{
{ "type", "layoutPanel" },
{ "title", "Properties" },
{ "contentContainer", "PropertiesPanel" }
}
}
}
}
}
}
},
new Dictionary<string, object>
{
{ "type", "floatGroup" },
{ "width", 500 },
{ "height", 300 },
{
"position",
new Dictionary<string, object>
{
{ "x", 350 },
{ "y", 250 }
}
},
{
"items",
new Dictionary<string, object>[]
{
new Dictionary<string, object>
{
{ "type", "layoutPanel" },
{ "title", "Output" },
{ "contentContainer", "OutputPanel" },
{ "selected", true }
}
}
}
}
};
}
Loading