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

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

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

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

Basic Sample