Procedimiento para crear un control de JS Grid básico

  • Artículo

Última modificación: martes, 21 de junio de 2011

Hace referencia a: SharePoint Foundation 2010

En este tema se demuestra cómo crear un control de cuadrícula básico mediante el Control de JS Grid y Microsoft Visual Studio 2010.

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.

Este ejemplo usa un elemento web visual; el elemento web visual habilita la vista Diseño para el control .ascx y también permite crear propiedades del elemento web simples sin tener que crear un EditorPart.

Para presentar el Control de JS Grid, es necesario proporcionar algunos datos de ejemplo. Los datos de ejemplo se encuentran en GridData.cs. El código para analizar los datos se encuentra en el archivo GridUtilities.cs. Ambos archivos están almacenados en la carpeta GridUtils. Si bien el archivo de datos y el archivo de utilidades son más amplios de lo necesario para crear el control de cuadrícula básico, contienen características que se usan en temas posteriores.

Requisitos previos

  • Microsoft SharePoint Foundation 2010

  • Microsoft Visual Studio 2010

  • Herramientas de desarrollo de SharePoint en Microsoft Visual Studio 2010

Nota

Aunque puede completar este procedimiento sin usar Visual Studio, es más fácil si usa Visual Studio 2010 y Herramientas de desarrollo de SharePoint en Visual Studio 2010.

Para crear un proyecto de SharePoint vacío

  1. Inicie Visual Studio 2010 mediante la opción Ejecutar como administrador.

  2. En el menú Archivo, seleccione Nuevo y, a continuación, Proyecto.

  3. En el cuadro de diálogo Nuevo proyecto, expanda el nodo Visual C#, expanda SharePoint y, a continuación, seleccione el nodo 2010.

  4. En el panel Plantillas, seleccione Proyecto de SharePoint vacío, asigne el nombre JSGrid a la solución y, a continuación, haga clic en Aceptar. Aparecerá el Asistente para la personalización de SharePoint. Este asistente le permitirá seleccionar el sitio que usará para depurar el proyecto y el nivel de confianza de la solución.

  5. En el Asistente para la personalización de SharePoint, seleccione Implementar como solución de granja de servidores y, a continuación, haga clic en Finalizar para aceptar el sitio de SharePoint local predeterminado.

    Nota

    Todos los elementos web deben ser una solución de conjunto o granja de servidores (de plena confianza).

Para agregar un elemento web al proyecto

  1. En el Explorador de soluciones, haga clic con el botón secundario en la solución, elija Agregar y, a continuación, seleccione Nuevo elemento.

  2. En el cuadro de diálogo Agregar nuevo elemento, expanda el nodo SharePoint y, a continuación, seleccione 2010.

  3. En el nodo 2010, seleccione Elemento web visual, denomine al elemento JSGridWebPart y haga clic en Agregar. El elemento web aparecerá en el Explorador de soluciones. Esta acción generará las referencias de biblioteca y, en este ejemplo, JSGridWebPart.cs.

Para agregar el control de JSGrid

  • Para inicializar el control, pegue el código siguiente en JSGridWebPartUserControl.ascx.

    <SharePoint:JSGrid ID="_grid" runat="server" /> 
<script type="text/javascript">
    Type.registerNamespace("GridManager");
    GridManager = function () {
        this.Init = function (jsGridControl, initialData, props) {
            var dataSource = new SP.JsGrid.StaticDataSource(initialData);
            var jsGridParams = dataSource.InitJsGridParams();
            jsGridControl.Init(jsGridParams);
            jsGridParams.styleManager.RegisterCellStyle('TextRightAlign', SP.JsGrid.Style.CreateStyle(SP.JsGrid.Style.Type.Cell, { textAlign: 'right' }));
            jsGridControl.Init(jsGridParams);

        }
    };
</script>

    La primera línea describe el Control de JS Grid. El script de las siguientes líneas registra el administrador de cuadrículas, el origen de datos y un estilo de alineación a la derecha, además de administrar las tareas de inicialización.

Nota

Al agregar un elemento web a una página de SharePoint 2010, los elementos web se muestran en grupos. El grupo en el que se muestra un elemento web se controla mediante el nombre de Group Property en el archivo Elements.xml. De manera predeterminada, el grupo se establece en "Custom". Puede crear un grupo personalizado mediante el cambio de Group Property. Por ejemplo, para crear un grupo Finance, establezca el valor en "Finance" (<Property Name="Group" Value="Finance" />).

