Treemap Click Event Error - Dynamic binding data

[Sunil]

Hi,

My view loads treemap data dynamically, if you click on treemap tile it nevagate to URL which working perfectly fine. but There are custom filter option on page which will rebind treemap with new data.

Problem from here, So i apply filters (rebind treemap data) and click on tile of treemap it works and open popup 2 times, say suppose if i applied filter 5 times (rebind dynamic data 5 times with treemap) and i click on tile, it execute click event 5 times.

 

Page with treemap & custom filter option, when i change filter option and click on apply filter will again build tree with new data.

createTreeMap();
$(document).bind("kendo:skinChange", createTreeMap);

 

 function createTreeMap() {

$("#treeMap").kendoTreeMap({
            dataSource: {
                transport: {
                    read: {
                        url: buildUrl,

                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        parameterid: "ParameterMID",
                        hasChildren: "HasChild",
                        children: "ParameterChilds"
                    }
                }
            },
            textField: "ParameterName",
            valueField: "ParameterWeight",.....and more

}

 

I hope you understand what i mean. 

 

[Daniel]

Hello,

I am not sure if I understand the scenario but if you are recreating the widget each time then you should first destroy the previous instance:

function createTreeMap() {
    var element = $("#treeMap");
    if (element.getKendoTreeMap()) {
        element.getKendoTreeMap().destroy();
        element.empty();
    }
    element.kendoTreeMap({
        ...

If you are not recreating the treemap each time or if the problem persists after destroying the previous instance then please clarify:

• How are you rebinding the treemap?
• How are you binding the click handler?

Regards,
Daniel
Telerik

 

 

[Sunil]

Hi Daniel,

Suggested solution is not working somehow, please see attached code:

 

<script type="text/javascript">
    function createTreeMap() {

        //Check and Set Parameter
        var selectedArea = "ALL";
        var selectedUnit = "ALL";
        var selectedDiscipline = "ALL";
        var selectedStatus = "";
        var selectedTimeRange = "Current";
        var lastExecuted = new Date();

        selectedArea = $.trim($("#trains").val());
        selectedUnit =  $.trim($("#units").val());
        selectedDiscipline = $.trim($("#owners").val());
        selectedStatus = $.trim($("#status").val());
        selectedTimeRange = $.trim($("#timeranges").val());

        var buildUrl = "/Analysis/GetAnalysisData?pAsset=LNG&pArea=" + selectedArea +"&pUnit=" + selectedUnit + "&pDiscipline=" + selectedDiscipline + "&pStatus=" + selectedStatus + "&pTimeRange=" + selectedTimeRange;

        var treeMap = $("#treeMap");

        if (treeMap.getKendoTreeMap()) {
            treeMap.getKendoTreeMap().destroy();
            treeMap.empty();
        }

        treeMap.kendoTreeMap({
            dataSource: {
                transport: {
                    read: {
                        url: buildUrl,

                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        parameterid: "ParameterMID",
                        hasChildren: "HasChild",
                        children: "ParameterChilds"
                    }
                }
            },
            textField: "ParameterName",
            valueField: "ParameterWeight",
            colorField: "ParameterStatus",
            itemCreated: function (e) {

                //var element = this.findByUid(e.node.uid);

                var parameterMID = $("#treeMap").data("kendoTreeMap").dataItem($(e.element[0]).closest(".k-treemap-tile")).ParameterMID;
                var ackStatus = parameterMID.substring(parameterMID.search("_ACK:") + 5, parameterMID.search("_ACK:") + 6);
                var comStatus = parameterMID.substring(parameterMID.search("_COM:") + 5, parameterMID.search("_COM:") + 6);

                //alert("MID = " + parameterMID + " , ACK = " + ackStatus);
                if (ackStatus == 1) {
                    $(e.element[0]).closest(".k-treemap-tile").addClass("dataIssue");
                    $(e.element[0]).closest(".k-treemap-tile").css("background-image", "../../Images/ro_20.png");
                }

                if (comStatus == 1) {
                    $(e.element[0]).closest(".k-treemap-tile").addClass("dataComplete");
                    $(e.element[0]).closest(".k-treemap-tile").css("background-image", "../../Images/ro_20_Cross.png");
                }

            }
        })
        .on("click", ".k-leaf, .k-treemap-title", function (e) {

            var diff = Math.abs((new Date()) - lastExecuted);

            if (diff > 5000) {
                lastExecuted = new Date();
                var item = $("#treeMap").data("kendoTreeMap").dataItem($(this).closest(".k-treemap-tile"));
                //alert(item.ParameterID);
                var itemMID = item.ParameterMID;
                var itemID = itemMID.substring(0, itemMID.search("_"));
                var url = "/Report/Graph?Id=" + itemID;
                //window.location.href = url;

                window.open(url, '_blank');
                //return true;
            }
        });
        $("#treeMap").kendoTooltip({
            filter: ".k-leaf,.k-treemap-title",
            position: "top",
            content: function (e) {
                var treemap = $("#treeMap").data("kendoTreeMap");
                var item = treemap.dataItem(e.target.closest(".k-treemap-tile"));
                //return "<div style='width:300px;height:300px'><b>" + item.ParameterName + "</b></div>";
                var itemMID = item.ParameterMID;
                var itemTooltip = itemMID.substring(itemMID.search("_TOOLTIP:") + 9);
                //alert(itemTooltip);
                //return item.ParameterName;
                return itemTooltip;
            }
        });
    }

    $(document).ready(function () {

........

//Filter based on selected criteria
        $("#get").click(function () {
            createTreeMap();
            $(document).bind("kendo:skinChange", createTreeMap);

        });

    });
    
    </script>

[Daniel]

Hi,

Since the tooltip is also initialized in the function you should destroy it as well. The kendo.destroy method can be used to destroy all widgets. Also, you will  need to unbind the click handler as it is also bound inside the function that is used to recreate the treemap - example.

Regards,
Daniel
Telerik