Search results

Data Binding in ASP.NET MVC TreeMap control

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

razor
flat.cs
Copied to clipboard
@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>
Copied to clipboard
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();
        }
    }
}

TreeMap with flat data

Hierarchical collection

The following code shows, how to bind a hierarchical collection as data source to the TreeMap control.

razor
hierachical.cs
Copied to clipboard
@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>
Copied to clipboard
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();
        }
    }
}

TreeMap with hierarchical data