Hello Silvia,

I have been looking into your question and for the requirements regarding the data type column and the format of the date, what I could suggest you to use in this particular case is the date pipeline by submitting the given format dd-MM-yyyy. Thus, even after saving the grid state and reloading the page, the dates will be visualized in the given format without requiring additional event handling and property setting.

<ng-template #editDateTemplate igxCell let-cell="cell">
       <div>{{ cell.value | date: 'dd-MM-yyyy' }}</div>
</ng-template>

Additionally, when clicking on the edit icon and when executing the function, you could check whether the data type column is being edited and if so, present the date in the correct format in the dialog by splitting the cell value by the given symbol and rearranging the data in the given format dd-MM-yyyy.

public editCellDialog(rowId: any, columnName: any, cellValue: any) {
    if(columnName === "RegistererDate"){
      let arr = cellValue.split('-');
      cellValue = arr[2] + '-' + arr[1]+ '-' + arr[0];
    }
    this.editRowId = rowId;
    this.editCellValue = cellValue;
    this.editColumnName = columnName;
    this.dialogEdit.open();
  }

After that, when you press the confirm button in the dialog and save the changes, you will again check whether the changes are saved for this particular data type column and if so, you will return the data to its initial state so that the changes are reflected correctly.

public confirmEditedDataDialog() {
    if(this.editColumnName === "RegistererDate"){
      let arr = this.editCellValue.split('-');
      this.editCellValue = arr[2] + '-' + arr[1]+ '-' + arr[0];
    }
    this.grid.updateCell(this.editCellValue, this.editRowId, this.editColumnName);
    this.dialogEdit.close();
  }

Regarding the second question about the setting of the two ng-templates to eliminate the use of the onColumnInit event, what you can do is in the restoreGridState function, which is executed when the grid is loaded, in the ngAfterViewInit hook, is to add the setting of the templates for both the datatype column and the First Name column. As for the second column of the bodyTemplate property you will submit the second template with the igxCell directive, and on the inlineEditorTemplate property you will submit the first template with the igxCellEditor directive. In this way, you will have both templates in the grid after restoring the state.

public restoreGridState() {
    const state = window.localStorage.getItem('grid-state');
    if (state) {
      this.state.setState(state);
    }
    let columnData = this.grid.getColumnByName('RegistererDate');
    columnData.bodyTemplate = this.editDateTemplate;
    let columnFirstName = this.grid.getColumnByName('FirstName');
    columnFirstName.bodyTemplate = this.editFirstName2;
    columnFirstName.inlineEditorTemplate = this.editFirstName1;
  }

The described scenario could be observed here:

In addition, I have prepared small sample illustrating this behavior which could be found here. Please test it on your side and let me know how it behaves.

If you require any further assistance on the matter, please let me know.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics