Search code examples
devextreme

devextreme-react datagrid, enable editor separately for inserting (new rows) and editing (existing rows)

I'm using devextreme-react. I need to make some cells insertable (new rows) but not editable (existing rows), but configuration provide only 'allowEditing' options that doesn't distinguish between inserting new records or editing existing ones.

I tried to provide to each cell custom parameters 'insertable' and 'editable' in order to make a cell editable separately in different context (only insertable, only editable, in both contexts).

Then I tried two approaches:

  1. onFocusedCellChanged I would to close the active editor when unnecessary
  2. set allowEditing to false for all cells and onFocusedCellChanged enable editor only if necessary using datagrid method editCell(rowIndex, visibleColumnIndex).

Here is an example of first approach:

Edit n9o67znjrp

As you can see, there are some problems:

  1. autofocus on first editable field doesn't trigger onFocusedCellChanged
  2. I miss a way to understand if a row is new or not, simply trying to detect if key field is undefined or null doesn't work
  3. closeEditCell doesn't close the editor

Also using second approach focus is not always triggered and manually enabling editor does nothing

Solution

  • The only way I found to solve this problem is using editCellRender, then the editor is shown only when appropriate conditions are met.

    In order to use editCellRender I've to separate columns configuration from grid configuration and use Column component (Datagrid.Column from devextreme-react/data-grid)

    To distinguish between insert and update I rely on dxkey prop, I'm not sure this is the best way.

    Here is a fork of codesandbox with solution:

    Edit 1pw3r2597