This is a migrated thread and some comments may be shown as answers.

Treemap Click Event Error - Dynamic binding data

3 Answers 163 Views
TreeMap
This is a migrated thread and some comments may be shown as answers.
Sunil
Top achievements
Rank 1
Sunil asked on 12 Apr 2016, 08:59 PM

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. 

 

3 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 14 Apr 2016, 08:32 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Sunil
Top achievements
Rank 1
answered on 06 Jun 2016, 05:37 AM

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>

0
Accepted
Daniel
Telerik team
answered on 07 Jun 2016, 07:47 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
TreeMap
Asked by
Sunil
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Sunil
Top achievements
Rank 1
Share this question
or