Use row classes when applying custom styling to pasted data. (#941)

* Use row classes when applying custom styling to pasted data.

* Minor fixes.

* Minor fix 2.

* fix: ensure correct row addition and update in paste functionality

---------

Co-authored-by: Martin Dragnev <mddragnev@gmail.com>

Author: MayaKirova

code-gen-library/WebGridEditedRowClassesHandler/Blazor.js

@@ -0,0 +1,16 @@
+//begin eventHandler
+igRegisterScript("WebGridEditedRowClassesHandler", () => {
+    return {
+        edited: (row) => updatedRecsPK.indexOf(row.data[grid.primaryKey]) !== -1
+    };
+}, true);
+//end eventHandler
+
+let requiredStyles = `
+<!--begin styles-->
+    .edited {
+            font-style: italic;
+            color: gray;
+    }
+<!--end styles-->
+`;

code-gen-library/WebGridEditedRowClassesHandler/Web.ts

@@ -0,0 +1,26 @@
+//begin imports
+import { IgcRowType } from "igniteui-webcomponents-grids/grids";
+import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
+//end imports
+
+import { CodeGenHelper } from 'igniteui-webcomponents-core';
+
+export class WebGridEditedRowClassesHandler {
+  //begin eventHandler
+  public webGridEditedRowClassesHandler = {
+    edited: (row: IgcRowType) => {
+      const grid = CodeGenHelper.getDescription<IgcGridComponent>("content") as any;
+      return this.updatedRecsPK.indexOf(row.data[grid.primaryKey]) !== -1;
+    }
+  };
+  //end eventHandler
+
+  public requiredStyles = `
+    <!--begin styles-->
+    .edited {
+            font-style: italic;
+            color: gray;
+    }
+    <!--end styles-->
+    `;
+}

code-gen-library/WebGridPasteFromExcel/Blazor.js

@@ -16,6 +16,7 @@ function onWebGridPasteFromExcelKeyDown(eventArgs) {
 var txtArea;
 var textArea = getTextArea();
 var pasteMode = "Paste starting from active cell";
+var updatedRecsPK = [];
 
 function getTextArea() {
     if(!txtArea) {
@@ -61,7 +62,6 @@ function onPaste(eventArgs) {
         const grid = document.getElementById("grid");
         const columns = grid.visibleColumns;
         const pk = grid.primaryKey;
-        const addedData = [];
         for (const curentDataRow of processedData) {
             const rowData = {};
             for (const col of columns) {
@@ -70,22 +70,12 @@ function onPaste(eventArgs) {
             }
             // generate PK
             rowData[pk] = grid.data.length + 1;
+            updatedRecsPK.push(rowData[pk]);
             grid.addRow(rowData);
-            addedData.push(rowData);
         }
         // scroll to last added row
         grid.navigateTo(grid.data.length - 1, 0, () => {
-            clearStyles();
-            for (const data of addedData) {
-                const row = grid.getRowByKey(data[pk]);
-                if (row) {
-                    const rowNative = getNative(row);
-                    if (rowNative) {
-                        rowNative.style["font-style"] = "italic";
-                        rowNative.style.color = "gray";
-                    }
-                }
-            }
+            grid.cdr.detectChanges();
         });
     }
     function updateRecords(processedData) {
@@ -97,7 +87,6 @@ function onPaste(eventArgs) {
         const columns = grid.visibleColumns;
         const cellIndex = grid.visibleColumns.indexOf(cell.column);
         let index = 0;
-        const updatedRecsPK = [];
         for (const curentDataRow of processedData) {
             const rowData = {};
             const dataRec = grid.data[rowIndex + index];
@@ -117,36 +106,10 @@ function onPaste(eventArgs) {
                 grid.addRow(rowData);
                 continue;
             }
-            grid.updateRow(rowData, rowPkValue);
             updatedRecsPK.push(rowPkValue);
+            grid.updateRow(rowData, rowPkValue);
             index++;
         }
-
-        clearStyles();
-        for (const pkVal of updatedRecsPK) {
-            const row = grid.getRowByKey(pkVal);
-            if (row) {
-                const rowNative = getNative(row);
-                if (rowNative) {
-                    rowNative.style["font-style"] = "italic";
-                    rowNative.style.color = "gray";
-                }
-            }
-        }
-    }
-
-    function clearStyles() {
-        const rows = [...(document.getElementsByTagName("igx-grid-row"))];
-        for (const rowNative of rows) {
-            rowNative.style["font-style"] = "";
-            rowNative.style.color = "";
-        }
-    }
-
-    function getNative(row) {
-        const rows = [...document.getElementsByTagName("igx-grid-row")];
-        const dataInd = row.index.toString();
-        return rows.find(x => x.attributes["data-rowindex"] .value === dataInd);
     }
 
     function processData(data) {

code-gen-library/WebGridPasteFromExcel/Web.ts

@@ -23,6 +23,7 @@ export class WebGridPasteFromExcel {
 
     private txtArea: any;
     public pasteMode = "Paste starting from active cell";
+    public updatedRecsPK: any[] = [];
 
     public get textArea() {
         if(!this.txtArea) {
@@ -68,7 +69,6 @@ export class WebGridPasteFromExcel {
             const grid = CodeGenHelper.getDescription<IgcGridComponent>("content") 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) {
@@ -77,22 +77,12 @@ export class WebGridPasteFromExcel {
                 }
                 // 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[]) {
@@ -104,7 +94,6 @@ export class WebGridPasteFromExcel {
             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];
@@ -124,36 +113,10 @@ export class WebGridPasteFromExcel {
                     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) {

samples/grids/grid/paste.json

@@ -27,6 +27,7 @@
         "type": "WebGrid",
         "dataRef": "InvoicesData",
         "renderedRef": "WebGridPasteFromExcel",
+        "rowClassesRef": "WebGridEditedRowClassesHandler",
         "autoGenerate": false,
         "name": "grid",
         "id": "grid",