Para agregar el código de utilidades de la cuadrícula

  1. En el Explorador de soluciones, haga clic con el botón secundario en el nombre de la solución, elija Agregar y, a continuación, haga clic en Nueva carpeta. Denomine a la carpeta GridUtils.

  2. 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 Nuevos elementos. Seleccione Visual C#, Código y, a continuación, Archivo de código. Denomine al archivo GridUtilities.cs.

  3. Repita el paso anterior para crear el archivo GridData.cs.

  4. Copie el contenido de GridUtilities.cs y GridData.cs, mostrados en los siguientes ejemplos, en sus respectivos archivos de la carpeta GridUtils.

    GridUtilities.cs

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Data;
using Microsoft.SharePoint.JSGrid;
using Microsoft.SharePoint;

namespace JSGridSample.GridUtilityLib
{
    public static class GridUtilities
    {
        public static IList<GridColumn> GetGridColumns(DataTable table)
        {
            List<GridColumn> r = new List<GridColumn>();
            foreach (DataColumn iterator in table.Columns)
            {
                /* Columns are visible in the grid; we don't want these
                   as grid columns. */
                // HierarchyParentKey is used in the how to: Create a Hierarchy Grid topic.

                if (iterator.ColumnName != "Key" 
                        && iterator.ColumnName != GridSerializer.DefaultGridRowStyleIdColumnName
                        //&& iterator.ColumnName != GridSerializer.DefaultGanttBarStyleIdsColumnName 

                        // uncomment for the Create a Gantt Chart Using JS Grid how-to.
                        && iterator.ColumnName != "HierarchyParentKey"

                        // The costq and Quart fields are used in the Create a Pivot Chart Using JS Grid how-to.
                        && iterator.ColumnName.Substring(0, 5) != "costq"
                        && iterator.ColumnName.Substring(0, 5) != "Quart")
                {
                    GridColumn col = new GridColumn();
                    // Point the column at a fieldKey name.
                    col.FieldKey = iterator.ColumnName;
                    // Give the column header a name.
                    col.Name = iterator.ColumnName;
                    // Define the column width.
                    col.Width = 210;

                    // Define column settings.
                    if (iterator.ColumnName == "Department")
                    {
                        col.IsHidable = false;
                    }
                    if (iterator.ColumnName == "Yearly Estimate")
                    {
                        col.IsSortable = true;
                    }

                    // Add the column.
                    r.Add(col);
                }
            }
            return r;
        }

        public static IList<GridField> GetGridFields(DataTable table)
        {
            List<GridField> r = new List<GridField>();

            foreach (DataColumn iterator in table.Columns)
            {
                GridField field = new GridField();
                field = formatGridField(field, iterator);

                r.Add(field);
            }
            return r;
        }

