Treemap Click Event Error - Dynamic binding data

4 posts, 1 answers
  1. Sunil
    Sunil  avatar
    8 posts
    Member since:
    Jul 2015

    Posted 12 Apr Link to this post

    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. 

     

  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 14 Apr Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Sunil
    Sunil  avatar
    8 posts
    Member since:
    Jul 2015

    Posted 06 Jun in reply to Daniel Link to this post

    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>

  5. Answer
    Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 07 Jun Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready