Adding ag-Grid as a field (ag-Grid Config Entity)

ag-Grid Config Entity

Currently after enable of the module, you'll find that there is an ag-Grid field to use. However, after adding, there is a dropdown to select a config entity. This will be empty unless you create a new ag-Grid Config Entity. Once the entity is selected on a new field, this selection cannot be changed. However, the ag-Grid config item itself can be changed. It should be remembered, however that if the default headers change in the ag-Grid default config and fields no longer match previously collected data, then the previous data collected will no longer display properly.

First, go to Structure>ag-Grid

Click "Add ag-Grid"

You'll find 3 fields: Label, ag-Grid Default JSON, and ag-Grid additional options.

Label

Will display in dropdown for default ag-Grid JSON when adding a new field. 

ag-Grid Default JSON

Contains both the ag-Grid header (columnDef), row settings (rowSettings), and the initial default data rows (dataRow). The following is an example with is provided in the module as a demo. (aggrid_demo is included with this module)

"columnDefs": Contains the default columns/header section of ag-Grid. This section of the ag-Grid Default JSON will be utilized through the life of the field. rowData is saved to the field, but columnDefs is always pulled from the ag-Grid Config Entity.

"rowSettings": Contains settings related to all rows and cells. You can apply a setting for all data rows, only specific rows, and/or only specific cells. The rowSettings feature is not part of ag-Grid itself but only the aggrid module. columnDefs and rowData are a standard part of the ag-Grid library. For more information about rowSettings, please see the rowSettings section.

"rowData": Contains the default row data. This is only pulled from the ag-Grid config entity when a new item is being created.

An example of a basic aggrid config entity with columnDefs and rowData:

{
  "columnDefs": [
    {
      "headerName": "Color",
      "field": "color",
      "width": 75,
      "minWidth": 75
    },
    {
      "headerName": "Car",
      "field": "car"
    },
    {
      "headerName": "Truck",
      "field": "truck"
    },
    {
      "headerName": "Motorcycle",
      "field": "motorcycle"
    },
    {
      "headerName": "Bicycle",
      "field": "bicycle"
    },
    {
      "headerName": "Total",
      "field": "total"
    }
  ],
  "rowSettings": {
    "default": {
      "rowDefault": {
        "formatType": "numInt",
        "parserType": "dec",
        "constraintType": {
          "constraint": "Number(params.data[params.column.colId]) >= 0 && Number(params.data[params.column.colId]) <= 1200",
          "errorMsg": "The number must be greater than 0 but less than 1,200."
        },
        "valueSuppression": {
          "min": 1,
          "max": 3,
          "role": ["anonymous"],
          "otherRowCol": {
            "1": [
              "car",
              "motorcycle"
            ]
          }
        }
      },
      "color": {
        "isRowLabel": true,
        "formatType": "",
        "parserType": "",
        "constraintType": ""
      },
      "total": {
        "valueGetter": "Number(params.data.car) + Number(params.data.truck) + Number(params.data.motorcycle) + Number(params.data.bicycle)",
        "constraintType": "",
        "valueSuppression": ""
      }
    }
  },
  "rowData": [
    {
      "color": "Red",
      "car": 0,
      "truck": 0,
      "motorcycle": 0,
      "bicycle": 0,
      "total": 0
    },
    {
      "color": "Blue",
      "car": 0,
      "truck": 0,
      "motorcycle": 0,
      "bicycle": 0,
      "total": 0
    },
    {
      "color": "Green",
      "car": 0,
      "truck": 0,
      "motorcycle": 0,
      "bicycle": 0,
      "total": 0
    },
    {
      "color": "Yellow",
      "car": 0,
      "truck": 0,
      "motorcycle": 0,
      "bicycle": 0,
      "total": 0
    },
    {
      "color": "Black",
      "car": 0,
      "truck": 0,
      "motorcycle": 0,
      "bicycle": 0,
      "total": 0
    }
  ]
}

ag-Grid additional options

Extra features or switches for the ag-Grid (See ag-Grid documentation for other options and instructions)

This information is actually placed at the root of the ag-Grid library JSON to be along with columnDefs and rowData. 

{
  "enableStatusBar": true
}

Click "Save" and save your new ag-Grid config entity

Add a new ag-Grid field

Either create new content type or add the field on an existing content type. Select the ag-Grid JSON Field under the Text section and label it for use on your content item. Please note: As of alpha3, the ag-Grid module is not capable of multiple fields.

Default Value

In this section, you will need to select the "ag-Grid Default Config Entity" item created above. While it is possible to change this default later, any items created will be assigned to that default config entity item when the content was created.

That's it for now! If your JSON is structured properly, the form should display. There are some default options hard coded into the module to allow for things like multi-cell select (enterprise only) and editing is turned on only when on the Edit page vs View. Control of cell level editing is done through the JSON. As you can see above and with the demo module, I've locked out editing of the first row as they are the "color" labels and I only want the user to modify the number cells.