Apply Border Styles to TreeMap Tiles
Environment
Product | Progress® Kendo UI® TreeMap for jQuery |
Operating System | Windows 10 64bit |
Visual Studio Version | Visual Studio 2017 |
Preferred Language | JavaScript |
Description
How can I apply border styles to the tiles of the TreeMap?
Solution
The Kendo UI TreeMap control considers the width of its container and calculates the dimensions of its tiles accordingly. If the border-width
configuration of the tiles is changed to a value that is greater than 1px, then a negative value must be provided as a margin to compensate the update of the dimensions.
- This approach is applicable only when you use Less-based themes.
- R1 2023 is the last official release of Kendo jQuery, which supports and ships Less themes with the product.
The following example demonstrates how to apply border styles to the Kendo UI TreeMap tiles.
<style>
.k-treemap-tile {
border-width: 5px;
margin: -5px 0 0 -5px;
}
</style>
<div id="treemap" style="height: 600px; font-size: 12px;"></div>
<script>
$("#treemap").kendoTreeMap({
dataSource: {
data: [{
name: "Root",
color: "red",
items: [{
name: "Group A",
value: 1,
color: "green",
items: [{ name: "foo", value: 1, color: "blue" }, { name: "bar", value: 2, color: "orange"}]
}]
}]
},
valueField: "value",
textField: "name",
colorField: "color",
dataBound: function (e) {
if (e.node) {
var element = this.findByUid(e.node.uid);
element.css("background-color", e.node.color);
}
}
});
</script>