繁体   English   中英

剑道ui网格弹出隐藏按钮

[英]kendo ui grid popup hide button

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

Dojo 中的演示

请试试这可能对你有帮助
但这是为 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
                    }
                }
            },

试试这个

您可以订阅网格的编辑事件处理程序。 事件触发后,您可以在 e.container 参数中找到按钮,然后将其隐藏或相应地更改其文本。

参考文献

 $(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>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM