Edition Toolbar

Since the DikeGrid structure definition uses the CSS Grid Layout specification, as a convention, the Edition Toolbar is also known as Edition Toolbar Row.

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.

grid-structure.component.html

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

You can allow edition only at the creation phase of the DikeGrid.

Now, you could toggle the DikeGrid between view mode and edition mode. Thus, open the Floating Configuration Panel, go to the Edition section, and click on the Edition mode checkbox.

Floating Configuration Panel - Edition

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

However, a DikeGrid instance could display those options through a toolbar. Hence, to show the Edition Toolbar Row, provide the input flag called editionToolbar. Then, let us bind the related property from the gridProperties object to show the Edition Toolbar Row.

grid-structure.component.html

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

The previous definition allows selection by providing an input flag called allowSelection. Thus, we can see all the edition options.

Open the Floating Configuration Panel, and click on the Edition Toolbar checkbox.

Edition Toolbar Row

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.

By default, the DikeGrid shows the Edition Toolbar at the bottom of the content rows

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

grid-structure.component.html

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

Open the Floating Configuration Panel, go to the Edition group and, select the top option.

Edition Toolbar Row at the top of the column headers

Edition Toolbar alignment

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

The default options alignment is at the left.

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

grid-structure.component.html

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

Open the 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

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 editionToolbarRowHeight.

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

grid-structure.component.html

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

Open the Floating Configuration Panel, go to the Edition group, and type 100 in the Toolbar Row Height textbox.

Changing the Edition Toolbar Row height

You can also change the Edition Toolbar Row height by providing an Injection Token called EDITION_TOOLBAR_ROW_HEIGHT.

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 editionToolbarItemHeight.

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

grid-structure.component.html

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

Now, open the Floating Configuration Panel, go to the Edition group, and type 60 in the Toolbar Item Height textbox.

Changing the Edition Toolbar Items height

You can also change the Edition Toolbar Items height by providing an Injection Token called EDITION_TOOLBAR_ITEM_HEIGHT.