        /** This code matches the propType of the incoming column with the 
            outgoing grid field. HierarchyParentKey is used in the Hierarchy how to. **/
        public static GridField formatGridField(GridField gf, DataColumn dc)
        {
            // Set field key name.
            gf.FieldKey = dc.ColumnName;
            // When in doubt, serialize the data value.
            gf.SerializeDataValue = true;
            if (dc.ColumnName != "Key" 
               && dc.ColumnName != GridSerializer.DefaultGridRowStyleIdColumnName
               // Uncomment for the Create a Gantt Chart Using JS Grid how-to.
               // && dc.ColumnName != GridSerializer.DefaultGanttBarStyleIdsColumnName  
               && dc.ColumnName != "HierarchyParentKey")
            {
                // Determine whether the field is timephased.
                if (dc.ColumnName.Substring(0, 5) == "costq")
                {
                }
                if (dc.ColumnName.Substring(0, 5) == "Quarter")
                {
                    /* Ensure that the timephased column headers are
                       always read-only despite the grid settings. */
                    gf.EditMode = EditMode.ReadOnly;
                }

                // Add properties based on the type.
                if (dc.DataType == typeof(String))
                {
                    gf.PropertyTypeId = "String";
                    /* The Localizer determines how we render the 
                       underlying data on screen. */
                    gf.Localizer = (ValueLocalizer)delegate(DataRow row, object toConvert)
                    {
                        return toConvert == null ? "" : toConvert.ToString();
                    };
                    /* The Serialization type is a required property. */
                    gf.SerializeLocalizedValue = true;
                    gf.SerializeDataValue = false;
                }
                else if (dc.DataType == typeof(Int16)
                    || dc.DataType == typeof(Int32) 
                    || dc.DataType == typeof(Int64)
                    || dc.DataType == typeof(Decimal)
                    || dc.DataType == typeof(Double))

                {
                    gf.PropertyTypeId = "JSNumber";
                    /* The Localizer determines how we render the 
                       underlying data on screen. */
                    gf.Localizer = (ValueLocalizer)delegate(DataRow row, object toConvert)
                    {
                        return toConvert == null ? "" : toConvert.ToString();
                    };
                    // Right align numeric columns
                    gf.DefaultCellStyleId = "TextRightAlign";

                    /* The Serialization type is a required property. */
                    gf.SerializeLocalizedValue = true;
                    gf.SerializeDataValue = false;
                }
                else if (dc.DataType == typeof(Hyperlink))
                {
                    gf.PropertyTypeId = "Hyperlink";
                    gf.Localizer = (ValueLocalizer)delegate(DataRow row, object toConvert)
                    {
                        return toConvert == null ? "" : toConvert.ToString();
                    };
                    gf.SerializeLocalizedValue = false;
                    gf.SerializeDataValue = true;
                }
                else if (dc.DataType == typeof(bool))
                {
                    gf.PropertyTypeId = "CheckBoxBoolean";
                    gf.SerializeDataValue = true;
                    gf.SerializeLocalizedValue = false;
                }
                else if (dc.DataType == typeof(DateTime))
                {
                    gf.PropertyTypeId = "JSDateTime";
                    gf.Localizer = (ValueLocalizer)delegate(DataRow row, object toConvert)
                    {
                        return toConvert == null ? "" : toConvert.ToString();
                    };
                    gf.SerializeDataValue = true;
                    gf.SerializeLocalizedValue = true;
                }
                else
                    throw new Exception("No PropTypeId defined for this datatype" + dc.DataType);
            }
            return gf;
        }
    }
}

    GridData.cs

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Data;
using System.Web.UI.WebControls;
using Microsoft.SharePoint.JSGrid;

namespace JSGridSample.GridUtilityLib
{
    public class GridData
    {
        /**
         * This method returns a Basic data table with a 'Key' column
         * and sample column of various types.
         * @param numRows is the number of rows of data to create.
         * */
        Random _rand = new Random();
        public virtual DataTable Data(int numRows)
        {
            // Create and initialize the data table.
            DataTable data = new DataTable();
            data = new DataTable();
            data.Locale = System.Globalization.CultureInfo.InvariantCulture;


            // Add the columns that we care about.
            data.Columns.Add(new DataColumn("Key", typeof(Guid)));
            data.Columns.Add(new DataColumn(GridSerializer.DefaultGridRowStyleIdColumnName, typeof(String)));
            data.Columns.Add(new DataColumn("HierarchyParentKey", typeof(Guid)));
            data.Columns.Add(new DataColumn("Title", typeof(string)));
            data.Columns.Add(new DataColumn("Department Manager", typeof(string)));
            data.Columns.Add(new DataColumn("Department", typeof(string)));
            data.Columns.Add(new DataColumn("Start Date", typeof(DateTime)));
            data.Columns.Add(new DataColumn("Finish Date", typeof(DateTime)));
            data.Columns.Add(new DataColumn("CompleteThrough", typeof(DateTime)));
            data.Columns.Add(new DataColumn("Yearly Estimate", typeof(int)));
            data.Columns.Add(new DataColumn("FY 2009 Estimate", typeof(int)));
            data.Columns.Add(new DataColumn("FY 2010 Estimate", typeof(int)));
            data.Columns.Add(new DataColumn("checkbox", typeof(Boolean)));
            data.Columns.Add(new DataColumn("Hyperlink", typeof(Hyperlink)));
            //data.Columns.Add(new DataColumn(GridSerializer.DefaultGanttBarStyleIdsColumnName, typeof(GanttUtilities.CustomBarStyle[]))); // uncomment for the Create a Gantt Chart Using JS Grid how-to.

            Guid? parent = null;
            // Create dummy data for the number of rows we have.
            DataRow dr;
            int j = 0;
            for (int i = 0; i < numRows; i++)
            {
                var curKey = Guid.NewGuid();

                dr = data.NewRow();
                dr["Key"] = curKey;

                // Used for the hierarchy grid How-to.
                if (i % 10 == 0)
                {
                    parent = curKey;
                    j++;
                }
                if (parent.HasValue)
                {
                    dr["HierarchyParentKey"] = parent.Value;
                }
                if (parent == null)
                {
                    parent = curKey;
                }
                dr["Title"] = "Task " + j + "." + i % 10;
                dr["Department Manager"] = "Manager";
                dr["Department"] = "Department- " + i.ToString();
                dr["FY 2009 Estimate"] = _rand.Next(1000000) + 30000;
                dr["FY 2010 Estimate"] = _rand.Next(1000000) + 30000;
                dr["Yearly Estimate"] = ((int)dr["FY 2009 Estimate"]
                    + (int)dr["FY 2010 Estimate"]) / 2;
                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));
                dr["checkbox"] = i % 2 != 0;
                dr["Hyperlink"] = new Hyperlink() { Display = "Contoso", Address = "https://www.contoso.com" };

