Procedimiento para crear una cuadrícula jerárquica
Última modificación: jueves, 16 de junio de 2011
Hace referencia a: SharePoint Foundation 2010
En este procedimiento se muestra cómo crear un Control de JS Grid jerárquico. Se basa en el proyecto finalizado en Procedimiento para crear un control de JS Grid básico.
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 usar Visual Studio 2010 y las Herramientas de desarrollo de SharePoint en Microsoft Visual Studio 2010.
Creación de una cuadrícula jerárquica
Cree una cuadrícula jerárquica llamando a EnableHierarchy(DataTable, String, String, Boolean). El método requiere una columna de clave primaria y una columna de texto de esquema. La columna de clave primaria y la columna de texto de esquema ya se han incluido en los archivos de GridData.cs y GridUtilities.cs creados en Procedimiento para crear un control de JS Grid básico; solo es necesario habilitar la jerarquía.
Para crear una cuadrícula jerárquica
En las Herramientas de desarrollo de SharePoint en Microsoft Visual Studio 2010, abra el proyecto JSGrid creado siguiendo los pasos descritos en Procedimiento para crear un control de JS Grid básico.
Abra JSGridWebPartUserControl.ascx.cs.
En el método Page_Load, inmediatamente después de definir el controlador de la cuadrícula, habilite la jerarquía usando EnableHierarchy(DataTable, String, String, Boolean).
_grid.JSControllerClassName = "GanttManager"; gds.EnableHierarchy(null, "HierarchyParentKey", "Title", false);
El primer argumento, si no es null, define una tabla de datos sin filtrar. El segundo argumento es la columna de clave primaria de la jerarquía, HierarchyParentKey, definida en GridData.cs. El tercer parámetro indica la columna que muestra el indicador de jerarquía. (En nuestro caso, es la columna Title, que también se define en GridData.cs). El último parámetro, si es true, indica que se debe pasar la tabla de datos al cliente. Por motivos de simplicidad, en este ejemplo no se usa una tabla de datos sin filtrar.
Repase las definiciones de HierarchyParentKey y Title en GridUtilities.cs.
Abra GridUtilities.cs.
En GridUtilities.cs, la HierarchyParentKey no debería estar visible. Recuerde que las columnas están visibles mientras que los campos no lo están, que es la razón por la que en GridUtilities.cs nos aseguramos de que HierarchyParentKey no está visible.
if (iterator.ColumnName != "Key" && iterator.ColumnName != GridSerializer.DefaultGridRowStyleIdColumnName && iterator.ColumnName != "HierarchyParentKey" && iterator.ColumnName.Substring(0, 5) != "costq" && iterator.ColumnName.Substring(0, 5) != "Quart")
Abra GridData.cs para repasar las definiciones de HierarchyParentKey y Title en GridData.cs.
Las columnas Title y HierarchyParentKey se agregan al método DataTable.
data.Columns.Add(new DataColumn("HierarchyParentKey", typeof(Guid))); // Hierarchial Grid data.Columns.Add(new DataColumn("Title", typeof(string)));
En el método DataTable, observe el código que rellena la columna HierarchyParentKey y la columna de Title con datos.
// used for the hierarchy grid how-to. dr["Key"] = curKey; if (i % 10 == 0) { parent = curKey; j++; } if (parent.HasValue) { dr["HierarchyParentKey"] = parent.Value; } if (parent == null) { parent = curKey; } dr["Tasks"] = "Task " + j + "." + i % 10;
En este ejemplo, el operador de módulo se usa para crear 10 tareas secundarias para cada tarea principal. Los números de las tareas, por ejemplo 1.1, 1.2 y 1.3, se almacenan en la columna Title.
Las listas completas de GridData.cs y GridUtilities.cs se pueden encontrar en Procedimiento para crear un control de JS Grid básico.
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.