ASP .NET Core MVC Documentation
Getting Started
jqxTreeMap represents a UI component which displays items in a hierarchical data map.Every ASP .NET Core Mvc Tag Helper from jQWidgets toolkit needs its JavaScript files to be included in order to work properly.
jqxTreeMap requires the following files:
CSS
jqx.base.css
Javascript
jqxcore.js
jqxtreemap.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/jqxtreemap.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.Employee>
@{
ViewData["Title"] = "ASP .NET MVC TreeMap Example";
}
@{
var employee = Model.FirstOrDefault();
}
@section scripts {
<script type="text/javascript">function legendScaleCallback() {}function renderCallbacks() {}</script>}<jqx-tree-map base-color="'#C2EEFF'" display-member="FirstName" value-member="EmployeeID" width="850" source="Model"></jqx-tree-map>
To bind to an event of a UI Component, you can use<script src="~/jqwidgets/jqxtreemap.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.Employee>
@{
ViewData["Title"] = "ASP .NET MVC TreeMap Example";
}
@{
var employee = Model.FirstOrDefault();
}
@section scripts {
<script type="text/javascript">function legendScaleCallback() {}function renderCallbacks() {}</script>}<jqx-tree-map display-member="FirstName" value-member="EmployeeID" width="850" source="Model" instance="getInstance()"></jqx-tree-map>@section scripts {<script type="text/javascript">function getInstance(instance) {instance["render"]();}</script>}
on-event-type
syntax. The example
code below demonstrates how to bind to an event.
<script src="~/jqwidgets/jqxtreemap.js"></script>
@model IEnumerable<jQWidgets.AspNet.Core.Models.Employee>
@{
ViewData["Title"] = "ASP .NET MVC TreeMap Example";
}
@{
var employee = Model.FirstOrDefault();
}
@section scripts {
<script type="text/javascript">function legendScaleCallback() {}function renderCallbacks() {}</script>}<jqx-tree-map on-binding-complete="eventHandler()"></jqx-tree-map>@section scripts {<script type="text/javascript">function eventHandler(event) {}</script>}