Search results
Data Binding in ASP.NET MVC TreeMap control
20 Jan 2022 / 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.
razor
flat.cs
@using Syncfusion.EJ2;
<div id="container">
@Html.EJS().TreeMap("container").Load("load").WeightValuePath("GDP").LeafItemSettings(leaf => leaf.LabelPath("State")).Render()
</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.
razor
hierachical.cs
@using Syncfusion.EJ2;
<div id="container">
@Html.EJS().TreeMap("container").Load("load").WeightValuePath("Population").LeafItemSettings(leaf => leaf.LabelPath("Region").Fill("#0077b3").Border(new TreeMapBorder { Color = "black", Width = 0.5 })).Levels(level =>
{
level.GroupPath("Continent").Fill("#004466").Border(new TreeMapBorder { Color = "black", Width = 0.5 }).Add();
level.GroupPath("States").Fill("#0099e6").Border(new TreeMapBorder { Color = "black", Width = 0.5 }).Add();
}).Render()
</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!