This Example demonstrates how to dynamically updated the following columns "Select editor options" based on "the value of the edited cell" whilst full row editing.
How it works
Composition API Implementation (Vue 3)
Whenever full row editing starts, all editors' state is stored onto the global grid variable, in Vue refs.
We use Vue Watcher to monitor the parent column state and update the child column state if the value of the parent column has changed.
Grid context is the global variable used to store the editor's state and to provide the editor's reference data.
Plunker Example - https://plnkr.co/edit/xiVpRGin03o6mZUK?open=main.js
React Hooks Example
https://plnkr.co/edit/L50cCgZDeH6rmjE8?open=index.tsx
Options API Implementation (Vue 2)
Whenever full row editing starts, child columns will provide a reference to their update method and select element reference onto a global grid variable.
When the parent column is updated it will update and select the child.
Grid context is used as the global variable.
Plunker Example - https://plnkr.co/edit/PnBEXdaA6TNtRUBm?open=main.js
-
AG Grid Docs:
- Full Row Editing - https://www.ag-grid.com/vue-data-grid/cell-editing-full-row/
- Columns: Editing Properties - https://www.ag-grid.com/vue-data-grid/column-properties/#reference-editing
- Cell Editor Components - https://www.ag-grid.com/vue-data-grid/component-cell-editor/
- Grid Context - https://www.ag-grid.com/vue-data-grid/context/
- Grid Events - https://www.ag-grid.com/vue-data-grid/grid-events/
-
Vue Docs:
- Vue Watchers - https://vuejs.org/guide/essentials/watchers.html#watchers
- Reactive Variables
ref()- https://vuejs.org/guide/essentials/reactivity-fundamentals.html#reactive-variables-with-ref - Built-in Directives - https://vuejs.org/api/built-in-directives.html#built-in-directives
- Options API lifecycle - https://vuejs.org/api/options-lifecycle.html#options-lifecycle
- Template Refs - https://vuejs.org/guide/essentials/template-refs.html
Comments
0 comments
Please sign in to leave a comment.