ASP .NET Core jqxExpander Tag Helper API

animationType	string	'slide'
Sets or gets the `animationType` property. <script src="~/jqwidgets/jqxexpander.js"></script> <script src="~/jqwidgets/jqxbuttons.js"></script> <jqx-expander animation-type="fade" width="500" theme="@ViewData["Theme"]"> <jqx-expander-header>Header</jqx-expander-header> <jqx-expander-body> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 1</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 2</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 3</jqx-button> </jqx-expander-body> </jqx-expander>
arrowPosition	string	'left'
Sets or gets the `arrowPosition` property. <script src="~/jqwidgets/jqxexpander.js"></script> <script src="~/jqwidgets/jqxbuttons.js"></script> <jqx-expander arrow-position="left" width="500" theme="@ViewData["Theme"]"> <jqx-expander-header>Header</jqx-expander-header> <jqx-expander-body> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 1</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 2</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 3</jqx-button> </jqx-expander-body> </jqx-expander>
collapseAnimationDuration	int	400
Sets or gets the `collapseAnimationDuration` property. <script src="~/jqwidgets/jqxexpander.js"></script> <script src="~/jqwidgets/jqxbuttons.js"></script> <jqx-expander collapse-animation-duration="300" width="500" theme="@ViewData["Theme"]"> <jqx-expander-header>Header</jqx-expander-header> <jqx-expander-body> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 1</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 2</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 3</jqx-button> </jqx-expander-body> </jqx-expander>
disabled	bool	false
Sets or gets the `disabled` property. <script src="~/jqwidgets/jqxexpander.js"></script> <script src="~/jqwidgets/jqxbuttons.js"></script> <jqx-expander disabled="true" width="500" theme="@ViewData["Theme"]"> <jqx-expander-header>Header</jqx-expander-header> <jqx-expander-body> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 1</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 2</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 3</jqx-button> </jqx-expander-body> </jqx-expander>
expanded	bool	true
Sets or gets the `expanded` property. <script src="~/jqwidgets/jqxexpander.js"></script> <script src="~/jqwidgets/jqxbuttons.js"></script> <jqx-expander expanded="false" width="500" theme="@ViewData["Theme"]"> <jqx-expander-header>Header</jqx-expander-header> <jqx-expander-body> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 1</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 2</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 3</jqx-button> </jqx-expander-body> </jqx-expander>
expandAnimationDuration	int	400
Sets or gets the `expandAnimationDuration` property. <script src="~/jqwidgets/jqxexpander.js"></script> <script src="~/jqwidgets/jqxbuttons.js"></script> <jqx-expander expand-animation-duration="300" width="500" theme="@ViewData["Theme"]"> <jqx-expander-header>Header</jqx-expander-header> <jqx-expander-body> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 1</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 2</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 3</jqx-button> </jqx-expander-body> </jqx-expander>
height	int	'auto'
Sets or gets the `height` property. <script src="~/jqwidgets/jqxexpander.js"></script> <script src="~/jqwidgets/jqxbuttons.js"></script> <jqx-expander height="100" width="500" theme="@ViewData["Theme"]"> <jqx-expander-header>Header</jqx-expander-header> <jqx-expander-body> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 1</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 2</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 3</jqx-button> </jqx-expander-body> </jqx-expander>
headerPosition	string	'top'
Sets or gets the `headerPosition` property. <script src="~/jqwidgets/jqxexpander.js"></script> <script src="~/jqwidgets/jqxbuttons.js"></script> <jqx-expander header-position="bottom" width="500" theme="@ViewData["Theme"]"> <jqx-expander-header>Header</jqx-expander-header> <jqx-expander-body> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 1</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 2</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 3</jqx-button> </jqx-expander-body> </jqx-expander>
initContent	string	null
Sets or gets the `initContent` property. <script src="~/jqwidgets/jqxexpander.js"></script> <script src="~/jqwidgets/jqxbuttons.js"></script> <jqx-expander init-content="initContent" width="500" theme="@ViewData["Theme"]"> <jqx-expander-header>Header</jqx-expander-header> <jqx-expander-body> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 1</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 2</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 3</jqx-button> </jqx-expander-body> </jqx-expander>
rtl	bool	false
Sets or gets the `rtl` property. <script src="~/jqwidgets/jqxexpander.js"></script> <script src="~/jqwidgets/jqxbuttons.js"></script> <jqx-expander rtl="true" width="500" theme="@ViewData["Theme"]"> <jqx-expander-header>Header</jqx-expander-header> <jqx-expander-body> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 1</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 2</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 3</jqx-button> </jqx-expander-body> </jqx-expander>
showArrow	bool	true
Sets or gets the `showArrow` property. <script src="~/jqwidgets/jqxexpander.js"></script> <script src="~/jqwidgets/jqxbuttons.js"></script> <jqx-expander show-arrow="true" width="500" theme="@ViewData["Theme"]"> <jqx-expander-header>Header</jqx-expander-header> <jqx-expander-body> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 1</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 2</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 3</jqx-button> </jqx-expander-body> </jqx-expander>
theme	string	''
Sets or gets the `theme` property. <script src="~/jqwidgets/jqxexpander.js"></script> <script src="~/jqwidgets/jqxbuttons.js"></script> <jqx-expander theme="energyblue" width="500" theme="@ViewData["Theme"]"> <jqx-expander-header>Header</jqx-expander-header> <jqx-expander-body> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 1</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 2</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 3</jqx-button> </jqx-expander-body> </jqx-expander>
toggleMode	string	'click'
Sets or gets the `toggleMode` property. <script src="~/jqwidgets/jqxexpander.js"></script> <script src="~/jqwidgets/jqxbuttons.js"></script> <jqx-expander toggle-mode="none" width="500" theme="@ViewData["Theme"]"> <jqx-expander-header>Header</jqx-expander-header> <jqx-expander-body> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 1</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 2</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 3</jqx-button> </jqx-expander-body> </jqx-expander>
width	int	'auto'
Sets or gets the `width` property. <script src="~/jqwidgets/jqxexpander.js"></script> <script src="~/jqwidgets/jqxbuttons.js"></script> <jqx-expander width="300" width="500" theme="@ViewData["Theme"]"> <jqx-expander-header>Header</jqx-expander-header> <jqx-expander-body> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 1</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 2</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 3</jqx-button> </jqx-expander-body> </jqx-expander>
Events
collapsing	Event
Code examples Bind to the `collapsing` event of jqxExpander. <script src="~/jqwidgets/jqxexpander.js"></script> <script src="~/jqwidgets/jqxbuttons.js"></script> <jqx-expander on-collapsing="eventHandler()" width="500" theme="@ViewData["Theme"]"> <jqx-expander-header>Header</jqx-expander-header> <jqx-expander-body> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 1</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 2</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 3</jqx-button> </jqx-expander-body> </jqx-expander> @section scripts { <script type="text/javascript"> function eventHandler(event) { } </script> }
collapsed	Event
Code examples Bind to the `collapsed` event of jqxExpander. <script src="~/jqwidgets/jqxexpander.js"></script> <script src="~/jqwidgets/jqxbuttons.js"></script> <jqx-expander on-collapsed="eventHandler()" width="500" theme="@ViewData["Theme"]"> <jqx-expander-header>Header</jqx-expander-header> <jqx-expander-body> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 1</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 2</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 3</jqx-button> </jqx-expander-body> </jqx-expander> @section scripts { <script type="text/javascript"> function eventHandler(event) { } </script> }
expanding	Event
Code examples Bind to the `expanding` event of jqxExpander. <script src="~/jqwidgets/jqxexpander.js"></script> <script src="~/jqwidgets/jqxbuttons.js"></script> <jqx-expander on-expanding="eventHandler()" width="500" theme="@ViewData["Theme"]"> <jqx-expander-header>Header</jqx-expander-header> <jqx-expander-body> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 1</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 2</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 3</jqx-button> </jqx-expander-body> </jqx-expander> @section scripts { <script type="text/javascript"> function eventHandler(event) { } </script> }
expanded	Event
Code examples Bind to the `expanded` event of jqxExpander. <script src="~/jqwidgets/jqxexpander.js"></script> <script src="~/jqwidgets/jqxbuttons.js"></script> <jqx-expander on-expanded="eventHandler()" width="500" theme="@ViewData["Theme"]"> <jqx-expander-header>Header</jqx-expander-header> <jqx-expander-body> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 1</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 2</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 3</jqx-button> </jqx-expander-body> </jqx-expander> @section scripts { <script type="text/javascript"> function eventHandler(event) { } </script> }
Methods
collapse	Method
<script src="~/jqwidgets/jqxexpander.js"></script> <script src="~/jqwidgets/jqxbuttons.js"></script> <jqx-expander instance="getInstance()" width="500" theme="@ViewData["Theme"]"> <jqx-expander-header>Header</jqx-expander-header> <jqx-expander-body> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 1</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 2</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 3</jqx-button> </jqx-expander-body> </jqx-expander> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance["collapse"](); } </script> }
disable	Method
<script src="~/jqwidgets/jqxexpander.js"></script> <script src="~/jqwidgets/jqxbuttons.js"></script> <jqx-expander instance="getInstance()" width="500" theme="@ViewData["Theme"]"> <jqx-expander-header>Header</jqx-expander-header> <jqx-expander-body> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 1</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 2</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 3</jqx-button> </jqx-expander-body> </jqx-expander> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance["disable"](); } </script> }
destroy	Method
<script src="~/jqwidgets/jqxexpander.js"></script> <script src="~/jqwidgets/jqxbuttons.js"></script> <jqx-expander instance="getInstance()" width="500" theme="@ViewData["Theme"]"> <jqx-expander-header>Header</jqx-expander-header> <jqx-expander-body> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 1</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 2</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 3</jqx-button> </jqx-expander-body> </jqx-expander> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance["destroy"](); } </script> }
enable	Method
<script src="~/jqwidgets/jqxexpander.js"></script> <script src="~/jqwidgets/jqxbuttons.js"></script> <jqx-expander instance="getInstance()" width="500" theme="@ViewData["Theme"]"> <jqx-expander-header>Header</jqx-expander-header> <jqx-expander-body> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 1</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 2</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 3</jqx-button> </jqx-expander-body> </jqx-expander> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance["enable"](); } </script> }
expand	Method
<script src="~/jqwidgets/jqxexpander.js"></script> <script src="~/jqwidgets/jqxbuttons.js"></script> <jqx-expander instance="getInstance()" width="500" theme="@ViewData["Theme"]"> <jqx-expander-header>Header</jqx-expander-header> <jqx-expander-body> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 1</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 2</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 3</jqx-button> </jqx-expander-body> </jqx-expander> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance["expand"](); } </script> }
focus	Method
<script src="~/jqwidgets/jqxexpander.js"></script> <script src="~/jqwidgets/jqxbuttons.js"></script> <jqx-expander instance="getInstance()" width="500" theme="@ViewData["Theme"]"> <jqx-expander-header>Header</jqx-expander-header> <jqx-expander-body> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 1</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 2</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 3</jqx-button> </jqx-expander-body> </jqx-expander> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance["focus"](); } </script> }
getContent	Method
<script src="~/jqwidgets/jqxexpander.js"></script> <script src="~/jqwidgets/jqxbuttons.js"></script> <jqx-expander instance="getInstance()" width="500" theme="@ViewData["Theme"]"> <jqx-expander-header>Header</jqx-expander-header> <jqx-expander-body> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 1</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 2</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 3</jqx-button> </jqx-expander-body> </jqx-expander> @section scripts { <script type="text/javascript"> function getInstance(instance) { var result = instance["getContent"](); } </script> }
getHeaderContent	Method
<script src="~/jqwidgets/jqxexpander.js"></script> <script src="~/jqwidgets/jqxbuttons.js"></script> <jqx-expander instance="getInstance()" width="500" theme="@ViewData["Theme"]"> <jqx-expander-header>Header</jqx-expander-header> <jqx-expander-body> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 1</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 2</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 3</jqx-button> </jqx-expander-body> </jqx-expander> @section scripts { <script type="text/javascript"> function getInstance(instance) { var result = instance["getHeaderContent"](); } </script> }
invalidate	Method
<script src="~/jqwidgets/jqxexpander.js"></script> <script src="~/jqwidgets/jqxbuttons.js"></script> <jqx-expander instance="getInstance()" width="500" theme="@ViewData["Theme"]"> <jqx-expander-header>Header</jqx-expander-header> <jqx-expander-body> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 1</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 2</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 3</jqx-button> </jqx-expander-body> </jqx-expander> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance["invalidate"](); } </script> }
refresh	Method
<script src="~/jqwidgets/jqxexpander.js"></script> <script src="~/jqwidgets/jqxbuttons.js"></script> <jqx-expander instance="getInstance()" width="500" theme="@ViewData["Theme"]"> <jqx-expander-header>Header</jqx-expander-header> <jqx-expander-body> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 1</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 2</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 3</jqx-button> </jqx-expander-body> </jqx-expander> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance["refresh"](); } </script> }
render	Method
<script src="~/jqwidgets/jqxexpander.js"></script> <script src="~/jqwidgets/jqxbuttons.js"></script> <jqx-expander instance="getInstance()" width="500" theme="@ViewData["Theme"]"> <jqx-expander-header>Header</jqx-expander-header> <jqx-expander-body> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 1</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 2</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 3</jqx-button> </jqx-expander-body> </jqx-expander> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance["render"](); } </script> }
setHeaderContent	Method
<script src="~/jqwidgets/jqxexpander.js"></script> <script src="~/jqwidgets/jqxbuttons.js"></script> <jqx-expander instance="getInstance()" width="500" theme="@ViewData["Theme"]"> <jqx-expander-header>Header</jqx-expander-header> <jqx-expander-body> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 1</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 2</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 3</jqx-button> </jqx-expander-body> </jqx-expander> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance["setHeaderContent"]('header'); } </script> }
setContent	Method
<script src="~/jqwidgets/jqxexpander.js"></script> <script src="~/jqwidgets/jqxbuttons.js"></script> <jqx-expander instance="getInstance()" width="500" theme="@ViewData["Theme"]"> <jqx-expander-header>Header</jqx-expander-header> <jqx-expander-body> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 1</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 2</jqx-button> <jqx-button style="margin:5px;" theme="@ViewData["Theme"]">Button 3</jqx-button> </jqx-expander-body> </jqx-expander> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance["setContent"]('content'); } </script> }

Properties

Events

Code examples

Code examples

Code examples

Code examples

Methods