Kendo grid, changer le texte sur le bouton d'édition

Question

J'ai un tableau kendo qui ressemble un peu à ceci (code édité pour plus de clarté):

    var gridList = $('##listBo').kendoGrid({

        ...

        columns: [
            ...
            {
                command: "edit"
                , title: 'Edit' // Besoin de rendre ce texte conditionnel
                , width: 91
            }
        ]

        ...

        , editable: {
                mode: "popup"
                , template: $("##addEditPopup").html()
                , window: {
                open: loadJSOnWindowLaunch 
                , title: "Demande de réservation"
            }
            }
        , dataBound: function(e) {
            dataBoundFunction();
        }

    }).data("kendoGrid");

J'ai besoin que le bouton dise 'Edit' dans certaines circonstances et 'View' dans d'autres, en fonction des valeurs dans la source de données.

Comment puis-je le faire au mieux?

Answer 1

Une approche simple pour gérer cette situation est de créer une colonne de commande personnalisée et ensuite d'utiliser l'option template pour afficher le bouton de la colonne selon votre condition.

Essayez comme ceci :

$("#grid").kendoGrid({
                    dataSource: dataSource,
                    pageable: true,
                    height: 550,
                    toolbar: ["create"],
                    columns: [
                        { field:"ProductName", title: "Nom du produit" },
                        { field: "UnitPrice", title:"Prix unitaire", format: "{0:c}", width: "120px" },
                        { field: "UnitsInStock", title:"Unités en stock", width: "120px" },
                        { field: "Discontinued", width: "120px" },
                        { template: comandTemplate }],
                    editable: "popup"
                });
            });
            // afficher le bouton de la colonne de commande en fonction de la condition
            function comandTemplate(model){
                // ici j'utilise l'attribut Discontinued du modèle de données pour afficher
                // le bouton de détail ou le bouton d'édition
                if(model.Discontinued==0)
                {
                    return 'Editer';
                }
                else
                {
                    return 'Voir les détails';
                }
            }
            // Action personnalisée si le bouton de détail est cliqué
            function viewDetailsAction()
            {
                alert("Votre action personnalisée pour afficher les détails");
            }

Voici un exemple fonctionnel http://dojo.telerik.com/AdAKO

J'espère que cela vous aidera.

Answer 2

Vous avez juste besoin d'ajouter une colonne personnalisée dans les colonnes comme ceci

{ 
   template: "# if (property == true) { # Modifier # } else { #
   Voir # } #", width: "150px"
}

• où "property" est un champ qui sera utilisé comme champ de condition pour afficher différents boutons.

J'espère que cela fonctionnera pour vous. (Pouce levé)