|
@Component({
selector: 'app-container',
template: `<ejs-grid #grid [dataSource]='data' id="gridcomp"
allowPaging='true' [editSettings]='editSettings' [toolbar]='toolbarItems' height='220px'>
<e-columns>
. . .
<e-column field='interval' headerText='interval' [edit]='datepickerTemplate' width='220'></e-column>
</e-columns>
</ejs-grid>`
})
export class AppComponent implements OnInit {
. . .
public intl: Internationalization = new Internationalization();
@ViewChild('grid')
public grid: GridComponent;
ngOnInit(): void {
. . .
this.datepickerTemplate = {
create: () => {
this.div = document.createElement('div');
this.div.style.width = '50%';
this.elem1 = document.createElement('input');
this.div.appendChild(this.elem1);
this.elem2 = document.createElement('input');
this.div.appendChild(this.elem2);
return this.div;
},
read: () => {
// converting date object into string with required format
const string1: string = this.intl.formatDate(this.datePickerObj1.value,
{ format: 'yyyy-MM-dd' });
const string2: string = this.intl.formatDate(this.datePickerObj2.value,
{ format: 'yyyy-MM-dd' });
const interval = string1 + '/' + string2;
return interval;
},
destroy: () => {
this.datePickerObj1.destroy();
this.datePickerObj2.destroy();
},
write: (args: { rowData: Object, column: any }) => {
// here data will be like “2018-10-16/2018-10-20”
const dates: string = args.rowData[args.column.field].split('/');
this.datePickerObj1 = new DatePicker({
value: new Date(dates[0]),
floatLabelType: 'Never'
});
this.datePickerObj1.appendTo(this.elem1);
this.datePickerObj2 = new DatePicker({
value: new Date(dates[1]),
floatLabelType: 'Never'
});
this.datePickerObj2.appendTo(this.elem2);
}
};
}
}
| 
