# Angular Data Grid External Editing

You can add new records or edit row data in the [Angular Grid](https://www.telerik.com/kendo-angular-ui-develop/components/grid) by using a built-in external dialog or a custom container specifically designed for this purpose. This adds another layer of verification and ensures that the inserted data is valid.

This article includes a step-by-step guide on how to implement external editing for the Grid both by using a quick approach with the built-in directive, and by manually handling the corresponding events.

The following example demonstrates the quick setup for implementing an external edit form using [Reactive Forms](https://angular.dev/guide/forms/reactive-forms).

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/editing/editing-directives/external-editing/source.txt)

## Quick Setup

The [`kendoGridExternalEditing`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/externaleditingdirective) directive allows you to easily set up a Grid that opens a built-in external dialog for editing its data items using [Reactive Forms](https://angular.dev/guide/forms/reactive-forms).

To configure the Grid with the `ExternalEditingDirective`:

1. Provide a callback which returns the [`FormGroup`](https://angular.dev/api/forms/FormGroup) for the edited item.

   ```html
   <kendo-grid [kendoGridExternalEditing]="createFormGroup">
       ...
   </kendo-grid>
   ```

2. In the custom `createFormGroup` callback, create and return the `FormGroup` for the row model. For the newly added rows, create a new instance of the model.

   ```ts
   public formGroup: FormGroup;
   constructor(private formBuilder: FormBuilder) {
        this.createFormGroup = this.createFormGroup.bind(this);
   }

   public createFormGroup = (args: CreateFormGroupArgs): FormGroup => {
       const item = args.isNew ? new Product() : args.dataItem;

       this.formGroup = this.formBuilder.group({
           ProductID: item.ProductID,
           ProductName: [item.ProductName],
           // TODO: add controls for the remaining Product fields.
       });

       return this.formGroup;
   };
   ```

3. Use the built-in command or toolbar directives to create buttons that automatically perform the desired CRUD operations. For more details, refer to the [Editing Action Buttons](https://www.telerik.com/kendo-angular-ui-develop/components/grid/editing/basics#editing-action-buttons) section.

## Customizing the Built-In Editing Dialog

You have the ability to customize the edit form of the external editing dialog by utilizing the [`formSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/externaleditingdirective#formsettings) property that the `kendoGridExternalEditing` directive provides.

This property enables you to configure the orientation of the edit form, the hints, labels, and error messages of each field, as well as display [FloatingLabels](https://www.telerik.com/kendo-angular-ui-develop/components/labels/floatinglabel) instead of the default [Label](https://www.telerik.com/kendo-angular-ui-develop/components/labels/label) components.

```html HTML
<kendo-grid 
    [kendoGridExternalEditing]="createFormGroup"
    [formSettings]="formSettings">
    ...
</kendo-grid>
```

```ts TypeScript
public formSettings: FormSettings = {
    fields: {
        'ProductName': {
            hint: 'Enter a name for this product.',
            errors: {
                required: 'A product name is required.'
            },
            label: 'Name'
        }
    },
    floatingLabels: true,
    orientation: 'vertical'
};
```

The `kendoGridExternalEditing` directive also provides a [`dialogSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/externaleditingdirective#dialogsettings) option, which allows you to customize the dialog containing the edit form by passing a [`FormDialogSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/formdialogsettings) object with the desired properties.

```html HTML
<kendo-grid 
    [kendoGridExternalEditing]="createFormGroup"
    [dialogSettings]="dialogSettings">
    ...
</kendo-grid>
```

```ts TypeScript
public dialogSettings: FormDialogSettings = { 
    actionsLayout: 'end', 
    title: 'My Edit Form', 
    width: 400 
};
```

The following example demonstrates how to customize the default form and dialog settings of the `kendoGridExternalEditing` directive.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/editing/editing-directives/external-editing/custom/source.txt)

## Manual Setup

For scenarios requiring full control over the editing behavior, you can manually handle the editing operations. The custom external form provides complete flexibility, but requires more code in order to implement the necessary editors and validators.

> **Data-Binding Directives vs. Manual Setup**
>
> The Grid provides an [External Editing Directive](https://www.telerik.com/kendo-angular-ui-develop/components/grid/editing/external-editing#quick-setup) that significantly reduces the amount of boiler plate code required to implement the editing functionality. Try it out before using the more flexible, but verbose manual setup.

The following example demonstrates how to implement a custom external edit form by using the [Kendo UI for Angular Dialog](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/dialog) component.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/editing/external-form/source.txt)

Based on the project requirements, the form field components and validations may vary. To implement an external edit form by using the Kendo UI for Angular Dialog component and [Reactive Forms (Model-Driven Forms)](https://angular.dev/guide/forms/reactive-forms):

1. Create a `Dialog` component and define the required input controls in a Reactive Form. Ensure that the controls match the type of data that will be edited.

   ```html
   @if (active) {
     <kendo-dialog>
       <form novalidate class="k-form k-form-md" [formGroup]="editForm">
           <kendo-formfield>
           ...
               <kendo-textbox formControlName="ProductName" #ProductName required></kendo-textbox>
           <kendo-formfield>
       ...
       </form>
     </kendo-dialog>
   }
   ```

2. Handle the Grid [`edit`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/gridcomponent#edit) event. The event is fired when a button with the [`kendoGridEditCommand`](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/editcommanddirective) directive applied is clicked.

   ```html
   <kendo-grid ... (edit)="editHandler($event)">
       <kendo-grid-command-column>
           <ng-template kendoGridCellTemplate>
               <button kendoGridEditCommand>Edit</button>
               ...
           </ng-template>
       </kendo-grid-command-column>
   </kendo-grid>
   ```

3. In the `edit` event handler, pass the edited `dataItem` to the custom external editing component.

   ```ts
   public editHandler(args: AddEvent): void {
       ...
       this.editDataItem = args.dataItem;
   }
   ```

   ```html
   <kendo-grid-edit-form [model]="editDataItem"> </kendo-grid-edit-form>
   ```

4. In the external editing component, create a `FormGroup` with controls, based on the received `dataItem` object.

   ```ts
   @Input() public set model(product: Product) {
       this.editForm.reset(product);
   }

   public editForm: FormGroup = new FormGroup({
       ProductName: new FormControl()
       ...
   })
   ```

## Suggested Links

* [Angular Grid Editing Basics](https://www.telerik.com/kendo-angular-ui-develop/components/grid/editing/basics)
* [API Reference of the DialogComponent](https://www.telerik.com/kendo-angular-ui-develop/components/dialogs/api/dialogcomponent)
* [API Reference of the GridComponent](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/gridcomponent)
* [API Index of the Grid](https://www.telerik.com/kendo-angular-ui-develop/components/grid/api)