Procedimiento para crear un gráfico de Gantt con JSGrid

Artículo
09/24/2014

Última modificación: martes, 15 de febrero de 2011

Hace referencia a: SharePoint Foundation 2010

En este procedimiento se muestra cómo crear un diagrama de Gantt con Control de JS Grid. En este tema, que es una continuación de Procedimiento para crear un control de JS Grid básico, definirá estilos para las barras estándar, de resumen, hito y porcentaje completo. Cada estilo de barra tiene una forma, un patrón y un color. Cada extremo de barra tiene un estilo, un color y un patrón de extremo de barra. El código que define el estilo de las barras de Gantt estará en el archivo GanttUtilities.cs, que se encontrará en la carpeta GridUtils que se crea en Procedimiento para crear un control de JS Grid básico. Modificará los datos del gráfico para proporcionar datos que demuestren mejor las capacidades del diagrama de Gantt. Finalmente, usará el método enableGantt de GridDataSerializer para habilitar el diagrama de Gantt.

Nota

El equipo debe mostrar distintos nombres o ubicaciones para algunos de los elementos de la interfaz de usuario de Visual Studio en las siguientes instrucciones. La versión de Visual Studio que se tenga instalada y la configuración que se use determinan estos elementos.

Requisitos previos

Microsoft SharePoint Foundation 2010
Microsoft Visual Studio 2010
Herramientas de desarrollo de SharePoint en Microsoft Visual Studio 2010
Finalización de Procedimiento para crear un control de JS Grid básico

Nota

Aunque este procedimiento se puede realizar sin usar Visual Studio 2010, es más fácil si lo usa, junto con las Herramientas de desarrollo de SharePoint en Microsoft Visual Studio 2010.

Para crear los estilos de barras de Gantt

En Visual Studio, abra el proyecto que creó siguiendo las instrucciones que aparecen en Procedimiento para crear un control de JS Grid básico.
Abra GridUtilities.cs.
DefaultGanttBarStyleIdsColumnName almacena la información del identificador de estilo de barra de Gantt predeterminado. No debe usarse DefaultGanttBarStyleIdsColumnName como una columna o un campo. GridUtilities.cs ya incluye el código necesario para evitarlo, pero tiene marcas de comentario.

Quite la marca de comentario de las siguientes líneas:
```
// && iterator.ColumnName != GridSerializer.DefaultGanttBarStyleIdsColumnName 
// Uncomment for the Gantt how-to
```
y también de
```
// && dc.ColumnName != GridSerializer.DefaultGanttBarStyleIdsColumnName 
// Uncomment for Gantt how-to
```
Agregue una referencia a System.Drawing.

En el Explorador de soluciones, haga clic con el botón secundario en Referencias y, a continuación, haga clic en Agregar referencia. En la ficha .NET, seleccione System.Drawing y, a continuación, haga clic en Aceptar. System.Drawing se usa para dibujar las barras y los extremos de las barras.
Cree el archivo GanttUtilities.cs.
1. En el Explorador de soluciones, haga clic con el botón secundario en la carpeta GridUtils, elija Agregar y, a continuación, haga clic en Nuevo elemento.
2. Seleccione Visual C#, seleccione Código y, a continuación, seleccione Archivo de código.
3. Denomine el archivo GanttUtilities.cs.

Copie el siguiente código en el archivo GanttUtilities.cs.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Drawing; // added for Gantt styles
using Microsoft.SharePoint.JSGrid;

namespace JSGridSample.GridUtilityLib
{
    public class GanttUtilities
    {
        public enum CustomBarStyle { Summary, Standard, Milestone, PctComplete }

        public static GanttStyleInfo GetStyleInfo()
        {
            var styleInfoObj = new GanttStyleInfo();

            /*Summary Bar Style*/
            styleInfoObj.AddBarStyle(new GanttBarStyle(
                CustomBarStyle.Summary, BarShape.TopHalf, Color.Gray, BarPattern.Solid,
                BarEndShape.HomePlateDown, Color.Gray, BarShapePattern.Filled,
                BarEndShape.HomePlateDown, Color.Gray, BarShapePattern.Filled,
                "Start Date", "Finish Date", 1));

            /*Standard Bar Style*/
            styleInfoObj.AddBarStyle(new GanttBarStyle(
                CustomBarStyle.Standard, BarShape.Full, Color.Blue, BarPattern.Solid,
                BarEndShape.None, Color.Black, BarShapePattern.Filled,
                BarEndShape.None, Color.Black, BarShapePattern.Filled,
                "Start Date", "Finish Date", 1));

            /*Milestone Bar Style*/
            styleInfoObj.AddBarStyle(new GanttBarStyle(
                CustomBarStyle.Milestone, BarShape.None, Color.Black, BarPattern.Solid,
                BarEndShape.None, Color.Black, BarShapePattern.Filled,
                BarEndShape.Diamond, Color.Black, BarShapePattern.Filled,
                "Finish Date", "Finish Date", 1));

            /*PctComplete Bar Style*/
            styleInfoObj.AddBarStyle(new GanttBarStyle(
                CustomBarStyle.PctComplete, BarShape.MidHalf, Color.Black, BarPattern.Solid,
                BarEndShape.None, Color.Black, BarShapePattern.Filled,
                BarEndShape.None, Color.Black, BarShapePattern.Filled,
                "Start Date", "CompleteThrough", 1));

            return styleInfoObj;
        }
    }
}

La clase GanttStyleInfo define los estilos de barra estándar, de resumen, hito y porcentaje completo.

