Si no tenemos previsto editar la columna de la grilla, podemos utilizar la columna de tipo Expresión HTML del IG.
Y en HTML introducimos:
<pre>&NOMBRE_COLUMNA.</pre>
El problema aqui es que la columna deja de ser editable y otro problema es que se descuadra la altura de las filas del IG como podemos ver en el ejemplo:
Si necesitamos editar la columna HTML, lo que podemos hacer es utilizar la opción de columna avanzada cellTemplate.
Por ejemplo tenemos la columna NOTES de tipo textarea. Y para este demo voy a ingresar el siguiente texto:
Linea 1.
Linea 2.
Linea 3.
Linea 4.
Al momento de guardar vemos que la columna muestra el texto sin el salto de linea: Linea 1. Linea 2. Linea 3. Linea 4.
Para poder ver el texto como lo ingresamos, editamos la columna y primero establecemos un identificador estático, por ejemplo COL_NOTES.
Luego, en la sección avanzada de los atributos de la columna, en la sección Javascript Initialization Code ingresamos el siguiente código:
function(config) {
config.defaultGridColumnOptions = {
cellTemplate: '&NOTES.'
};
return config;
}
Donde &NOTES. es el nombre de la columna.
Luego ingresamos el siguiente código CSS en los atributos de la página en la seccion Inline.
#COL_NOTES .a-GV-cell {
height: 80px;
}
.wrap-cell {
max-height: 64px;
white-space: pre-line;
overflow: hidden;
}
Guardamos los cambios.
Ahora podemos ver que se muestran las lineas una debajo de la otra respectando el salto de página.
Para entender mas sobre el ancho de columnas en los reportes interactivos y especialmente en la Grilla Interactiva te pido leas este fabuloso artículo “Interactive Grid column widths” de John Snyders.
Nota: Si no necesitamos las columnas APEX$ROW_SELECTOR y APEX$ROW_ACTION las podemos ocultar ingresando el siguiente código CSS.
#static_id .a-GV-table td, #static_id .a-GV-table th {
overflow: visible;
overflow-wrap: break-word;
text-overflow: ellipsis;
white-space: normal;
}
Donde static_id sera el identificador estático de la grilla interactiva.
Será hasta la próxima!