MVC Kendo Treemap Tooltip

6 posts, 0 answers
  1. Stefan
    Stefan avatar
    4 posts
    Member since:
    Jul 2017

    Posted 17 Jul 2017 Link to this post

    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);

     

     

    Thanks,

    Stefan

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    442 posts

    Posted 19 Jul 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. marc
    marc avatar
    2 posts
    Member since:
    Oct 2015

    Posted 24 Feb in reply to Alex Hajigeorgieva Link to this post

    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

     

  4. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    442 posts

    Posted 27 Feb Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. marc
    marc avatar
    2 posts
    Member since:
    Oct 2015

    Posted 27 Feb in reply to Alex Hajigeorgieva Link to this post

    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

  6. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    442 posts

    Posted 28 Feb Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top