DevExpress · Raushen · Nov 10, 2025 · Nov 4, 2025 · Nov 4, 2025 · Nov 4, 2025
@@ -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-dist/js/dx.all.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> 
+    <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="data-grid-demo">
+        <div id="gridContainer"></div>
+      </div>
+    </div>
+  </body>
+</html>
@@ -0,0 +1,186 @@
+$(() => {
+  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 popoverContentTemplate = function (vehicle) {
+    const {
+      Source,
+      LicenseName,
+      Author,
+      Edits,
+    } = vehicle;
+    const sourceLink = `https://${Source}`;
+    return $('<div>').append(
+      $('<p>')
+        .append($('<b>').text('Image licensed under: '))
+        .append($('<span>').text(LicenseName)),
+      $('<p>')
+        .append($('<b>').text('Author: '))
+        .append($('<span>').text(Author)),
+      $('<p>')
+        .append($('<b>').text('Source link: '))
+        .append(
+          $('<a>', {
+            href: sourceLink,
+            target: '_blank',
+          })
+            .text(sourceLink),
+        ),
+      $('<p>')
+        .append($('<b>').text('Edits: '))
+        .append($('<span>').text(Edits)),
+    );
+  };
+
+  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}`;
+    img.attr('data-popover-target', popoverId);
+
+    const popover = $('<div>').attr('id', popoverId).dxPopover({
+      target: `[data-popover-target="${popoverId}"]`,
+      showEvent: 'mouseenter',
+      hideEvent: {
+        name: 'mouseleave',
+        delay: 1000,
+      },
+      position: 'top',
+      showTitle: true,
+      title: 'License Information',
+      contentTemplate: () => popoverContentTemplate(vehicle),
+    });
+
+    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,
+    paging: {
+      pageSize: 10,
+    },
+    aiIntegration,
+    grouping: {
+      contextMenuEnabled: false,
+    },
+    groupPanel: {
+      visible: false,
+    },
+    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,
+      },
+      {
+        caption: 'Category',
+        cellTemplate: (container, options) => {
+          const category = options.data;
+          const categoryWrapper = createCategoryTemplate(category);
+          container.append(categoryWrapper);
+        },
+        minWidth: 180,
+      },
+      {
+        dataField: 'Modification',
+        width: 180,
+      },
+      {
+        dataField: 'Horsepower',
+        width: 140,
+      },
+      {
+        dataField: 'BodyStyleName',
+        caption: 'Body Style',
+        width: 180,
+      },
+      {
+        name: 'AI column',
+        caption: 'AI Column',
+        type: 'ai',
+        ai: {
+          prompt: 'Identify the country where this vehicle model is originally manufactured or developed, based on its brand, model, and specifications. Respond with the country name and the country flag icon.',
+          mode: 'auto',
+        },
+        width: 200,
+        fixed: true,
+        fixedPosition: 'right',
+        cssClass: 'ai__cell',
+      },
+    ],
+  });
+});
@@ -0,0 +1,53 @@
+div.dx-datagrid .ai__cell {
+  background-color: var(--dx-color-main-bg);
+}
+
+.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;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.trademark__text--title {
+  font-weight: 600;
+}
+
+.trademark__text--subtitle {
+  font-weight: 400;
+}
+
+.category__wrapper {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 24px;
+  background-color: var(--dx-color-separator);
+}