如何让剑道树列表命令换行到按钮中？

Question

我是 Kendo UI 的新手。我有树列表。我需要有关创建 3 点按钮的帮助，单击后将显示 3 个按钮“添加子项”、“编辑”、“删除”。我已经实现了 3 点按钮，但是当我点击添加子项或编辑时，它没有显示“更新”和“取消”按钮。

当点击添加孩子时，它应该显示更新和取消下一个新行，而编辑显示在当前行中。当我使用我已经评论过的命令代码时，这会起作用。请帮忙。谢谢。

{
            headerAttributes: {
              style: " border-width: 0 0 1px 0;"
          },
          attributes: {
              "class": "cell_live",
          
          },
            title: "Actions",
            template: function(dataItem) {

              return (
                '<div class="actions-container">' +
            '<button class="actions-toggle">...</button>' +
            '<div class="actions-buttons" style="display:none">' +
                '<button class="btn-add k-button k-grid-createChild" data-uid="' + dataItem.uid + '"><span class="k-icon k-i-add"></span>Add child</button>' +
                '<button class="btn-edit k-button k-grid-edit" data-uid="' + dataItem.uid + '"><span class="k-icon k-i-edit"></span>Edit</button>' +
                '<button class="btn-delete k-button k-grid-delete" data-uid="' + dataItem.uid + '"><span class="k-icon k-i-delete"></span>Delete</button>' +
            '</div>' +
        '</div>'
              );
            
            },
            // command: [
            //   {
            //     name: 'createChild', text: "Add child", imageClass: "k-i-add", className:"btn-add"
            //   },
            //   {
            //     name: "edit", text: "Edit", className:"btn-default"
            //   },
            //   {
            //     name: 'delete', text: "Delete", imageClass: "k-i-delete", className: "btn-default",
            //     click(e) {

            //       // prevent page scroll position change
            //       e.preventDefault();
            //       // e.target is the DOM element representing the button
            //       var tr = $(e.target).closest("tr"); // get the current table row (tr)
            //       // get the data bound to the current table row
            //       var data = this.dataItem(tr);
            //       // delete the layer by code
            //       $scope.deleteLayer(data.code);
            //       $scope.refreshTreeList();
            //     }
            //   },
            // ]
          
          }

 $(document).on("click", ".actions-toggle", function () {
        $(this).siblings(".actions-buttons").toggle();
    });
    

      $(document).on("click", ".btn-add", function () {
        var uid = $(this).data("uid");
        var dataItem = treelist.dataSource.getByUid(uid);
        treelist.addRow(dataItem);

    });

    
    $(document).on("click", ".btn-edit", function () {
        var uid = $(this).data("uid");
        var dataItem = treelist.dataSource.getByUid(uid);
        treelist.editRow(dataItem);
    });
    
    $(document).on("click", ".btn-delete", function () {
        var uid = $(this).data("uid");
        var dataItem = treelist.dataSource.getByUid(uid);
        
        $scope.deleteLayer(dataItem.code);
        $scope.refreshTreeList();
    });