ASP .NET Core MVC Documentation

Getting Started

jqxLayout represents a Layout component which allows the creation of complex layouts with panels that can be nested, resized, pinned, unpinned and closed.

Every ASP .NET Core Mvc Tag Helper from jQWidgets toolkit needs its JavaScript files to be included in order to work properly.

jqxLayout requires the following files:

• CSS

• jqx.base.css

• Javascript

• jqxcore.js
• jqxbuttons.js
• jqxscrollbar.js
• jqxpanel.js
• jqxribbon.js

The next step is to create html element within the body of the html document and add the initialization attributes.

<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 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>
</jqx-layout>

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 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 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>
</jqx-layout>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["destroy"]();									
	}									
</script>									
}

To bind to an event of a UI Component, you can use 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 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>
</jqx-layout>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}

Basic Sample