Search results

Data Binding

The tree map 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 tree map 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 tree map 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();
        }
    }
}