JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › Angular component as cell editor › Reply To: Angular component as cell editor
September 23, 2021 at 11:52 am
#102292
Member
Hi aconley,
Yes, that is correct that the template has to be a string and I will add a feature request item for this use case.
However I have create a little workaround so that you can have similar functionality:
cellEditComponenet () {
const container = document.createElement('div');
let component = this.service.loadComponent(YourCustomComponent, container);
(component.componentRef.instance as YourCustomComponent).value = 123;
container.id = "editorComponent"
document.body.appendChild(container)
}
columns = [
{ label: 'Sales person', dataField: 'Salesperson', icon: 'fa-user', showIcon: true ,
editor: {
template: '<div> </div>',
settings: {value: null},
onInit(row: number, column: string, editor: any) {
let customEditor = document.getElementById('editorComponent');
editor.firstElementChild.appendChild(customEditor)
},
onRender(row: number, column: string, editor: any) {
const container = document.createElement('div');
let customEditor = document.getElementById('editorComponent');
console.log(editor)
editor.firstElementChild.appendChild(customEditor)
},
}
},
{ label: 'City', dataField: 'City', showIcon: true, icon: 'fa-university' },
{ label: 'Product', dataField: 'ProductName', icon: 'fa-product-hunt', showIcon: true },
{ label: 'Payment Method', dataField: 'PaymentMethod', icon: 'fa-money', showIcon: true },
];
ngAfterViewInit():void {
this.cellEditComponenet();
}
Let me know what you think about this!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/