最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Custom buttons on Kendo tree view Angularjs - Stack Overflow

programmeradmin4浏览0评论

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:

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:

Share Improve this question edited Jun 1, 2018 at 15:52 DobleL 3,9281 gold badge16 silver badges20 bronze badges asked Jun 1, 2018 at 15:36 GoSmashGoSmash 1,1081 gold badge11 silver badges38 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 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.

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./ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<!DOCTYPE html>
<html>

<head>
  <base href="https://demos.telerik./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./2018.2.516/styles/kendo.mon-material.min.css" />
  <link rel="stylesheet" href="https://kendo.cdn.telerik./2018.2.516/styles/kendo.material.min.css" />
  <link rel="stylesheet" href="https://kendo.cdn.telerik./2018.2.516/styles/kendo.material.mobile.min.css" />

  <script src="https://kendo.cdn.telerik./2018.2.516/js/jquery.min.js"></script>
  <script src="https://kendo.cdn.telerik./2018.2.516/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik./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>

发布评论

评论列表(0)

  1. 暂无评论