ASP .NET Core MVC Documentation

Sets or gets the baseColor property.

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

Sets or gets the colorRanges property.

<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 color-ranges='[ { color: '#aa9988', min: 0, max: 10 }, { color: '#ccbbcc', min: 11, max: 50 }, { color: '#000', min: 50, max: 100 } ]' display-member="FirstName" value-member="EmployeeID" width="850" source="Model"></jqx-tree-map>

Sets or gets the colorRange property.

<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 color-range="100" display-member="FirstName" value-member="EmployeeID" width="850" source="Model"></jqx-tree-map>

Sets or gets the colorMode property.

<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 color-mode="autoColors" display-member="FirstName" value-member="EmployeeID" width="850" source="Model"></jqx-tree-map>

Sets or gets the displayMember property.

<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"></jqx-tree-map>

Sets or gets the height property.

<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 height="300" display-member="FirstName" value-member="EmployeeID" width="850" source="Model"></jqx-tree-map>

Sets or gets the hoverEnabled property.

<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 hover-enabled="true" display-member="FirstName" value-member="EmployeeID" width="850" source="Model"></jqx-tree-map>

Sets or gets the headerHeight property.

<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 header-height="30" display-member="FirstName" value-member="EmployeeID" width="850" source="Model"></jqx-tree-map>

Sets or gets the legendLabel property.

<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 legend-label="Olympic medal count - London 2012" display-member="FirstName" value-member="EmployeeID" width="850" source="Model"></jqx-tree-map>

Sets or gets the legendPosition property.

<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 legend-position='{x: 50, y: -50}' display-member="FirstName" value-member="EmployeeID" width="850" source="Model"></jqx-tree-map>

Sets or gets the legendScaleCallback property.

<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 legend-scale-callback="legendScaleCallback" display-member="FirstName" value-member="EmployeeID" width="850" source="Model"></jqx-tree-map>

Sets or gets the renderCallbacks property.

<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 render-callbacks="renderCallbacks" display-member="FirstName" value-member="EmployeeID" width="850" source="Model"></jqx-tree-map>

Sets or gets the selectionEnabled property.

<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 selection-enabled="false" display-member="FirstName" value-member="EmployeeID" width="850" source="Model"></jqx-tree-map>

Sets or gets the showLegend property.

<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 show-legend="false" display-member="FirstName" value-member="EmployeeID" width="850" source="Model"></jqx-tree-map>

Sets or gets the source property.

<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 source="Model" display-member="FirstName" value-member="EmployeeID" width="850"></jqx-tree-map>

Sets or gets the theme property.

<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 theme="energyblue" display-member="FirstName" value-member="EmployeeID" width="850" source="Model"></jqx-tree-map>

Sets or gets the valueMember property.

<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 value-member="EmployeeID" display-member="FirstName" width="850" source="Model"></jqx-tree-map>

Sets or gets the width property.

<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 width="850" display-member="FirstName" value-member="EmployeeID" source="Model"></jqx-tree-map>

Code examples

Bind to the bindingComplete event of jqxTreeMap.

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

<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["destroy"]();									
	}									
</script>									
}

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