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;" })
)