Usando el Context Menu y botones , click derecho en grid / right click on grid / oracle apex

Al usar click derecho muchas veces tenemos la necesidad de abrir un menu de opciones, el llamado ContextMenu, en este post veremos como capturar primero el click derecho y luego abriremos un menu personalizado, para crear dicho menu personalizado nos apoyaremos del Blog HardLikeSoftware .

Podemos ver la demo en este link, usando credenciales de demo/demo, subMenu ClickDerecho.

Como primer paso necesitamos crear un grid, para esta demo utilizares un Interactive Report, y le asignaremos un id. Para efectos demostrativos veremos como capturar el click de dos formas, asi que creamos otro Interactive Report con un id distinto al primero.

Interactive Report
 ID : id_reporte

Interactive Report 2
 ID : id_reporte_2

Luego capturaremos el evento del click derecho, para esto nos ubicamos en la seccion de
 \”Function and Global Variable Declaration\” colocamos:

 $(document).on(\'contextmenu\',\'#id_reporte tr td\',function(ev){     
$(\"#MenuContext\").menu( \"toggle\", ev.pageX, ev.pageY );
ev.preventDefault();
return false;
});

id_reporte_2_content.addEventListener(\'contextmenu\', function(ev) {
$(\"#MenuContext\").menu( \"toggle\", ev.pageX, ev.pageY );
ev.preventDefault();
return false;
}, false);

Como vemos aqui esta las dos formas de capturar el evento del click derecho en el primero usamos el ID del reporte 1 y el segundo el reporte 2, #MenuContext es el nombre de una region que revisaremos mas adelanteque contiene nuestro menu personalizado.

Agregamos el siguiente codigo en la seecion de \”Execute when Page Loads\”, esto es para la creacion del nuevo menu que se va desplegar, aqui podemos personalizar muchas cosas, como el icono, label, type, accion, podemos revisar mas informacion de esta fuente, un poco mas de informacion sobre el menu HardLikeSoftware.

var menu$ = $(\"
\"
);
$(\"body\").append(menu$);
menu$.menu({
iconType: \"fa\",
items: [
{
type: \"action\",
labelKey:\"Test Button 1\",
icon: \"fa-language \",
action: function(menu, btn) {
$.event.trigger(\'CustomButton1\');
}
},
{
type: \"action\",
labelKey: $v(\"P13_TEST_LABEL\"),
class: \"validate-confirm\",
icon: \"fa-check\",
action: function(menu, btn) {
$.event.trigger(\'CustomButton2\');
},
disabled: function() {
return $v(\"P13_IS_VALIDATED\") == \"N\";
}
}
]
});

Como vemos, hemos creado un div con el id MenuContext, y luego este menu lo agregamos al body, asi mismo he creado dos botones, la diferencia del primero con el segundo es que el Label es dinamico, basado en un Item P13_TEST_LABEL y tiene un atributo de disable, de igual forma referenciando a un item P13_IS_VALIDATED.

item 1
name: P13_TEST_LABEL
type: display only
label: Test label

item 2
name: P13_IS_VALIDATED
type: Switch
label: Habilitar boton 2
custom settings:

Finalmente deberemos tener algo similar a esto:

Espero que les sea de mucha ayuda, cualquier duda en los comentarios.

Published by Angel O. Flores Torres

System engineer, Applications engineer, working with C# and Oracle Apex 5, 5.1 since 2017. I specialize in Oracle APEX (Oracle Application Express )

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: