# Form in DataGrid

DataGrid uses the [Form component](https://js.devexpress.com/Documentation/Guide/UI_Components/Form/Getting_Started_with_Form/) for editing in Form and Popup [edit modes](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/#mode). DataGrid automatically configures the built-in form based on editing and column settings. In general, you can use the Form API to work with the built-in Form. However, it is necessary to take into account [DataGrid specifities](#Form-Limitations-in-short) it imposes on the Form.
The following series of topics covers the crucial parts of Form customization in DataGrid.

## Configure layout/appearance and editing
https://supportcenter.devexpress.com/internal/ticket/details/t1154060

## Validation
https://hackmd.io/@Xu93_M4mRByah-QaPYiBoA/Hymaq7fV3

## Save, Cancel and user-defined buttons
https://hackmd.io/whxGjeaHRL2yyq3RX4cqeQ?view

## Dynamically change editor or form item properties
Please find step-by-step instructions and examples to dynamically modify editor or form item properties:
* [Dynamically Change Editor Properties in the Editing State](https://js.devexpress.com/Documentation/Guide/UI_Components/DataGrid/How_To/Dynamically_Change_Editor_Properties_in_the_Editing_State/)
* [Dynamically Change Form Item Properties in the Editing State](https://js.devexpress.com/Documentation/Guide/UI_Components/DataGrid/How_To/Dynamically_Change_Form_Item_Properties_in_the_Editing_State/)

These topics describe how to hide form items and disable editors based on another field's value.

**!Note** that the editing form gets data from the DataGrid's record, so editors are initialized with the corresponding dataField’s value from the record you want to edit/add. If you want to initialize editors of a new row with a specific value use the DataGrid.[onInitNewRow](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onInitNewRow) option.

## Advanced customization
If you want to completely re-design the Form or change its behavior, replace it with a standalone Popup with Form. Please see the following example for implemetation details:
[DataGrid for DevExtreme - How to implement a custom editing form using the Popup and Form components](https://github.com/DevExpress-Examples/devextreme-datagrid-custom-editing-form)

## Form Limitations in short
**Do not** specify the following properties in the form object:
* [readOnly](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxForm/Configuration/#readOnly) (use [allowEditing](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#allowEditing) instead)
* [template](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxForm/Item_Types/SimpleItem/#template) for items that have a [dataField](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxForm/Item_Types/SimpleItem/#dataField) (use a column's [editCellTemplate](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#editCellTemplate) instead)
* Any event handler (properties whose name starts with "on...")
* [SimpleItem.validationRules](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxForm/Item_Types/SimpleItem/#validationRules) for items that have a [dataField](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxForm/Item_Types/SimpleItem/#dataField). Assign validation rules to DataGrid [columns](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#validationRules).
* [formData](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxForm/Configuration/#formData). DataGrid uses internal binding logic for the Edit Form. You can get\set values via the DataGrid.[cellValue](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Methods/#cellValuerowIndex_dataField) method:

const grid = $("#data-grid-container").dxDataGrid("instance")
const key = grid.option("editing.editRowKey"),
index = grid.getRowIndexByKey(key),
// get
value = grid.cellValue(index, "CompanyName");
//set
grid.cellValue(index, "CompanyName", "new value");