TreeMap TagHelper Overview

The Telerik UI TreeMap TagHelper for ASP.NET Core is a server-side wrapper for the Kendo UI TreeMap widget.

The TreeMap displays hierarchical data in a traditional tree structure.

Telerik UI for ASP.NET Core Ninja image

The TreeMap is part of Telerik UI for ASP.NET Core, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Initializing the TreeMap

The following example demonstrates how to define the TreeMap by using the TreeMap TagHelper.

<kendo-treemap datasource-id="dataSource" name="treeMap" text-field="name" value-field="value"></kendo-treemap>

    var dataSource = new{
        data: [{
            name: "foo",
            value: 1

Binding to Remote Data

You can also bind the DataSource to remote data. The following example demonstrates how to bind the Kendo UI TreeMap TagHelper to a remote service.

    <kendo-treemap name="treemap" text-field="name" value-field="value">
                <read url="/treemap/_populationusa" />
                <hierarchical-model children="items"></hierarchical-model>

        .DataSource(dataSource => dataSource
            .Read(read => read
                .Action("_PopulationUSA", "TreeMap")
            .Model(m => m.Children("Items"))
        .HtmlAttributes(new { style = "height:600px; font-size: 12px;" })

See Also

In this article
Not finding the help you need? Improve this article