AdapTable Version:

Framework:

Configuring Row Forms

Summary

Row Forms are types of AdapTable Form and are highly configurable

AdapTable Form

The Row Form displayed by AdapTable is a specialised Adaptable Form which renders one row for each data element in the Data Source

Note

AdapTable will provide the apppropriate edit input for the Column's Data Type (if the cell / column is editable)

Included Columns

By default AdapTable will include every Column in the Grid in the Row Form.

This can be configured by using the includeColumnInRowForm property in Row Form Options which determines inclusion a case by case basis.

includeColumnInRowForm

Default: null

Boolean

Whether a Column should be included in the Row Form

This property decides whether a Column should be included in the Row Form.

It is of type Boolean and receives context of type RowFormColumnContext which is defined as follows:

Property	Description
adaptableColumn	Column to be displayed
rowFormType	Type of Row Form
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

// Exclude any Actions Columns or those with an Id of 'id' from the Row Form
rowFormOptions: {
  includeColumnInRowForm: (rowFormColumnContext: RowFormColumnContext) => {
    const column: AdaptableColumn = rowFormColumnContext.adaptableColumn;
    return column.columnTypes?.includes('actionColumn') || column.columnId == 'id' ? false : true;
  },
}

Default Buttons

By default AdapTable will display 2 Buttons at the bottom of the Form:

Save - automatically saves the Row (for Edit buttons) or creates a new Row (for Create & Clone buttons)
Caution
- AdapTable will only automatically peform these actions if autoHandle is set to true in Row Form Options
- If false, developers need to handle, as required, the the Row Form Submitted Event which AdapTable fires
Cancel - closes the Form with no changes made

Custom Buttons

Developers are able to provide their own set of buttons in place of the ones provided by AdapTable.

This is done through the formButtons property in the rowFormOptions section of Row Form Options.

Hint

This section allows you to configure the Row Form in multiple ways, not just the Buttons (see below)

Each button is of type Adaptable Button which is used in multiple places in the AdapTable UI, and contains many properties including label, visibility, style and onClick.

As soon as any button is clicked, the Form automatically closes.

Caution

If replacing the default Save button, it is the developer's responsibility to ensure that any changes are persisted by wiring up the onClick property of the Button
AdapTable will not not invoike the onFormSubmit callback, nor fire the Row Form Submitted Event

Row Form Config

Fork Fork

This demo illustrates how to configure the Edit Row Form. In rowFormOptions we provide many properties including:
- includeColumnInRowForm - we exclude the Actions Column (that displays the Add Button) and the Id Column from the displayed form
- rowFormTitle - we provide a custom Title based on the Row being edited
- rowformDescription - we provide a custom Description that appears below the Form Title
- rowformFieldLabel - we change the text of the Label for Language Column
- rowformButtons - we provide 2 Custom Buttons that display at the end of the Form and have custom Styles;
  - Cancel - displays an Alert when clicked
  - Save - has a custom Label which references the Row, and updates the Grid when clicked (button is disalbed where Issue Change is negative)
- Note: we set autoHandle to false since we are providing the functionality to update the Grid

import {
  AdaptableColumn,
  AdaptableOptions,
  CreateRowFormContext,
  EditRowFormContext,
  RowFormColumnContext,
} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Row Forms Config',
  actionColumnOptions: {
    actionColumns: [
      {
        columnId: 'action',
        friendlyName: 'Actions',
        actionColumnButton: [
          {
            command: 'edit',
          },
        ],
      },
    ],
  },
  rowFormOptions: {
    autoHandle: false,
    includeColumnInRowForm: (rowFormColumnContext: RowFormColumnContext) => {
      const column: AdaptableColumn = rowFormColumnContext.adaptableColumn;
      return column.columnTypes?.includes('actionColumn') ||
        column.columnId == 'id'
        ? false
        : true;
    },
    rowFormTitle: context => {
      return `Editing ${context.rowNode?.data?.name}`;
    },
    rowFormDescription: context => {
      return `Row is at index ${context.rowNode?.rowIndex}`;
    },
    rowFormFieldLabel: context => {
      return context.column.friendlyName === 'Language'
        ? `${context.column.friendlyName} (please select)`
        : `${context.column.friendlyName}`;
    },
    rowFormButtons: [
      {
        label: 'Cancel',
        buttonStyle: {
          variant: 'raised',
          tone: 'none',
        },
        onClick: (
          button,
          context: CreateRowFormContext | EditRowFormContext
        ) => {
          context.adaptableApi.alertApi.showAlertInfo(
            'Action Row',
            'No changes were made'
          );
        },
      },
      {
        label: (button, context: CreateRowFormContext | EditRowFormContext) => {
          const editRowFormContext: EditRowFormContext =
            context as EditRowFormContext;
          return `Save ${editRowFormContext.rowNode?.data.name}`;
        },
        buttonStyle: {
          variant: 'raised',
          tone: 'info',
        },
        onClick: (
          button,
          context: CreateRowFormContext | EditRowFormContext
        ) => {
          context.adaptableApi.gridApi.updateGridData([context.formData]);
        },
        disabled: (button, context) => {
          return context.formData['week_issue_change'] < 0;
        },
      },
    ],
  },
  editOptions: {
    showSelectCellEditor: context => {
      return context.column.columnId === 'language';
    },
  },
  initialState: {
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'action',
            'name',
            'github_stars',
            'update_stars',
            'week_issue_change',
            'update_issues',
            'github_watchers',
            'license',
            'language',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Disabling In-line Editing

AdapTable can be configured so that the only editing allowed is through the Row Form, i.e. not directly inline in the cell itself.

This is achieved by setting the disableInlineEditing property in Row Form Options to true.

disableInlineEditing

Default: false

boolean

Prevents Inline Editing (so that Row Forms can be used)

A common requirement is to enable editing only through the Row Form - and not directly inline.

This is achieved simply by setting this property to false.

// Prevent direct cell edits in the Grid (i.e. only via Row Form)
const adaptableOptions: AdaptableOptions = {
  rowFormOptions = {
    disableInlineEditing: true,
  },
};

Caution

Even Columns which have been directly set to be editable in Grid Options will be readonly (for inline editing)

Setting Primary Key Value

Every AdapTable instance requires a Primary Key column to be provided.

This is a column which guarantees to hold unique values.

This means that when adding a new row to the Data Set via a Row Form - either Create or Clone - it is possible that the run-time user might not know what value to provide to the Primary Key Column.

For this reason, AdapTable provides the setPrimaryKeyValue property in Row Form Options which can return a Primary Key value for the row automatically.

setPrimaryKeyValue

Returns a Primary Key value when using Create Row Form

Provides a Primary Key values for rows being added via the Create Row Form.

This is a useful function as often the run-time user will not know what value to provide.

The function receives SetPrimaryKeyValueContext and returns the value to be used as the primary key.

The context simply contains the row being added:

Property	Description
rowData	Data in the row being created or cloned
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

const adaptableOptions: AdaptableOptions = {
  rowFormOptions = {
    setPrimaryKeyValue: (context: SetPrimaryKeyValueContext) => {
      return {
        ...context.rowData,
        id: context.adaptableApi.gridApi.getRowCount() + 1,
      };
    },
  },
};

PreviousRow Forms NextTechnical Reference

Framework: