JavaScript/jQuery TreeList - AIColumnRequestCreatingEvent

The argument type in the aIColumnRequestCreating event.

import { AIColumnRequestCreatingEvent } from "devextreme/ui/tree_list"
Type:

Object

DataGrid Demo TreeList Demo

Used in:

additionalInfo

Additional data to include in the request.

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.

Type: GridBaseColumn

component

The UI component's instance.

Type:

TreeList

data

TreeList data included in the AI request.

Type:

Array<Object>

The default TreeList 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
$('#tree-list-container').dxTreeList({
    onAIColumnRequestCreating(e) {
        e.data = e.data.map((item) => ({
            ID: item.ID,
            // ...
        }));
    },
});
Angular
app.component.html
app.component.ts
<dx-tree-list ...
    (onAIColumnRequestCreating)="handleAIColumnRequestCreating($event)"
></dx-tree-list>
import { DxTreeListModule, type DxTreeListTypes } from 'devextreme-angular/ui/tree-list';

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

<script setup lang="ts">
import { DxTreeList, type DxTreeListTypes } from 'devextreme-vue/tree-list';

function handleAIColumnRequestCreating(e: DxTreeListTypes.AIColumnRequestCreatingEvent) {
    e.data = e.data.map((item) => ({
        ID: item.ID,
        // ...
    }));
};
</script>
React
App.tsx
import { TreeList, type TreeListTypes } from 'devextreme-react/tree-list';

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

function App() {
    return (
        <TreeList ...
            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