Search results

Selection and Highlight

Selection

Selection is used to select a particular group or item to differentiate from other items. Each item or group can be selected and deselected when interacting with the items.

The layer selectionSettings.fill property is used to change the selected item color. The selectionSettings.border.color and selectionSettings.border.width properties are used to customize the selected item’s border.

The selection is enabled using the selectionSettings.enable property. To use selection feature in tree map, import the TreeMapSelection, and inject using the TreeMap.Inject(TreeMapSelection);.

Tree map selection is shown in the following example.

razor
selection.cs
@using Syncfusion.EJ2;
<div id="container">
@Html.EJS().TreeMap("container").Load("load").WeightValuePath("sales").Levels(level =>
    {
        level.GroupPath("dataType").Fill("#c5e2f7").HeaderStyle(new TreeMapFont { Size = "16px" }).HeaderAlignment(Syncfusion.EJ2.TreeMap.Alignment.Center).GroupGap(5).Add();
        level.GroupPath("product").Fill("#a4d1f2").HeaderAlignment(Syncfusion.EJ2.TreeMap.Alignment.Center).GroupGap(2).Add();
    }).LeafItemSettings(leaf => leaf.LabelPath("type").Fill("#8ebfe2").LabelPosition(Syncfusion.EJ2.TreeMap.LabelPosition.Center)).SelectionSettings(sel => sel.Enable(true).Fill("#58a0d3").Opacity("1")).Render()
</div>
<script>
    function load(args)
    { 
        var data = [
            { dataType: "Import", type: "Animal products", product: "2010", sales: 20839332874 },
            { dataType: "Import", type: "Animal products", product: "2011", sales: 23098635589 },
            { dataType: "Import", type: "Chemical products", product: "2010", sales: 141637951510 },
            { dataType: "Import", type: "Chemical products", product: "2011", sales: 161550338209 },
            { dataType: "Import", type: "Base metals", product: "2010", sales: 86079439944 },
            { dataType: "Import", type: "Base metals", product: "2011", sales: 103821671535 },
            { dataType: "Import", type: "Textile articles", product: "2010", sales: 97126140830 },
            { dataType: "Import", type: "Textile articles", product: "2011", sales: 104980750811 },
            { dataType: "Export", type: "Animal products", product: "2010", sales: 15845503378 },
            { dataType: "Export", type: "Animal products", product: "2011", sales: 20650111620 },
            { dataType: "Export", type: "Chemical products", product: "2010", sales: 136100054087 },
            { dataType: "Export", type: "Chemical products", product: "2011", sales: 146341672411 },
            { dataType: "Export", type: "Base metals", product: "2010", sales: 59060592813 },
            { dataType: "Export", type: "Base metals", product: "2011", sales: 71785882641 },
            { dataType: "Export", type: "Textile articles", product: "2010", sales: 20982380561 },
            { dataType: "Export", type: "Textile articles", product: "2011", sales: 26016143783 }
        ];
        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();
        }
    }
}

Highlight

Hightlight is used to highlight an item or group from other items. Each item or group can be highlighted when hovering the mouse over items.

The layer highlightSettings.fill property is used to change the highlighted item color. The highlightSettings.border.color and highlightSettings.border.width properties are used to customize the highlighted shape border. You can highlight an item by hovering the mouse over the item. The highlight is enabled using the highlightSettings.enable property.

The following code example shows highlighting the item.

razor
highlight.cs
@using Syncfusion.EJ2;
<div id="container">
@Html.EJS().TreeMap("container").Load("load").WeightValuePath("sales").Levels(level =>
    {
        level.GroupPath("dataType").Fill("#c5e2f7").HeaderStyle(new TreeMapFont { Size = "16px" }).HeaderAlignment(Syncfusion.EJ2.TreeMap.Alignment.Center).GroupGap(5).Add();
        level.GroupPath("product").Fill("#a4d1f2").HeaderAlignment(Syncfusion.EJ2.TreeMap.Alignment.Center).GroupGap(2).Add();
    }).LeafItemSettings(leaf => leaf.LabelPath("type").Fill("#8ebfe2").LabelPosition(Syncfusion.EJ2.TreeMap.LabelPosition.Center)).HighlightSettings(high => high.Enable(true).Fill("#71b0dd").Opacity("1")).Render()
</div>
<script>
    function load(args)
    { 
        var data = [
            { dataType: "Import", type: "Animal products", product: "2010", sales: 20839332874 },
            { dataType: "Import", type: "Animal products", product: "2011", sales: 23098635589 },
            { dataType: "Import", type: "Chemical products", product: "2010", sales: 141637951510 },
            { dataType: "Import", type: "Chemical products", product: "2011", sales: 161550338209 },
            { dataType: "Import", type: "Base metals", product: "2010", sales: 86079439944 },
            { dataType: "Import", type: "Base metals", product: "2011", sales: 103821671535 },
            { dataType: "Import", type: "Textile articles", product: "2010", sales: 97126140830 },
            { dataType: "Import", type: "Textile articles", product: "2011", sales: 104980750811 },
            { dataType: "Export", type: "Animal products", product: "2010", sales: 15845503378 },
            { dataType: "Export", type: "Animal products", product: "2011", sales: 20650111620 },
            { dataType: "Export", type: "Chemical products", product: "2010", sales: 136100054087 },
            { dataType: "Export", type: "Chemical products", product: "2011", sales: 146341672411 },
            { dataType: "Export", type: "Base metals", product: "2010", sales: 59060592813 },
            { dataType: "Export", type: "Base metals", product: "2011", sales: 71785882641 },
            { dataType: "Export", type: "Textile articles", product: "2010", sales: 20982380561 },
            { dataType: "Export", type: "Textile articles", product: "2011", sales: 26016143783 }
        ];
        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();
        }
    }
}