                data.Rows.Add(dr);
            }
            return data;
        }
    }
}

Para modificar JSGridWebPartUserControl.ascx.cs

  1. Abra JSGridWebPartUserControl.ascx.cs.

  2. Agregue las siguientes declaraciones.

    using System.Data;
using Microsoft.SharePoint.JSGrid;
using JSGridSample.GridUtilityLib;

  3. Reemplace el contenido de la clase JSGridWebPartUserControl con lo siguiente.

    public partial class JSGridWebPartUserControl : UserControl
    {
        protected global::Microsoft.SharePoint.WebControls.JSGrid _grid;
        protected void Page_Load(object sender, EventArgs e)
        {
            // Build some simple data for the grid to display.
            DataTable data = new GridData().Data(20);

            // Create a grid serializer to connect to data.
            GridSerializer gds = new GridSerializer(SerializeMode.Full,
                data, "Key", new FieldOrderCollection(new String[] { "Department" }),
                GridUtilities.GetGridFields(data), GridUtilities.GetGridColumns(data));

            // Point the grid serializer at the grid serializer data.
            _grid.GridDataSerializer = gds;

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

    Nota

    El Control de JS Grid también se puede crear en el controlador de eventos OnPreRender, en lugar de en el controlador de eventos On_Load. Esto sería necesario, por ejemplo, si deseara agregar propiedades al elemento web.

El serializador Control de JS Grid serializa los datos y la configuración de Control de JS Grid en una cadena de notación de objetos JavaScript (JSON). El control de cuadrícula genera la JSON y la coloca en la página.

Nota

En los campos de cuadrícula, debe establecerse SerializeDataValue o SerializeLocalizedValue en true. Ambos pueden establecerse en true, y al menos uno debe hacerlo.

Para probar el elemento web

  1. En Visual Studio, presione F5 para ejecutar el proyecto.

  2. Se realizará la implementación y se abrirá el sitio de SharePoint. El elemento web se agrega automáticamente a la galería de elementos web de SharePoint 2010.

  3. Abra y edite cualquier página de elementos web. Puede agregar el elemento web a cualquier página de elementos web.

  4. Haga clic en Insertar y en Elemento web; seleccione JSWebPart en la categoría personalizada. Se mostrará el elemento web en la página.

    Nota

    Cuando cierre Windows Internet Explorer o presione Mayús+F5 en Visual Studio, Visual Studio retirará el elemento web (si está seleccionado Retraer automáticamente después de depurar en la ficha SharePoint de la página de propiedades ListProjects) y restablecerá Internet Information Services (IIS). Si hace clic en Implementar solución en el menú Generar, Visual Studio implementará la solución en el equipo de desarrollo para que pueda usar el elemento web independientemente desde Visual Studio

Para obtener más información acerca de cómo trabajar con elementos web, vea Procedimiento para trabajar con elementos web en una página.

Pasos siguientes

Procedimiento para crear un gráfico dinámico mediante JS Grid.

Vea también

Referencia

Microsoft.SharePoint.JSGrid

Conceptos

Control de JS Grid