✨AI Column: Write jQuery Demo#31582
Conversation
There was a problem hiding this comment.
Pull Request Overview
This pull request introduces new demo implementations showcasing AI Column integration for DataGrid and TreeList components using jQuery. The demos demonstrate how to integrate Azure OpenAI services with DevExtreme grid components to add AI-powered columns that can automatically populate data based on AI prompts.
Key Changes
- New jQuery demo implementations for AI Column feature in both DataGrid and TreeList components
- Integration with Azure OpenAI API for AI-powered column functionality
- Custom cell templates for displaying vehicle trademark information with images and popovers
- Shared CSS styling and data files between both demos
Reviewed Changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/demos/Demos/TreeList/AIColumn/JQuery/styles.css | Styling for trademark display, category badges, AI cells, and license information popovers |
| apps/demos/Demos/TreeList/AIColumn/JQuery/index.js | TreeList implementation with AI column, custom templates, and hierarchical data structure |
| apps/demos/Demos/TreeList/AIColumn/JQuery/index.html | HTML page structure with script imports for TreeList demo |
| apps/demos/Demos/TreeList/AIColumn/JQuery/data.js | Comprehensive vehicle dataset with 70+ entries and Azure OpenAI configuration |
| apps/demos/Demos/DataGrid/AIColumn/JQuery/styles.css | Identical styling as TreeList for consistent appearance |
| apps/demos/Demos/DataGrid/AIColumn/JQuery/index.js | DataGrid implementation with AI column and custom templates |
| apps/demos/Demos/DataGrid/AIColumn/JQuery/index.html | HTML page structure with script imports for DataGrid demo |
| apps/demos/Demos/DataGrid/AIColumn/JQuery/data.js | Identical vehicle dataset and configuration as TreeList |
dmlvr
force-pushed
the
dg_25_2_ai_column_jquery_demo
branch
from
07e3ba6 to
3919def
Compare
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: Dmitry Lavrinovich <52966626+dmlvr@users.noreply.github.com>
…ai_column_jquery_demo
…ai_column_jquery_demo
…ai_column_jquery_demo
| const createCategoryTemplate = ({ CategoryName }) => { | ||
| if (!CategoryName) { | ||
| return $('<div>').text(''); | ||
| } | ||
|
|
||
| return $('<div>').addClass('category__wrapper').text(CategoryName); | ||
| }; |
There was a problem hiding this comment.
The TreeList implementation has proper null handling for CategoryName, but the DataGrid version (line 131) lacks this check. This inconsistency could lead to displaying 'undefined' text. Both implementations should handle missing data consistently.
| <script src="../../../../node_modules/devextreme-dist/js/dx.ai-integration.js"></script> | ||
| <script src="data.js"></script> |
There was a problem hiding this comment.
The script loading order differs between DataGrid and TreeList implementations. In DataGrid, dx.ai-integration.js is loaded before data.js (lines 16-17), while in TreeList it's loaded after data.js (lines 16-17). This inconsistency could cause confusion and potential loading issues. Standardize the script loading order across both demos.
| <script src="../../../../node_modules/devextreme-dist/js/dx.ai-integration.js"></script> | |
| <script src="data.js"></script> | |
| <script src="data.js"></script> | |
| <script src="../../../../node_modules/devextreme-dist/js/dx.ai-integration.js"></script> |
| if (Manufacturer) { | ||
| return $('<div>').text(Manufacturer); | ||
| } |
There was a problem hiding this comment.
The TreeList implementation includes special handling for the Manufacturer field (lines 98-100) that is absent in the DataGrid version. This code duplication with variations suggests these functions should be extracted to a shared utility or the difference should be documented, as it's unclear why TreeList requires this additional logic.
| ); | ||
| }; | ||
|
|
||
| const popup = $('#popup').dxPopup({ |
There was a problem hiding this comment.
Should we explicitly set the showCloseButton option? By default, it has different values in different themes.
| ); | ||
| }; | ||
|
|
||
| const popup = $('#popup').dxPopup({ |
There was a problem hiding this comment.
Should we explicitly set the showCloseButton option? By default, it has different values in different themes.
| #gridContainer .ai__cell { | ||
| background-color: var(--dx-color-main-bg); | ||
| } | ||
|
|
||
| .trademark__wrapper { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 8px; | ||
| } | ||
|
|
||
| .trademark__img-wrapper { | ||
| width: 40px; | ||
| height: 40px; | ||
| border: var(--dx-border-width) solid var(--dx-color-border); | ||
| border-radius: var(--dx-border-radius); | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .trademark__img-wrapper img { | ||
| width: 100%; | ||
| height: 100%; | ||
| object-fit: cover; | ||
| object-position: center; | ||
| border-radius: var(--dx-border-radius); | ||
| } | ||
|
|
||
| .trademark__text-wrapper { | ||
| width: calc(100% - 48px); | ||
| } | ||
|
|
||
| .trademark__text { | ||
| margin: 0; | ||
| padding: 0; | ||
| white-space: nowrap; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| } | ||
|
|
||
| .trademark__text--title { | ||
| font-weight: 600; | ||
| } | ||
|
|
||
| .trademark__text--subtitle { | ||
| font-weight: 400; | ||
| } | ||
|
|
||
| .category__wrapper { | ||
| display: inline-block; | ||
| padding: 2px 8px; | ||
| border-radius: 24px; | ||
| background-color: var(--dx-color-separator); | ||
| } |
There was a problem hiding this comment.
The entire styles.css file for DataGrid is identical to the TreeList styles.css file (52 lines). This is code duplication that should be extracted to a shared stylesheet to improve maintainability. Consider creating a common styles file that both demos can reference.
| #gridContainer .ai__cell { | |
| background-color: var(--dx-color-main-bg); | |
| } | |
| .trademark__wrapper { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .trademark__img-wrapper { | |
| width: 40px; | |
| height: 40px; | |
| border: var(--dx-border-width) solid var(--dx-color-border); | |
| border-radius: var(--dx-border-radius); | |
| cursor: pointer; | |
| } | |
| .trademark__img-wrapper img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| object-position: center; | |
| border-radius: var(--dx-border-radius); | |
| } | |
| .trademark__text-wrapper { | |
| width: calc(100% - 48px); | |
| } | |
| .trademark__text { | |
| margin: 0; | |
| padding: 0; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .trademark__text--title { | |
| font-weight: 600; | |
| } | |
| .trademark__text--subtitle { | |
| font-weight: 400; | |
| } | |
| .category__wrapper { | |
| display: inline-block; | |
| padding: 2px 8px; | |
| border-radius: 24px; | |
| background-color: var(--dx-color-separator); | |
| } | |
| @import "../../common/ai-column-shared.css"; |
3 participants
No description provided.