ASP .NET Core MVC Documentation
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
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 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 bind to an event of a UI Component, you can use<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>}
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