1.10 Configuración del Gantt

Con todas las clases funcionando y un Gantt mostrándonos datos tal vez lo ideal ahora sería arreglar un poco la estética y tocar alguna configuración.

Ahora el Gantt se muestra como se ve en la imagen:

Lo primero que deberíais hacer es revisar cada uno de los checkbox para saber si os interesa que se pueda modificar la escala de tiempos, permitir los eventos tooltipText, etc...

Empezaremos modificando los colores del diagrama. Éste es la parte donde se muestran los nodos.

Ahora mismo tenemos de color de fondo el blanco y para las líneas alternas el gris.

Para modificar el color tan solo debemos presionar en la flecha que nos desplegará los colores básicos; en caso de querer seleccionar un color personalizado únicamente deberemos presionar sobre More Color.

Al final he seleccionado estos colores.

Al situarnos sobre un nodo se marca con el color definido el la propiedad Selected row background color.

En la pestaña Object es importante indicarle si queremos que los campos sean modificables o si se deben ocultar.

¿Para qué nos sirve esto? En caso de que no hayamos sobrescrito el menú emergente en la tabla se nos mostrará una opción en la que podremos modificar los datos o incluso en la misma tabla.

El  Gantt no valida nada, así que si modificáis algo os deberéis crear métodos que validen los datos en las clases.

Otro aspecto a modificar son las capas/nodos, ahora mismo tenemos una estética grisácea vamos a darle un poco de alegría.

Si os preguntáis porque aparece una línea partiendo el nodo es para que os hagáis una idea de como quedará el nodo en caso de que quede partido porque en la mitad se encuentra un período en el que horario de trabajo esta cerrado (nonworkingtime)

Con este ejemplo lo comprenderéis mejor.

El último nodo se encuentra partido porque desde su fecha inicial a su final se encuentra un período de trabajo cerrado.

Para acceder a las propiedades de los nodos presionaremos sobre los puntos.

 Entre las posibles modifcaciones para los nodes está su forma.

Le podemos indicar un patrón para el color.

Y asignar colores. Si éstos son distintos sólo funcionará en caso de que tenga algún patrón asignado.

Aquí tenemos un ejemplo de como podría quedar:

Otra de las posibles opciones es el efecto 3D que nos dará relieve a la capa, y uno muy importante que es el Changeable, esto significa si permitimos modificar la capa.

Tal y como esta ahora nos dejara modificar(cambiar de tamaño) la capa por ambos lados.

Tal como está configurado en la imagen, ahora mismo nos permite desplazar el nodo a la derecha o a la izquierda, incluso ajustar su tamaño por ambos lados.

Si por ejemplo lo tuviéramos como se observa en la siguiente imagen, la capa solo se podría mover de derecha a izquierda pero no ajustar su tamaño.

En el botón Format podemos ver las opciones para agregar un texto a nuestra capa, y con los checks adaptar el texto según nuestro interés.

Tenemos la posibilidad de seleccionar un campo de nuestra tabla o un texto constante, además de poder indicarle su alineamiento , color o tipo de letra.

El resultado final sería algo así.

Modificando la tabla, para eso nos iremos a la pestaña Obejcts > Tables y presionaremos sobre los puntos para acceder a las propiedades.

Desde estas pantallas podremos indicarle si queremos líneas verticales/horizontales (outer separation Lines/Inner separation lines), seleccionar un color para la línea ,  darle un efecto de relieve a la tabla, o que se muestre el desplegable para los grupos  de lo que hablaremos más adelante.

Imaginad que tuviéramos 10 líneas que configurar; bien pues seleccionando una columna y presionando el botón de la derecha esta propiedad se copiaría a todas las filas.

Modificaremos los colores y fuentes para las dos filas.

Poco a poco nuestro formulario va tomando un diseño más bonito.

Bien el siguiente paso es la escala de tiempos.

Con todo esto ahora nuestro Gantt tendrá este aspecto.

Podemos crear líneas para fechas específicas o las más típica para indicar la fecha actual.

Para crear la línea deberemos irnos al botón Date Lines, le daremos un nombre y marcaremos la casilla de Visible al igual que la de Today para que la línea se sitúe en el momento actual de tiempo.

Entrando en la configuración avanzada podremos ver que podemos cambiar el tipo de línea, grosor o el color, así como asignarle un texto e indicarle la posición.

Este será el resultado un final, una línea para el actual tiempo.

Por último deberíamos revisar los checks de la pestaña nodes para asegurarneos de que las opciones marcadas son las que queremos, entre ellas, están la de la posibilidad de crear nodos o permitir mover los nodos entre filas.