Question

如何删除Kendo模板弹出窗口上的Update / Cancel按钮？并添加我自己的自定义按钮？

Answer 1

请尝试这样做可能对您有帮助
但这是为nOrmal用户隐藏按钮。

var is_editable = false;
    var role = "<?php echo setting('admin.Admin_role_id') ?>";

    @if(Auth::user()->role_id == setting('admin.Admin_role_id', 1))

    is_editable = true;

    @endif

    editing: {
                mode: "popup",
                allowAdding: is_editable,
                allowDeleting: is_editable,
                allowUpdating: is_editable,
                popup: {
                    title: "Employee Attendance  Information",
                    showTitle: true,
                    id: "employees->id",
                    position: {
                        my: "top",
                        at: "top",
                        of: window
                    }
                }
            },

Answer 2

尝试this。

您可以订阅Grid的edit事件处理程序。一旦事件发生触发后，您可以在e.container参数中找到该按钮，然后隐藏它或相应地更改其文本。

REF

 $(document).ready(function(){
        var dataSource = new kendo.data.DataSource({
          pageSize: 5,
          data: products,
          autoSync: true,
          schema: {
            model: {
              id: "ProductID",
              fields: {
                ProductID: { editable: false, nullable: true },
                ProductName: { validation: { required: true } },
                Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages"} }
              }
            }
          }
        });

        $("#grid").kendoGrid({
          editable: {
            mode:"popup",
            template: $("#template").html()
          },
          dataSource: dataSource,
          pageable: true,
          edit:function(e){
            
            //// hide the buttons
            
            // e.container.find(".k-grid-update").hide();
            // e.container.find(".k-grid-cancel").hide();
            
            //// Change the name of the buttons
            e.container.find(".k-grid-update").text("Custom Edit Text");
            e.container.find(".k-grid-cancel").text("Custom Cancel Text");
            
            //// Add new buttons
             e.container.find(".k-edit-buttons").append(" <button class='k-button'>My New Button</button>")
            
            $('#categories').kendoDropDownList({
              optionLabel: "Select category...",
              dataTextField: "CategoryName",
              dataValueField: "CategoryID",
              change: function(){
                e.model.Category.CategoryName=this.text();
                e.model.ProductID = e.sender.dataSource.data().length;
              },
              dataSource: {
                type: "odata",
                serverFiltering: true,
                transport: {
                  read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
                }
              }
            });
            
            $("#products").kendoDropDownList({
              autoBind: false,
              cascadeFrom: "categories",
              optionLabel: "Select product...",
              dataTextField: "ProductName",
              dataValueField: "ProductID",
              change: function(){
                e.model.ProductName = this.text();
              },
              dataSource: {
                type: "odata",
                serverFiltering: true,
                transport: {
                  read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
                }
              }
            });
          },
          toolbar: ["create"],
          columns: [
            { field:"ProductName",title:"Product Name" },
            { field: "Category", title: "Category", width: "160px", template: "#=Category.CategoryName#" },
            { command: ["edit", "destroy"], title: "&nbsp;", width: "200px" }]

        });
      })

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
</head>
<body>
  
    <script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
    <div id="grid"></div>

    <script type="text/x-kendo-template" id="template">
    #if(data.isNew()) {#
        #var createTemp = kendo.template($("\#createTemplate").html());#
        #=createTemp(data)#
    #} else {#
        #var createTemp = kendo.template($("\#editTemplate").html());#
        #=createTemp(data)#
    #}#
    </script>
    <script type="text/x-kendo-template" id="createTemplate">
    <input id="categories" style="margin-left:10px">
    </script>
    <script type="text/x-kendo-template" id="editTemplate">
    <input id="products" style="margin-left:10px">
    </script>
    <script>

    </script>
</body>
</html>

kendo ui网格弹出隐藏按钮

2 个答案: