DataGrid - AI Column loading spinner placement is incorrect on the first load (#31967)

Raushen · web-flow · commit 2851141149e5 · 2025-12-12T11:09:41.000+02:00
diff --git a/apps/demos/Demos/DataGrid/AIColumns/Angular/app/app.component.css b/apps/demos/Demos/DataGrid/AIColumns/Angular/app/app.component.css
@@ -1,3 +1,7 @@
+::ng-deep #gridContainer {
+  min-height: 560px;
+}
+
 ::ng-deep #gridContainer .ai__cell {
   background-color: var(--dx-datagrid-row-alternation-bg);
 }
diff --git a/apps/demos/Demos/DataGrid/AIColumns/React/App.tsx b/apps/demos/Demos/DataGrid/AIColumns/React/App.tsx
@@ -41,6 +41,7 @@ export default function App() {
         keyExpr="ID"
         aiIntegration={aiIntegration}
         onAIColumnRequestCreating={onAIColumnRequestCreating}
+        className="ai__grid"
       >
         <Paging
           enabled={true}
diff --git a/apps/demos/Demos/DataGrid/AIColumns/React/styles.css b/apps/demos/Demos/DataGrid/AIColumns/React/styles.css
@@ -2,6 +2,10 @@
   background-color: var(--dx-datagrid-row-alternation-bg);
 }
 
+.ai__grid {
+  min-height: 560px;
+}
+
 .trademark__wrapper {
     display: flex;
     align-items: center;
diff --git a/apps/demos/Demos/DataGrid/AIColumns/ReactJs/App.js b/apps/demos/Demos/DataGrid/AIColumns/ReactJs/App.js
@@ -33,6 +33,7 @@ export default function App() {
         keyExpr="ID"
         aiIntegration={aiIntegration}
         onAIColumnRequestCreating={onAIColumnRequestCreating}
+        className="ai__grid"
       >
         <Paging
           enabled={true}
diff --git a/apps/demos/Demos/DataGrid/AIColumns/ReactJs/styles.css b/apps/demos/Demos/DataGrid/AIColumns/ReactJs/styles.css
@@ -2,6 +2,10 @@
   background-color: var(--dx-datagrid-row-alternation-bg);
 }
 
+.ai__grid {
+  min-height: 560px;
+}
+
 .trademark__wrapper {
     display: flex;
     align-items: center;
diff --git a/apps/demos/Demos/DataGrid/AIColumns/Vue/App.vue b/apps/demos/Demos/DataGrid/AIColumns/Vue/App.vue
@@ -5,6 +5,7 @@
     :showBorders="true"
     :aiIntegration="aiIntegration"
     :onAIColumnRequestCreating="onAIColumnRequestCreating"
+    class="ai__grid"
   >
     <DxGrouping :contextMenuEnabled="false"/>
     <DxPaging :pageSize="10"/>
@@ -121,4 +122,8 @@ const onAIColumnRequestCreating = (e: { data: Partial<Vehicle>[] }) => {
 #app .ai__cell {
   background-color: var(--dx-datagrid-row-alternation-bg);
 }
+
+.ai__grid {
+  min-height: 560px;
+}
 </style>
diff --git a/apps/demos/Demos/DataGrid/AIColumns/jQuery/styles.css b/apps/demos/Demos/DataGrid/AIColumns/jQuery/styles.css
@@ -1,3 +1,7 @@
+#gridContainer {
+  min-height: 560px;
+}
+
 #gridContainer .ai__cell {
   background-color: var(--dx-datagrid-row-alternation-bg);
 }
diff --git a/apps/demos/Demos/TreeList/AIColumns/Angular/app/app.component.css b/apps/demos/Demos/TreeList/AIColumns/Angular/app/app.component.css
@@ -1,3 +1,7 @@
+::ng-deep #employees {
+  min-height: 560px;
+}
+
 ::ng-deep #employees .ai__cell {
   background-color: var(--dx-datagrid-row-alternation-bg);
 }
diff --git a/apps/demos/Demos/TreeList/AIColumns/React/App.tsx b/apps/demos/Demos/TreeList/AIColumns/React/App.tsx
@@ -30,6 +30,7 @@ export default function App() {
       autoExpandAll={true}
       aiIntegration={aiIntegration}
       onAIColumnRequestCreating={onAIColumnRequestCreating}
+      className="ai__grid"
     >
       <Paging enabled={true} pageSize={10} />
       <Scrolling mode="standard" />
diff --git a/apps/demos/Demos/TreeList/AIColumns/React/styles.css b/apps/demos/Demos/TreeList/AIColumns/React/styles.css
@@ -2,6 +2,10 @@
   background-color: var(--dx-datagrid-row-alternation-bg);
 }
 
+.ai__grid {
+  min-height: 560px;
+}
+
 #app .name_cell > div {
   align-items: flex-end;
 }
