Edit this page

Customize Checkbox Templates

Your project might require you to add checkbox templates to a Kendo UI TreeView in AngularJS applications.

To achieve this behavior, apply either of the following approaches:

  • If the k-options are already declared in $scope, add the template to the k-options:

      $scope.options = {
        checkboxes: {
         checkChildren: true,
         template: $("#template").html()
      }
    
  • Declaratively add the template part of the HTML element and assign a scope variable to access it:

      <div kendo-tree-view="tree"
        k-checkboxes="{'checkChildren': true, 'template': checkboxTemplate }">
      </div>
      <script>
      $scope.checkboxTemplate = $("#template").html();
      </script>
    

When you use the Kendo UI checkboxes, make sure that the input element is immediately followed by a label element. Without the label element, the k-checkbox class applies a display : none style.

The following example demonstrates how to:

  1. Add checkbox templates to a TreeView in AngularJS applications.
  2. Add the Bootstrap feel to the checkboxes.
  3. Show nested items under the TreeView elements.
Example
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.bootstrap.min.css">

  <div id="example" ng-app="KendoDemos">
      <div class="demo-section k-content" ng-controller="MyCtrl">
        <div class="box-col">
          <h4>TreeView</h4>
          <div kendo-tree-view="tree"
               k-data-source="treeData"
               k-options="options"
               k-on-change="selecteditem=dataItem">
          </div>
        </div>
      </div>
  </div>
  <script id="item-template" type="text/x-kendo-template">
    # if (item.isLegend) { #
      # for (var i = 0; i < item.images.length; i++) { #
        <img src="#= item.images[i] #" width="100px" height="100px"/>
      # } #
    # } #

     #: item.label || '' #
  </script>
  <script>
    angular.module("KendoDemos", ["kendo.directives"])
      .controller("MyCtrl", function ($scope) {
      $scope.options = {
        dragAndDrop: true,
        loadOnDemand: false,
        checkboxes: {
          checkChildren: true,
          template: "# if (!item.isLegend) { # <input id='checkbox_#:item.uid#' type='checkbox' class='k-checkbox' /><label for='checkbox_#:item.uid#' class='k-checkbox-label'></label># } #"
        },
        template: $("#item-template").html()
      };

      $scope.treeData = [
        {
          "label": "Drinks",
          "items": [
            {
              "label": "My Indian Granny's Bar",
              "items": [
                {
                  "isLegend": true,
                  "images": [
                    "http://demos.telerik.com/kendo-ui/content/web/foods/2.jpg",
                    "http://demos.telerik.com/kendo-ui/content/web/foods/1.jpg"
                  ]
                }]
            },
            {
              "label": "My Daddy's Saloon",
              "items": [
                {
                  "isLegend": true,
                  "images": [
                    "http://demos.telerik.com/kendo-ui/content/web/foods/35.jpg",
                    "http://demos.telerik.com/kendo-ui/content/web/foods/75.jpg"
                  ]
                }
              ]
            }
          ]
        }
      ];
    })
  </script>

  <style>
    body {
      font: 12px 1.5 Arial,sans-serif;
    }
    .demo-section:not(.wide), #example .box:not(.wide) {
      max-width: 700px !important;
    }
    .k-treeview .k-in {
      padding: 5px;
    }
  </style>

See Also

For more runnable examples on the Kendo UI TreeView, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve the information

close
Dummy