Dynamically Change Leaf Style Properties

Environment

Product Version	2017.3.913
Product	RadTreeMap for ASP.NET AJAX

Description

In some scenarios it may be desirable to change the style properties of a TreeMap item based on the value of other style properties.

Since the TreeMap is a wrapper around the Kendo UI TreeMap API it includes a client-side event for itemCreated. This also maps to the AJAX OnClientItemCreated client-side event.

Solution

Use the AJAX client-side event argument to get the element and alter the style properties. See the below sample for more details.

ASPNET

<telerik:RadTreeMap Skin="Metro" RenderMode="Lightweight" runat="server" ID="TreeMap1" Width="1000px" AlgorithmType="Squarified" OnClientItemCreated="OnClientItemCreated">
</telerik:RadTreeMap>

JavaScript

function OnClientItemCreated(sender, args) {
    var el = args.get_element();
    switch (el.style.backgroundColor) {
        case "rgb(248, 157, 38)":
            el.style.color = "purple";
        case "rgb(195, 130, 45)":
            el.style.color = "green";
        default:
    }
}

See Also

• Kendo UI TreeMap API
• OnClientItemCreated