DkGrid
  • Overview
  • Getting Started
    • Quick Start Tutorial
  • Fundamentals
    • Grid Structure
      • Grid Size
      • Header
      • Row Filter
      • Rows
      • Panels
      • Gutters
      • Edition Toolbar
      • Paginator
      • Borders
      • Column Context Menu
      • Waiting Indicator
    • DataSource
      • In-Memory DataSource
      • Custom DataSource
    • Theming
  • Columns
    • Column Definitions
    • Column Grouping
    • Column Sizing
    • Column Moving
    • Column Pinning
  • Rows
    • Row Sorting
    • Row Selection
    • Row Grouping
    • Row Pagination
  • Filtering
    • Column Filters
    • Filter types
    • In-line Filters
  • Editing
    • Row Edition
    • Edition templates
    • Edition validation
    • Multiple rows edition
  • Reference
    • DkGrid API
      • DkGridColumnDef
      • DkGridSorting
      • DkGridSelection
      • DkGridRowGrouping
      • DkGridPagination
      • DkGridWaitingIndicator
      • DkGridFactoryDataSource
      • DkGridFilter
      • DkGridEdition
    • Components
      • DkGridComponent
      • DkGridColumnComponent
    • Classes
      • DataSource
      • Columns
      • Rows
      • Filtering
      • Editing
    • Interfaces
      • Columns
      • Sorting
      • Row Grouping
      • Filtering
      • Editing
    • Injection Tokens
      • Grid Structure
      • Filtering
      • Editing
      • Theming
    • Type aliases
      • DataSource
      • Columns
      • Selection
      • Filtering
      • Editing
    • Type Guards
Powered by GitBook
On this page
  • Edition Toolbar Row
  • Edition Toolbar position
  • Edition Toolbar alignment
  • Changing the Edition Toolbar Row Height
  • Changing the Edition Toolbar Items height
  1. Fundamentals
  2. Grid Structure

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.

PreviousGuttersNextPaginator

Last updated 3 years ago

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 , go to the Edition section, and click on the Edition mode checkbox.

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.

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.

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>

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>

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>

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>

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

Open the , and click on the Edition Toolbar checkbox.

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

Open the , go to the Edition group, and change the Edition Toolbar's alignment by clicking on the center option.

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

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

Floating Configuration Panel - Edition
Edition options
Edition Toolbar Row
Edition Toolbar Row at the top of the column headers
Edition Toolbar with center alignment
Changing the Edition Toolbar Row height
Changing the Edition Toolbar Items height
Floating Configuration Panel
Floating Configuration Panel
Floating Configuration Panel
Floating Configuration Panel
Floating Configuration Panel
Floating Configuration Panel