Hi,

I have a problem setting correctly the treemap.

Everything works now, but I would like to change some tile aspect based on the tile properties (name, value).

This is my actual implementation:

("#treemap").kendoTreeMap({
dataSource: datasource,
autoBind: true,
valueField: "value",
textField: "name",
colorField: "color",
type: treemaptype,
itemCreated: function (e) {   

                            },
dataBound: function (e) {
// Total + Groups
if (e.node) {
var element = this.findByUid(e.node.uid);
element.css("background-color", e.node.color);
// to set back the original color
}
}
}).on("click", ".k-leaf, .k-treemap-title", function (e) {
var item = $("#treemap").data("kendoTreeMap").dataItem($(this).closest(".k-treemap-tile"));

alert(item.name)
});

I have understood that itemCreated event cannot be used, because data are not yet bound to the item, and we can only change some css property.

In ASP we can implement a Server-side procedure to do that.

What I can do in MVC ?

Thank you

Hi,

 I have created a treemap, assigning color to each tile, but if a tile is a header, the color is overidden.

There is a way to force a header color ?

 As you can see, I have put an alert in itemCreated event, to stop after each tile creation, and as you can see in the first attached file, the tile have the color that I chose.

When the child tiles are created, the parent tile color is overidden (see attached file 2).

 Thank you for you help

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

Hi There,

I am new to kendo UI, I am struggling to bind dynamic data to treemap. I could not able to find example on forum

 Controller returns:

Json(treeMap, JsonRequestBehavior.AllowGet);​ object of following class

public class TreeMapData

{

      public int ParameterID{...}
      public string ParameterName{...}
      public double ParameterWeight{...} 
      //public string ParameterStatus
      public List<TreeMapData> ParameterChilds{..}
      //public string ParameterTooltip{...}
      public bool HasChild { get { return  ParameterChilds.Count > 0?true:false;    }
}

View:

<script type="text/javascript">
    function createTreeMap() {
        $("#treeMap").kendoTreeMap({
            dataSource: {
                transport: {
                    read: {
                        url: '@Html.Raw(Url.Action("GetAnalysisData", "Analysis", ""))',
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        parameterid: "ParameterID",
                        parametername: "ParameterName",
                        parameterwieght: "ParameterWeight",
                        hasChildren: "HasChild",
                        children: "ParameterChilds"
                    }
                }
            },
            textField: "parametername",
            valueField: "parameterwieght"
        });       
    }

    $(document).ready(function () {
        createTreeMap();
        $(document).bind("kendo:skinChange", createTreeMap);
    });
    
    </script>​

Error : Microsoft JScript runtime error: Object doesn't support property or method 'slice'.

When i bind status data, it perfectly works fine.

The treemap is only showing data that is set first. When I change the options, the widget still displays the old data.

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

Then I thought I will try just changing the data on the datasource but that did not work either.

http://dojo.telerik.com/exUtI

What is the right way of using a treemap to display different sets of data? My schema is the same.

Thanks.

The following examples fails to run

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

when I add children to items using push.

 If I use a static object like

            data: [{
                name: "Tree",
                value: 5,
              items:[
                {
                  name:"Leaf 1"
                  value:3
                },
                {
                  name:"Leaf 2"
                  value:2
                }
                ]
            }],

 It works fine.

What am I missing?

Thanks.

Hi,

My treemap seems to bind to the data but shows like a flat line as if the individual boxes don't get a width attributed to them.

The treemap as a whole does have ample space through but it fills it up with pure white nothingness (as you can see in the screenshot).
If I try the same thing (same data) with the same version of kendo on the demo page (http://dojo.telerik.com/ohOKA/2) it works just fine but somehow it doesn't show correctly on my own website.

 Anyone have an idea what might cause this?

 btw I'm using angularJS implementation of the treemap.

 thanks,

Arno