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

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>

See Also

In this article