Procedimiento para crear una cuadrícula editable

Artículo
09/24/2014

Última modificación: jueves, 23 de junio de 2011

Hace referencia a: SharePoint Foundation 2010

Estos procedimientos muestran cómo habilitar la edición en un Control de JS Grid básico. Los procedimientos tratan sobre Procedimiento para crear un control de JS Grid básico y Procedimiento para crear un gráfico dinámico mediante JS Grid.

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 tutorial se puede hacer sin usar Visual Studio 2010, resulta más fácil si usa Visual Studio 2010 junto con las Herramientas de desarrollo de SharePoint en Microsoft Visual Studio 2010.

Creación de una cuadrícula que se pueda modificar

La creación de una cuadrícula que se pueda modificar implica varios pasos:

Alternar el comportamiento de lectura y escritura de ECMAScript (JavaScript, JScript)
Habilitar el comportamiento de lectura y escritura en celdas, campos o filas
Agregar comprobación de errores de cliente
Escribir una devolución de llamada para controlar los cambios del usuario

Estos procedimientos explican cómo crear una cuadrícula modificable y muestran la comprobación de errores de cliente que proporciona el Control de JS Grid. La escritura de los cambios de usuarios está fuera del alcance de estos procedimientos.

Para habilitar la edición con bEditingEnabled

Abra la solución de JSGrid que creó en los procedimientos anteriores.
Abra JSGridWebPartUserControl.ascx.cs.

Dentro del código JavaScript, justo antes de que se inicialice jsGridControl, agregue jsGridParams.tableViewParams.bEditingEnabled = true;.

El código debe aparecer como se muestra a continuación.

<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();

            jsGridParams.tableViewParams.bEditingEnabled = true;

            jsGridControl.Init(jsGridParams);
        }
    };
</script>

Tenga en cuenta que bEditingEnabled es un control de alternancia que puede usarse para activar o desactivar la edición en el código del lado cliente. bEditingEnabled se establece en false de manera predeterminada.

Habilitación del comportamiento de lectura y escritura en las celdas, campos o filas.

La enumeración de EditMode del Control de JS Grid especifica si las celdas contenidas en un archivo o registro deben permitir la edición. Las opciones son:

Defer Aplaza siempre el estado de lectura y escritura; el control no tiene control sobre su propio estado.
ReadOnly Si se aplica a un registro o campo, ninguna de las celdas de ese registro o campo son modificables; si se aplica a una fila, compruebe el modo de edición de cada celda.
ReadOnlyDefer La celda es de solo lectura, a menos que la configuración de la fila, columna o control de cuadrícula especifique lo contrario. Si se aplica a una fila, compruebe el modo de edición de cada celda.
ReadWrite La celda se puede modificar a menos que la configuración de la fila, la columna o el control de cuadrícula especifique lo contrario.
ReadWriteDefer La celda se puede modificar a menos que la configuración de la fila, la columna o el control de cuadrícula especifique lo contrario.

Para que determinados campos se puedan modificar

En la solución de JSGrid, abra GridUtilities.cs.
Busque la clase FormatGridField.
En la clase formatGridField, establezca la propiedad EditMode para todos los campos en ReadOnlyDefer. Esto establece un valor predeterminado de solo lectura que se puede invalidar para celdas, filas o campos específicos.
```
// When in doubt, set the edit mode to read-only and defer to others.
gf.EditMode = EditMode.ReadOnlyDefer;
```
Más abajo en la clase FormatGridField, establezca el modo de edición de todos los campos de tipo Int32 en ReadWrite.
```
else if (dc.DataType == typeof(Int32))
    {
        gf.EditMode = EditMode.ReadWrite;
```
Ejecute el proyecto. Edite uno de los campos numéricos.

Si escribe un carácter no numérico en una celda numérica, la celda se destaca en rojo y aparece un icono rojo en el encabezado de fila. Al hacer clic en la celda, se muestra un icono que describe el error. Este comportamiento se proporciona con el Control de JS Grid.

Vea también

Conceptos

Características del control de cuadrícula JS

Compartir a través de