diff --git a/apps/demos/Demos/TreeList/AIColumns/ReactJs/App.js b/apps/demos/Demos/TreeList/AIColumns/ReactJs/App.js
@@ -26,6 +26,7 @@ export default function App() {
       autoExpandAll={true}
       aiIntegration={aiIntegration}
       onAIColumnRequestCreating={onAIColumnRequestCreating}
+      className="ai__grid"
     >
       <Paging
         enabled={true}
diff --git a/apps/demos/Demos/TreeList/AIColumns/ReactJs/styles.css b/apps/demos/Demos/TreeList/AIColumns/ReactJs/styles.css
@@ -2,6 +2,10 @@
   background-color: var(--dx-datagrid-row-alternation-bg);
 }
 
+.ai__grid {
+  min-height: 560px;
+}
+
 #app .name_cell > div {
   align-items: flex-end;
 }
diff --git a/apps/demos/Demos/TreeList/AIColumns/Vue/App.vue b/apps/demos/Demos/TreeList/AIColumns/Vue/App.vue
@@ -8,6 +8,7 @@
     :showBorders="true"
     :aiIntegration="aiIntegration"
     :onAIColumnRequestCreating="onAIColumnRequestCreating"
+    class="ai__grid"
   >
     <DxScrolling :mode="'standard'"/>
     <DxPaging
@@ -94,6 +95,10 @@ const onAIColumnRequestCreating = (e: { data: Partial<IEmployee>[] }) => {
   background-color: var(--dx-datagrid-row-alternation-bg);
 }
 
+.ai__grid {
+  min-height: 560px;
+}
+
 #app .employee__cell > div {
   align-items: flex-end;
 }
diff --git a/apps/demos/Demos/TreeList/AIColumns/jQuery/styles.css b/apps/demos/Demos/TreeList/AIColumns/jQuery/styles.css
@@ -1,3 +1,7 @@
+#treeList {
+  min-height: 560px;
+}
+
 #treeList .ai__cell {
   background-color: var(--dx-datagrid-row-alternation-bg);
 }

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,7 @@`
	`1`	`+::ng-deep #gridContainer {`
	`2`	`+ min-height: 560px;`
	`3`	`+}`
	`4`	`+`
`1`	`5`	`::ng-deep #gridContainer .ai__cell {`
`2`	`6`	`background-color: var(--dx-datagrid-row-alternation-bg);`
`3`	`7`	`}`
Original file line number	Diff line number	Diff line change
`@@ -41,6 +41,7 @@ export default function App() {`
`41`	`41`	`keyExpr="ID"`
`42`	`42`	`aiIntegration={aiIntegration}`
`43`	`43`	`onAIColumnRequestCreating={onAIColumnRequestCreating}`
	`44`	`+ className="ai__grid"`
`44`	`45`	`>`
`45`	`46`	`<Paging`
`46`	`47`	`enabled={true}`
Original file line number	Diff line number	Diff line change
`@@ -33,6 +33,7 @@ export default function App() {`
`33`	`33`	`keyExpr="ID"`
`34`	`34`	`aiIntegration={aiIntegration}`
`35`	`35`	`onAIColumnRequestCreating={onAIColumnRequestCreating}`
	`36`	`+ className="ai__grid"`
`36`	`37`	`>`
`37`	`38`	`<Paging`
`38`	`39`	`enabled={true}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,7 @@`
	`1`	`+#gridContainer {`
	`2`	`+ min-height: 560px;`
	`3`	`+}`
	`4`	`+`
`1`	`5`	`#gridContainer .ai__cell {`
`2`	`6`	`background-color: var(--dx-datagrid-row-alternation-bg);`
`3`	`7`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,7 @@`
	`1`	`+::ng-deep #employees {`
	`2`	`+ min-height: 560px;`
	`3`	`+}`
	`4`	`+`
`1`	`5`	`::ng-deep #employees .ai__cell {`
`2`	`6`	`background-color: var(--dx-datagrid-row-alternation-bg);`
`3`	`7`	`}`
Original file line number	Diff line number	Diff line change
`@@ -30,6 +30,7 @@ export default function App() {`
`30`	`30`	`autoExpandAll={true}`
`31`	`31`	`aiIntegration={aiIntegration}`
`32`	`32`	`onAIColumnRequestCreating={onAIColumnRequestCreating}`
	`33`	`+ className="ai__grid"`
`33`	`34`	`>`
`34`	`35`	`<Paging enabled={true} pageSize={10} />`
`35`	`36`	`<Scrolling mode="standard" />`
Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,10 @@`
`2`	`2`	`background-color: var(--dx-datagrid-row-alternation-bg);`
`3`	`3`	`}`
`4`	`4`
	`5`	`+.ai__grid {`
	`6`	`+ min-height: 560px;`
	`7`	`+}`
	`8`	`+`
`5`	`9`	`#app .name_cell > div {`
`6`	`10`	`align-items: flex-end;`
`7`	`11`	`}`