CODEWITHSUNDEEP
jquerykendo-uikendo-grid
Nixoderm
Nixoderm

Reputation: 355

kendo ui grid popup hide button

How do I remove Update / Cancel button on my kendo template popup? and add my own custom button?

Demo in Dojo

Upvotes: 2

Views: 1876

Answers (2)

i.signori
i.signori

Reputation: 595

Try this .

you can subscribe to the Grid's edit event handler. Once the event is triggered you can find the button in the e.container argument and either hide it or change its text accordingly.

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>

Upvotes: 1

Uddyan Semwal
Uddyan Semwal

Reputation: 754

pls try this may help you
but this is for hiding button for nOrmal user.

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
                    }
                }
            },

Upvotes: 1

Related Questions