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.
Column type
Default template
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.
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:
Column type
Array type
Text
DikeTextSelectionModel
Numeric
DikeNumericSelectionModel
Binary
DikeBinarySelectionModel
Let us provide options to our Gender and Age default templates.
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.
For Text and Numeric columns, you can provide any number of options.
Custom templates
You can provide your custom templates if you need a more specific template for editing your column values.
@Component({ selector:'edition-templates', templateUrl:'./edition-templates.component.html', styleUrls: ['./edition-templates.component.scss'], encapsulation:ViewEncapsulation.None, changeDetection:ChangeDetectionStrategy.OnPush})exportclassEditionTemplatesComponentimplementsOnInit,OnDestroy {// Retrieve the Total sales templates: @ViewChild('totalSales', { read: TemplateRef }) totalSalesTpl:TemplateRef<any>; @ViewChild('totalSalesEdition', { read: TemplateRef }) totalSalesEditionTpl:TemplateRef<any>;//...onColumnDefInstance(columnDef:DikeGridColumnDef<Employee>):void {// Define the Total Sales column:consttotalSalesColumn=newDikeNumericColumnDef<Employee>('totalSales','Total Sales');totalSalesColumn.width =230;totalSalesColumn.order =7;totalSalesColumn.editable =true;totalSalesColumn.editionSettings = { required:true }; // Since templates will be available after the view is initialized, we schedule the assignment at the end of the event loop:
totalSalesColumn.displayTemplate =from(Promise.resolve().then(() =>this.totalSalesTpl));totalSalesColumn.editionTemplate =from(Promise.resolve().then(() =>this.totalSalesEditionTpl));columnDef.addColumns(totalSalesColumn); }}
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.
The editionTemplate and displayTemplate properties accept a TemplateRef or an Observable of a TemplateRef.
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.
@Component({ selector:'edition-templates', templateUrl:'./edition-templates.component.html', styleUrls: ['./edition-templates.component.scss'], encapsulation:ViewEncapsulation.None, changeDetection:ChangeDetectionStrategy.OnPush})exportclassEditionTemplatesComponentimplementsOnInit,OnDestroy {// Retrieve the DikeGridComponent<T> instance from the view: @ViewChild('grid') dikeGrid:DikeGridComponent<Employee>;// Retrieve the Total sales templates: @ViewChild('genderEdition', { read: TemplateRef }) genderEditionTpl:TemplateRef<any>; @ViewChild('emailEdition', { read: TemplateRef }) emailEditionTpl:TemplateRef<any>;//...onCustomTemplate(field:string):void {constgivenColumn=this.dikeGrid.columnDef.findColumn(column =>column.fieldName === field);// The column exists and is a data column:if (!!givenColumn &&isDikeDataColumnDef(givenColumn)) {// Get the custom edition template:constcolumnTemplate= field ==='gender'?this.genderEditionTpl :this.emailEditionTpl;// Assign the custom template for the given column:this.dikeGrid.columnDef.setColumnEditable(givenColumn,true, { editionTemplate: columnTemplate }); } }onDefaultTemplate(field:string):void {constgivenColumn=this.dikeGrid.columnDef.findColumn(column =>column.fieldName === field);// The column exists and is a data column:if (!!givenColumn &&isDikeDataColumnDef(givenColumn)) {this.dikeGrid.columnDef.setDefaultEditionTemplateColumn(givenColumn); } }}
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.
As you can see, when changing the template, the DikeGrid re-renders the view for that column.
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.
