Quiero utilizar el menú contextual de la interfaz de usuario de Kendo en mi aplicación. Esperaba el comportamiento estándar de que se mostrara texto en el menú, pero se devolvía un valor diferente (una ID o clave) al controlador de eventos de select .
Por ejemplo, el menú muestra una lista de nombres, pero cuando hago clic en uno de ellos, obtengo la identificación asociada con el nombre.
Intenté agregar propiedades adicionales además del text a la matriz de elementos en el menú contextual, pero no los veo en el objeto de evento en el controlador.
No puedo usar el texto para encontrar la identificación adecuada que coincida, ya que podría haber entradas con el mismo texto pero con diferentes identificaciones.
¿Algunas ideas?
Editar:
Actualmente construyo el menú contextual así:
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 }; })); }Si bien esta solución satisface mis necesidades, agrega un elemento adicional al DOM que, aunque es insignificante, no es perfecto...
No está documentado, pero ContextMenu en realidad hereda de Menu . Por lo tanto, todas las opciones de Menu están disponibles. En particular, puede agregar un objeto attr a sus elementos de datos, consulte el ejemplo en la documentación .
Para completar tu ejemplo:
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 } }; })); } Luego, en su controlador de select :
select: (e) => { console.log($(e.item).data('item-key')); }Opción 1) Puede agregar un dato que especificará su Id. Hice esto con mvc wrapper pero también se puede hacer con javascript puro.
@(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") {} ...Opción 2) Puede definir con cada elemento (a través del contenido html) una función que se llamará en cada evento onClick para el elemento específico.
items.Add().Encoded(false).Text("<span onclick='update()'>Update</span>"); items.Add().Encoded(false).Text("<span onclick='delete()'>Delete</span>"); ... <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>