Skip to content

Add DataGrid - AI-Powered Detail View Demo - #34775

Merged
markallenramirez merged 82 commits into
mainfrom
feature/add-demo-datagrid-ai-detail-view
Sep 25, 2026
Merged

markallenramirez merged 82 commits into
mainfrom
feature/add-demo-datagrid-ai-detail-view

Conversation

@markallenramirez

Copy link
Copy Markdown
Contributor

No description provided.

@markallenramirez markallenramirez self-assigned this Aug 14, 2026
@markallenramirez
markallenramirez force-pushed the feature/add-demo-datagrid-ai-detail-view branch from 6662d44 to a6fa404 Compare August 17, 2026 10:23
@markallenramirez
markallenramirez force-pushed the feature/add-demo-datagrid-ai-detail-view branch from f7b754b to f19efbb Compare August 24, 2026 08:14
Copilot AI review requested due to automatic review settings September 16, 2026 13:36

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Changes recommended

Unresolved critical and moderate findings remain, including Angular compilation and lifecycle failures plus accessibility issues.

Get a fresh assessment by requesting another Copilot review.

Review details

Suppressed comments (11)

apps/demos/Demos/DataGrid/AIPoweredDetailView/Angular/app/category/category.component.ts:6

  • These URLs are resolved relative to category.component.ts, so Angular looks for app/category/app/category/category.component.html and .css and the demo cannot compile. Use paths relative to this component file (./category.component.html and ./category.component.css).
  templateUrl: 'app/category/category.component.html',
  styleUrls: ['app/category/category.component.css'],

apps/demos/Demos/DataGrid/AIPoweredDetailView/Angular/app/detail-view/detail-view.component.html:4

  • The prompt editor only supplies a placeholder and no programmatic label. The generated input therefore has no reliable accessible name for screen readers (unlike the response editor below, which sets aria-label); pass [inputAttr] with a label such as Ask AI Assistant.
    <dx-text-box
      placeholder="Ask AI Assistant..."

apps/demos/Demos/DataGrid/AIPoweredDetailView/Angular/app/detail-view/detail-view.component.ts:15

  • These URLs are resolved relative to detail-view.component.ts, so Angular looks for app/detail-view/app/detail-view/detail-view.component.html and .css and the demo cannot compile. Use ./detail-view.component.html and ./detail-view.component.css instead.
  templateUrl: 'app/detail-view/detail-view.component.html',
  styleUrls: ['app/detail-view/detail-view.component.css'],

apps/demos/Demos/DataGrid/AIPoweredDetailView/React/DetailView.tsx:123

  • The prompt editor only supplies a placeholder and no programmatic label. The generated input therefore has no reliable accessible name for screen readers (unlike the response editor below, which sets aria-label); pass an inputAttr with a label such as Ask AI Assistant.
        <TextBox
          placeholder="Ask AI Assistant..."

apps/demos/Demos/DataGrid/AIPoweredDetailView/React/description.md:15

  • This paragraph says that submitting the prompt expands the detail row, but the prompt controls only exist after the user has already expanded that row (as described above). Please make the sequence explicit so the demo instructions do not mislead users.
To surface AI-generated insights within the DataGrid, this sample uses the [master-detail template](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/masterDetail/#component) together with DevExtreme [TextBox](/Documentation/Guide/UI_Components/TextBox/Overview/) and [Button](/Documentation/Guide/UI_Components/Button/Overview/) components. A [ButtonGroup](/Documentation/Guide/UI_Components/ButtonGroup/Getting_Started_with_ButtonGroup/) provides prompt suggestions, delivering an experience similar to the DevExtreme Chat [Suggestions](/Demos/WidgetsGallery/Demo/Chat/PromptSuggestions/) demo. When a user submits a prompt, the corresponding detail row expands and displays a [LoadPanel](/Documentation/Guide/UI_Components/LoadPanel/Overview/) while the AI processes the request. Once generation is complete, the response is rendered in a [read-only](/Documentation/ApiReference/UI_Components/dxTextArea/Configuration/#readOnly) [TextArea](/Documentation/Guide/UI_Components/TextArea/Getting_Started_with_TextArea/), allowing users to review AI-generated content directly within the DataGrid without leaving the current context.

apps/demos/Demos/DataGrid/AIPoweredDetailView/ReactJs/DetailView.js:120

  • The prompt editor only supplies a placeholder and no programmatic label. The generated input therefore has no reliable accessible name for screen readers (unlike the response editor below, which sets aria-label); pass an inputAttr with a label such as Ask AI Assistant.
          <TextBox
            placeholder="Ask AI Assistant..."

apps/demos/Demos/DataGrid/AIPoweredDetailView/ReactJs/description.md:15

  • This paragraph says that submitting the prompt expands the detail row, but the prompt controls only exist after the user has already expanded that row (as described above). Please make the sequence explicit so the demo instructions do not mislead users.
To surface AI-generated insights within the DataGrid, this sample uses the [master-detail template](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/masterDetail/#component) together with DevExtreme [TextBox](/Documentation/Guide/UI_Components/TextBox/Overview/) and [Button](/Documentation/Guide/UI_Components/Button/Overview/) components. A [ButtonGroup](/Documentation/Guide/UI_Components/ButtonGroup/Getting_Started_with_ButtonGroup/) provides prompt suggestions, delivering an experience similar to the DevExtreme Chat [Suggestions](/Demos/WidgetsGallery/Demo/Chat/PromptSuggestions/) demo. When a user submits a prompt, the corresponding detail row expands and displays a [LoadPanel](/Documentation/Guide/UI_Components/LoadPanel/Overview/) while the AI processes the request. Once generation is complete, the response is rendered in a [read-only](/Documentation/ApiReference/UI_Components/dxTextArea/Configuration/#readOnly) [TextArea](/Documentation/Guide/UI_Components/TextArea/Getting_Started_with_TextArea/), allowing users to review AI-generated content directly within the DataGrid without leaving the current context.

apps/demos/Demos/DataGrid/AIPoweredDetailView/Vue/DetailView.vue:5

  • The prompt editor only supplies a placeholder and no programmatic label. The generated input therefore has no reliable accessible name for screen readers (unlike the response editor below, which sets aria-label); pass an input-attr with a label such as Ask AI Assistant.
    apps/demos/Demos/DataGrid/AIPoweredDetailView/description.md:15
  • This paragraph says that submitting the prompt expands the detail row, but the prompt controls only exist after the user has already expanded that row (as described above). Please make the sequence explicit so the demo instructions do not mislead users.
    apps/demos/Demos/DataGrid/AIPoweredDetailView/jQuery/index.js:118
  • The prompt editor only supplies a placeholder and no programmatic label. The generated input therefore has no reliable accessible name for screen readers (unlike the response editor below, which sets aria-label); pass inputAttr with a label such as Ask AI Assistant.
    apps/demos/Demos/DataGrid/AIPoweredDetailView/jQuery/index.js:103
  • When a row is collapsed, dxremove aborts the request and the detail widgets are disposed before this promise's finally runs. The unconditional option/toggleLoadingState calls can therefore operate on disposed widgets (and the same issue occurs if an older request finishes after a newer detail is active). Only update these controls when activeAbortController === controller; otherwise return from the completion path.
  • Files reviewed: 46/49 changed files
  • Comments generated: 1
  • Review effort level: Lite

Copilot AI review requested due to automatic review settings September 16, 2026 13:52

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔵 Needs a closer look

Five moderate cancellation-handling issues can leave collapsed rows in an error state when reopened.

Review details

Suppressed comments (5)

apps/demos/Demos/DataGrid/AIPoweredDetailView/Angular/app/detail-view/detail-view.component.ts:112

  • Aborting the request when the row collapses rejects getAIResponse, but this catch treats that expected cancellation as a real failure and sets the error state. Collapsed master-detail content can remain mounted and hidden, so reopening the row then shows “An unexpected error occurred” even though no request failed. Ignore aborted controllers here instead of entering the error state.
    } catch {
      this.responseValue = '';
      this.isError = true;

apps/demos/Demos/DataGrid/AIPoweredDetailView/React/DetailView.tsx:100

  • Aborting the request when the row collapses rejects getAIResponse, but this catch treats that expected cancellation as a real failure and sets the error state. Collapsed master-detail content can remain mounted and hidden, so reopening the row then shows “An unexpected error occurred” even though no request failed. Ignore aborted controllers here instead of entering the error state.
    } catch {
      setResponseValue('');
      setIsError(true);

apps/demos/Demos/DataGrid/AIPoweredDetailView/ReactJs/DetailView.js:91

  • Aborting the request when the row collapses rejects getAIResponse, but this catch treats that expected cancellation as a real failure and sets the error state. Collapsed master-detail content can remain mounted and hidden, so reopening the row then shows “An unexpected error occurred” even though no request failed. Ignore aborted controllers here instead of entering the error state.
      } catch {
        setResponseValue('');
        setIsError(true);

apps/demos/Demos/DataGrid/AIPoweredDetailView/Vue/DetailView.vue:177

  • Aborting the request when the row collapses rejects getAIResponse, but this catch treats that expected cancellation as a real failure and sets the error state. Collapsed master-detail content can remain mounted and hidden, so reopening the row then shows “An unexpected error occurred” even though no request failed. Ignore aborted controllers here instead of entering the error state.
    apps/demos/Demos/DataGrid/AIPoweredDetailView/jQuery/index.js:97
  • Aborting the request when the row collapses rejects getAIResponse, but this catch treats that expected cancellation as a real failure and adds the error message. Collapsed master-detail content can remain mounted and hidden, so reopening the row then shows “An unexpected error occurred” even though no request failed. Ignore aborted controllers here; when there is no prior response, restore the initial message instead.
  • Files reviewed: 46/49 changed files
  • Comments generated: 0 new
  • Review effort level: Lite

@Alyar666
Alyar666 self-requested a review September 17, 2026 04:03
Comment thread apps/demos/Demos/DataGrid/AIPoweredDetailView/jQuery/index.js
Copilot AI review requested due to automatic review settings September 17, 2026 11:57

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Changes recommended

The jQuery demo has a blocking SDK initialization race, and the main description misstates the interaction.

Get a fresh assessment by requesting another Copilot review.

Review details

Suppressed comments (1)

apps/demos/Demos/DataGrid/AIPoweredDetailView/description.md:15

  • This description says submitting a prompt expands the corresponding detail row, but the prompt controls only exist after the user has already expanded a row and none of the implementations expands a row from submission. This misstates the interaction; describe the detail row as already expanded rather than claiming submission expands it.
  • Files reviewed: 46/49 changed files
  • Comments generated: 2
  • Review effort level: Lite

Comment thread apps/demos/Demos/DataGrid/AIPoweredDetailView/jQuery/index.html
Comment thread apps/demos/Demos/DataGrid/AIPoweredDetailView/jQuery/index.js
Alyar666
Alyar666 previously approved these changes Sep 17, 2026
Comment thread apps/demos/Demos/DataGrid/AIPoweredDetailView/React/App.tsx Outdated

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot review overview

🔵 Needs a closer look

Six unresolved moderate findings remain.

Review effort: Lite
Findings: None

Resolved since last review (2)
Previously missed (1)

In code that hasn't changed since last review

Medium severity Skip UI updates after detail-row request cancellation

apps/​demos/​Demos/​DataGrid/​AIPoweredDetailView/​jQuery/​index.js:104

When a detail row is collapsed, onRowCollapsing aborts the request and the row is then removed, but this catch/finally still updates the response editor, message, load panel, and event target. The aborted promise resumes after the detail widgets may be disposed, so collapsing a row during a request can update detached instances or throw; skip these UI operations when controller.signal.aborted (while still clearing the active controller).

@markallenramirez
markallenramirez added this pull request to the merge queue Sep 25, 2026
Merged via the queue into main with commit 30b4e25 Sep 25, 2026
181 checks passed
@markallenramirez
markallenramirez deleted the feature/add-demo-datagrid-ai-detail-view branch September 25, 2026 10:58
EugeniyKiyashko added a commit to EugeniyKiyashko/DevExtreme that referenced this pull request Sep 25, 2026
…owered Detail View one

481 e2e and 6 demo etalons, taken from the CI run of the merge. Main re-shot
the fluent, generic and material pairs of almost all of them for Chrome 153
in DevExpress#35284, and the fluent-next ones show the same text shifts. Three of the
e2e ones also still had the pager from before its selected page turned bold.

DataGrid-AIPoweredDetailView came from main (DevExpress#34775) without a fluent-next
etalon.
EugeniyKiyashko added a commit to dmlvr/DevExtreme that referenced this pull request Sep 27, 2026
…emo reads it

The DataGrid AIPoweredDetailView demo from main (DevExpress#34775) sizes its prompt
editor and submit row with it in all five frameworks. It goes back on :root,
off public-renames.json and into the kept allowlist; the baselines follow.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants