ASP .NET Core MVC Documentation
Getting Started
jqxDockingLayout represents a DockingLayout UI component that contains an input field with auto-complete functionality and a list of selectable items displayed in a drop-down.Every ASP .NET Core Mvc Tag Helper from jQWidgets toolkit needs its JavaScript files to be included in order to work properly.
Include all required javascript and css files
jqxDockingLayout requires the following files:
CSS
jqx.base.css
Javascript
jqxcore.js
jqxbuttons.js
jqxscrollbar.js
jqxpanel.js
jqxribbon.js
jqxlayout.js
jqxwindow.js
jqxdockinglayout.js
To call a function(method), you need to pass the method name and parameters(if any) in the UI component’s instance.<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxscrollbar.js"></script>
<script src="~/jqwidgets/jqxpanel.js"></script>
<script src="~/jqwidgets/jqxribbon.js"></script>
<script src="~/jqwidgets/jqxlayout.js"></script>
<script src="~/jqwidgets/jqxtree.js"></script>
<script src="~/jqwidgets/jqxwindow.js"></script>
<script src="~/jqwidgets/jqxdockinglayout.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.TreeItem>
@using jQWidgets.AspNetCore.Mvc.TagHelpers@{ViewData["Title"] = "ASP .NET MVC Docking Layout Example";// Create Layout Object.List<LayoutItem> layout = new List<LayoutItem>(){new LayoutItem(){Type = LayoutItemType.LayoutGroup,Orientation = Orientation.Horizontal,Items = new List<LayoutItem>(){new LayoutItem(){Type = LayoutItemType.AutoHideGroup,Alignment = Alignment.Left,Width = "80",Unpinned-width = "200",Items = new List<LayoutItem>(){new LayoutItem(){Type = LayoutItemType.LayoutPanel,Title = "Toolbox",ContentContainer = "ToolboxPanel"},new LayoutItem(){Type = LayoutItemType.LayoutPanel,Title = "Helper",ContentContainer = "HelperPanel"}}},new LayoutItem(){Type = LayoutItemType.LayoutGroup,Orientation = Orientation.Vertical,Width = "500",Items = new List<LayoutItem>(){new LayoutItem(){Type = LayoutItemType.DocumentGroup,Height = "400",MinHeight = "200",Items = new List<LayoutItem>(){new LayoutItem(){Type = LayoutItemType.DocumentPanel,Title = "Document 1",ContentContainer = "Document1Panel"},new LayoutItem(){Type = LayoutItemType.DocumentPanel,Title = "Document 2",ContentContainer = "Document2Panel"}}},new LayoutItem(){Type = LayoutItemType.TabbedGroup,Height = "200",PinnedHeight = "30",Items = new List<LayoutItem>(){new LayoutItem(){Type = LayoutItemType.LayoutPanel,Title = "Error List",ContentContainer = "ErrorListPanel"}}}}},new LayoutItem(){Type = LayoutItemType.TabbedGroup,Width = "220",MinWidth = "200",Items = new List<LayoutItem>(){new LayoutItem(){Type = LayoutItemType.LayoutPanel,Title = "Solution Explorer",ContentContainer = "SolutionExplorerPanel",InitContent = "InitSolutionExplorerPanel()"},new LayoutItem(){Type = LayoutItemType.LayoutPanel,Title = "Properties",ContentContainer= "PropertiesPanel"}}}}},new LayoutItem(){Type = LayoutItemType.FloatGroup,Width = "500",Height = "300",Position = new Position(){X = 350,Y = 250},Items = new List<LayoutItem>(){new LayoutItem(){Type = LayoutItemType.LayoutPanel,Title = "Output",ContentContainer = "OutputPanel",Selected = true}}}};}<script>function InitSolutionExplorerPanel() {$('#solutionExplorerTree')[0].setAttribute("init-instance", "true");}</script><jqx-docking-layout context-menu="true" width="850" height="600"><!--The panel content divs can have a flat structure--><!--auto-hideGroup--><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"><jqx-tree initInstance="false" theme="@ViewData["Theme"]' id="solutionExplorerTree" width="190" itemsMember="Items" display-member="Label" source="Model" style="border: none;"></jqx-tree></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 andthe images folder:</p><ul><li>styles/jqx.base.css: Stylesheet for the base Theme. The jqx.base.css file shouldbe 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></jqx-docking-layout>
To bind to an event of a UI Component, you can use<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxscrollbar.js"></script>
<script src="~/jqwidgets/jqxpanel.js"></script>
<script src="~/jqwidgets/jqxribbon.js"></script>
<script src="~/jqwidgets/jqxlayout.js"></script>
<script src="~/jqwidgets/jqxtree.js"></script>
<script src="~/jqwidgets/jqxwindow.js"></script>
<script src="~/jqwidgets/jqxdockinglayout.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.TreeItem>
@using jQWidgets.AspNetCore.Mvc.TagHelpers@{ViewData["Title"] = "ASP .NET MVC Docking Layout Example";// Create Layout Object.List<LayoutItem> layout = new List<LayoutItem>(){new LayoutItem(){Type = LayoutItemType.LayoutGroup,Orientation = Orientation.Horizontal,Items = new List<LayoutItem>(){new LayoutItem(){Type = LayoutItemType.AutoHideGroup,Alignment = Alignment.Left,Width = "80",Unpinned-width = "200",Items = new List<LayoutItem>(){new LayoutItem(){Type = LayoutItemType.LayoutPanel,Title = "Toolbox",ContentContainer = "ToolboxPanel"},new LayoutItem(){Type = LayoutItemType.LayoutPanel,Title = "Helper",ContentContainer = "HelperPanel"}}},new LayoutItem(){Type = LayoutItemType.LayoutGroup,Orientation = Orientation.Vertical,Width = "500",Items = new List<LayoutItem>(){new LayoutItem(){Type = LayoutItemType.DocumentGroup,Height = "400",MinHeight = "200",Items = new List<LayoutItem>(){new LayoutItem(){Type = LayoutItemType.DocumentPanel,Title = "Document 1",ContentContainer = "Document1Panel"},new LayoutItem(){Type = LayoutItemType.DocumentPanel,Title = "Document 2",ContentContainer = "Document2Panel"}}},new LayoutItem(){Type = LayoutItemType.TabbedGroup,Height = "200",PinnedHeight = "30",Items = new List<LayoutItem>(){new LayoutItem(){Type = LayoutItemType.LayoutPanel,Title = "Error List",ContentContainer = "ErrorListPanel"}}}}},new LayoutItem(){Type = LayoutItemType.TabbedGroup,Width = "220",MinWidth = "200",Items = new List<LayoutItem>(){new LayoutItem(){Type = LayoutItemType.LayoutPanel,Title = "Solution Explorer",ContentContainer = "SolutionExplorerPanel",InitContent = "InitSolutionExplorerPanel()"},new LayoutItem(){Type = LayoutItemType.LayoutPanel,Title = "Properties",ContentContainer= "PropertiesPanel"}}}}},new LayoutItem(){Type = LayoutItemType.FloatGroup,Width = "500",Height = "300",Position = new Position(){X = 350,Y = 250},Items = new List<LayoutItem>(){new LayoutItem(){Type = LayoutItemType.LayoutPanel,Title = "Output",ContentContainer = "OutputPanel",Selected = true}}}};}<script>function InitSolutionExplorerPanel() {$('#solutionExplorerTree')[0].setAttribute("init-instance", "true");}</script><jqx-docking-layout width="850" height="600" instance="getInstance()"><!--The panel content divs can have a flat structure--><!--auto-hideGroup--><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"><jqx-tree initInstance="false" theme="@ViewData["Theme"]' id="solutionExplorerTree" width="190" itemsMember="Items" display-member="Label" source="Model" style="border: none;"></jqx-tree></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 andthe images folder:</p><ul><li>styles/jqx.base.css: Stylesheet for the base Theme. The jqx.base.css file shouldbe 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></jqx-docking-layout>@section scripts {<script type="text/javascript">function getInstance(instance) {instance["addFloatGroup"](200,200,{x:10, y:10},'layoutPanel','Title','Content');}</script>}
on-event-type
syntax. The example
code below demonstrates how to bind to an event.
<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxscrollbar.js"></script>
<script src="~/jqwidgets/jqxpanel.js"></script>
<script src="~/jqwidgets/jqxribbon.js"></script>
<script src="~/jqwidgets/jqxlayout.js"></script>
<script src="~/jqwidgets/jqxtree.js"></script>
<script src="~/jqwidgets/jqxwindow.js"></script>
<script src="~/jqwidgets/jqxdockinglayout.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.TreeItem>
@using jQWidgets.AspNetCore.Mvc.TagHelpers@{ViewData["Title"] = "ASP .NET MVC Docking Layout Example";// Create Layout Object.List<LayoutItem> layout = new List<LayoutItem>(){new LayoutItem(){Type = LayoutItemType.LayoutGroup,Orientation = Orientation.Horizontal,Items = new List<LayoutItem>(){new LayoutItem(){Type = LayoutItemType.AutoHideGroup,Alignment = Alignment.Left,Width = "80",Unpinned-width = "200",Items = new List<LayoutItem>(){new LayoutItem(){Type = LayoutItemType.LayoutPanel,Title = "Toolbox",ContentContainer = "ToolboxPanel"},new LayoutItem(){Type = LayoutItemType.LayoutPanel,Title = "Helper",ContentContainer = "HelperPanel"}}},new LayoutItem(){Type = LayoutItemType.LayoutGroup,Orientation = Orientation.Vertical,Width = "500",Items = new List<LayoutItem>(){new LayoutItem(){Type = LayoutItemType.DocumentGroup,Height = "400",MinHeight = "200",Items = new List<LayoutItem>(){new LayoutItem(){Type = LayoutItemType.DocumentPanel,Title = "Document 1",ContentContainer = "Document1Panel"},new LayoutItem(){Type = LayoutItemType.DocumentPanel,Title = "Document 2",ContentContainer = "Document2Panel"}}},new LayoutItem(){Type = LayoutItemType.TabbedGroup,Height = "200",PinnedHeight = "30",Items = new List<LayoutItem>(){new LayoutItem(){Type = LayoutItemType.LayoutPanel,Title = "Error List",ContentContainer = "ErrorListPanel"}}}}},new LayoutItem(){Type = LayoutItemType.TabbedGroup,Width = "220",MinWidth = "200",Items = new List<LayoutItem>(){new LayoutItem(){Type = LayoutItemType.LayoutPanel,Title = "Solution Explorer",ContentContainer = "SolutionExplorerPanel",InitContent = "InitSolutionExplorerPanel()"},new LayoutItem(){Type = LayoutItemType.LayoutPanel,Title = "Properties",ContentContainer= "PropertiesPanel"}}}}},new LayoutItem(){Type = LayoutItemType.FloatGroup,Width = "500",Height = "300",Position = new Position(){X = 350,Y = 250},Items = new List<LayoutItem>(){new LayoutItem(){Type = LayoutItemType.LayoutPanel,Title = "Output",ContentContainer = "OutputPanel",Selected = true}}}};}<script>function InitSolutionExplorerPanel() {$('#solutionExplorerTree')[0].setAttribute("init-instance", "true");}</script><jqx-docking-layout on-create="eventHandler()"><!--The panel content divs can have a flat structure--><!--auto-hideGroup--><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"><jqx-tree initInstance="false" theme="@ViewData["Theme"]' id="solutionExplorerTree" width="190" itemsMember="Items" display-member="Label" source="Model" style="border: none;"></jqx-tree></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 andthe images folder:</p><ul><li>styles/jqx.base.css: Stylesheet for the base Theme. The jqx.base.css file shouldbe 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></jqx-docking-layout>@section scripts {<script type="text/javascript">function eventHandler(event) {}</script>}