Search results

Data Binding

The TreeMap component supports data binding using the Datasource property.

Populate data

The DataSource property accepts a collection of 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 data

The following code example demonstrates how to bind a flat collection as data source to the TreeMap component.

@using Syncfusion.EJ2.Blazor.TreeMap

<EjsTreeMap WeightValuePath="GDP" TValue="GDPReport" DataSource="@growthReports">
    <TreeMapLeafItemSettings LabelPath="State">
    </TreeMapLeafItemSettings>
</EjsTreeMap>

@code {
    public class GDPReport
    {
        public string State;
        public double GDP;
        public double Percentage;
        public double Rank;
    };

    private List<GDPReport> growthReports = new List<GDPReport> {
        new GDPReport {State = "United States", GDP=17946, Percentage=11.08, Rank=1},
        new GDPReport {State="China", GDP=10866, Percentage= 28.42, Rank=2},
        new GDPReport {State="Japan", GDP=4123, Percentage=-30.78, Rank=3},
        new GDPReport {State="Germany", GDP=3355, Percentage=-5.19, Rank=4},
        new GDPReport {State="United Kingdom", GDP=2848, Percentage=8.28, Rank=5},
        new GDPReport {State="France", GDP=2421, Percentage=-9.69, Rank=6},
        new GDPReport {State="India", GDP=2073, Percentage=13.65, Rank=7},
        new GDPReport {State="Italy", GDP=1814, Percentage=-12.45, Rank=8},
        new GDPReport {State="Brazil", GDP=1774, Percentage=-27.88, Rank=9},
        new GDPReport {State="Canada", GDP=1550, Percentage=-15.02, Rank=10}
    };
}

TreeMap with flat data

Hierarchical data

The following code example demonstrates how to bind a hierarchical collection as data source to the TreeMap component.

@using Syncfusion.EJ2.Blazor.TreeMap

<EjsTreeMap WeightValuePath="Population" DataSource="@populationReport">
    <TreeMapLeafItemSettings LabelPath="Name" Fill="#0077b3">
        <TreeMapLeafBorder Width="0.5" Color="black"></TreeMapLeafBorder>
    </TreeMapLeafItemSettings>
    <TreeMapLevels>
        <TreeMapLevel GroupPath="Continent" Fill="#004466">
            <TreeMapLevelBorder Width="0.5" Color="black"></TreeMapLevelBorder>
        </TreeMapLevel>
        <TreeMapLevel GroupPath="States" Fill="#0099e6">
            <TreeMapLevelBorder Width="0.5" Color="black"></TreeMapLevelBorder>
        </TreeMapLevel>
    </TreeMapLevels>
</EjsTreeMap>

@code  {
    private List<object> populationReport { get; set; } = new List<object> {
        new {
            Continent =  new List<object> { new {
            Name= "Africa",
            Population= 1216130000,
            States= new List<object> { new {
                Name= "Eastern Africa",
                Population= 410637987,
                Region= new List<object> { new {
                    Name= "Ethiopia",
                    Population= 107534882
                 }}
             },
            new {
                Name= "Middle Africa",
                Population= 158562976,
                Region= new List<object>{ new {
                     Name= "Democratic, Republic of the Congo",
                     Population= 84004989
                 }}
                 }
             }
         }}
     },
    new {
         Continent= new List<object> { new {
             Name= "Asia",
             Population= 4436224000,
             States= new List<object> { new {
                     Name= "Central Asia",
                     Population= 69787760,
                     Region= new List<object> { new {
                         Name= "Uzbekistan",
                         Population= 32364996
                     }}
                 },
                 new {
                     Name= "Eastern Asia",
                     Population= 1641908531,
                     Region= new List<object> { new {
                         Name= "China",
                         Population= 1415045928
                     }}
                 }
             }
         }}
     },
     new {
         Continent= new List<object> { new {
             Name= "North America",
             Population= 579024000,
             States= new List<object> { new {
                     Name= "Central America",
                     Population= 174988756,
                     Region= new List<object> { new {
                         Name= "Mexico",
                         Population= 130759074
                     }}
                 },
                 new {
                     Name= "Northern America",
                     Population= 358593810,
                     Region= new List<object> { new {
                         Name= "U.S.",
                         Population= 3267667480
                     }}
                 }
             }
         }}
     },
     new {
         Continent= new List<object> { new {
             Name= "South America",
             Population= 422535000,
             States= new List<object> { new {
                 Name= "Brazil",
                 Population= 204519000
             }}
         }}
     },
     new {
         Continent= new List<object> { new {
             Name= "Europe",
             Population= 738849000,
             States= new List<object> { new {
                     Name= "Eastern Europe",
                     Population= 291953328,
                     Region= new List<object> { new {
                         Name= "Russia",
                         Population= 143964709
                     }}
                 },
                 new {
                     Name= "Northern Europe",
                     Population= 103642971,
                     Region= new List<object> { new {
                         Name= "United Kingdom",
                         Population= 66573504
                     }}
                 }
             }
         }}
     }
    };
}

TreeMap with hierarchical data

Fetching data from JSON file

You can also read the JSON file data, convert it to the C# object and assign it to the TreeMap component’s DataSource property.

Refer to the following code sample for fetching data from JSON file.

The Http.GetJsonAsync method is used in the ‘OnInitAsync’ lifecycle method to load JSON file data. As this will be executed asynchronously, check whether the corresponding data is available and render the TreeMap component or display the loading statement.

@using Syncfusion.EJ2.Blazor.TreeMap
@inject HttpClient Http;

@if (growthReports == null)
{
    <p><em>Loading TreeMap component...</em></p>
}
else
{
    <EjsTreeMap WeightValuePath="GDP" TValue="GDPReport" DataSource="@growthReports">
        <TreeMapLeafItemSettings LabelPath="State">
        </TreeMapLeafItemSettings>
    </EjsTreeMap>
}
@code{
    GDPReport[] growthReports;
    protected override async Task OnInitAsync()
    {
        growthReports = await Http.GetJsonAsync<GDPReport[]>("sample-data/product-growth.json");
    }
    class GDPReport
    {
        public string State { get; set; }
        public int GDP { get; set; }
        public double Percentage { get; set; }
        public int Rank { get; set; }
    };
}

Load TreeMap data from JSON file