Skip to content

Commit 5438b23

Browse files
Grids AI Column Demos: Add Descriptions (#31830)
1 parent 9e6a323 commit 5438b23

File tree

2 files changed

+44
-0
lines changed

2 files changed

+44
-0
lines changed
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
DevExtreme DataGrid allows you to create one or multiple AI columns. These columns generate meaningful cell values based on component data and a custom prompt, transforming DevExtreme DataGrid into an AI-augmented data exploration tool. In this demo, an AI column is fixed on the right side of the component.
2+
3+
<!--split-->
4+
5+
[note]
6+
7+
AI services used for this demo have been rate and data limited. As such, you may experience performance-related delays when exploring the capabilities of DataGrid AI Columns.
8+
9+
When connected to your own AI model/service without rate and data limits, DataGrid AI Columns will perform seamlessly, without artificial delays. Note that DevExtreme does not offer an AI REST API and does not ship any built-in LLMs/SLMs.
10+
11+
[/note]
12+
13+
This demo implements a prompt that instructs AI to identify the origin country of each car. You can modify the default prompt or enter a custom prompt in the AI column header menu.
14+
15+
To integrate an AI column into your DevExtreme DataGrid, you must:
16+
17+
- Configure the **aiIntegration** property at the component or column level ([aiIntegration](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#aiIntegration) or **columns[]**.**ai**.[aiIntegration](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/ai/#aiIntegration)).
18+
- Set the column [type](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#type) to *"ai"*.
19+
- Specify the column [name](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#name).
20+
- Configure **columns[]**.**ai** options, such as generation [mode](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/ai/#mode), predefined [prompt](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/ai/#prompt), and [no data text](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/ai/#noDataText) (displayed when the AI service returns no data for a row).
21+
22+
Our DevExtreme DataGrid component uses all visible row data in AI requests, including fields not bound to a column and hidden column fields. This data gives LLMs broader context, but increases the component use of AI resources. To limit data included in AI requests, modify the **AIColumnRequestCreatingEvent**.[data](/Documentation/ApiReference/UI_Components/dxDataGrid/Types/AIColumnRequestCreatingEvent/#data) parameter in the [onAIColumnRequestCreating](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onAIColumnRequestCreating) event handler.
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
DevExtreme TreeList allows you to create one or multiple AI columns. These columns generate meaningful cell values based on component data and a custom prompt, transforming DevExtreme TreeList into an AI-augmented data exploration tool. In this demo, an AI column is fixed on the right side of the component.
2+
3+
<!--split-->
4+
5+
[note]
6+
7+
AI services used for this demo have been rate and data limited. As such, you may experience performance-related delays when exploring the capabilities of TreeList AI Columns.
8+
9+
When connected to your own AI model/service without rate and data limits, TreeList AI Columns will perform seamlessly, without artificial delays. Note that DevExtreme does not offer an AI REST API and does not ship any built-in LLMs/SLMs.
10+
11+
[/note]
12+
13+
This demo implements a prompt that instructs AI to identify the department of each employee. You can modify the default prompt or enter a custom prompt in the AI column's header menu.
14+
15+
To integrate an AI column into your DevExtreme TreeList, you must:
16+
17+
- Configure the **aiIntegration** property at the component or column level ([aiIntegration](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/#aiIntegration) or **columns[]**.**ai**.[aiIntegration](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/ai/#aiIntegration)).
18+
- Set the column [type](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#type) to *"ai"*.
19+
- Specify the column [name](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#name).
20+
- Configure **columns[]**.**ai** options, such as generation [mode](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/ai/#mode), predefined [prompt](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/ai/#prompt), and [no data text](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/ai/#noDataText) (displayed when the AI service returns no data for a row).
21+
22+
Our DevExtreme TreeList component uses all visible row data in AI requests, including fields not bound to a column and hidden column fields. This data gives LLMs broader context, but increases the component use of AI resources. To limit data included in AI requests, modify the **AIColumnRequestCreatingEvent**.[data](/Documentation/ApiReference/UI_Components/dxTreeList/Types/AIColumnRequestCreatingEvent/#data) parameter in the [onAIColumnRequestCreating](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/#onAIColumnRequestCreating) event handler.

0 commit comments

Comments
 (0)