How to: Create an Editable JS Grid Control

Article
10/20/2016

Applies to: SharePoint Foundation 2010

This how-to demonstrates how to enable editing for specific fields on a basic JS Grid control. The how-to follows How to: Create a Basic JS Grid Control.

Prerequisites

Microsoft SharePoint Foundation 2010
Microsoft Visual Studio 2010
SharePoint development tools in Microsoft Visual Studio 2010
Completion of How to: Create a Basic JS Grid Control

Creating an editable grid

Creating an editable grid involves several steps:

Enabling editing in the grid control
Enabling read/write behavior on rows, fields, or cells
Adding custom client-side error checking
Writing a callback to handle the user's changes

This how-to demonstrates how to create an editable grid and shows the built-in client-side error checking that the JS Grid control provides. Adding custom client-side error checking and writing back changes are beyond the scope of this how-to. For information about how to write back user changes to an underlying database, see How to: Write Back Changes from the JS Grid Control.

To enable editing with bEditingEnabled

In Visual Studio, open the JSGrid solution that you created in How to: Create a Basic JS Grid Control.
Open JSGridWebPartUserControl.ascx.

Inside the ECMAScript (JavaScript, JScript) code, add the following line just before the jsGridControl is initialized.

jsGridParams.tableViewParams.bEditingEnabled = true;

The code should appear as follows.

<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.styleManager.RegisterCellStyle('TextRightAlign', SP.JsGrid.Style.CreateStyle(SP.JsGrid.Style.Type.Cell, { textAlign: 'right' }));
            jsGridParams.tableViewParams.bEditingEnabled = true;
            jsGridControl.Init(jsGridParams);
        }
    };
</script>

The bEditingEnabled property is a toggle that can be used to turn editing on or off in the client-side code. bEditingEnabled is set to false by default.

Enabling Read/Write Behavior on Rows, Fields, or Cells.

The EditMode enumeration specifies whether the cells contained in a record or field should allow editing. The choices are as follows:

Defer Always defer read/write status; the control has no control over its own state.
ReadOnly If applied to a record or field, none of the cells in that record or field are editable; if applied to a row, check the edit mode of each cell.
ReadOnlyDefer The cell is read-only unless settings on the row, column, or grid control specify otherwise. If applied to a row, check the edit mode of each cell.
ReadWrite The cell is editable, unless settings on the row, column, or grid control specify otherwise.
ReadWriteDefer The cell is editable, unless settings on the row, column, or grid control specify otherwise.

To make specific fields editable

In the JSGrid solution, open GridUtilities.cs.
Locate the formatGridField method.
Add the following line, which sets the EditMode property for all fields to ReadOnlyDefer. This sets a read-only default that can be overridden for particular fields, rows, or cells.
```
gf.EditMode = EditMode.ReadOnlyDefer;
```
The code should appear as follows.
```
public static GridField formatGridField(GridField gf, DataColumn dc)
{
    gf.EditMode = EditMode.ReadOnlyDefer;
    . . .
```

In the if clause that checks for numeric types, add the following line, which sets the edit mode of all numeric fields to ReadWrite.

gf.EditMode = EditMode.ReadWrite;

The code should appear as follows.

else if (dc.DataType == typeof(Int16)
    || dc.DataType == typeof(Int32)
    || dc.DataType == typeof(Int64)
    || dc.DataType == typeof(Decimal)
    || dc.DataType == typeof(Double))
{
    gf.EditMode = EditMode.ReadWrite;
    . . .

Run the project. Edit one of the numeric fields.

If you enter a non-numeric character into a numeric cell, the cell is outlined in red and a red icon appears in the row header. Clicking the cell displays an icon that describes the error. This error-checking behavior is provided with the JS Grid control.

Next Steps

How to: Write Back Changes from the JS Grid Control