MVC Kendo Treemap Tooltip

[Stefan]

Hello,

does anybody know how to create a tooltip on hover for a Kendo treemap? Something like this but for ASP.NET MVC:

http://docs.telerik.com/kendo-ui/controls/charts/treemap/how-to/show-treemap-tooltip

 

I already tried this, but when i move the mouse over the fields nothing appears..

$("#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 item.name + ": " + item.value;

   }

 });

 

When i use the jquery function i can write the right values of each Treemap fiel in the javascript console.

$("#treeMap").on("mouseenter", ".k-leaf", function () {
   var item = $("#treeMap").data("kendoTreeMap").dataItem($(this).closest(".k-treemap-tile"));
   var text = "Name: " + item.Name + "  Value: " + item.Value;
console.log(text);

[Alex Hajigeorgieva]

Hi Stefan,

Thank you for taking the time to explore the functionality of the UI for ASP.NET MVC wrappers.

To achieve the same functionality as in the referenced Kendo UI how-to article with the UI for ASP.NET MVC wrappers, you can do the following:

- Initialize the Kendo UI Tooltip from an element which has an id equal to the Name() of the TreeMap

For example:

@(Html.Kendo().TreeMap()
 .Name("treeMap")
// configuration
)

@(Html.Kendo().Tooltip()
 .For("#treeMap")
 .ContentTemplateId("template")
)

- Use a  .ContentTemplateId("template")

<script id="template" type="text/x-kendo-template">
  <p>#=getItem(data.target)#</p>
</script>

API reference: http://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/TooltipSettingsBuilder#methods-ContentTemplateId(System.String)

Official Demo: http://demos.telerik.com/aspnet-mvc/tooltip/template

- In the content template, add a JavaScript function, which will return the desired dataItem information

<script>
function getItem(tile) {
  var treemap = $("#treeMap").data("kendoTreeMap");
  var item = treemap.dataItem(tile);
  return item.Name + ": " + item.Value;
}
</script>

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[marc]

Hi Alex, 

I've a fab looking treeMap but am unable to display a tooltip with the value of the current segment.

I think I've followed your directions but the item variable is undefined when the getItem(tile) script executes so I am missing something fundamental!

My client side code looks like the following: 

 

01.<div class="container-fluid">
02.    <div class="row my-5">
03.        <div class="col">
04.            @(Html.Kendo().TreeMap()
05.                  .Name("treeMap")
06.                  .DataSource(ds => ds.Read(read => read.Action("Stats_Read", "Dashboard")).Model(m => m.Children("Items")))
07.                  .ValueField("Value")
08.                  .TextField("Name")
09.                  .ColorField("Color")
10.                  .Type(TreeMapType.Squarified)
11.                  .Deferred())
12.
13.            @(Html.Kendo().Tooltip()
14.                  .For("#treeMap")
15.                  .ContentTemplateId("template")
16.                  .Deferred())
17.        </div>
18.    </div>
19.
20.</div>
21.
22.<script id="template" type="text/x-kendo-template">
23.    <p>#=getItem(data.target)#</p>
24.</script>
25.
26.<script>
27.    function getItem(tile) {
28.        var treeMap = $("#treeMap").data("kendoTreeMap");
29.        var item = treeMap.dataItem(tile);
30.
31.        return item.Name + ": " + item.Value + " properties.";
32.    }
33.</script>

 

Where am I going wrong?

Kind regards,

Marc

 

[Alex Hajigeorgieva]

Hi, Marc,

I am pleased to hear that you are happy with the appearance of the Kendo UI TreeMap.

As far as the tooltip foes, you can try adding a filter to the Kendo UI Tooltip as well and also checking that the correct item and target are being passed to the Tooltip. 

@(Html.Kendo().Tooltip()
 .For("#treeMap")
 .Filter(".k-leaf,.k-treemap-title")
 .ContentTemplateId("template")
)

<script id="template" type="text/x-kendo-template">
 <p>#=getItem(data.target)#</p>
</script>

<script>
 function getItem(target) {
    var treemap = $("#treeMap").data("kendoTreeMap");
    var item = treemap.dataItem(target.closest(".k-treemap-tile"));
    console.log(target, item, treemap);
    return item.Name + ": " + item.Value;
 }
</script>

If the suggestion does not help, can you log data in the template like below and let me know what you get:

<script id="template" type="text/x-kendo-template">
  # console.log(data) #
 <p>#=getItem(data.target)#</p>
</script>

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[marc]

Thank you Alex, that has worked perfectly. 

If I have understood correctly, the tooltip needed to be filtered so that it is only triggered when it's over a leaf which is when the item data is available.

Thank you for the quick response.

Marc

[Alex Hajigeorgieva]

Hi, Marc,

I am glad that the requirements to show a tooltip over the TreeMap for ASP.NET MVC are now met. 

The filter option determines over which elements the Kendo UI Tooltip should be shown.

In this case, I also edited the JavaScript code, looking for the closest tile - the HTML element to which a dataItem is bound. And as all our data-bound widgets have a dataItem() method, we are able to extract the matching dataItem(data object) from its HTML representation(the tile).

Kind Regards,
Alex Hajigeorgieva
Progress Telerik