CODEWITHSUNDEEP
jquerykendo-ui
David
David

Reputation: 6131

Treemap - HierarchicalDataSource - Template

I am using kendo UI's tree map with a hierarchical datasource. I attempted to change the square's colors using the colorField configuration, but it didn't change the color.

So I decided that I would attempt to use a template to not only align some text, but to also set the background-color based on a field in the datasource. However, I then ran into an issue where it was indicating in the console that my Color field is not defined, so I tried removing just that reference and only reference the Name field (which is what I'm setting in the textField configuration), but the same error occurred.

What is odd is that if I remove the template then it renders the text properly, it just doesn't render the correct background color.

This is what I am attempting to use:

$(document).ready(function() {
  var data = [
    {
      "Name": "CEO",
      "Color": "#e6a800",
      "Children": [
        {
          "Name": "CFO",
          "Level": 3,
          "Color": "#9dddf2",
          "Children": [
            {
              "Name": "Comptroller",
              "Level": 2,
              "Color": "#4db85f",
              "Children": [
                {
                  "Name": "Lead Accountant",
                  "Level": 1,
                  "Color": "#d64d4d",
                  "Children": [
                    {
                      "Name": "Accountant",
                      "Level": 0,
                      "Color": "#c8ccdb"
                    },
                    {
                      "Name": "Clerk",
                      "Level": 0,
                      "Color": "#c8ccdb"
                    }
                  ]
                }
              ]
            },
            {
              "Name": "Senior Auditor",
              "Level": 1,
              "color": "#4db85f",
              "Children": [
                {
                  "Name": "Auditor",
                  "Level": 0,
                  "Color": "#c8ccdb"
                }
              ]
            }
          ]
        },
        {
          "Name": "COO",
          "Level": 3,
          "Color": "#9dddf2",
          "Children": [
            {
              "Name": "VP Of Operations",
              "Level": 2,
              "Color": "#4db85f",
              "Children": [
                {
                  "Name": "Field Manager",
                  "Level": 1,
                  "Color": "#4d69d6",
                  "Children": [
                    {
                      "Name": "Field Adjuster",
                      "Level": 0,
                      "Color": "#c8ccdb"
                    }
                  ]
                },
                {
                  "Name": "Home Office Manager",
                  "Level": 1,
                  "Color": "#4d69d6",
                  "Children": [
                    {
                      "Name": "Desk Adjuster",
                      "Level": 0,
                      "Color": "#c8ccdb"
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ];
  $("#treeMap").kendoTreeMap({
    dataSource: new kendo.data.HierarchicalDataSource({
      data: data,
      schema: {
        model: {
          children: "Children",
          hasChildren: "Children"
        }
      }
    }),
    colorField: "Color",
    valueField: "Level",
    textField: "Name",
    type: 'Vertical',
    //template: kendo.template($('#organizationalHierarchyTemplate').html())
  });
});
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.material.mobile.min.css" />

<script src="https://kendo.cdn.telerik.com/2019.2.514/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.all.min.js"></script>

<body>
  <div id="example">
    <div id="treeMap"></div>
  </div>
</body>
<script id="organizationalHierarchyTemplate" type="text/x-kendo-template">
  <div style="height: auto; background-color: #= Color #;">
    <p style="text-align: center;">#: Name #</p>
  </div>
</script>

Fiddle: Live Demo

Upvotes: 0

Views: 319

Answers (1)

ezanker
ezanker

Reputation: 24738

Your levels are used to determine the area of each square and they need to add up as you go up the hierarchy. e.g.

    var data = [
      {
        "Name": "CEO",
        "Color": "#e6a800",
        "Level": 17,
        "Children": [
          {
            "Name": "CFO",
            "Color": "#9dddf2",
            "Level": 11,
            "Children": [
              {
                "Name": "Comptroller",
                "Color": "#4db85f",
                "Level": 3,
                "Children": [
                  {
                    "Name": "Lead Accountant",
                    "Color": "#d64d4d",
                    "Level": 3,
                    "Children": [
                      {
                        "Name": "Accountant",
                        "Level": 2,
                        "Color": "#c8ccdb"
                      },
                      {
                        "Name": "Clerk",
                        "Level": 1,
                        "Color": "#cdefdc"
                      }
                    ]
                  }
                ]
              },
              {
                "Name": "Senior Auditor",
                "color": "#4db85f",
                "Level": 8,
                "Children": [
                  {
                    "Name": "Auditor",
                    "Level": 8,
                    "Color": "#c8ccdb"
                  }
                ]
              }
            ]
          },
          {
            "Name": "COO",
            "Color": "#9dddf2",
            "Level": 6,
            "Children": [
              {
                "Name": "VP Of Operations",
                "Color": "#4db85f",
                "Level": 6,
                "Children": [
                  {
                    "Name": "Field Manager",
                    "Color": "#4d69d6",
                    "Level": 2,
                    "Children": [
                      {
                        "Name": "Field Adjuster",
                        "Level": 2,
                        "Color": "#c8ccdb"
                      }
                    ]
                  },
                  {
                    "Name": "Home Office Manager",
                    "Color": "#4d69d6",
                    "Level": 4,
                    "Children": [
                      {
                        "Name": "Desk Adjuster",
                        "Level": 4,
                        "Color": "#c8ccdb"
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ];

In the template, you get the fields from the dataItem object

  <script id="organizationalHierarchyTemplate" type="text/x-kendo-template">
    <div style="height: auto; background-color: #= dataItem.Color #;">
        <p style="text-align: center;">#: dataItem.Name #</p>
    </div>
  </script>

Upvotes: 1

Related Questions