Angular component as cell editor

[aconley]

I followed the example to use an Angular component in a grid column, and that seemed to work ok, but now I’d like to use an Angular component as a cell editor. I tried the same template logic, but it seems the template in the editor has to be a string. Can you provide an example on how to do this, or point me to one if it already exists?

[nkralj]

<div>
<div>My setup:</div>
<div>    “smart-webcomponents”: “^10.0.0”,</div>
<div>    “vue”: “^3.0.0”,</div>
<div>    “vue-router”: “^4.0.11″</div>
</div>
<div></div>
<div>Complete vue component:</div>
<div></div>
<div>
<div>
<div><template></div>
<div>    <smart-grid id=”grid”></smart-grid></div>
<div></template></div>
<div><script></div>
<div>    /* eslint-disable */</div>
<div>    import “../../node_modules/smart-webcomponents/source/styles/smart.default.css”;</div>
<div>    import “../../node_modules/smart-webcomponents/source/modules/smart.grid.js”;</div>
<div>    export default {</div>
<div>        mounted() {</div>
<div>            this.initGrid();</div>
<div>        },</div>
<div>        methods: {</div>
<div>            initGrid() {</div>
<div>                let vm = this;</div>
<div>                window.Smart(‘#grid’, class {</div>
<div>                    get properties() {</div>
<div>                        return {</div>
<div>                           editing: {</div>
<div>                                enabled: true,</div>
<div>                                mode: ‘cell'</div>
<div>                            },</div>
<div>                            filtering: {</div>
<div>                                enabled: true,</div>
<div>                                filterRow: {</div>
<div>                                    visible: true</div>
<div>                                }</div>
<div>                            },</div>
<div>                            dataSource: new window.Smart.DataAdapter({</div>
<div>                                dataSource: [</div>
<div>                                    {id: 11, premiered: ‘2021-01-01’, name: ‘Only Fools and Horses’},</div>
<div>                                    {id: 22, premiered: ‘2021-02-02’, name: ‘Breaking Bad’},</div>
<div>                                    {id: 33, premiered: ‘2021-03-03’, name: ‘Sweet Tooth’},</div>
<div>                                ],</div>
<div>                                dataFields: [</div>
<div>                                    { name: ‘id’, dataType: ‘int’},</div>
<div>                                    { name: ‘premiered’, dataType: ‘date’},</div>
<div>                                    { name: ‘name’, dataType: ‘string’},</div>
<div>                                ]</div>
<div>                            }),</div>
<div>                            columns: [</div>
<div>                                {</div>
<div>                                    label: ‘Show’,</div>
<div>                                    dataField: ‘name'</div>
<div>                                },</div>
<div>                                {</div>
<div>                                    label: ‘Premiered’,</div>
<div>                                    dataField: ‘premiered’,</div>
<div>                                    cellsFormat: “dd.MM.yyyy”</div>
<div>                                }</div>
<div>                            ],</div>
<div></div>
<div>                        }</div>
<div>                    }</div>
<div>                }</div>
<div>            )</div>
<div></div>
<div>        }</div>
<div>    }</div>
<div>}</div>
<div></script></div>
</div>
</div>
<div></div>

[aconley]

Hopefully that was just a mistake, because it doesn’t answer the question at all. Not Angular, no custom cell editor, no component.
But bonus points for the nearly unreadable formatting!

[nkralj]

Sorry it was mistake. Wrong topic 🙂

[YavorDashev]

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/

[Author]

Posts