ASP .NET Core MVC Documentation

Getting Started

jqxTagCloud represents a TagCloud 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.

jqxTagCloud requires the following files:

  • CSS

  • jqx.base.css
  • Javascript

  • jqxcore.js
  • jqxbuttons.js
  • jqxscrollbar.js
  • jqxlistbox.js
  • jqxTagCloud.js
The next step is to create html element within the body of the html document and add the initialization attributes.
<script src="~/jqwidgets/jqxtagcloud.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.SalesEmployee>
<jqx-tag-cloud display-member="Name" value-member="Price" theme="@ViewData["Theme"]' alter-text-case="titleCase" source="Model"></jqx-tag-cloud>
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/jqxtagcloud.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.SalesEmployee>
<jqx-tag-cloud display-member="Name" value-member="Price" theme="@ViewData["Theme"]' instance="getInstance()" source="Model"></jqx-tag-cloud>
@section scripts {
<script type="text/javascript">
function getInstance(instance) {
instance["findTagIndex"]('USA');
}
</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/jqxtagcloud.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.SalesEmployee>
<jqx-tag-cloud display-member="Name" value-member="Price" theme="@ViewData["Theme"]' on-binding-complete="eventHandler()" source="Model"></jqx-tag-cloud>
@section scripts {
<script type="text/javascript">
function eventHandler(event) {
}
</script>
}

Basic Sample