TreeList DataSource

Raushen · Raushen · commit 5a1dc0b8eb2b · 2025-11-06T23:04:58.000+02:00
diff --git a/apps/demos/Demos/DataGrid/AIColumn/jQuery/index.html b/apps/demos/Demos/DataGrid/AIColumn/jQuery/index.html
@@ -13,7 +13,7 @@
 
       window.AzureOpenAI = AzureOpenAI;
     </script>
-    <script src="../../../../node_modules/devextreme-dist/js/dx.ai-integration.js"></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" />
diff --git a/apps/demos/Demos/TreeList/AIColumn/jQuery/data.js b/apps/demos/Demos/TreeList/AIColumn/jQuery/data.js
@@ -4,8 +4,26 @@ const endpoint = 'https://public-api.devexpress.com/demo-openai';
 const apiKey = 'DEMO';
 
 const vehicles = [
+  // Category records
   {
     ID: 1,
+    Manufacturer: 'Passenger Car',
+  },
+  {
+    ID: 2,
+    Manufacturer: 'Crossover & SUV',
+  },
+  {
+    ID: 3,
+    Manufacturer: 'Truck',
+  },
+  {
+    ID: 4,
+    Manufacturer: 'Minivan',
+  },
+  // Vehicle records
+  {
+    ID: 101,
     TrademarkName: 'Toyota',
     TrademarkID: 1,
     Name: 'Venza',
@@ -32,7 +50,7 @@ const vehicles = [
     Source: 'devexpress.com/carimage44',
   },
   {
-    ID: 2,
+    ID: 102,
     TrademarkName: 'Ford',
     TrademarkID: 2,
     Name: 'Edge',
@@ -59,7 +77,7 @@ const vehicles = [
     Source: 'devexpress.com/carimage45',
   },
   {
-    ID: 3,
+    ID: 103,
     TrademarkName: 'Nissan',
     TrademarkID: 3,
     Name: 'Murano',
@@ -86,7 +104,7 @@ const vehicles = [
     Source: 'devexpress.com/carimage46',
   },
   {
-    ID: 4,
+    ID: 104,
     TrademarkName: 'Honda',
     TrademarkID: 4,
     Name: 'Crosstour',
diff --git a/apps/demos/Demos/TreeList/AIColumn/jQuery/index.html b/apps/demos/Demos/TreeList/AIColumn/jQuery/index.html
@@ -13,15 +13,15 @@
 
       window.AzureOpenAI = AzureOpenAI;
     </script>
-    <script src="../../../../node_modules/devextreme-dist/js/dx.ai-integration.js"></script>
     <script src="data.js"></script>
+    <script src="../../../../node_modules/devextreme-dist/js/dx.ai-integration.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="tree-list-demo">
-        <div id="gridContainer"></div>
+        <div id="treeList"></div>
       </div>
     </div>
   </body>
diff --git a/apps/demos/Demos/TreeList/AIColumn/jQuery/index.js b/apps/demos/Demos/TreeList/AIColumn/jQuery/index.js
@@ -1,26 +1,4 @@
 $(() => {
-  const dataSource = [];
-
-  vehicles.forEach((item) => {
-    if (!dataSource.some((t) => t.ID === item.TrademarkID)) {
-      dataSource.push({
-        TLID: item.TrademarkID,
-        Manufacturer: item.TrademarkName,
-        Name: '',
-        Price: '',
-        CategoryName: '',
-        BodyStyleName: '',
-        ParentID: 0,
-      });
-    }
-
-    dataSource.push({
-      ...item,
-      TLID: item.ID + 10000,
-      ParentID: item.TrademarkID,
-    });
-  });
-
   const aiService = new AzureOpenAI({
     dangerouslyAllowBrowser: true,
     deployment,
@@ -116,7 +94,7 @@ $(() => {
     const imgWrapper = $('<div>').addClass('trademark__img-wrapper');
     const img = $('<img>').addClass('trademark__img');
     img.attr({
-      src: `../../../../images/vehicles/image_${ID}.png`,
+      src: `../../../../images/vehicles/image_${(ID % 100)}.png`,
       alt: `${TrademarkName} ${Name}`,
     });
 
@@ -157,12 +135,19 @@ $(() => {
     return $('<div>').addClass('category__wrapper').text(CategoryName);
   };
 
-  $('#gridContainer').dxTreeList({
-    dataSource,
-    keyExpr: 'TLID',
-    parentIdExpr: 'ParentID',
-    expandedRowKeys: [1, 3],
+  $('#treeList').dxTreeList({
+    dataSource: vehicles,
+    keyExpr: 'ID',
+    parentIdExpr: 'CategoryID',
+    expandedRowKeys: [1],
     aiIntegration,
+    scrolling: {
+      mode: 'standard',
+    },
+    paging: {
+      enabled: true,
+      pageSize: 10,
+    },
     grouping: {
       contextMenuEnabled: false,
     },
