ASP .NET Core Splitter Tag Helper Getting Started

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>									
}

Getting Started

CSS

Javascript

Basic Sample