Changes from igniteui-xplat-examples-output+PRs_2025.12.5.2

samples/grids/grid/advanced-filtering-style/src/index.css

@@ -2,7 +2,11 @@
 /* https://static.infragistics.com/xplatform/css/samples */
 
 #grid {
-    --ig-grid-filtering-row-background: #ffcd0f;
-    --ig-grid-filtering-background-or: #d83434;
+    --ig-query-builder-header-foreground: #512da8;
+    --ig-query-builder-color-expression-group-and: #eb0000;
+    --ig-query-builder-color-expression-group-or: #0000f3;
+    --ig-query-builder-subquery-header-background: var(--ig-gray-300);
+    --ig-query-builder-subquery-border-color: var(--ig-warn-500);
+    --ig-query-builder-subquery-border-radius: 4px;
 }
 

samples/grids/grid/binding-nested-data-1/src/index.tsx

@@ -59,7 +59,8 @@ export default class Sample extends React.Component<any, any> {
                         field="Employees"
                         header="Employees"
                         bodyTemplate={this.webGridNestedDataCellTemplate}
-                        width="20%">
+                        width="20%"
+                        minWidth="275px">
                     </IgrColumn>
                     <IgrColumn
                         field="City"

samples/grids/grid/column-collapsible-groups/src/index.tsx

@@ -102,13 +102,11 @@ export default class Sample extends React.Component<any, any> {
                         expanded={false}>
                         <IgrColumn
                             field="ProductName"
-                            header="Name"
-                            visibleWhenCollapsed={true}>
+                            header="Name">
                         </IgrColumn>
                         <IgrColumn
                             field="UnitPrice"
-                            header="Unit Price"
-                            visibleWhenCollapsed={true}>
+                            header="Unit Price">
                         </IgrColumn>
                         <IgrColumn
                             field="ProductID"
@@ -120,7 +118,7 @@ export default class Sample extends React.Component<any, any> {
                             visibleWhenCollapsed={false}>
                         </IgrColumn>
                         <IgrColumn
-                            field="Quantity"
+                            field="Discontinued"
                             visibleWhenCollapsed={false}>
                         </IgrColumn>
                     </IgrColumnGroup>

samples/grids/grid/column-moving-options/src/index.tsx

@@ -157,9 +157,9 @@ export default class Sample extends React.Component<any, any> {
     public webGridPinHeaderTemplate = (props: {dataContext: IgrColumnTemplateContext}) => {
         const column = (props.dataContext as any).column;
         return (
-            <div>
-                <span style={{float: 'left'}}>{column.field}</span>
-                <span style={{float: 'right'}} onPointerDown={(e: any) => this.toggleColumnPin(column.field)}>📌</span>
+            <div style={{display: 'flex'}}>
+                <span>{column.field}</span>
+                <span style={{marginLeft: 'auto'}} onPointerDown={(e: any) => this.toggleColumnPin(column.field)}>📌</span>
             </div>
         );
     }

samples/grids/grid/column-moving-styles/src/index.tsx

@@ -151,9 +151,9 @@ export default class Sample extends React.Component<any, any> {
     public webGridPinHeaderTemplate = (props: {dataContext: IgrColumnTemplateContext}) => {
         const column = (props.dataContext as any).column;
         return (
-            <div>
-                <span style={{float: 'left'}}>{column.field}</span>
-                <span style={{float: 'right'}} onPointerDown={(e: any) => this.toggleColumnPin(column.field)}>📌</span>
+            <div style={{display: 'flex'}}>
+                <span>{column.field}</span>
+                <span style={{marginLeft: 'auto'}} onPointerDown={(e: any) => this.toggleColumnPin(column.field)}>📌</span>
             </div>
         );
     }

samples/grids/grid/column-pinning-options/src/index.tsx

@@ -116,9 +116,9 @@ export default class Sample extends React.Component<any, any> {
     public webGridPinHeaderTemplate = (props: {dataContext: IgrColumnTemplateContext}) => {
         const column = (props.dataContext as any).column;
         return (
-            <div>
-                <span style={{float: 'left'}}>{column.field}</span>
-                <span style={{float: 'right'}} onPointerDown={(e: any) => this.toggleColumnPin(column.field)}>📌</span>
+            <div style={{display: 'flex'}}>
+                <span>{column.field}</span>
+                <span style={{marginLeft: 'auto'}} onPointerDown={(e: any) => this.toggleColumnPin(column.field)}>📌</span>
             </div>
         );
     }

samples/grids/grid/paste/src/index.css

@@ -1,2 +1,8 @@
 /* shared styles are loaded from: */
 /* https://static.infragistics.com/xplatform/css/samples */
+
+    .edited {
+            font-style: italic;
+            color: gray;
+    }
+

samples/grids/grid/paste/src/index.tsx

@@ -9,6 +9,7 @@ import { IgrGrid, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarExporter,
 import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescriptionModule } from 'igniteui-react-core';
 import { InvoicesDataItem, InvoicesData } from './InvoicesData';
 import { IgrPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-react-layouts';
+import { IgrRowType } from 'igniteui-react-grids';
 
 import 'igniteui-react-grids/grids/themes/light/bootstrap.css';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
@@ -67,6 +68,7 @@ export default class Sample extends React.Component<any, any> {
                     autoGenerate={false}
                     data={this.invoicesData}
                     onRendered={this.webGridPasteFromExcel}
+                    rowClasses={this.webGridEditedRowClassesHandler}
                     ref={this.gridRef}
                     id="grid"
                     primaryKey="OrderID">
@@ -157,6 +159,7 @@ export default class Sample extends React.Component<any, any> {
 
     private txtArea: any;
     public pasteMode = "Paste starting from active cell";
+    public updatedRecsPK: any[] = [];
 
     public get textArea() {
         if(!this.txtArea) {
@@ -202,7 +205,6 @@ export default class Sample extends React.Component<any, any> {
             const grid = this.grid as any;
             const columns = grid.visibleColumns;
             const pk = grid.primaryKey;
-            const addedData: any[] = [];
             for (const curentDataRow of processedData) {
                 const rowData = {} as any;
                 for (const col of columns) {
@@ -211,22 +213,12 @@ export default class Sample extends React.Component<any, any> {
                 }
                 // generate PK
                 rowData[pk] = grid.data.length + 1;
+                this.updatedRecsPK.push(rowData[pk]);
                 grid.addRow(rowData);
-                addedData.push(rowData);
             }
             // scroll to last added row
             grid.navigateTo(grid.data.length - 1, 0, () => {
-                this.clearStyles();
-                for (const data of addedData) {
-                    const row = grid.getRowByKey(data[pk]);
-                    if (row) {
-                        const rowNative = this.getNative(row) as any;
-                        if (rowNative) {
-                            rowNative.style["font-style"] = "italic";
-                            rowNative.style.color = "gray";
-                        }
-                    }
-                }
+              grid.cdr.detectChanges();
             });
         }
         public updateRecords(processedData: any[]) {
@@ -238,7 +230,6 @@ export default class Sample extends React.Component<any, any> {
             const columns = grid.visibleColumns;
             const cellIndex = grid.visibleColumns.indexOf(cell.column);
             let index = 0;
-            const updatedRecsPK: any[] = [];
             for (const curentDataRow of processedData) {
                 const rowData = {} as any;
                 const dataRec = grid.data[rowIndex + index];
@@ -258,36 +249,10 @@ export default class Sample extends React.Component<any, any> {
                     grid.addRow(rowData);
                     continue;
                 }
+                this.updatedRecsPK.push(rowPkValue);
                 grid.updateRow(rowData, rowPkValue);
-                updatedRecsPK.push(rowPkValue);
                 index++;
             }
-
-            this.clearStyles();
-            for (const pkVal of updatedRecsPK) {
-                const row = grid.getRowByKey(pkVal);
-                if (row) {
-                    const rowNative = this.getNative(row) as any;
-                    if (rowNative) {
-                        rowNative.style["font-style"] = "italic";
-                        rowNative.style.color = "gray";
-                    }
-                }
-            }
-        }
-
-        protected clearStyles() {
-            const rows = [...(document.getElementsByTagName("igx-grid-row") as any)];
-            for (const rowNative of rows) {
-                rowNative.style["font-style"] = "";
-                rowNative.style.color = "";
-            }
-        }
-
-        protected getNative(row: any) {
-            const rows = [...(document.getElementsByTagName("igx-grid-row") as any)];
-            const dataInd = row.index.toString();
-            return rows.find(x => (x.attributes as any)["data-rowindex"] .value === dataInd);
         }
 
         public processData(data: any) {
@@ -308,6 +273,13 @@ export default class Sample extends React.Component<any, any> {
             return pasteData;
         }
 
+    public webGridEditedRowClassesHandler = {
+      edited: (row: IgrRowType) => {
+        const grid = this.grid as any;
+        return this.updatedRecsPK.indexOf(row.data[grid.primaryKey]) !== -1;
+      }
+    };
+
 }
 
 // rendering above component in the React DOM

samples/grids/grid/row-reorder/src/index.tsx

@@ -103,6 +103,9 @@ export default class Sample extends React.Component<any, any> {
 
     public webGridReorderRowHandler(args: IgrRowDragEndEventArgs): void {
         const ghostElement = args.detail.dragDirective.ghostElement;
+        if (!ghostElement) {
+            return;
+        }
         const dragElementPos = ghostElement.getBoundingClientRect();
         const grid = this.grid;
         const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-grid-row"));

samples/grids/hierarchical-grid/advanced-filtering-style/src/index.css

@@ -2,59 +2,11 @@
 /* https://static.infragistics.com/xplatform/css/samples */
 
 #hierarchicalGrid1 {
-
-    --ig-button-background: #292826;
-    --ig-button-foreground:#ffcd0f;
-    --ig-button-hover-foreground:#292826;
-    --ig-button-hover-background:#ffcd0f;
-    --ig-button-focus-foreground:#ffcd0f;
-    --ig-button-focus-background:#292826;
-    --ig-button-active-background:#ffcd0f;
-    --ig-button-active-foreground:#292826;
-    --ig-button-border-color:#ffcd0f;
-    --ig-button-hover-border-color:#ffcd0f;
-    --ig-button-focus-border-color:#ffcd0f;
-    --ig-button-active-border-color:#ffcd0f;
-
-    --ig-button-group-item-background:  #292826;
-    --ig-button-group-item-text-color: #ffcd0f;
-    --ig-button-group-item-border-color: #ffcd0f;
-    --ig-button-group-item-selected-background: #ffcd0f;
-    --ig-button-group-item-hover-background: #ffcd0f;
-    --ig-button-group-item-selected-hover-background: #ffcd0f;
-    --ig-button-group-item-disabled-border: #ffcd0f;
-    --ig-button-group-item-selected-border-color: #ffcd0f;
-
-    --ig-input-group-idle-text-color: #ffcd0f;
-    --ig-input-group-focused-text-color: #ffcd0f;
-    --ig-input-group-filled-text-color: #ffcd0f;
-    --ig-input-group-idle-bottom-line-color: #ffe482;
-    --ig-input-group-focused-secondary-color: #ffcd0f;
-
-    --ig-chip-background: #ffcd0f;
-    --ig-chip-text-color: #292826;
-
-    --ig-drop-down-background-color: #292826;
-    --ig-drop-down-item-text-color: #ffcd0f;
-    --ig-drop-down-hover-item-background: #ffcd0f;
-    --ig-drop-down-hover-item-text-color: #292826;
-    --ig-drop-down-focused-item-background: #ffcd0f;
-    --ig-drop-down-focused-item-text-color: #292826;
-    --ig-drop-down-selected-item-background: #ffcd0f;
-    --ig-drop-down-selected-item-text-color: #292826;
-    --ig-drop-down-selected-focus-item-background: #ffcd0f;
-    --ig-drop-down-selected-focus-item-text-color: #292826;
-    --ig-drop-down-selected-hover-item-background: #ffcd0f;
-    --ig-drop-down-selected-hover-item-text-color: #292826;
-
-    --ig-query-builder-header-foreground: #EDEDED;
-    --ig-query-builder-header-background: gray;
-    --ig-query-builder-background: #292826;
-    --ig-query-builder-foreground: #ffcd0f;
-}
-
-* {
-    --background-or: red;
-    --filtering-row-background: #292826;
+    --ig-query-builder-header-foreground: #512da8;
+    --ig-query-builder-color-expression-group-and: #eb0000;
+    --ig-query-builder-color-expression-group-or: #0000f3;
+    --ig-query-builder-subquery-header-background: var(--ig-gray-300);
+    --ig-query-builder-subquery-border-color: var(--ig-warn-500);
+    --ig-query-builder-subquery-border-radius: 4px;
 }