Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #102260
    aconley
    Member
    Up
    0
    Down

    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?

    #102261
    nkralj
    Member
    Up
    0
    Down

    <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>

    #102262
    aconley
    Member
    Up
    0
    Down

    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!

    #102263
    nkralj
    Member
    Up
    0
    Down

    Sorry it was mistake. Wrong topic 🙂

    #102292
    YavorDashev
    Member
    Up
    0
    Down

    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/

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.