ASP .NET Core MVC Documentation

Getting Started

jqxSplitter represents a UI component which splits two panels horizontally or vertically. The size of each panels can be changed dynamically through a split bar.

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

jqxSlider requires the following files:

  • CSS

  • jqx.base.css
  • Javascript

  • jqxcore.js
  • jqxbuttons.js
  • jqxscrollbar.js
  • jqxlistbox.js
  • jqxSplitter.js
The next step is to create html element within the body of the html document and add the initialization attributes.
<script src="~/jqwidgets/jqxsplitter.js"></script>
<script src="~/jqwidgets/jqxtabs.js"></script>
<script src="~/jqwidgets/jqxpanel.js"></script>
<script src="~/jqwidgets/jqxtree.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxscrollbar.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
<jqx-splitter disabled="true">
<jqx-splitter-panel>
<jqx-tabs theme="@ViewData["theme"]' style="border:none;" width="100%" height="100%">
<jqx-tab-panel>
<jqx-tab-panel-header style="margin-left:30px;">Tab 1</jqx-tab-panel-header>
<jqx-tab-panel-body>Content 1</jqx-tab-panel-body>
</jqx-tab-panel>
<jqx-tab-panel>
<jqx-tab-panel-header>Tab 2</jqx-tab-panel-header>
<jqx-tab-panel-body>Content 2</jqx-tab-panel-body>
</jqx-tab-panel>
</jqx-tabs>
</jqx-splitter-panel>
<jqx-splitter-panel>
<jqx-tree style="border:none;" height="100%" width="100%">
<jqx-tree-items>
<jqx-tree-item>Item 1</jqx-tree-item>
<jqx-tree-item>Item 2</jqx-tree-item>
<jqx-tree-item>Item 3
<jqx-tree-items>
<jqx-tree-item>Sub Item 3.1</jqx-tree-item>
<jqx-tree-item>Sub Item 3.2</jqx-tree-item>
<jqx-tree-item>Sub Item 3.3</jqx-tree-item>
</jqx-tree-items>
</jqx-tree-item>
<jqx-tree-item>Item 4</jqx-tree-item>
<jqx-tree-item>Item 5</jqx-tree-item>
</jqx-tree-items>
</jqx-tree>
</jqx-splitter-panel>
</jqx-splitter>
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/jqxsplitter.js"></script>
<script src="~/jqwidgets/jqxtabs.js"></script>
<script src="~/jqwidgets/jqxpanel.js"></script>
<script src="~/jqwidgets/jqxtree.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxscrollbar.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
<jqx-splitter instance="getInstance()">
<jqx-splitter-panel>
<jqx-tabs theme="@ViewData["theme"]' style="border:none;" width="100%" height="100%">
<jqx-tab-panel>
<jqx-tab-panel-header style="margin-left:30px;">Tab 1</jqx-tab-panel-header>
<jqx-tab-panel-body>Content 1</jqx-tab-panel-body>
</jqx-tab-panel>
<jqx-tab-panel>
<jqx-tab-panel-header>Tab 2</jqx-tab-panel-header>
<jqx-tab-panel-body>Content 2</jqx-tab-panel-body>
</jqx-tab-panel>
</jqx-tabs>
</jqx-splitter-panel>
<jqx-splitter-panel>
<jqx-tree style="border:none;" height="100%" width="100%">
<jqx-tree-items>
<jqx-tree-item>Item 1</jqx-tree-item>
<jqx-tree-item>Item 2</jqx-tree-item>
<jqx-tree-item>Item 3
<jqx-tree-items>
<jqx-tree-item>Sub Item 3.1</jqx-tree-item>
<jqx-tree-item>Sub Item 3.2</jqx-tree-item>
<jqx-tree-item>Sub Item 3.3</jqx-tree-item>
</jqx-tree-items>
</jqx-tree-item>
<jqx-tree-item>Item 4</jqx-tree-item>
<jqx-tree-item>Item 5</jqx-tree-item>
</jqx-tree-items>
</jqx-tree>
</jqx-splitter-panel>
</jqx-splitter>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["collapse"]();
}
</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/jqxsplitter.js"></script>
<script src="~/jqwidgets/jqxtabs.js"></script>
<script src="~/jqwidgets/jqxpanel.js"></script>
<script src="~/jqwidgets/jqxtree.js"></script>
<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxscrollbar.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
<jqx-splitter on-collapsed="eventHandler()">
<jqx-splitter-panel>
<jqx-tabs theme="@ViewData["theme"]' style="border:none;" width="100%" height="100%">
<jqx-tab-panel>
<jqx-tab-panel-header style="margin-left:30px;">Tab 1</jqx-tab-panel-header>
<jqx-tab-panel-body>Content 1</jqx-tab-panel-body>
</jqx-tab-panel>
<jqx-tab-panel>
<jqx-tab-panel-header>Tab 2</jqx-tab-panel-header>
<jqx-tab-panel-body>Content 2</jqx-tab-panel-body>
</jqx-tab-panel>
</jqx-tabs>
</jqx-splitter-panel>
<jqx-splitter-panel>
<jqx-tree style="border:none;" height="100%" width="100%">
<jqx-tree-items>
<jqx-tree-item>Item 1</jqx-tree-item>
<jqx-tree-item>Item 2</jqx-tree-item>
<jqx-tree-item>Item 3
<jqx-tree-items>
<jqx-tree-item>Sub Item 3.1</jqx-tree-item>
<jqx-tree-item>Sub Item 3.2</jqx-tree-item>
<jqx-tree-item>Sub Item 3.3</jqx-tree-item>
</jqx-tree-items>
</jqx-tree-item>
<jqx-tree-item>Item 4</jqx-tree-item>
<jqx-tree-item>Item 5</jqx-tree-item>
</jqx-tree-items>
</jqx-tree>
</jqx-splitter-panel>
</jqx-splitter>
@section scripts {
<script type="text/javascript">
function eventHandler(event) {
}
</script>
}

Basic Sample