Row Forms Technical Reference
Summary
- Row Form Options provides functions for managing Row Forms
- The Row Form Submitted Event fire when Row Forms are submitted
- The Row Form API contains functions to display Row Forms programmatically
Row Form Options
The Row Form Options section of Adaptable Options is used to configure Row Forms.
| Property | Type | Description | Default |
|---|---|---|---|
| autoHandle | boolean | Whether AdapTable automatically updates AG Grid data model with created/edited/deleted rows | true |
| disableInlineEditing | boolean | Prevents direct editing in Grid cells even for editable columns | false |
| includeColumnInRowForm | (rowFormColumnContext:RowFormColumnContext) => boolean | Is given Column displayed in Row Form | true |
| onRowFormSubmit | (rowFormSubmittedInfo:RowFormSubmittedInfo<TData>) => void | Event fired when a Row Form is submitted via a standard button provided by AdapTable; this is not invoked when custom form buttons are provided | undefined |
| rowFormButtons | AdaptableButton<RowFormContext<TData>>[] | Custom form buttons; if provided, need to handle form submission explicitly | |
| rowFormDescription | string | ((context:RowFormTitleContext<TData>) => string) | Custom form description provider | undefined |
| rowFormField | (context:RowFormFieldContext<TData>) => Partial<AdaptableFormField> | undefined | Per-column override for the auto-built . | undefined |
| rowFormFieldLabel | (context:RowFormFieldContext<TData>) => string | Custom form field label provider. | undefined |
| rowFormTitle | string | ((context:RowFormTitleContext<TData>) => string) | Custom form title provider | 'Create New Row'/'Edit Row' |
| setPrimaryKeyValue | (context:SetPrimaryKeyValueContext<TData>) => any | Function called when auto-handling 'create' or 'clone' Command Button; returned value should be valid for Primary Key column | undefined |
Row Form Submitted Event
AdapTable fires the Row Form Submitted Event when an edit or create Row Form is submitted (or a delete ActionRowButton is clicked).
This allows developers to handle the form submission themselves, and provide any additional actions, validation or messages to backend services as required.
Hint
AdapTable handles all row manipulation directly, bypassing this event, if autoHandle is set to true in Row Form Options
RowFormSubmittedInfo
The RowFormSubmittedInfo object can be one of 3 types:
- a
CreatedRowInfo- which is defined as follows
| Property | Type | Description |
|---|---|---|
| formData | AdaptableFormData | Data entered in the Form |
| rowNode | IRowNode<TData> | Node being added |
| type | 'rowCreated' | Specifies its a Created Row Form |
| adaptableContext | any | Custom application Context provided in AdaptableOptions.adaptableContext |
- an
EditedRowInfo- which is defined as follows
| Property | Type | Description |
|---|---|---|
| formData | AdaptableFormData | Data entered in the Form |
| rowNode | IRowNode<TData> | Node being edited |
| type | 'rowEdited' | Specifies its an Edited Row Form |
| adaptableContext | any | Custom application Context provided in AdaptableOptions.adaptableContext |
- a
DeletedRowInfo- which is defined as follows
| Property | Type | Description |
|---|---|---|
| rowNode | IRowNode<TData> | Node being deleted |
| type | 'rowDeleted' | Specifies its a Deleted Row Form |
| adaptableContext | any | Custom application Context provided in AdaptableOptions.adaptableContext |
Event Subscription
Subscribing to the Event is done the same way as with all Adaptable Events:
api.eventApi.on('RowFormSubmitted', (eventInfo: RowFormSubmittedInfo) => {
// do something with the info
});Row Form API
The Row Form API section of Adaptable API enables Row Forms to be displayed:
| Method | Returns | Description |
|---|---|---|
| displayCloneRowForm(primaryKey) | Promise<void> | Open create dialog for cloning an existing row |
| displayCreateRowForm() | Promise<void> | Open create dialog for a new row |
| displayDeleteRowForm(primaryKey) | void | Deletes row from grid (with event fired) - note: no visible Row Form is displayed |
| displayEditRowForm(primaryKey) | Promise<void> | Open edit dialog for row with the given primary key value |