Toggle inline editing / separate edit screen depending on whether clicked column is editable

Support
#1

Hi,

In order to create a smooth user experience, I would like to achieve the following for a DataGrid component for which direct in-line editor is enabled:

  • If the double-clicked column is editable, enter the in-line edit normally.
  • If the double-clicked column is not editable, open a separate edit screen.

The reason for doing this is that some column items are complex and require a separate screen to edit properly, while some are simple and can be modified in-line. Currently to achieve this, my user has to click on the “Edit” button for the former, but it would be nice if the same double-lick interaction could be used.

I suppose I need to set the “setItemClickAction”, but I don’t know how to pass which row/column was clicked to the action.

Please kindly advise on the best way to achieve this behaviour.

Thanks

#3

Hi, @Matthis.

As the DataGrid provides no ability to prevent the editor from opening in certain situations, you need to use a workaround. Below the code that implements what your need.

@Inject
private DataGrid<User> dataGrid;
@Named("dataGrid.edit")
private Action dataGridEdit;

@Override
public void init(Map<String, Object> params) {
    // Prevent editor opening if the EditAction associated with a DataGrid
    dataGrid.setItemClickAction(new BaseAction("dataGridItemClickAction"));

    dataGrid.addItemClickListener(event -> {
        if (event.isDoubleClick()) {
            if ("group".equals(event.getColumnId())) {
                dataGridEdit.actionPerform(null);
                // Use this instead of EditAction, if there is no edit acton associated with a DataGrid
                // openEditor(event.getItem(), WindowManager.OpenType.THIS_TAB);
            } else {
                // We need to enable inline editor to avoid exception
                // which is thrown if the 'edit' method is used for a DataGrid with disabled inline editor
                dataGrid.setEditorEnabled(true);
                dataGrid.edit(event.getItem());
            }
        }
    });

    // If inline editor is enabled it has priority over all actions
    // and there is no way to prevent it from opening, so we need to disable
    // inline editor to enable it at the proper time.
    dataGrid.addEditorCloseListener(event -> dataGrid.setEditorEnabled(false));
}
2 Likes
#5

Hi Gleb,

Thank you very much for providing a full work-around.
This works great!

Matthis

PS: I made 2 modifications:

  1. Started by disabling the editor,

  2. Replaced the if condition to react based on whether the column is editable or not

        public final static void toggleInlineEditor(DataGrid dataGrid) {
    dataGrid.setEditorEnabled(false);
 // Prevent editor opening if the EditAction associated with a DataGrid
 dataGrid.setItemClickAction(new BaseAction("dataGridItemClickAction"));

 dataGrid.addItemClickListener(event -> {
     if (event.isDoubleClick()) {
         if (!dataGrid.getColumn(event.getColumnId()).isEditable()) {
             dataGrid.getAction("edit").actionPerform(null);
       
         } else {
             // We need to enable inline editor to avoid exception
             // which is thrown if the 'edit' method is used for a DataGrid with disabled inline editor
             dataGrid.setEditorEnabled(true);
             dataGrid.edit((Entity) event.getItem());
         }
     }
 });

 // If inline editor is enabled it has priority over all actions
 // and there is no way to prevent it from opening, so we need to disable
 // inline editor to enable it at the proper time.
 dataGrid.addEditorCloseListener(event -> dataGrid.setEditorEnabled(false));

    }

2 Likes