I would like the user to navigate to different page - if user clicks on a treemap cell ..

How to set the Redirection or Navigation to happen ?.

Using web app , aspx , vs 2015 , Kendo latest 

Hi.

I modified a previous example I found on this forum. If you see the following Dojo example, I am not able to bind the TreeMap successfully.

I created this from the following working example (http://dojo.telerik.com/UFuKa), but in this case the tree map is bound after a chart is data bound. I tried to update it so it would work just for the tree map but can't get it to work.

http://dojo.telerik.com/opezO

What am I missing?

Thank you

Hi,

My view loads treemap data dynamically, if you click on treemap tile it nevagate to URL which working perfectly fine. but There are custom filter option on page which will rebind treemap with new data.

Problem from here, So i apply filters (rebind treemap data) and click on tile of treemap it works and open popup 2 times, say suppose if i applied filter 5 times (rebind dynamic data 5 times with treemap) and i click on tile, it execute click event 5 times.

Page with treemap & custom filter option, when i change filter option and click on apply filter will again build tree with new data.

createTreeMap();
$(document).bind("kendo:skinChange", createTreeMap);

 function createTreeMap() {

$("#treeMap").kendoTreeMap({
            dataSource: {
                transport: {
                    read: {
                        url: buildUrl,

                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        parameterid: "ParameterMID",
                        hasChildren: "HasChild",
                        children: "ParameterChilds"
                    }
                }
            },
            textField: "ParameterName",
            valueField: "ParameterWeight",.....and more

}

I hope you understand what i mean. 

I'm using the datasource below as input to a bar chart.

How can I use the same datasource as input to a TreeMap chart? Or must I do another database call?

[{"category":"Decisive + Very","value":206,"explode":false,"color":"#3073ad"},{"category":"Decisive + Satisfied","value":14,"explode":false,"color":"#428bca"},{"category":"Major + Very","value":374,"explode":false,"color":"#2b772b"},{"category":"Major + Satisfied","value":175,"explode":false,"color":"#3c9b3d"},{"category":"Major + Neither","value":6,"explode":false,"color":"#64c465"},{"category":"Major + Slightly","value":2,"explode":false,"color":"#8dd68e"},{"category":"Some + Very","value":37,"explode":false,"color":"#b36d0e"},{"category":"Some + Satisfied","value":86,"explode":false,"color":"#f0910f"},{"category":"Some + Neither","value":17,"explode":false,"color":"#f0ad4e"},{"category":"Some + Slightly","value":3,"explode":false,"color":"#f1c68b"},{"category":"Minor + Very","value":1,"explode":false,"color":"#9d2a27"},{"category":"Minor + Satisfied","value":8,"explode":false,"color":"#cf322e"},{"category":"Minor + Neither","value":6,"explode":false,"color":"#d86562"},{"category":"Minor + Slightly","value":7,"explode":false,"color":"#e09290"},{"category":"Minor + Dissatisfied","value":4,"explode":false,"color":"#eececa"},{"category":"No + Satisfied","value":1,"explode":false,"color":"#4b4b4b"},{"category":"No + Neither","value":4,"explode":false,"color":"#747474"},{"category":"No + Slightly","value":3,"explode":false,"color":"#9c9c9c"}]

Does anyone know how far AngularJS is supported for the treemap widget?

 I get the feeling "k-data-source" and "k-rebind" don't seem to work. Is the treemap mature enough to be used with AngularJS

or should I stick to JQuery for this one?

thanks for the advice,

Arno

I am having trouble getting ng-click to work. 

Here is a dojo of what I would like to do. 

http://dojo.telerik.com/IFuRE/2

I don't really need to use buttons or templates in my case, I would like to be able to click anywhere on a tile and have that trigger a function with the dataitem that was clicked.

I did find this example here:

http://dojo.telerik.com/@SiliconSoul/uMORu

But this is not really the angular way to do this, I would like to use a function on my controller and have the scope come through etc.

Regards,

Ivan

I am creating a tree-map. Treemap is static. It will always have 3 tiles. The data can change but the number of tiles will remain fixed. I looked at the below example. 

How can I force each tile to have a unique color from the array of colors I have specified.  

<div id="treemap"></div>
<script>
  $("#treemap").kendoTreeMap({
    dataSource: {
      data: [{
        name: "Root",
        items: [{ name: "foo", value: 1 }, { name: "bar", value: 2 }, { name: "baz", value: 3 }]
      }]
    },
    valueField: "value",
    textField: "name",
    colors: ["red", "green", "yellow"]
  });
</script>

Do you have any examples with treemaps with hover tooltip style windows or click events,that can for example show the underlying values, open modals, or more details behind the item using angular?

Thanks

I have TreeMap on my page as directive:

<div kendo-treemap="kTree" k-options="widget.options" k-rebind="widget.options"  style="height:{{widget.options.height-30}}px;"></div>

Sometimes i should change size of widget. ​But when i change height and width and call 

.scope().kTree.resize()

it's nothing happens. Does it ridht way? How i can dynamicly change size of TreeMap?

Thanks.