-
Notifications
You must be signed in to change notification settings - Fork 661
[SPIKE] DataGrid - Smart paste #32027
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: 25_2
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
This PR implements a Smart Paste feature for DataGrid's form-based editing modes (both inline form and popup). The feature uses AI integration to automatically populate form fields from clipboard content when users click a "Smart Paste" button.
Key Changes:
- Adds Smart Paste button to form and popup editing modes when
editing.form.aiIntegrationis configured - Implements
onSmartPastedcallback to update both the underlying data model and form editor widgets - Includes comprehensive Jest tests covering form and popup modes with save/cancel scenarios
- Adds interactive Storybook demo with sample data for testing the feature
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
packages/devextreme/js/__internal/grids/grid_core/editing/m_editing_form_based.ts |
Adds Smart Paste button configuration, toolbar integration for both form and popup modes, and implements the onSmartPasted event handler to update form fields and underlying data |
packages/devextreme/js/__internal/grids/grid_core/editing/__tests__/m_editing_form_smart_paste.test.ts |
New comprehensive test suite with 4 tests covering Smart Paste functionality in both form and popup modes, including save and cancel scenarios |
apps/react-storybook/stories/examples/datagrid/DataGrid.stories.tsx |
Adds new SmartPaste story with interactive demo, including a helper button to copy sample text and detailed instructions; also contains an unrelated cleanup changing @ts-expect-error to as any |
| dataSource: countries, | ||
| // @ts-expect-error | ||
| columns: 'regularColumns', | ||
| columns: 'regularColumns' as any, |
Copilot
AI
Dec 22, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This change from a @ts-expect-error comment to an explicit type assertion (as any) is unrelated to the Smart Paste feature being added in this PR. While it may be a minor improvement in code style, such incidental changes should ideally be in a separate commit or PR to keep the scope focused on the Smart Paste implementation.
If this change is intentional cleanup, consider noting it in the PR description or separating it into its own commit.
| columns: 'regularColumns' as any, | |
| columns: 'regularColumns' as unknown as DataGridTypes.Column[], |
| this.updateFieldValue(cellOptions, newValue, undefined); | ||
| } | ||
|
|
||
| const itemID = this._editForm.getItemID(dataField); | ||
| const $formElement = this._editForm.$element(); | ||
|
|
||
| const escapedID = itemID.replace(/([.:!])/g, '\\$1'); | ||
| const $fieldItem = $formElement.find(`#${escapedID}`).first(); | ||
|
|
||
| if ($fieldItem.length) { | ||
| const $widget = $fieldItem.closest('.dx-widget'); | ||
|
|
||
| if ($widget.length) { | ||
| const widgetNames = $widget.data('dxComponents'); | ||
|
|
||
| if (widgetNames && widgetNames.length > 0) { | ||
| const widgetInstance = $widget.data(widgetNames[0]); | ||
|
|
||
| if (widgetInstance && widgetInstance.option) { | ||
| widgetInstance.option('value', newValue); | ||
| } | ||
| } | ||
| } | ||
| } |
Copilot
AI
Dec 22, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The onSmartPasted handler appears to be updating field values twice - once through updateFieldValue (lines 427-436) and again by directly manipulating the widget instance (lines 438-458). This creates redundancy and potential inconsistency.
The updateFieldValue method should already handle updating the underlying data and triggering appropriate updates. The direct widget manipulation afterward may be unnecessary and could lead to issues where the two update mechanisms get out of sync.
Consider removing the direct widget manipulation code (lines 438-458) and relying solely on updateFieldValue, or clarify why both updates are necessary with a comment explaining the rationale.
| this.updateFieldValue(cellOptions, newValue, undefined); | |
| } | |
| const itemID = this._editForm.getItemID(dataField); | |
| const $formElement = this._editForm.$element(); | |
| const escapedID = itemID.replace(/([.:!])/g, '\\$1'); | |
| const $fieldItem = $formElement.find(`#${escapedID}`).first(); | |
| if ($fieldItem.length) { | |
| const $widget = $fieldItem.closest('.dx-widget'); | |
| if ($widget.length) { | |
| const widgetNames = $widget.data('dxComponents'); | |
| if (widgetNames && widgetNames.length > 0) { | |
| const widgetInstance = $widget.data(widgetNames[0]); | |
| if (widgetInstance && widgetInstance.option) { | |
| widgetInstance.option('value', newValue); | |
| } | |
| } | |
| } | |
| } | |
| // Rely on updateFieldValue to update both data and associated editors. | |
| this.updateFieldValue(cellOptions, newValue, undefined); | |
| } |
No description provided.