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: