jqxLayout requires the following files:
jqx.base.css
jqxcore.js
jqxbuttons.js
jqxscrollbar.js
jqxpanel.js
jqxribbon.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.// 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",UnpinnedWidth = "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"}}}}}};}<script>function InitSolutionExplorerPanel() {$('#solutionExplorerTree')[0].setAttribute("init-instance", "true");}</script><jqx-layout context-menu="true"><!--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-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.// 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",UnpinnedWidth = "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"}}}}}};}<script>function InitSolutionExplorerPanel() {$('#solutionExplorerTree')[0].setAttribute("init-instance", "true");}</script><jqx-layout 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-layout>@section scripts {<script type="text/javascript">function getInstance(instance) {instance["destroy"]();}</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.// 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",UnpinnedWidth = "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"}}}}}};}<script>function InitSolutionExplorerPanel() {$('#solutionExplorerTree')[0].setAttribute("init-instance", "true");}</script><jqx-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-layout>@section scripts {<script type="text/javascript">function eventHandler(event) {}</script>}