Treemap - item values MVC

5 posts, 1 answers
  1. Banca del Ceresio
    Banca del Ceresio avatar
    11 posts
    Member since:
    Jun 2008

    Posted 09 Nov 2015 Link to this post

    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

  2. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 11 Nov 2015 Link to this post

    Hi,

    The ItemCreated event looks should be working for this case. Can you test this code:
    <div id="treeMap"></div>
        <script>
            $("#treeMap").kendoTreeMap({
                dataSource: {
                    data: [{
                        name: "Root",
                        items: [{ name: "foo", value: 1, color: "red" }, { name: "bar", value: 2, color: "yellow" }, { name: "baz", value: 3, color: "green" }]
                    }]
                },
                valueField: "value",
                textField: "name",
                colorField: "color",
                itemCreated: function (e) {
                    var treeMap = $("#treeMap").data("kendoTreeMap");
                    var item = treeMap.dataItem($(e.element).closest(".k-treemap-tile"));
                    if (item.name === "foo") {
                        e.element.css("background-color", "blue");
                    }
                }
            });
        </script>


    Regards,
    Hristo Valyavicharski
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Banca del Ceresio
    Banca del Ceresio avatar
    11 posts
    Member since:
    Jun 2008

    Posted 13 Nov 2015 in reply to Hristo Valyavicharski Link to this post

    Done, but I have the error "Unable to get property 'dataItem' of undefined or null reference" (see attached file).

     

  5. Answer
    Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 13 Nov 2015 Link to this post

    Please look here: http://dojo.telerik.com/@kendo/UvObu

    Regards,
    Hristo Valyavicharski
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Banca del Ceresio
    Banca del Ceresio avatar
    11 posts
    Member since:
    Jun 2008

    Posted 13 Nov 2015 in reply to Hristo Valyavicharski Link to this post

    thank you very much.

    My mistake copying the itemCreated. All is perfect now ! Thank you

Back to Top
Kendo UI is VS 2017 Ready