Reply To: Angular component as cell editor

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