[REACT] cellEditing by clicking on an icon

[d.salvati]

By default I can edit a cell by clicking on it. I would like to disable this function and add a click event on the pencil icon to then modify the first cell of the corresponding row as attached.
How can I achieve this?
thanks

[alex.l]

Hi d.salvati,

ActionColumn docs is here: https://bryntum.com/docs/grid/#Grid/column/ActionColumn

Cell editing is provided by this feature: https://bryntum.com/docs/grid/#Grid/feature/CellEdit
Please, review docs and let us know if you still have questions.

https://bryntum.com/docs/grid/#Grid/feature/CellEdit#config-triggerEvent
https://bryntum.com/docs/grid/#Grid/feature/CellEdit#function-startEditing
https://bryntum.com/docs/grid/#Grid/feature/CellEdit#preventing-editing-of-certain-cells
https://bryntum.com/docs/grid/#Grid/feature/CellEdit#event-beforeCellEditStart

const grid = new TreeGrid({
    appendTo : document.body,
    features : {
        cellEdit : {
            triggerEvent : ''
        }
    },
    columns  : [
    // .....
    {
        type    : 'action',
        text    : 'Edit record',
        actions : [{
            cls      : 'b-fa b-fa-pencil',
            onClick  : ({ record }) => grid.startEditing(record)
        }]
    }]
});

All the best,
Alex

[d.salvati]

thank you, that was useful!

[d.salvati]

Hello, a further question: is it possible to click on the pencil icon and open an editable popup or form with the contents of the specific row?
Or instead I need to build it by myself? thanks

[Maxim Gorkovsky]

Hello.
It is possible with a Popup, few fields, button and event listeners, there's no default editor in the code base. Please refer to this demo to see how we make editor with a popup component: https://bryntum.com/examples/grid/columns/ And please refer to this doc article for popup: https://bryntum.com/docs/grid/#Core/widget/Popup

[d.salvati]

Hello, I had a look at the example and DOC, it is possible to add columns, what about rows with new data to insert?
Thanks!

[Maxim Gorkovsky]

You can add grid to the popup, add columns, rows, buttons, anything really:

const p = new Popup({
    items : [{
        type    : 'grid',
        columns : [{ text : 'Foo', field : 'bar' }],
        data    : [{ bar : 'foo' }],
        bbar    : [{
            type : 'button',
            text : 'Ok',
            onClick() {
                console.log('clicked')
            }
        }]
    }]
});

p.show();