<button>Cacher le bouton contextuel de la grille Kendo UI</button>

Question

Comment puis-je supprimer le bouton Mettre à jour/Annuler sur ma fenêtre modale de modèle kendo? et ajouter mon propre bouton personnalisé?

Démonstration dans Dojo

Answer 1

Pls essayez cela peut vous aider
mais ceci est pour cacher le bouton pour l'utilisateur normal.

var is_editable = false;
    var role = "";

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

    is_editable = true;

    @endif

    édition: {
                mode: "popup",
                allowAdding: is_editable,
                allowDeleting: is_editable,
                allowUpdating: is_editable,
                popup: {
                    title: "Informations de Pointage des Employés",
                    showTitle: true,
                    id: "employees->id",
                    position: {
                        my: "top",
                        at: "top",
                        of: window
                    }
                }
            },

Answer 2

Essayez ceci.

vous pouvez vous abonner à l'événement de modification de la grille. Une fois l'événement déclenché, vous pouvez trouver le bouton dans l'argument e.container et le cacher ou changer son texte en conséquence.

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: "Boissons"} }
              }
            }
          }
        });

        $("#grid").kendoGrid({
          editable: {
            mode:"popup",
            template: $("#template").html()
          },
          dataSource: dataSource,
          pageable: true,
          edit:function(e){

            //// cacher les boutons

            // e.container.find(".k-grid-update").hide();
            // e.container.find(".k-grid-cancel").hide();

            //// Changer le nom des boutons
            e.container.find(".k-grid-update").text("Texte de modification personnalisé");
            e.container.find(".k-grid-cancel").text("Texte d'annulation personnalisé");

            //// Ajouter de nouveaux boutons
             e.container.find(".k-edit-buttons").append(" Mon nouveau bouton")

            $('#categories').kendoDropDownList({
              optionLabel: "Sélectionnez la catégorie...",
              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: "Sélectionnez le produit...",
              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: ["créer"],
          columns: [
            { field:"ProductName",title:"Nom du produit" },
            { field: "Category", title: "Catégorie", width: "160px", template: "#=Category.CategoryName#" },
            { command: ["éditer", "détruire"], title: " ", width: "200px" }]

        });
      })

    Exemple Kendo UI

    #if(data.isNew()) {#
        #var createTemp = kendo.template($("\#createTemplate").html());#
        #=createTemp(data)#
    #} else {#
        #var createTemp = kendo.template($("\#editTemplate").html());#
        #=createTemp(data)#
    #}#

    <input id="categories" style="margin-left:10px">

    <input id="products" style="margin-left:10px">