Angular DataGrid - AIColumnRequestCreatingEvent

The argument type in the aIColumnRequestCreating event.

import { DxDataGridTypes } from "devextreme-angular/ui/data-grid"
Type: DxDataGridTypes.AIColumnRequestCreatingEvent

DataGrid Demo TreeList Demo

Used in:

additionalInfo

Additional data to include in the request.

Selector: dxo-additional-info
Type:

Object

Use this object to specify additional data required by AI endpoints. For example, you can add metadata and query parameters.

cancel

Allows you to cancel the AI request.

Type:

Boolean

column

The AI column that initiated the request.

Selector: dxo-column
Type: GridBaseColumn

component

The UI component's instance.

Selector: dxo-component
Type:

DataGrid

data

DataGrid data included in the AI request.

Type:

Array<Object>

The default DataGrid behavior is to include all data from visible rows in AI requests, including data not bound to a column and data of hidden columns. This gives LLMs broader context, but increases the component's use of AI resources. To save AI credits, you can modify this parameter to limit the data included in AI requests:

jQuery
index.js
$('#data-grid-container').dxDataGrid({
    onAIColumnRequestCreating(e) {
        e.data = e.data.map((item) => ({
            ID: item.ID,
            // ...
        }));
    },
});
Angular
app.component.html
app.component.ts
<dx-data-grid ...
    (onAIColumnRequestCreating)="handleAIColumnRequestCreating($event)"
></dx-data-grid>
import { DxDataGridModule, type DxDataGridTypes } from 'devextreme-angular/ui/data-grid';

export class AppComponent {
    handleAIColumnRequestCreating(e: DxDataGridTypes.AIColumnRequestCreatingEvent) {
        e.data = e.data.map((item) => ({
            ID: item.ID,
            // ...
        }));
    }
}
Vue
App.vue
<template>
    <DxDataGrid ...
        :on-a-i-column-request-creating={handleAIColumnRequestCreating}
    />
</template>

<script setup lang="ts">
import { DxDataGrid, type DxDataGridTypes } from 'devextreme-vue/data-grid';

function handleAIColumnRequestCreating(e: DxDataGridTypes.AIColumnRequestCreatingEvent) {
    e.data = e.data.map((item) => ({
        ID: item.ID,
        // ...
    }));
};
</script>
React
App.tsx
import { DataGrid, type DataGridTypes } from 'devextreme-react/data-grid';

function handleAIColumnRequestCreating(e: DataGridTypes.AIColumnRequestCreatingEvent) {
    e.data = e.data.map((item) => ({
        ID: item.ID,
        // ...
    }));
};

function App() {
    return (
        <DataGrid ...
            onAIColumnRequestCreating={handleAIColumnRequestCreating}
        />
    );
};

DataGrid Demo TreeList Demo

element

The UI component's container.

Type:

HTMLElement | jQuery

useCache

Configures whether the component uses cached results.

Type:

Boolean