ASP .NET Core jqxSplitter Tag Helper API

disabled	bool	false
Sets or gets the `disabled` property. <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>
height	int	300
Sets or gets the `height` property. <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 height="300"> <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>
orientation	string	'vertical'
Sets or gets the `orientation` property. <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 orientation="horizontal"> <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>
panels	List<string>	[]
Sets or gets the `panels` property. <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 panels="panels"> <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>
resizable	bool	true
Sets or gets the `resizable` property. <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 resizable="false"> <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>
splitBarSize	int	5
Sets or gets the `splitBarSize` property. <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 split-bar-size="10"> <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>
showSplitBar	bool	true
Sets or gets the `showSplitBar` property. <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 show-split-bar="false"> <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>
theme	string	''
Sets or gets the `theme` property. <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 theme="energyblue"> <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>
width	int	300
Sets or gets the `width` property. <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 width="300"> <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>
Events
collapsed	Event
Code examples Bind to the `collapsed` event of jqxSplitter. <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> }
expanded	Event
Code examples Bind to the `expanded` event of jqxSplitter. <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-expanded="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> }
resize	Event
Code examples Bind to the `resize` event of jqxSplitter. <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-resize="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> }
resizeStart	Event
Code examples Bind to the `resizeStart` event of jqxSplitter. <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-resize-start="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> }
Methods
collapse	Method
<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> }
destroy	Method
<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["destroy"](); } </script> }
disable	Method
<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["disable"](); } </script> }
enable	Method
<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["enable"](); } </script> }
expand	Method
<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["expand"](); } </script> }
render	Method
<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["render"](); } </script> }
refresh	Method
<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["refresh"](); } </script> }

Properties

Events

Code examples

Code examples

Code examples

Code examples

Methods