devextreme-datagrid-ai-integration/Angular/src/app/app.component.html at 26.1.3+ · DevExpress-Examples/devextreme-datagrid-ai-integration · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<div class="demo-container">
  <dx-data-grid
    id="grid-container"
    [dataSource]="sales"
    [aiIntegration]="columnAiIntegration"
    [showBorders]="true"
    keyExpr="Id"
    [filterSyncEnabled]="true"
  >
    <dxo-data-grid-search-panel
      [visible]="true"
      [width]="240"
      placeholder="Search..."
    ></dxo-data-grid-search-panel>
    <dxo-data-grid-group-panel [visible]="true"></dxo-data-grid-group-panel>
    <dxo-data-grid-header-filter [visible]="true"></dxo-data-grid-header-filter>
    <dxo-data-grid-filter-row [visible]="true"></dxo-data-grid-filter-row>
    <dxo-data-grid-paging [pageSize]="10"></dxo-data-grid-paging>
    <dxo-data-grid-pager
      [visible]="true"
      [allowedPageSizes]="allowedPageSizes"
      [showPageSizeSelector]="true"
    ></dxo-data-grid-pager>

    <dxo-data-grid-ai-assistant
      [enabled]="true"
      [aiIntegration]="assistantAiIntegration"
      [chat]="chatOptions"
    ></dxo-data-grid-ai-assistant>

    <dxi-data-grid-column dataField="Product"></dxi-data-grid-column>
    <dxi-data-grid-column
      dataField="Amount"
      caption="Sale Amount"
      dataType="number"
      format="currency"
    ></dxi-data-grid-column>
    <dxi-data-grid-column
      dataField="Region"
      dataType="string"
    ></dxi-data-grid-column>
    <dxi-data-grid-column
      dataField="Sector"
      dataType="string"
    ></dxi-data-grid-column>
    <dxi-data-grid-column
      dataField="SaleDate"
      dataType="date"
    ></dxi-data-grid-column>
    <dxi-data-grid-column
      dataField="Customer"
      dataType="string"
    ></dxi-data-grid-column>
    <dxi-data-grid-column
      name="AI column"
      caption="AI Column"
      type="ai"
      [width]="200"
      [fixed]="true"
      fixedPosition="right"
      cssClass="ai-cell"
    >
      <dxo-data-grid-ai
        prompt="Identify the country where product is manufactured. When looking up a country, consider Sector and Customers."
        mode="auto"
        noDataText="No data"
      ></dxo-data-grid-ai>
    </dxi-data-grid-column>
  </dx-data-grid>
</div>