Edit this page

TreeMap Tag Helper Overview

The TreeMap tag helper helps you configure the Kendo UI TreeMap widget in ASP.NET Core applications.

Basic Usage

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

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

<script>
    var dataSource = new kendo.data.HierarchicalDataSource({
        data: [{
            name: "foo",
            value: 1
        }]
    });
</script>

Binding to Remote Data

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

Example

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


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

See Also