jqxDropDownButton requires the following files:
jqx.base.css
jqxcore.js
jqxbuttons.js
jqxdropdownbutton.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/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxscrollbar.js"></script>
<script src="~/jqwidgets/jqxpanel.js"></script>
<script src="~/jqwidgets/jqxtree.js"></script>
<script src="~/jqwidgets/jqxdropdownbutton.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
ViewData["Title"] = "ASP .NET MVC DropDownButton Example";
}<jqx-drop-down-button><jqx-drop-down-button-header>Choose Items</jqx-drop-down-button-header><jqx-drop-down-button-body><jqx-tree width="300" theme="@ViewData["Theme"]'><jqx-tree-items><jqx-tree-item id='home' item-selected='true'>Home</jqx-tree-item><jqx-tree-item item-expanded='true'>Solutions<jqx-tree-items><jqx-tree-item>Education</jqx-tree-item><jqx-tree-item>Financial services</jqx-tree-item><jqx-tree-item>Government</jqx-tree-item><jqx-tree-item>Manufacturing</jqx-tree-item><jqx-tree-item>Solutions<jqx-tree-items><jqx-tree-item>Consumer photo and video</jqx-tree-item><jqx-tree-item>Mobile</jqx-tree-item><jqx-tree-item>Rich Internet appjqx-tree-itemcations</jqx-tree-item><jqx-tree-item>Technical communication</jqx-tree-item><jqx-tree-item>Training and eLearning</jqx-tree-item><jqx-tree-item>Web conferencing</jqx-tree-item></jqx-tree-items></jqx-tree-item><jqx-tree-item>All industries and solutions</jqx-tree-item></jqx-tree-items></jqx-tree-item><jqx-tree-item>Products<jqx-tree-items><jqx-tree-item>PC products</jqx-tree-item><jqx-tree-item>Mobile products</jqx-tree-item><jqx-tree-item>All products</jqx-tree-item></jqx-tree-items></jqx-tree-item><jqx-tree-item>Support<jqx-tree-items><jqx-tree-item>Support home</jqx-tree-item><jqx-tree-item>Customer Service</jqx-tree-item><jqx-tree-item>Knowledge base</jqx-tree-item><jqx-tree-item>Books</jqx-tree-item><jqx-tree-item>Training and certification</jqx-tree-item><jqx-tree-item>Support programs</jqx-tree-item><jqx-tree-item>Forums</jqx-tree-item><jqx-tree-item>Documentation</jqx-tree-item><jqx-tree-item>Updates</jqx-tree-item></jqx-tree-items></jqx-tree-item></jqx-tree-items></jqx-tree></jqx-drop-down-button-body></jqx-drop-down-button>
To bind to an event of a UI Component, you can use<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxscrollbar.js"></script>
<script src="~/jqwidgets/jqxpanel.js"></script>
<script src="~/jqwidgets/jqxtree.js"></script>
<script src="~/jqwidgets/jqxdropdownbutton.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
ViewData["Title"] = "ASP .NET MVC DropDownButton Example";
}<jqx-drop-down-button><jqx-drop-down-button-header>Choose Items</jqx-drop-down-button-header><jqx-drop-down-button-body><jqx-tree width="300" theme="@ViewData["Theme"]'><jqx-tree-items><jqx-tree-item id='home' item-selected='true'>Home</jqx-tree-item><jqx-tree-item item-expanded='true'>Solutions<jqx-tree-items><jqx-tree-item>Education</jqx-tree-item><jqx-tree-item>Financial services</jqx-tree-item><jqx-tree-item>Government</jqx-tree-item><jqx-tree-item>Manufacturing</jqx-tree-item><jqx-tree-item>Solutions<jqx-tree-items><jqx-tree-item>Consumer photo and video</jqx-tree-item><jqx-tree-item>Mobile</jqx-tree-item><jqx-tree-item>Rich Internet appjqx-tree-itemcations</jqx-tree-item><jqx-tree-item>Technical communication</jqx-tree-item><jqx-tree-item>Training and eLearning</jqx-tree-item><jqx-tree-item>Web conferencing</jqx-tree-item></jqx-tree-items></jqx-tree-item><jqx-tree-item>All industries and solutions</jqx-tree-item></jqx-tree-items></jqx-tree-item><jqx-tree-item>Products<jqx-tree-items><jqx-tree-item>PC products</jqx-tree-item><jqx-tree-item>Mobile products</jqx-tree-item><jqx-tree-item>All products</jqx-tree-item></jqx-tree-items></jqx-tree-item><jqx-tree-item>Support<jqx-tree-items><jqx-tree-item>Support home</jqx-tree-item><jqx-tree-item>Customer Service</jqx-tree-item><jqx-tree-item>Knowledge base</jqx-tree-item><jqx-tree-item>Books</jqx-tree-item><jqx-tree-item>Training and certification</jqx-tree-item><jqx-tree-item>Support programs</jqx-tree-item><jqx-tree-item>Forums</jqx-tree-item><jqx-tree-item>Documentation</jqx-tree-item><jqx-tree-item>Updates</jqx-tree-item></jqx-tree-items></jqx-tree-item></jqx-tree-items></jqx-tree></jqx-drop-down-button-body></jqx-drop-down-button>@section scripts {<script type="text/javascript">function getInstance(instance) {instance["focus"]();}</script>}
on-event-type
syntax. The example
code below demonstrates how to bind to an event.
<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxscrollbar.js"></script>
<script src="~/jqwidgets/jqxpanel.js"></script>
<script src="~/jqwidgets/jqxtree.js"></script>
<script src="~/jqwidgets/jqxdropdownbutton.js"></script>
<script src="~/jqwidgets/globalization/globalize.js"></script>
@using jQWidgets.AspNetCore.Mvc.TagHelpers
@{
ViewData["Title"] = "ASP .NET MVC DropDownButton Example";
}<jqx-drop-down-button><jqx-drop-down-button-header>Choose Items</jqx-drop-down-button-header><jqx-drop-down-button-body><jqx-tree width="300" theme="@ViewData["Theme"]'><jqx-tree-items><jqx-tree-item id='home' item-selected='true'>Home</jqx-tree-item><jqx-tree-item item-expanded='true'>Solutions<jqx-tree-items><jqx-tree-item>Education</jqx-tree-item><jqx-tree-item>Financial services</jqx-tree-item><jqx-tree-item>Government</jqx-tree-item><jqx-tree-item>Manufacturing</jqx-tree-item><jqx-tree-item>Solutions<jqx-tree-items><jqx-tree-item>Consumer photo and video</jqx-tree-item><jqx-tree-item>Mobile</jqx-tree-item><jqx-tree-item>Rich Internet appjqx-tree-itemcations</jqx-tree-item><jqx-tree-item>Technical communication</jqx-tree-item><jqx-tree-item>Training and eLearning</jqx-tree-item><jqx-tree-item>Web conferencing</jqx-tree-item></jqx-tree-items></jqx-tree-item><jqx-tree-item>All industries and solutions</jqx-tree-item></jqx-tree-items></jqx-tree-item><jqx-tree-item>Products<jqx-tree-items><jqx-tree-item>PC products</jqx-tree-item><jqx-tree-item>Mobile products</jqx-tree-item><jqx-tree-item>All products</jqx-tree-item></jqx-tree-items></jqx-tree-item><jqx-tree-item>Support<jqx-tree-items><jqx-tree-item>Support home</jqx-tree-item><jqx-tree-item>Customer Service</jqx-tree-item><jqx-tree-item>Knowledge base</jqx-tree-item><jqx-tree-item>Books</jqx-tree-item><jqx-tree-item>Training and certification</jqx-tree-item><jqx-tree-item>Support programs</jqx-tree-item><jqx-tree-item>Forums</jqx-tree-item><jqx-tree-item>Documentation</jqx-tree-item><jqx-tree-item>Updates</jqx-tree-item></jqx-tree-items></jqx-tree-item></jqx-tree-items></jqx-tree></jqx-drop-down-button-body></jqx-drop-down-button>@section scripts {<script type="text/javascript">function eventHandler(event) {}</script>}