Grids: Add AI Columns How-To

concepts/05 UI Components/DataGrid/15 Columns/10 Column Types/5 AI Columns/00 AI Columns.md

@@ -0,0 +1 @@
+AI columns augment {WidgetName} data with AI-generated insights. You can add one or multiple AI columns to a {WidgetName}. AI columns are a type of [command column](/Documentation/Guide/UI_Components/DataGrid/Columns/Column_Types/Command_Columns/) and are not bound to a data field.

concepts/05 UI Components/DataGrid/15 Columns/10 Column Types/5 AI Columns/05 Add an AI Column.md

@@ -0,0 +1,8 @@
+To add an AI column to {WidgetName}, follow these steps:
+
+- Define [aiIntegration](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#aiIntegration) (or **columns[]**.**ai**.[aiIntegration](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/ai/#aiIntegration) to configure AI settings specific to a column).
+- Set a column's [type](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#type) to *"ai"*.
+- Specify the AI column's [name](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#name).
+- Configure **columns[]**.**ai** options, including [mode](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/ai/#mode), predefined [prompt](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/ai/#prompt), and [noDataText](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/ai/#noDataText) (displayed when the AI service returns no data for a row).
+
+[note] Specify [keyExpr](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#keyExpr) or implement key fields within the component [dataSource](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#dataSource) (for instance, **ArrayStore**.[key](/Documentation/ApiReference/Data_Layer/ArrayStore/Configuration/#key)) to ensure AI columns function correctly.

concepts/05 UI Components/DataGrid/15 Columns/10 Column Types/5 AI Columns/10 Limit Data Passed to the AI Service.md

@@ -0,0 +1,76 @@
+Default AI requests include all data from rows visible in the {WidgetName} container. This data includes fields of hidden columns and fields not bound to a column. To save AI resources, you can configure the component to include only relevant data fields. Modify the **AIColumnRequestCreatingEvent**.[data](/Documentation/25_2/ApiReference/UI_Components/dxDataGrid/Types/AIColumnRequestCreatingEvent/#data) parameter within [onAIColumnRequestCreating](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onAIColumnRequestCreating) as follows:
+
+---
+
+##### jQuery
+
+    <!-- tab: index.js -->
+    $('#{widget-name}-container').dx{WidgetName}({
+        onAIColumnRequestCreating(e) {
+            e.data = e.data.map((item) => ({
+                ID: item.ID,
+                // ...
+            }));
+        },
+    });
+
+##### Angular
+
+    <!-- tab: app.component.html -->
+    <dx-{widget-name} ...
+        (onAIColumnRequestCreating)="handleAIColumnRequestCreating($event)"
+    ></dx-{widget-name}>
+
+    <!-- tab: app.component.ts -->
+    import { Dx{WidgetName}Module, type Dx{WidgetName}Types } from 'devextreme-angular/ui/{widget-name}';
+
+    export class AppComponent {
+        handleAIColumnRequestCreating(e: Dx{WidgetName}Types.AIColumnRequestCreatingEvent) {
+            e.data = e.data.map((item) => ({
+                ID: item.ID,
+                // ...
+            }));
+        }
+    }
+
+##### Vue
+
+    <!-- tab: App.vue -->
+    <template>
+        <Dx{WidgetName} ...
+            :on-a-i-column-request-creating={handleAIColumnRequestCreating}
+        />
+    </template>
+
+    <script setup lang="ts">
+    import { Dx{WidgetName}, type Dx{WidgetName}Types } from 'devextreme-vue/{widget-name}';
+
+    function handleAIColumnRequestCreating(e: Dx{WidgetName}Types.AIColumnRequestCreatingEvent) {
+        e.data = e.data.map((item) => ({
+            ID: item.ID,
+            // ...
+        }));
+    };
+    </script>
+
+##### React
+
+    <!-- tab: App.tsx -->
+    import { {WidgetName}, type {WidgetName}Types } from 'devextreme-react/{widget-name}';
+
+    function handleAIColumnRequestCreating(e: {WidgetName}Types.AIColumnRequestCreatingEvent) {
+        e.data = e.data.map((item) => ({
+            ID: item.ID,
+            // ...
+        }));
+    };
+
+    function App() {
+        return (
+            <{WidgetName} ...
+                onAIColumnRequestCreating={handleAIColumnRequestCreating}
+            />
+        );
+    };
+
+---

concepts/05 UI Components/DataGrid/15 Columns/10 Column Types/5 AI Columns/15 AI Column Limitations.md

@@ -0,0 +1,66 @@
+Note the following AI column limitations:
+
+- AI columns cannot be integrated within [band columns](/Documentation/Guide/UI_Components/DataGrid/Columns/Column_Types/Band_Columns/).
+- {WidgetName} does not save AI-generated values to the component data source and does not support AI data editing, filtering, searching, and sorting.
+- AI columns ignore the following [columns[]](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/) properties:
+
+<table class="multicolumn-list">
+    <tr>
+        <td>
+            <ul>
+                <li><strong>allowEditing</strong></li>
+                <li><strong>allowExporting</strong></li>
+                <li><strong>allowFiltering</strong></li>
+                <li><strong>allowGrouping</strong></li>
+                <li><strong>allowHeaderFiltering</strong></li>
+                <li><strong>allowSearch</strong></li>
+                <li><strong>allowSorting</strong></li>
+                <li><strong>autoExpandGroup</strong></li>
+                <li><strong>buttons[]</strong></li>
+                <li><strong>calculateCellValue</strong></li>
+            </ul>
+        </td>
+        <td>
+            <ul>
+                <li><strong>calculateFilterExpression</strong></li>
+                <li><strong>calculateGroupValue</strong></li>
+                <li><strong>calculateSortValue</strong></li>
+                <li><strong>columns</strong></li>
+                <li><strong>dataField</strong></li>
+                <li><strong>dataType</strong></li>
+                <li><strong>editCellTemplate</strong></li>
+                <li><strong>editorOptions</strong></li>
+                <li><strong>falseText</strong></li>
+                <li><strong>filterOperations</strong></li>
+            </ul>
+        </td>
+        <td>
+            <ul>
+                <li><strong>filterType</strong></li>
+                <li><strong>filterValue</strong></li>
+                <li><strong>filterValues</strong></li>
+                <li><strong>format</strong></li>
+                <li><strong>formItem</strong></li>
+                <li><strong>groupCellTemplate</strong></li>
+                <li><strong>groupIndex</strong></li>
+                <li><strong>headerFilter</strong></li>
+                <li><strong>isBand</strong></li>
+                <li><strong>lookup</strong></li>
+            </ul>
+        </td>
+        <td>
+            <ul>
+                <li><strong>ownerBand</strong></li>
+                <li><strong>selectedFilterOperation</strong></li>
+                <li><strong>setCellValue</strong></li>
+                <li><strong>showEditorAlways</strong></li>
+                <li><strong>showWhenGrouped</strong></li>
+                <li><strong>sortIndex</strong></li>
+                <li><strong>sortingMethod</strong></li>
+                <li><strong>sortOrder</strong></li>
+                <li><strong>trueText</strong></li>
+                <li><strong>validationRules</strong></li>
+            </ul>
+        </td>
+    </tr>
+</table>