Customising dataGrid behaviour

Hello everyone, this is my first post here.
I’ve searched in the forum but couldn’t find an answer and I’m getting lost in the documentation, so I’m here to ask for help.

I want to achieve the following objective: being able to use dataGrid (or any other component you suggest to use) so that it is editable inline and always has a new white row at the end.

I’m not asking for a complete solution, just to point the finger to some specific documentation or to the fact that this is not possible.

I know that I can make the rows editable specifying editorEnabled="true" in the dataGrid XML.
Once I’ve edited the fields (tabbing between the various cells) I want to press Enter to insert the changes in the database. Once the fields got inserted I would like the UI to create a new empty row that is selected and editable, so that I can insert another row by tabbing between the cells.

Is this possible? Where can I start looking to understand how to achieve this?

Thanks for you help.

Is it even possible to do such a thing?

Hello!

Inline editor has lifecycle events: open, close, pre/post commit (see Usage of DataGrid inline editor).

For buffered mode you can use pre/post commit events. For instance, you can subscribe to EditorPostCommitEvent and there create new entity, select it and edit:

@Subscribe("ordersDataGrid")
public void onOrdersDataGridEditorPostCommit(DataGrid.EditorPostCommitEvent event) {
    Order order = dataManager.create(Order.class);
    ordersDc.getMutableItems().add(order);
    ordersDataGrid.setSelected(order);
    // close editor as the close event is not invoked due to the entity is committed
    ordersDataGrid.withUnwrapped(CubaGrid.class, cubaGrid -> cubaGrid.getEditor().cancel());
    ordersDataGrid.edit(order);
}

Note, that a close event is not invoked if the entity was saved. Also, you need to delegate create/edit actions to the inline editor. For example:

@Subscribe("ordersDataGrid.create")
public void onOrdersDataGridCreate(Action.ActionPerformedEvent event) {
    Order order = dataManager.create(Order.class);
    ordersDc.getMutableItems().add(order);
    ordersDataGrid.edit(order);
}

@Subscribe("ordersDataGrid.edit")
public void onOrdersDataGridEdit(Action.ActionPerformedEvent event) {
    if (ordersDataGrid.getSingleSelected() != null) {
        ordersDataGrid.edit(ordersDataGrid.getSingleSelected());
    }
}
2 Likes

Thanks for your reply, I’ll give it a try :slight_smile: