Skip to content

[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.

Sign up for GitHub

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

Open
Raushen wants to merge 4 commits into
base: 25_2
Choose a base branch
from
Open

[SPIKE] DataGrid - Smart paste #32027

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f0635b5
SmartPaste spike
Raushen Dec 22, 2025
1d632ff
Refactoring
Raushen Dec 22, 2025
3e63b41
Spike
Raushen Dec 22, 2025
d09d8f4
Story book
Raushen Dec 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
170 changes: 168 additions & 2 deletions apps/react-storybook/stories/examples/datagrid/DataGrid.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import { countries, generateData } from './data';
import DataGrid, {
Column,
DataGridTypes,
Editing,
Form,
Grouping,
GroupPanel,
Pager,
Expand All @@ -15,6 +17,7 @@ import DiscountCell from "./DiscountCell";
import ODataStore from "devextreme/data/odata/store";
import { AIIntegration } from 'devextreme-react/common/ai-integration';
import { AzureOpenAI } from 'openai';
import notify from 'devextreme/ui/notify';

const columnOptions = {
regularColumns: [
Expand Down Expand Up @@ -241,8 +244,7 @@ export const ColumnReordering: Story = {
rtlEnabled: false,
columnHidingEnabled: true,
dataSource: countries,
// @ts-expect-error
columns: 'regularColumns',
columns: 'regularColumns' as any,
Copy link

Copilot AI Dec 22, 2025

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.

Suggested change
columns: 'regularColumns' as any,
columns: 'regularColumns' as unknown as DataGridTypes.Column[],

Copilot uses AI. Check for mistakes.
columnFixing: {
enabled: false
},
Expand Down Expand Up @@ -353,3 +355,167 @@ export const AiColumn: Story = {
allowColumnReordering: true,
},
};

const employees = [
{
ID: 1,
FirstName: 'John',
LastName: 'Heart',
Position: 'CEO',
BirthDate: new Date('1964/03/16'),
HireDate: new Date('1995/01/15'),
City: 'Los Angeles',
State: 'CA',
Email: 'jheart@dx-email.com',
Phone: '+1(213) 555-9392'
},
{
ID: 2,
FirstName: 'Olivia',
LastName: 'Peyton',
Position: 'Sales Assistant',
BirthDate: new Date('1981/06/03'),
HireDate: new Date('2012/05/14'),
City: 'Atlanta',
State: 'GA',
Email: 'oliviap@dx-email.com',
Phone: '+1(310) 555-2728'
},
{
ID: 3,
FirstName: 'Robert',
LastName: 'Reagan',
Position: 'CMO',
BirthDate: new Date('1974/09/07'),
HireDate: new Date('2002/11/08'),
City: 'Bentonville',
State: 'AR',
Email: 'robertr@dx-email.com',
Phone: '+1(818) 555-2387'
},
];

export const SmartPaste: Story = {
argTypes: {
editingMode: {
control: 'radio',
options: ['form', 'popup'],
description: 'Editing mode for the DataGrid',
},
},
args: {
dataSource: employees,
keyExpr: 'ID',
showBorders: true,
editingMode: "popup",
},
render: (args) => {
const { editingMode, ...gridArgs } = args;

const sampleText = `Name: Sarah Johnson
Position: Senior Developer
Email: sarah.johnson@company.com
Phone: +1(555) 123-4567
Born: 1985/06/15
Hired: 2020/03/01
Location: San Francisco, CA`;

const copyToClipboard = () => {
navigator.clipboard.writeText(sampleText).then(() => {
notify({
message: 'Text copied to clipboard! Now click "Add" and then "Smart Paste" in the form.',
position: {
my: 'bottom center',
at: 'bottom',
of: window,
},
width: 'auto',
}, 'success', 2500);
}).catch(() => {
notify({
message: 'Failed to copy text to clipboard',
position: {
my: 'bottom center',
at: 'bottom',
of: window,
},
width: 'auto',
}, 'error', 2000);
});
};

return (
<div>
<div style={{
marginBottom: '20px',
padding: '15px',
backgroundColor: '#e3f2fd',
borderLeft: '4px solid #2196f3',
borderRadius: '4px'
}}>
<h3 style={{ marginTop: 0, color: '#1976d2' }}>AI Integration - Smart Paste Demo</h3>
<p style={{ margin: '10px 0' }}><strong>How to use:</strong></p>
<ol style={{ margin: '5px 0', paddingLeft: '20px' }}>
<li>Change editing mode in Storybook Controls: <strong>form</strong> (inline) or <strong>popup</strong> (modal)</li>
<li>Click the <strong>"Copy Sample Text"</strong> button below</li>
<li>Click <strong>"Add"</strong> button in the DataGrid to open the edit form</li>
<li>In the edit form, click the <strong>"Smart Paste"</strong> button</li>
<li>Watch the AI automatically fill all fields from the copied text! ✨</li>
</ol>
<p style={{ margin: '10px 0', fontSize: '14px', color: '#666' }}>
<strong>Sample text:</strong>
</p>
<div style={{
backgroundColor: '#fff',
padding: '10px',
margin: '10px 0',
border: '1px solid #ccc',
borderRadius: '4px',
fontFamily: 'monospace',
fontSize: '12px',
whiteSpace: 'pre-line'
}}>
{sampleText}
</div>
<button
onClick={copyToClipboard}
style={{
padding: '10px 20px',
backgroundColor: '#2196f3',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '14px',
fontWeight: 'bold'
}}
>
📋 Copy Sample Text
</button>
</div>
<DataGrid {...gridArgs}>
<Column dataField="FirstName" caption="First Name" />
<Column dataField="LastName" caption="Last Name" />
<Column dataField="Position" />
<Column dataField="BirthDate" dataType="date" />
<Column dataField="HireDate" dataType="date" />
<Column dataField="City" />
<Column dataField="State" />
<Column dataField="Email" />
<Column dataField="Phone" />

<Editing
mode={editingMode}
allowAdding={true}
allowUpdating={true}
allowDeleting={true}
>
<Form aiIntegration={aiIntegration} />
</Editing>

<Paging pageSize={10} />
</DataGrid>
</div>
);
}
};
Loading
Loading