Edition templates
This section describes how to provide custom templates for editing the column values.
Live example
Edition templates live example.
Default templates
It is enough to make a column editable to modify the column value. The DikeGrid instance will display the default templates depending on the column type. See the following table.
Text
A Material Form field with an input element with type equals text
.
Numeric
A Material Form field with an input element with type equals number
.
Date
A Material Form field with a Material Datepicker inside.
Binary
A Material checkbox.
Let us make some columns editable:
<dike-grid id="grid-edition-templates" height="600px" #grid="dkgGrid"
allowEdition
[editionMode]="gridProperties.editionMode">
<dike-grid-column
fieldName="employeeId"
headerText="Employee Id"
dataType="Text"
width="350">
</dike-grid-column>
<dike-grid-column
fieldName="completeNameGroup"
headerText="Complete Name">
<dike-grid-column
fieldName="firstName"
headerText="Name"
dataType="Text"
width="150"
editable>
</dike-grid-column>
<dike-grid-column
fieldName="lastName"
headerText="Surname"
dataType="Text"
width="150"
editable>
</dike-grid-column>
</dike-grid-column>
<dike-grid-column
fieldName="gender"
headerText="Gender"
dataType="Binary"
width="110"
editable>
</dike-grid-column>
<dike-grid-column
fieldName="age"
headerText="Age"
dataType="Numeric"
contentAlign="center"
width="100"
editable>
</dike-grid-column>
<dike-grid-column
fieldName="email"
headerText="Email"
dataType="Text"
width="300"
editable>
</dike-grid-column>
<dike-grid-column
fieldName="hireDate"
headerText="Hire Date"
dataType="Date"
editable>
</dike-grid-column>
</dike-grid>
The previous initial configuration generates the following output:

In general, the default templates achieve the edition operations well. However, the problem arises with the Binary
columns when these do not hold boolean values.
As you can see, our Gender column values are female
and male
. Therefore, those values do not match in a checkbox.
Before providing our custom templates, let us explore a slight variation in default templates.
Multiple Selection
Sometimes, you want the user to choose a value from a fixed number of options.
To achieve the previous task, you can provide an array of options to the default template. The DikeGrid instance will create a template with a Material Select-control inside a Form field.
You must provide a set of options depending on the column type:
Text
DikeTextSelectionModel
Numeric
DikeNumericSelectionModel
Binary
DikeBinarySelectionModel
Let us provide options to our Gender and Age default templates.
<dike-grid-column
fieldName="gender"
headerText="Gender"
dataType="Binary"
width="110"
editable
[editionSettings]="{ required: true, options: [ { label: 'M', value: 'male' }, { label: 'F', value: 'female' } ] }">
</dike-grid-column>
<dike-grid-column
fieldName="age"
headerText="Age"
dataType="Numeric"
contentAlign="center"
width="100"
editable
[editionSettings]="{ options: ageOptions }">
</dike-grid-column>

For Binary
columns, the DikeGrid will take the first two options of the provided set. The DikeGrid will ignore the other options if you offer more than two options.
Custom templates
You can provide your custom templates if you need a more specific template for editing your column values.
See the following custom templates:
<dike-grid id="grid-edition-templates" height="600px" #grid="dkgGrid"
(gridColumnDefInstance)="onColumnDefInstance($event)">
<dike-grid-column
fieldName="gender"
headerText="Gender"
dataType="Binary"
width="110"
editable
[editionSettings]="{ required: true, options: [ { label: 'M', value: 'male' }, { label: 'F', value: 'female' } ] }"
[editionTemplate]="genderEdition">
</dike-grid-column>
<dike-grid-column
fieldName="email"
headerText="Email"
dataType="Text"
width="300"
editable
[editionTemplate]="emailEdition">
</dike-grid-column>
</dike-grid>
<ng-template #genderEdition let-control="control" let-options="options">
<mat-radio-group class="flex flex-row justify-between" [formControl]="control">
<mat-radio-button *ngFor="let option of options" [value]="option.value">{{ option.label }}</mat-radio-button>
</mat-radio-group>
</ng-template>
<ng-template #emailEdition let-control="control">
<mat-form-field floatLabel="never">
<input matInput
type="text"
[formControl]="control"
autocomplete="off">
<mat-icon matSuffix>email</mat-icon>
</mat-form-field>
</ng-template>
<ng-template #totalSales let-value="fieldValue">
<p>{{ value | currency }}</p>
</ng-template>
<ng-template #totalSalesEdition let-control="control">
<mat-form-field floatLabel="never">
<input matInput
type="number"
[formControl]="control"
autocomplete="off">
<mat-icon matPrefix>attach_money</mat-icon>
</mat-form-field>
</ng-template>
We have defined templates for the Gender, Email, and Total Sales columns.
We take the options we set to the default template to provide them to our custom template for the Gender column.
We intentionally defined the Total Sales column in the code. See how we assign the template.

You will have access to the corresponding FormControl
and the options provided in the EditionFieldSettings
object.
Assigning a template using the API
You can assign a custom template to a column or set the default template again.
Before using the API, we have to retrieve the DikeGrid instance from the component's view.
<dike-grid id="grid-edition-templates" height="600px" #grid="dkgGrid">
</dike-grid>
DikeGrid Column API
You can set edition templates at runtime using the column API.
The methods regarding edition templates are:
setColumnEditable()
Use this method to set the edition template to the given column.
setDefaultEditionTemplateColumn()
You can establish the default edition template for the given column again.
For further details, see the DikeGridColumnDef
definition.
To see the API in action, consider the following configuration:
<div class="mt-2 flex flex-row flex-wrap items-center justify-around">
<div class="flex-none w-56 flex flex-col m-2 items-center">
<button mat-raised-button
class="flex-none w-56 my-2"
color="primary"
(click)="onDefaultTemplate('gender')">Gender default template
</button>
<button mat-raised-button
class="flex-none w-56 my-2"
color="primary"
(click)="onCustomTemplate('gender')">Gender custom template
</button>
</div>
<div class="flex-none w-56 flex flex-col m-2 items-center">
<button mat-raised-button
class="flex-none w-56 my-2"
color="primary"
(click)="onDefaultTemplate('email')">Email default template
</button>
<button mat-raised-button
class="flex-none w-56 my-2"
color="primary"
(click)="onCustomTemplate('email')">Email custom template
</button>
</div>
</div>
<dike-grid id="grid-edition-templates" height="600px" #grid="dkgGrid">
</dike-grid>
The previous definition generates the following output:

We have added four buttons:
Gender default template. When you click on this button, you will set the default template again.
Gender custom template. This action will assign the custom edition template.
Email default template. It will establish the default edition template.
Email custom template. You will set the custom edition template when you click on this button.
Summary
The DikeGrid definition offers you a default template for each column type. Nonetheless, you can provide custom edition templates when defining a column or using the API.
Complete code for this section.
<div class="mt-2 flex flex-row flex-wrap items-center justify-around">
<div class="flex-none w-56 flex flex-col m-2 items-center">
<button mat-raised-button
class="flex-none w-56 my-2"
color="primary"
(click)="onDefaultTemplate('gender')">Gender default template
</button>
<button mat-raised-button
class="flex-none w-56 my-2"
color="primary"
(click)="onCustomTemplate('gender')">Gender custom template
</button>
</div>
<div class="flex-none w-56 flex flex-col m-2 items-center">
<button mat-raised-button
class="flex-none w-56 my-2"
color="primary"
(click)="onDefaultTemplate('email')">Email default template
</button>
<button mat-raised-button
class="flex-none w-56 my-2"
color="primary"
(click)="onCustomTemplate('email')">Email custom template
</button>
</div>
</div>
<dike-grid id="grid-edition-templates" height="600px" #grid="dkgGrid"
[displayRowId]="gridProperties.displayRowId"
[gridElevation]="gridProperties.matElevation"
[gridElevationValue]="gridProperties.elevationValue"
[striped]="gridProperties.stripeRows"
[verticalRowLines]="gridProperties.verticalRowLines"
allowEdition
[editionMode]="gridProperties.editionMode"
(gridColumnDefInstance)="onColumnDefInstance($event)"
[datasource]="dkgDataSource">
<dike-grid-column
fieldName="employeeId"
headerText="Employee Id"
dataType="Text"
width="350">
</dike-grid-column>
<dike-grid-column
fieldName="completeNameGroup"
headerText="Complete Name">
<dike-grid-column
fieldName="firstName"
headerText="Name"
dataType="Text"
width="150"
editable>
</dike-grid-column>
<dike-grid-column
fieldName="lastName"
headerText="Surname"
dataType="Text"
width="150"
editable>
</dike-grid-column>
</dike-grid-column>
<dike-grid-column
fieldName="gender"
headerText="Gender"
dataType="Binary"
width="110"
editable
[editionSettings]="{ required: true, options: [ { label: 'M', value: 'male' }, { label: 'F', value: 'female' } ] }"
[editionTemplate]="genderEdition">
</dike-grid-column>
<dike-grid-column
fieldName="age"
headerText="Age"
dataType="Numeric"
contentAlign="center"
width="100"
editable
[editionSettings]="{ options: ageOptions }">
</dike-grid-column>
<dike-grid-column
fieldName="email"
headerText="Email"
dataType="Text"
width="300"
editable
[editionTemplate]="emailEdition">
</dike-grid-column>
<dike-grid-column
fieldName="hireDate"
headerText="Hire Date"
dataType="Date"
editable>
</dike-grid-column>
</dike-grid>
<ng-template #genderEdition let-control="control" let-options="options">
<mat-radio-group class="flex flex-row justify-between" [formControl]="control">
<mat-radio-button *ngFor="let option of options" [value]="option.value">{{ option.label }}</mat-radio-button>
</mat-radio-group>
</ng-template>
<ng-template #emailEdition let-control="control">
<mat-form-field floatLabel="never">
<input matInput
type="text"
[formControl]="control"
autocomplete="off">
<mat-icon matSuffix>email</mat-icon>
</mat-form-field>
</ng-template>
<ng-template #totalSales let-value="fieldValue">
<p>{{ value | currency }}</p>
</ng-template>
<ng-template #totalSalesEdition let-control="control">
<mat-form-field floatLabel="never">
<input matInput
type="number"
[formControl]="control"
autocomplete="off">
<mat-icon matPrefix>attach_money</mat-icon>
</mat-form-field>
</ng-template>
Last updated