En la entrega anterior inicie con una serie de publicaciones acerca de como personalizar una cuadrícula interactiva.
En esta segunda parte de la serie, les voy a explicar cómo podemos eliminar una, varias o todas las secciones de la barra de herramientas de una cuadrícula interactiva.
Como ya se indicó en la entrega anterior, la barra de herramientas está dividida en siete secciones diferentes, tal y como lo muestra la imagen a continuación.
Para eliminar una o varias de las secciones de la barra de herramientas de una cuadrícula interactiva, e incluso todas ellas, vamos a utilizar una función de javascript que vamos a agregar en los atributos de dicha cuadrícula. Para hacer esto debemos:
- Abrir la página que contiene la cuadrícula interactiva.
- Seleccionar la región de cuadrícula interactiva, ya sea en la lista de componentes o en la vista de diseño de la página.
- Hacer clic en la pestaña Atributos, en el paño de propiedades en la columna derecha del diseñador de páginas.
- En la sección Avanzada, en Función de Inicialización JavaScript, agregar el código de la función que elimina la o las secciones.
Veamos el siguiente código:
|
1 2 3 4 5 6 7 8 |
function(config) { let $ = apex.jQuery, toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(); toolbarGroup = toolbarData.toolbarRemove("search"); config.toolbarData = toolbarData; return config; } |
En las línea 2 y 3 del código, las primeras dentro de la función Javascript, obtenemos la configuración de la barra de herramientas actual de la cuadrícula interactiva.
La línea 4, remueve la sección “search” de la barra de herramientas.
La línea 6, define la nueva configuración de la barra de herramientas, la cual retornamos en la línea 7.
El resultado, lo podemos observar en la siguiente imagen.
Ahora bien, si queremos eliminar más de una sección, debemos agregar a la función una línea similar a la línea 4 de la función, en la que indicamos que sección queremos eliminar.
Recuerden que los nombres de las secciones son: search, reports, views, actions1, actions2, actions3 y actions4.
Es importante que noten, que en Javascript existe una diferenciación entre minúsculas y mayúsculas, por lo que se debe tener cuidado a la hora de proporcionar los nombres indicados, pues no es lo mismo search, que Search o SEARCH.
En el código que les dejo a continuación, estariamos eliminando todas las secciones de la barra de herramiemtas.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function(config) { let $ = apex.jQuery, toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(); toolbarGroup = toolbarData.toolbarRemove("search"); toolbarGroup = toolbarData.toolbarRemove("reports"); toolbarGroup = toolbarData.toolbarRemove("views"); toolbarGroup = toolbarData.toolbarRemove("actions1"); toolbarGroup = toolbarData.toolbarRemove("actions2"); toolbarGroup = toolbarData.toolbarRemove("actions3"); toolbarGroup = toolbarData.toolbarRemove("actions4"); config.toolbarData = toolbarData; return config; } |
Puedes encontrar más tips de personalización en próximas entregas, o ver la entrega inicial:
- Cómo agregar botones personalizados.
- Cómo cambiar la etiqueta de los botones desplegados
- Cómo agregar nuevas opciones al menú de acciones.
- Cómo agrear un menú personalizado de acciones por línea.
