Treemap API

8 posts, 0 answers
  1. Christopher
    Christopher avatar
    2 posts
    Member since:
    May 2015

    Posted 14 May 2015 Link to this post

    Hi,

     I am currrently evaluating the TreeMap control. I am interested in using it in an AngularJS application. I could not find much documentation on the API. The following link leads to a 404 error. http://www.telerik.com/support/code-library/kendo-ui/treemap

     

    Basically I would like to know if I customize the template of each cell. Rather than having only one label in each cell, could I have a few labels, each with different font and size?

    Is there a click event? When a user clicks on a cell, I'd like that to be directed to another page.

    I could only see a basic usage of the Treemap. Is there an advanced sample available?

    Thanks,

    Chris

  2. Damien
    Damien avatar
    1 posts
    Member since:
    Oct 2012

    Posted 15 May 2015 Link to this post

    Hi,

    We need also this functionnality: have the click event to get detail information about the leaf.

    Thanks a lot.

  3. Kendo UI is VS 2017 Ready
  4. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 18 May 2015 Link to this post

    Hi,

    The API documentation is available on this page. You can customize the content by using a template. A built-in click event is not available but you could bind a custom one and get the item via the dataItem method. I created an example that demonstrates using a template and handling the click event.


    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Christopher
    Christopher avatar
    2 posts
    Member since:
    May 2015

    Posted 18 May 2015 in reply to Daniel Link to this post

    Thanks! This was helpful.
  6. Ron
    Ron avatar
    1 posts
    Member since:
    Nov 2014

    Posted 07 Jul 2015 in reply to Daniel Link to this post

    I am unable to open the link you gave for the example. Is there anyway you can attach the example in a file?
  7. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 08 Jul 2015 Link to this post

    Hi,

    I attached the example.

    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Rajaraman
    Rajaraman avatar
    2 posts
    Member since:
    May 2015

    Posted 02 Nov 2015 in reply to Daniel Link to this post

    But how do i get the current selected item in the TreeMap, if its not the first or last

     template: $("#template").html()}).on("click", ".k-leaf, .k-treemap-title", function (e) {

                        alert('clicked');
                        var geographyTreeMap = $("#geographyTreeMap").getKendoTreeMap();
                        var dataItem = geographyTreeMap.dataItem(".k-treemap-tile:first");
                        alert(dataItem); //is working
                    
                });​

  9. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 04 Nov 2015 Link to this post

    Hello,

    The example that I attached demonstrators how to get the clicked item. The event handler will be called in the context of the element that triggered the event so you can use this to get the element.
    .on("click", ".k-leaf, .k-treemap-title", function (e) {
        var item = $("#treemap").data("kendoTreeMap").dataItem($(this).closest(".k-treemap-tile"));   
    });



    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