Hi Domantas,
Thanks for contacting Syncfusion support.
Query: Wanted to ask, is there a way to have datepicker component as filterbar template. I've managed to set templates with HTML element creation but this kinda needs to be a component element and not to be different from ejs-datepicker.
We have validated your query and we have prepared a simple sample based on your requirement. Here, we have render datepicker component in filterbartemplate. Please find the below code example and sample for your reference.
[code example] [filtering.html]
|
<div class="control-section">
<ejs-grid #grid [dataSource]='data' allowPaging='true' allowFiltering='true' [pageSettings]='pageSettings'>
...
...
<e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign='Right' [filterBarTemplate]='templateOptionsDate'></e-column>
...
</e-columns>
</ejs - grid >
</div> |
[[filtering.component.ts]
|
public ngOnInit(): void {
this.data = orderDetails;
this.pageOptions = { pageSize: 10, pageCount: 5 };
this.templateOptionsDate = {
create: () => {
this.elem1 = document.createElement('input');
return this.elem1;
},
write: (args) => {
this.datePickerObj = new DatePicker({
value: new Date(args.column.field),
floatLabelType: 'Never',
change: changes.bind(this),
});
this.datePickerObj.appendTo(this.elem1);
}
}
}
}
function changes(args) {
let targEle: any = parentsUntil(args.element, 'e-filtertext');
let columnName : string = targEle.id.replace('_filterBarcell', '');
if (args.value) {
this.grid.filterByColumn(columnName, 'equal', args.value);
} else {
this.grid.removeFilteredColsByField(columnName);
}
} |
Please find the sample in below link.
Please get back to us if you need further assistance on this.
Regards,
Hariharan
