Dynamic tooltip with treemap is not working

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

    Posted 27 Oct 2015 Link to this post

    Hi there,

     I am trying to add dynamic tooltip to treemap by using ajax function. Tooltip contents are synamic based on id of treemap element. So i decided to use ajax function in content of tooltip, Ajax will call to controller and return "Text" string content. When i wrote below to achieve this tooltip is blank without any content. I think i did some syntax error. Sorry i could not able to find relevant example also.

     

    Code (View)

    $("#treeMap").kendoTooltip({
                filter: ".k-leaf,.k-treemap-title",
                content: function (e) {
                    var treemap = $("#treeMap").data("kendoTreeMap");
                    var item = treemap.dataItem(e.target.closest(".k-treemap-tile"));
                    //return item.ParameterID + ": " + item.ParameterName + ": " + item.tooltip;
                    var parameterID = item.ParameterID;
                    $.ajax({
                        url: '@Url.Action("GetTooltipData", "Analysis")' + '?ID=' + parameterID,
                        success: function (data) {
                            //return data;
                            return "hi, this is test tooltip";
                        },
                        error: function (msg) {
                            toastr.error("Error: " + msg.statusText);
                        }
                    });
                }
            });

     

    Thank you in advance for your support

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 28 Oct 2015 Link to this post

    Hello Sunil,


    Please try to use an approach similar to the one described in the following thread.




    Regards,
    Viktor Tachev
    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 28 Oct 2015 in reply to Viktor Tachev Link to this post

    Hi Viktor,

     Thank you for example. It works but tooltip show on center top of whole treemap (for all tiles) always.

     $("#treeMap").on("mouseenter", ".k-leaf", function (e) {
                var item = $("#treeMap").data("kendoTreeMap").dataItem($(this).closest(".k-treemap-tile"));
                var parameterID = item.ParameterID;
                $.ajax({
                        url: '@Url.Action("GetTooltipData", "Analysis")' + '?ID=' + parameterID,
                        success: function (data) {
                            $("#treeMap").kendoTooltip({
                                content: data,
                                position: "top",
                                animation: {
                                    close: { effects: "fade:out"  },
                                    open: { effects: "fade:in",duration: ​500 }
                                }
                            }).data("kendoTooltip").show($("#treeMap"));
                        }
                    });
            });

    I think i should use tile (item) instead of $("#treeMap") but when i used that it gave following error.

    Error : Microsoft JScript runtime error: Object doesn't support property or method 'kendoTooltip'

     BTW, is there any way to bind tooltip data with treemap at the time of load?

     Thank you

     

     

     

  5. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 30 Oct 2015 Link to this post

    Hi Sunil,

    Try to set the filter option for the tooltip. This way the tooltip should be displayed when the user hovers over the tiles.

    filter: ".k-treemap-tile"


    Regards,
    Viktor Tachev
    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