# Toolbar buttons in Edit Form
The Edit Form and Edit Popup include the built-in Save and Cancel buttons. To execute your custom code on these buttons' click, handle the [DataGrid.onSaving](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onSaving) and [DataGrid.onEditCanceling](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onEditCanceling) events. Set `true` to the **e.cancel** parameter to cancel the Save or Cancel operations and keep the Edit Form or Edit Popup opened.

Use the [DataGrid.editing.texts.cancelRowChanges](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/texts/#cancelRowChanges) and
[DataGrid.editing.texts.saveRowChanges](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/texts/#saveRowChanges) options to change texts of the Save and Cancel buttons.

To customize the Save and Cancel buttons, it is necessary to re-define them. Then, handle the **onClick** event for the buttons to call the [DataGrid.saveEditData](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Methods/#saveEditData) and [DataGrid.cancelEditData](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Methods/#cancelEditData) methods correspondingly. The following code snippet demonstrates how to declare buttons in both Form and Popup edit modes. You need to place this code snippet in different places depending on the edit mode.

items: [{
    toolbar: "bottom", // only for Popup
    widget: "dxButton",
    location: "after",
    options: {
      text: "Save",
      onClick: function() {
        grid.saveEditData();
      }
    }
  }, {
    toolbar: "bottom", // only for Popup
    widget: "dxButton",
    location: "after",
    options: {
      text: "Cancel",
      onClick: function() {
        grid.cancelEditData();
      }
    }
  }, {
    toolbar: "bottom", // only for Popup
    widget: "dxButton",
    location: "before",
    options: {
      text: "Copy Data",
      onClick: function() {
        // custom code
      }
    }
  }]

### Popup
Add the [DataGrid.editing.popup](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/#popup) object to your DataGrid configuration and declare the Save, Cancel and custom buttons in the [Popup.toolbarItems](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxPopup/Configuration/toolbarItems/) array.

### Form
Add the [DataGrid.editing.form](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/#form) object to your DataGrid configuration and use the **Form.items** array to arrange all form items you want to display in the Edit Form. Also, add a [SimpleItem](https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxForm/Item_Types/SimpleItem/) with a template containing a standalone [Toolbar component](https://js.devexpress.com/Documentation/Guide/UI_Components/Toolbar/Getting_Started_with_Toolbar/). Declare the buttons in this toolbar.
Finally, use the following CSS to hide the built-in Save and Cancel buttons:

#gridForm .dx-datagrid-form-buttons-container {  
    display: none  
}

Please see the following GitHub example for implementation details: [DataGrid for DevExtreme - How to customize built-in Edit Form buttons and add a custom button](https://github.com/DevExpress-Examples/devextreme-datagrid-customize-edit-form-buttons).