Search results
Data Binding in ASP.NET Core TreeMap control
21 Oct 2021 / 1 minute to read
The TreeMap control supports data binding using the dataSource property.
Populate data
The dataSource property accepts collection values as input. For example, a list of objects can be provided as input. Data can be given as either flat or hierarchical collection to the dataSource property.
Flat collection
The following code shows, how to bind a flat collection as data source to the TreeMap control.
tagHelper
flat.cs
@using Syncfusion.EJ2;
<div id="container">
<ejs-treemap id="container" load="load" height="350px" weightValuePath="GDP">
<e-treemap-leafitemsettings labelPath="State"></e-treemap-leafitemsettings>
</ejs-treemap>
</div>
<script>
function load(args)
{
var data = [
{State:"United States", GDP:17946, percentage:11.08, Rank:1},
{State:"China", GDP:10866, percentage: 28.42, Rank:2},
{State:"Japan", GDP:4123, percentage:-30.78, Rank:3},
{State:"Germany", GDP:3355, percentage:-5.19, Rank:4},
{State:"United Kingdom", GDP:2848, percentage:8.28, Rank:5},
{State:"France", GDP:2421, percentage:-9.69, Rank:6},
{State:"India", GDP:2073, percentage:13.65, Rank:7},
{State:"Italy", GDP:1814, percentage:-12.45, Rank:8},
{State:"Brazil", GDP:1774, percentage:-27.88, Rank:9},
{State:"Canada", GDP:1550, percentage:-15.02, Rank:10}
];
args.treemap.dataSource = data;
}
</script>using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;
namespace EJ2_Core_Application.Controllers
{
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
}
}
Hierarchical collection
The following code shows, how to bind a hierarchical collection as data source to the TreeMap control.
tagHelper
hierachical.cs
@{
var border = new TreeMapBorder{ Color = "white", Width = 0.5 };
var borders = new TreeMapBorder{ Color = "black", Width = 0.5 };
}
@using Syncfusion.EJ2;
<div id="container">
<ejs-treemap id="container" load="load" height="350px" weightValuePath="Population">
<e-treemap-leafitemsettings labelPath="Region" fill='#0077b3' border='border' ></e-treemap-leafitemsettings>
<e-treemap-levels>
<e-treemap-level groupPath= 'Continent' fill='#004466' border='borders'><e-treemap-level>
<e-treemap-level groupPath= 'States' fill='#0099e6' border='borders'><e-treemap-level>
</<e-treemap-levels>
</ejs-treemap>
</div>
<script>
function load(args)
{
var data = [{
"Continent": [{
"Name": "Africa",
"Population": 1216130000,
"States": [{
"Name": "Eastern Africa",
"Population": 410637987,
"Region": [{
"Name": "Ethiopia",
"Population": 107534882
}]
},
{
"Name": "Middle Africa",
"Population": 158562976,
"Region": [{
"Name": "Democratic, Republic of the Congo",
"Population": 84004989
}]
}
]
}]
},
{
"Continent": [{
"Name": "Asia",
"Population": 4436224000,
"States": [{
"Name": "Central Asia",
"Population": 69787760,
"Region": [{
"Name": "Uzbekistan",
"Population": 32364996
}]
},
{
"Name": "Eastern Asia",
"Population": 1641908531,
"Region": [{
"Name": "China",
"Population": 1415045928
}]
}
]
}]
},
{
"Continent": [{
"Name": "North America",
"Population": 579024000,
"States": [{
"Name": "Central America",
"Population": 174988756,
"Region": [{
"Name": "Mexico",
"Population": 130759074
}]
},
{
"Name": "Northern America",
"Population": 358593810,
"Region": [{
"Name": "U.S.",
"Population": 3267667480
}]
}
]
}]
},
{
"Continent": [{
"Name": "South America",
"Population": 422535000,
"States": [{
"Name": "Brazil",
"Population": 204519000
}]
}]
},
{
"Continent": [{
"Name": "Europe",
"Population": 738849000,
"States": [{
"Name": "Eastern Europe",
"Population": 291953328,
"Region": [{
"Name": "Russia",
"Population": 143964709
}]
},
{
"Name": "Northern Europe",
"Population": 103642971,
"Region": [{
"Name": "United Kingdom",
"Population": 66573504
}]
}
]
}]
}
];
args.treemap.dataSource = data;
}
</script>using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;
namespace EJ2_Core_Application.Controllers
{
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
}
}
Thank you for your feedback and comments.We will rectify this as soon as possible!