DevExpress · Raushen · Nov 10, 2025 · Nov 4, 2025 · Nov 4, 2025 · Nov 4, 2025
diff --git a/apps/demos/Demos/DataGrid/AIColumn/JQuery/data.js b/apps/demos/Demos/DataGrid/AIColumn/JQuery/data.js
diff --git a/apps/demos/Demos/DataGrid/AIColumn/JQuery/index.html b/apps/demos/Demos/DataGrid/AIColumn/JQuery/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+  <head>
+    <title>DevExtreme Demo</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
+    <link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme/dist/css/dx.light.css" />
+    <script src="../../../../node_modules/jquery/dist/jquery.min.js"></script>
+    <script src="../../../../node_modules/devextreme-quill/dist/dx-quill.min.js"></script>
+    <script type="module">
+      import { AzureOpenAI } from "https://esm.sh/openai@4.73.1";
+
+      window.AzureOpenAI = AzureOpenAI;
+    </script>
+    <script src="../../../../node_modules/devextreme-dist/js/dx.ai-integration.js"></script>
+    <link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme-dist/css/dx.material.blue.light.css" />
+    <script src="../../../../node_modules/devextreme-dist/js/dx.all.js"></script>
+    <script src="data.js"></script>
+    <script src="index.js"></script>
+    <link rel="stylesheet" type="text/css" href="styles.css" />
+  </head>
+  <body class="dx-viewport">
+    <div class="demo-container">
+      <div id="gridContainer"></div>
+    </div>
+  </body>
+</html>
diff --git a/apps/demos/Demos/DataGrid/AIColumn/JQuery/index.js b/apps/demos/Demos/DataGrid/AIColumn/JQuery/index.js
@@ -0,0 +1,162 @@
+/* eslint-disable no-undef */
+
+$(() => {
+  const aiService = new AzureOpenAI({
+    dangerouslyAllowBrowser: true,
+    deployment,
+    endpoint,
+    apiVersion,
+    apiKey,
+  });
+
+  async function getAIResponse(messages, signal) {
+    const params = {
+      messages,
+      model: deployment,
+      max_tokens: 1000,
+      temperature: 0.7,
+    };
+
+    const response = await aiService.chat.completions.create(params, { signal });
+    const result = response.choices[0].message?.content;
+
+    return result;
+  }
+
+  const aiIntegration = new DevExpress.aiIntegration({
+    sendRequest({ prompt }) {
+      const controller = new AbortController();
+      const signal = controller.signal;
+
+      const aiPrompt = [
+        { role: 'system', content: prompt.system },
+        { role: 'user', content: prompt.user },
+      ];
+
+      const promise = getAIResponse(aiPrompt, signal);
+
+      const result = {
+        promise,
+        abort: () => {
+          controller.abort();
+        },
+      };
+
+      return result;
+    },
+  });
+
+  const createTrademarkTemplate = (vehicle) => {
+    const {
+      ID,
+      Name,
+      TrademarkName,
+    } = vehicle;
+    const trademarkWrapper = $('<div>').addClass('trademark__wrapper');
+    const imgWrapper = $('<div>').addClass('trademark__img-wrapper');
+    const img = $('<img>').addClass('trademark__img');
+    img.attr({
+      src: `images/vehicles/image_${ID}.png`,
+      alt: `${TrademarkName} ${Name}`,
+    });
+
+    const popoverId = `popover-${ID}`;
+    const popoverWrapper = $('<div>');
+    popoverWrapper.html(`
+      <div class="license-info__title">License Information</div>
+      <div class="license-info__content">
+        <p><strong>Image:</strong> ${TrademarkName} ${Name}</p>
+        <p><strong>License:</strong> Stock Photo License</p>
+        <p><strong>Attribution:</strong> © DevExpress Demos</p>
+        <p><strong>Usage:</strong> For demonstration purposes only</p>
+      </div>
+    `);
+
+    img.attr('data-popover-target', popoverId);
+
+    const popover = $('<div>').attr('id', popoverId).dxPopover({
+      target: `[data-popover-target="${popoverId}"]`,
+      showEvent: 'mouseenter',
+      hideEvent: 'mouseleave',
+      position: 'top',
+      contentTemplate: () => popoverWrapper,
+    });
+
+    imgWrapper.append(img, popover);
+    trademarkWrapper.append(imgWrapper);
+
+    const textWrapper = $('<div>').addClass('trademark__text-wrapper');
+    const trademarkText = $('<div>').addClass('trademark__text trademark__text--title').text(TrademarkName);
+    const nameText = $('<div>').addClass('trademark__text trademark__text--subtitle').text(Name);
+
+    textWrapper.append(trademarkText, nameText);
+    trademarkWrapper.append(textWrapper);
+
+    return trademarkWrapper;
+  };
+
+  const createCategoryTemplate = ({ CategoryName }) => $('<div>').addClass('category__wrapper').text(CategoryName);
+
+  $('#gridContainer').dxDataGrid({
+    dataSource: vehicles,
+    columns: [
+      {
+        caption: 'Trademark',
+        width: 220,
+        cellTemplate: (container, options) => {
+          const vehicle = options.data;
+          const imageWrapper = createTrademarkTemplate(vehicle);
+          container.append(imageWrapper);
+        },
+      },
+      {
+        dataField: 'Price',
+        format: 'currency',
+        width: 100,
+        headerFilter: {
+          groupInterval: 20000,
+        },
+      },
+      {
+        caption: 'Category',
+        cellTemplate: (container, options) => {
+          const category = options.data;
+          const categoryWrapper = createCategoryTemplate(category);
+          container.append(categoryWrapper);
+        },
+      },
+      {
+        dataField: 'Modification',
+        width: 180,
+      },
+      {
+        dataField: 'Horsepower',
+        width: 140,
+      },
+      {
+        dataField: 'BodyStyleName',
+        caption: 'Body Style',
+        width: 180,
+      },
+      {
+        name: 'AI column',
+        caption: 'Origin Country',
+        type: 'ai',
+        ai: {
+          aiIntegration,
+          prompt: 'show the country of origin for the following vehicles',
+          mode: 'auto',
+          showHeaderMenu: true,
+          noDataText: 'No data',
+          emptyText: 'Unknown',
+        },
+        width: 200,
+        fixed: true,
+        fixedPosition: 'right',
+        cellTemplate: ($container) => {
+          $container.addClass('ai__cell');
+        },
+      },
+    ],
+  });
+});
diff --git a/apps/demos/Demos/DataGrid/AIColumn/JQuery/styles.css b/apps/demos/Demos/DataGrid/AIColumn/JQuery/styles.css
@@ -0,0 +1,71 @@
+.trademark__wrapper {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.trademark__img-wrapper {
+    width: 40px;
+    height: 40px;
+    border: 1px solid #E0E0E0;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: border-color 0.2s ease;
+}
+
+.trademark__img-wrapper img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  border-radius: 4px;
+}
+
+.trademark__text-wrapper {
+  width: calc(100% - 48px);
+}
+
+.trademark__text {
+  margin: 0;
+  padding: 0;
+}
+
+.trademark__text--title {
+  font-weight: 600;
+}
+
+.trademark__text--subtitle {
+  font-weight: 400;
+}
+
+.category__wrapper {
+  display: inline-block;
+  padding: 2px 8px;
+  background-color: #E0E0E0;
+  border-radius: 24px;
+}
+
+.ai__cell, .dx-command-ai {
+  background-color: #FAFAFA !important;
+}
+
+.license-info__title {
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 8px;
+    color: #333;
+    border-bottom: 1px solid #E0E0E0;
+    padding-bottom: 6px;
+}
+
+.license-info__content p {
+    margin: 4px 0;
+    font-size: 12px;
+    line-height: 1.4;
+    color: #666;
+}
+
+.license-info__content strong {
+    color: #333;
+    font-weight: 500;
+}