Ajout de données supplémentaires aux éléments du menu contextuel de Kendo UI

Question

Je veux utiliser le menu contextuel de Kendo UI dans mon application. Je m'attendais à ce que le comportement standard soit d'avoir du texte affiché dans le menu lui-même mais qu'une valeur différente (un ID ou une clé) soit retournée à l'utilisateur. select gestionnaire d'événements.

Par exemple, le menu affiche une liste de noms mais lorsque je clique sur l'un d'eux, j'obtiens l'ID associé au nom.

J'ai essayé d'ajouter des propriétés supplémentaires en plus de text au tableau des éléments du menu contextuel, mais je ne les vois pas sur l'objet de l'événement dans le gestionnaire.

Je ne peux pas utiliser le texte pour trouver l'identifiant approprié qui lui correspond, car il pourrait y avoir des entrées avec le même texte mais des identifiants différents.

Des idées ?

Edit :

Actuellement, je construis le menu contextuel comme ceci :

open: (e) => {
    let itemKeys = [1, 2, 3];

    let menu = e.sender;
    menu.remove(".context-menu-item");
    menu.append(itemKeys.map((itemKey) => {
        return {
            text: "<div data-item-key='" + itemKey + "'>Test Text</div>",
            cssClass: "context-menu-item",
            encoded: false
        };
    }));
}

Bien que cette solution réponde à mes besoins, elle ajoute un élément supplémentaire au DOM qui, tout en étant insignifiant, n'est pas parfait...

Answer 1

C'est non documenté, mais ContextMenu hérite en fait de Menu . Par conséquent, toutes les options de Menu sont disponibles. En particulier, vous pouvez ajouter un attr à vos éléments de données, cf. exemple dans la documentation .

Pour compléter votre exemple :

open: (e) => {
    let itemKeys = [1, 2, 3];

    let menu = e.sender;
    menu.remove(".context-menu-item");
    menu.append(itemKeys.map((itemKey) => {
        return {
            text: "Test Text",
            cssClass: "context-menu-item",
            // add whatever attribute
            attr: {
                'data-item-key': itemKey
            }
        };
    }));
}

Ensuite, dans votre select manipulateur :

select: (e) => {
    console.log($(e.item).data('item-key'));
}

Answer 2

Option 1) Vous pouvez ajouter une donnée qui spécifiera votre Id. J'ai fait ceci avec mvc wrapper mais cela peut être fait avec du pur javascript aussi.

@(Html.Kendo()
    .ContextMenu()
    .Name("contextMenuGridTicketTestiMessaggi")
    .Target("#gridTicketTestiMessaggi")
    .Filter("tr")
    .Orientation(ContextMenuOrientation.Vertical)
    .Items(items =>
    {
        items.Add().Text("Update").HtmlAttributes(new { data_toggle = "update" });
        items.Add().Text("Save").HtmlAttributes(new { data_toggle = "save" });
        items.Add().Text("Delete").HtmlAttributes(new { data_toggle = "delete" });
    })
    .Events(e => {
        e.Select("contextMenuGridTicketTestiMessaggiSelect"); 
    }));

    var contextMenuGridTicketTestiMessaggiSelect = function(e) {
        var action = $(e.item).data("toggle");
        var that = this;
        if (action === "update") {}
    ...

Option 2) Vous pouvez définir pour chaque élément (par le biais du contenu html) une fonction à appeler dans chaque événement onClick pour l'élément spécifique.

items.Add().Encoded(false).Text("<span onclick='update()'>Update</span>");
items.Add().Encoded(false).Text("<span onclick='delete()'>Delete</span>");
...

Mise à jour

<div id="target">Target</div>
<ul id="context-menu"></div>
<script>
    $("#context-menu").kendoContextMenu({
        target: "#target",
        open: function(e) {
            let itemKeys = [1, 2, 3];

            let menu = e.sender;                 
            menu.remove(".context-menu-item");
            menu.setOptions({
                dataSource: itemKeys.map((itemKey) => {
                    return {
                        text: "<div data-item-key='" + itemKey + "' style='white-space: nowrap'>Test Text</div>",
                        cssClass: "context-menu-item",
                        encoded: false
                    };
                })
            });
        },
        select: function(e) {
           console.log($($(e.item).find("div")[0]).data("item-key"))                      
        }
    });
</script>