> For the complete documentation index, see [llms.txt](https://docs.dikesoft.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dikesoft.com/fundamentals/grid-structure/edition-toolbar.md).

# Edition Toolbar

## Edition Toolbar Row

When the DikeGrid allows editing rows, the DikeGrid enables some options to manage the edited rows.

Let us **allow edition** and bind the **edition mode** input property to the `gridProperties` object to show the Edition options.

{% code title="grid-structure.component.html" %}

```markup
<dike-grid id="grid-structure"
    allowEdition
    [editionMode]="gridProperties.editionMode">
</dike-grid>
```

{% endcode %}

{% hint style="info" %}
You can **allow edition** only at the creation phase of the DikeGrid.
{% endhint %}

Now, you could toggle the DikeGrid between ***view mode*** and ***edition mode***. Thus, open the [Floating Configuration Panel](/overview.md#floating-configuration-panel), go to the **Edition** section, and click on the **Edition mode** checkbox.

![Floating Configuration Panel - Edition](/files/TzMZbZ4sy3u3pEAExm8B)

Once the DikeGrid is in edition mode, you can access the Edition options by default through a contextual menu at the left of the first visible column header.

![Edition options](/files/wXKbmyBavm4zFLpPN1s9)

However, a DikeGrid instance could display those options through a toolbar. Hence, to show the Edition Toolbar Row, provide the input flag called <mark style="color:orange;">`editionToolbar`</mark>. Then, let us bind the related property from the `gridProperties` object to show the Edition Toolbar Row.

{% code title="grid-structure.component.html" %}

```markup
<dike-grid id="grid-structure"
    allowSelection
    allowEdition
    [editionMode]="gridProperties.editionMode"
    [editionToolbar]="gridProperties.displayEditionToolbar">
</dike-grid>
```

{% endcode %}

{% hint style="info" %}
The previous definition allows selection by providing an input flag called <mark style="color:orange;">`allowSelection`</mark>. Thus, we can see all the edition options.
{% endhint %}

Open the [Floating Configuration Panel](/overview.md#floating-configuration-panel), and click on the **Edition Toolbar** checkbox.

![Edition Toolbar Row](/files/xO30Z6VjgD2BhS9UjuJ7)

You can now access all the edition options through the Edtion Toolbar shown at the ***bottom*** of the content rows.

### Edition Toolbar position

The DikeGrid could display the Edition Toolbar at the ***bottom*** of the content rows or the ***top*** of the column headers.

{% hint style="info" %}
By default, the DikeGrid shows the Edition Toolbar at the ***bottom*** of the content rows
{% endhint %}

Let us bind the related property from the `gridProperties` object to change the Edition Toolbar position.

{% code title="grid-structure.component.html" %}

```markup
<dike-grid id="grid-structure"
    [editionToolbarPosition]="gridProperties.editionToolbarPosition">
</dike-grid>
```

{% endcode %}

Open the [Floating Configuration Panel](/overview.md#floating-configuration-panel), go to the **Edition** group and, select the ***top*** option.

![Edition Toolbar Row at the top of the column headers](/files/4pqOcaGxToCDCeGTmaJV)

### Edition Toolbar alignment

The Edition Toolbar could align its options at the **left**, **center**, or **right**.

{% hint style="info" %}
The default options alignment is at the ***left***.
{% endhint %}

Bind the related property from the `gridProperties` object to change the Edition Toolbar alignment.

{% code title="grid-structure.component.html" %}

```markup
<dike-grid id="grid-structure"
    [editionToolbarAlignment]="gridProperties.editionToolbarAlignment">
</dike-grid>
```

{% endcode %}

Open the [Floating Configuration Panel](/overview.md#floating-configuration-panel), go to the **Edition** group, and change the Edition Toolbar's alignment by clicking on the ***center*** option.

![Edition Toolbar with center alignment](/files/7Vz4U3BhcdEODUs8lNAj)

## Changing the Edition Toolbar Row Height

The Edition Toolbar Row is **55 pixels** in height. However, you can change this value by providing an input property named <mark style="color:orange;">`editionToolbarRowHeight`</mark>.

Let us bind the related property from the `gridProperties` object to change the Edition Toolbar Row height.

{% code title="grid-structure.component.html" %}

```markup
<dike-grid id="grid-structure"
    [editionToolbarRowHeight]="gridProperties.editionToolbarHeight">
</dike-grid>
```

{% endcode %}

Open the [Floating Configuration Panel](/overview.md#floating-configuration-panel), go to the **Edition** group, and type 100 in the **Toolbar Row Height** textbox.

![Changing the Edition Toolbar Row height](/files/BUi2vje4BozxXPdVpZoS)

{% hint style="success" %}
You can also change the Edition Toolbar Row height by providing an Injection Token called <mark style="color:blue;">`EDITION_TOOLBAR_ROW_HEIGHT`</mark>.
{% endhint %}

## Changing the Edition Toolbar Items height

Edition Toolbar Items are **42 pixels** in height. Nevertheless, you can change this height by providing an input property called <mark style="color:orange;">`editionToolbarItemHeight`</mark>.

Let us bind the related property from the `gridProperties` object to change the Edition Toolbar Items height.

{% code title="grid-structure.component.html" %}

```markup
<dike-grid id="grid-structure"
    [editionToolbarItemHeight]="gridProperties.edtitionToolbarItemHeight">
</dike-grid>
```

{% endcode %}

Now, open the [Floating Configuration Panel](/overview.md#floating-configuration-panel), go to the **Edition** group, and type 60 in the **Toolbar Item Height** textbox.

![Changing the Edition Toolbar Items height](/files/CIqqI1OjNmqdEuLzGRXl)

{% hint style="success" %}
You can also change the Edition Toolbar Items height by providing an Injection Token called <mark style="color:blue;">`EDITION_TOOLBAR_ITEM_HEIGHT`</mark>.
{% endhint %}