Custom buttons on Kendo tree view Angularjs

Question

I'm trying to add multiple buttons inside Kendo treeview node. I have used template to add multiple buttons but failed to achieve their features as the whole node is working a link. Please find below the HTML and JS

HTML

<div kendo-tree-view="tree" k-data-source="treeData" class="hasMenu" k-on-change="selectedItem = dataItem">
    <span k-template>
        {{dataItem.text}} 
        <i class="fa fa-plus" aria-hidden="true"></i>
        <i class="fa fa-trash" aria-hidden="true"></i>
    </span>
</div>

JS

$scope.treeData = new kendo.data.HierarchicalDataSource(
        {
            data: [
             {
                 text: "My Product",
                 items: [
                     {
                         text: "Building Materials",
                         items: [
                             { text: "Lumber & Composites" },
                             { text: "Molding" },
                             { text: "Drywall" },
                             { text: "Doors" }
                         ]
                     },
                     { text: "Decor" },
                     { text: "Chemicals" },
                     { text: "Hardware" },
                     { text: "Lighting & Fixtures" },
                     { text: "Paint" },
                     { text: "Storage & Organization" },
                     { text: "Window Coverings" },
                 ]
             },
             {
                 text: "Service",
                 items: [
                     { text: "Labor" },
                     { text: "Installation" },
                     { text: "Removal Service" },
                     { text: "Travel" },
                     { text: "Ladder" },
                     { text: "Service Call" },
                 ]
             },
             { text: "Discount" }
            ]
        });

Screen shot for reference:

psyborg.eth · Accepted Answer · 2018-06-11 06:43:01Z

7

+50

I have tested a similar scenario at my side and it worked correctly in my case. Here is my test dojo. Would you please review it and let me know if your scenario is different or if it still doesn't works correctly.

edited Jun 11, 2018 at 6:43

psyborg.eth

3201 gold badge5 silver badges18 bronze badges

answered Jun 4, 2018 at 6:12

Plamen Zdravkov

7485 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Naren Murali · Accepted Answer · 2018-06-04 06:44:25Z

I checked out the documentation for kendo UI treeview, please check it out here also there is a working example of buttons implemented in the same link above.

I tried implementing the example with the code you provided and it seems to work fine, please let me know if this is what you are looking for!

angular.module("KendoDemos", ["kendo.directives"])
  .controller("MyCtrl", function($scope) {
    $scope.treeData = new kendo.data.HierarchicalDataSource({
      data: [{
          text: "My Product",
          items: [{
              text: "Building Materials",
              items: [{
                  text: "Lumber & Composites"
                },
                {
                  text: "Molding"
                },
                {
                  text: "Drywall"
                },
                {
                  text: "Doors"
                }
              ]
            },
            {
              text: "Decor"
            },
            {
              text: "Chemicals"
            },
            {
              text: "Hardware"
            },
            {
              text: "Lighting & Fixtures"
            },
            {
              text: "Paint"
            },
            {
              text: "Storage & Organization"
            },
            {
              text: "Window Coverings"
            },
          ]
        },
        {
          text: "Service",
          items: [{
              text: "Labor"
            },
            {
              text: "Installation"
            },
            {
              text: "Removal Service"
            },
            {
              text: "Travel"
            },
            {
              text: "Ladder"
            },
            {
              text: "Service Call"
            },
          ]
        },
        {
          text: "Discount"
        }
      ]
    });
    $scope.click = function(dataItem) {
      alert(dataItem.text);
    };

    function makeItem() {
      var txt = kendo.toString(new Date(), "HH:mm:ss");
      return {
        text: txt
      };
    };

    $scope.addAfter = function(item) {
      var array = item.parent();
      var index = array.indexOf(item);
      var newItem = makeItem();
      array.splice(index + 1, 0, newItem);
    };

    $scope.addBelow = function($event) {
      $event.stopPropagation();
      // can't get this to work by just modifying the data source
      // therefore we're using tree.append instead.
      var newItem = makeItem();
      $scope.tree.append(newItem, $scope.tree.select());
    };

    $scope.remove = function(item, $event) {
    //  $event.stopPropagation();
      var array = item.parent();
      var index = array.indexOf(item);
      array.splice(index, 1);

      $scope.selectedItem = undefined;
    };
  })

.k-treeview .k-in {
  padding: 5px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<!DOCTYPE html>
<html>

<head>
  <base href="https://demos.telerik.com/kendo-ui/treeview/angular">
  <style>
    html {
      font-size: 14px;
      font-family: Arial, Helvetica, sans-serif;
    }
  </style>
  <title></title>
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common-material.min.css" />
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.material.min.css" />
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.material.mobile.min.css" />

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


</head>

<body>
  <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-on-change="selectedItem = dataItem">
          <span k-template>
                     {{dataItem.text}}
                     
        <i class="fa fa-plus" aria-hidden="true" ng-click="addBelow($event)"></i>
        <i class="fa fa-trash" aria-hidden="true" ng-click="selectedItem=dataItem;remove(selectedItem, $event)"></i>
                 </span>
        </div>
      </div>
      <div class="box-col" ng-show="selectedItem">
        <h4>Selected: {{selectedItem.text}}</h4>
        <button class="k-button" ng-click="addAfter(selectedItem)">Add item below</button>
        <button class="k-button" ng-click="addBelow(selectedItem)">Add child item</button>
        <button class="k-button" ng-click="remove(selectedItem)">Delete</button>
      </div>
    </div>
  </div>


</body>

</html>

Collectives™ on Stack Overflow

Custom buttons on Kendo tree view Angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related