# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.dikesoft.com/fundamentals/grid-structure/edition-toolbar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.