Para habilitar el diagrama de Gantt

Abra JSGridWebPartUserControl.ascx.cs.
Agregue EnableGantt al método Page_Load.
```
// Point the grid serializer at the grid serializer data.
    _grid.GridDataSerializer = gds;

     // Tell the grid to listen to the GridManager controller.
    _grid.JSControllerClassName = "GridManager";

   // Enable the Gantt chart.
   gds.EnableGantt(DateTime.Now.AddDays(0), DateTime.Now.AddDays(10), GanttUtilities.GetStyleInfo(), null);
```
EnableGantt(DateTime, DateTime, GanttStyleInfo, String) define la fecha en la que comienza y termina una barra de Gantt, dónde encontrar los estilos de barra de Gantt y un nombre de columna de celdas dependientes (ninguno en este caso). Por motivos de simplicidad, las fechas de comienzo y finalización se generan a partir de la fecha actual.

El siguiente paso es modificar los datos de la cuadrícula para asociar los estilos de barra de Gantt a cada fila de datos.

Para modificar el archivo de datos de la cuadrícula

Abra GridData.cs.
El diagrama de Gantt requiere un archivo para almacenar la información del identificador de estilos de barra de Gantt. El código para hacerlo ya está incluido en GridData.cs, pero con marcas de comentario. Quite la marca de comentario de la siguiente línea:
```
//data.Columns.Add(new DataColumn(GridSerializer.DefaultGanttBarStyleIdsColumnName, typeof(GanttUtilities.CustomBarStyle[]))); // uncomment for the Create a Gantt Chart Using JS Grid How-To.
```

Busque el código que asigna fechas aleatorias a las fechas de inicio, completado al y fin.

                dr["Start Date"] = DateTime.Now.AddSeconds(_rand.Next(60 * 60 * 24 * 20));
                dr["Finish Date"] = DateTime.Now.AddSeconds(_rand.Next(60 * 60 * 24 * 20));
                dr["CompleteThrough"] = DateTime.Now.AddSeconds(_rand.Next(60 * 60 * 24 * 20));

Reemplace ese código con lo siguiente.

stDate = DateTime.Now.AddSeconds(_rand.Next(60 * 60 * 24 * 20));
if (i % 10 == 0)
                {
                    parent = curKey;
                    j++;
                    dr["Start Date"] = stDate;
                    dr["Finish Date"] = stDate.AddDays(10);
                    //summary gantt bar style
                    dr[GridSerializer.DefaultGanttBarStyleIdsColumnName] = new GanttUtilities.CustomBarStyle[1] { (GanttUtilities.CustomBarStyle)(0) };

                }
                else if (i % 10 == 5)
                {
                    // Milestone 
                    dr["Start Date"] = stDate;
                    dr["Finish Date"] = dr["Start Date"];//  +DateTime.Now.AddSeconds(_rand.Next(60 * 60 * 24 * 20));
                    // Milestone Gantt bar style
                    dr[GridSerializer.DefaultGanttBarStyleIdsColumnName] = new GanttUtilities.CustomBarStyle[1] { (GanttUtilities.CustomBarStyle)(2) };
                }
                else
                {
                    dr["Start Date"] = stDate.AddDays(i % 4); ;
                    dr["Finish Date"] = stDate.AddDays(i % 10);
                    dr["CompleteThrough"] = stDate.AddDays(1);
                    // Standard Gantt bar style
                    dr[GridSerializer.DefaultGanttBarStyleIdsColumnName] = new GanttUtilities.CustomBarStyle[2] { (GanttUtilities.CustomBarStyle)(1),(GanttUtilities.CustomBarStyle)(3) };
                }

A la primera tarea se le asigna un estilo de tarea de resumen, a la quinta se le asigna un estilo de hito y al resto se le asigna un estilo de barra "estándar".

Los estilos de barra de Gantt se configuran con DefaultGanttBarStyleIdsColumnName. Si se usa más de un estilo de barra, cada estilo de barra se dibuja sobre el estilo de barra anterior, por lo que el orden en que se aplican los estilos de barra es importante. Tenga en cuenta que el estilo de barra estándar se crea al dibujar la barra estándar primero y, a continuación, la barra de completado al. Esto lo determina el orden que tienen los estilos de barra en la matriz de estilos de barra personalizada.

dr[GridSerializer.DefaultGanttBarStyleIdsColumnName] = new GanttUtilities.CustomBarStyle[2] { (GanttUtilities.CustomBarStyle)(1),(GanttUtilities.CustomBarStyle)(3) };

Para probar el elemento web

En Visual Studio, presione F5 para ejecutar el proyecto.

Al ejecutar el proyecto, tiene lugar la implementación y se abre el sitio de SharePoint 2010. El elemento web se agrega automáticamente a la galería de elementos web de SharePoint 2010.
Abra y edite cualquier página de elementos web. Puede agregar el elemento web a cualquier página de elementos web.
Haga clic en Insertar, haga clic en Elemento web y, a continuación, seleccione JSWebPart en la categoría personalizada. Se mostrará el elemento web en la página.
Cuando el diagrama de Gantt aparezca en la ventana del explorador, modifique una de las fechas de comienzo, completo al o de finalización.

El diagrama de Gantt busca cambios en las fechas de comienzo, completado al o de finalización. Si hay un cambio en una de ellas, se vuelve a dibujar la barra.

Vea también

Conceptos

Control de JS Grid

Sugerencias para implementar el control de cuadrícula JS

Compartir a través de