This is a migrated thread and some comments may be shown as answers.

Treemap API

7 Answers 111 Views
TreeMap
This is a migrated thread and some comments may be shown as answers.
Christopher
Top achievements
Rank 1
Christopher asked on 15 May 2015, 02:07 AM

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

7 Answers, 1 is accepted

Sort by
0
Damien
Top achievements
Rank 2
answered on 15 May 2015, 02:40 PM

Hi,

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

Thanks a lot.

0
Daniel
Telerik team
answered on 18 May 2015, 10:11 AM
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!
 
0
Christopher
Top achievements
Rank 1
answered on 18 May 2015, 05:25 PM
Thanks! This was helpful.
0
Ron
Top achievements
Rank 1
answered on 07 Jul 2015, 03:05 PM
I am unable to open the link you gave for the example. Is there anyway you can attach the example in a file?
0
Daniel
Telerik team
answered on 08 Jul 2015, 11:15 AM
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!
 
0
Rajaraman
Top achievements
Rank 1
answered on 02 Nov 2015, 08:15 PM

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

0
Daniel
Telerik team
answered on 04 Nov 2015, 02:40 PM
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!
 
Tags
TreeMap
Asked by
Christopher
Top achievements
Rank 1
Answers by
Damien
Top achievements
Rank 2
Daniel
Telerik team
Christopher
Top achievements
Rank 1
Ron
Top achievements
Rank 1
Rajaraman
Top achievements
Rank 1
Share this question
or