Getting Started

jqxExpander represents a Expander UI component that contains an input field with auto-complete functionality and a list of selectable items displayed in a drop-down.

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

jqxExpander requires the following files:

• CSS

• jqx.base.css

• Javascript

• jqxcore.js
• jqxexpander.js

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

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

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

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

Basic Sample