New to Kendo UI for jQuery? Download free 30-day trial

Apply Border Styles to Tiles

The Kendo UI TreeMap widget 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.

The following example demonstrates how to apply border styles to the Kendo UI TreeMap tiles.

      .k-treemap-tile {
        border-width: 5px;
        margin: -5px 0 0 -5px;
    <div id="treemap" style="height: 600px; font-size: 12px;"></div>
       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);

See Also

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