DevExtreme DataGrid - How to maintain Edit Mode state (active) when using an advanced UI component for cell editing 

Our JavaScript DataGrid allows you to integrate/embed advanced UI components for cell editing purposes. For example, your DevExtreme-powered app can select a DataGrid cell value from a list displayed within a different DataGrid. 

Embedded controls can display overlays, such as column choosers or filter dialogs. These pop-up dialogs insert their code into the root of the DOM tree, not inside the DOM of their parent components. When a user clicks on such an overlay element, the DataGrid assumes that the interaction occurred outside the component. As a result, it cancels Edit Mode. This behavior disrupts the intended user experience (in this instance, using a DataGrid as an embedded editor). 

You can maintain Edit Mode state (keep it active) even if a user interacts with an embedded control’s overlay. Monitor the DOM for new elements. If an overlay appears, mark it with the following CSS class: dx-dropdowneditor-overlay. The DataGrid then treats this element as part of the component UI and maintains Edit Mode state (active).

Files to Review

• jQuery
  • index.js
• Angular
  • app.component.html
  • app.component.ts
• Vue
  • Home.vue
  • DropDownBoxComponent.vue
• React
  • App.tsx
  • DropDownBoxComponent.tsx
• NetCore
  • Index.cshtml

Documentation

• DataGrid: How to Customize Editors

More Examples

• DataGrid Demo: Custom Editors