diff --git a/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/DataGridSharedData.ts b/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/DataGridSharedData.ts
index eec8efd89..8c84a3600 100644
--- a/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/DataGridSharedData.ts
+++ b/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/DataGridSharedData.ts
@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 export class DataGridSharedData {
   public static getEmployees(count?: number): any[] {
     if (count === undefined) {
@@ -102,7 +103,7 @@ export class DataGridSharedData {
       const items = this.getRandomNumber(10, 80);
       const value = price * items;
       const margin = this.getRandomNumber(3, 10);
-      const profit = Math.round((price * margin / 100) * items);
+      const profit = Math.round((price * (margin / 100)) * items);
       const country = this.getRandomItem(countries);
       sales.push({
         BundlePrice: price,
diff --git a/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/__filePrefix__.ts
index 9c6fcac74..4124c3beb 100644
--- a/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/__filePrefix__.ts
+++ b/packages/cli/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/__filePrefix__.ts
@@ -1,3 +1,4 @@
+/* eslint-disable import/extensions */
 import {
   IgcDataGridModule,
   IgcGridColumnOptionsModule,
@@ -80,6 +81,11 @@ export default class $(ClassName) extends HTMLElement {
   }
 
   connectedCallback() {
+    const grid = document.getElementsByTagName('app-grid-editing')[0].shadowRoot!.getElementById('grid') as IgcDataGridComponent;
+    const commitButton = document.getElementsByTagName('app-grid-editing')[0].shadowRoot!.getElementById('commitClick') as HTMLButtonElement;
+    const undoButton = document.getElementsByTagName('app-grid-editing')[0].shadowRoot!.getElementById('undoClick') as HTMLButtonElement;
+    const redoButton = document.getElementsByTagName('app-grid-editing')[0].shadowRoot!.getElementById('redoClick') as HTMLButtonElement;
+
     const onCommitClick = () => {
       grid.commitEdits();
       commitButton.disabled = true;
@@ -115,7 +121,35 @@ export default class $(ClassName) extends HTMLElement {
       }
     };
 
-    const onDeleteCellUpdating = (s: IgcTemplateColumnComponent, e: IgcTemplateCellUpdatingEventArgs) => {
+    if (commitButton !== null) {
+      commitButton.onclick = onCommitClick;
+    }
+    if (undoButton !== null) {
+      undoButton.onclick = onUndoClick;
+    }
+
+    if (redoButton !== null) {
+      redoButton.onclick = onRedoClick;
+    }
+
+    const onDeleteRowClick = (e: MouseEvent) => {
+      const button = e.srcElement as HTMLButtonElement;
+      const viewIndex = parseInt(button.id, 10);
+      const rowItem = grid.actualDataSource.getItemAtIndex(viewIndex);
+
+      if (grid.editMode === EditModeType.CellBatch || grid.editMode === EditModeType.Row) {
+        grid.removeItem(rowItem);
+        commitButton.disabled = !grid.canCommit;
+        redoButton.disabled = !grid.canRedo;
+        undoButton.disabled = !grid.canUndo;
+      } else if (grid.editMode === EditModeType.Cell) {
+        // delete grid row immediately
+        grid.removeItem(rowItem);
+      }
+    };
+
+    const onDeleteCellUpdating = (s: IgcTemplateColumnComponent,
+      e: IgcTemplateCellUpdatingEventArgs) => {
       const content = e.content as HTMLDivElement;
       if (content.childElementCount === 0) {
         const button = document.createElement('button') as HTMLButtonElement;
@@ -143,22 +177,6 @@ export default class $(ClassName) extends HTMLElement {
       grid.editModeClickAction = event.target.value;
     };
 
-    const onDeleteRowClick = (e: MouseEvent) => {
-      const button = e.srcElement as HTMLButtonElement;
-      const viewIndex = parseInt(button.id);
-      const rowItem = grid.actualDataSource.getItemAtIndex(viewIndex);
-
-      if (grid.editMode === EditModeType.CellBatch || grid.editMode === EditModeType.Row) {
-        grid.removeItem(rowItem);
-        commitButton.disabled = !grid.canCommit;
-        redoButton.disabled = !grid.canRedo;
-        undoButton.disabled = !grid.canUndo;
-      } else if (grid.editMode === EditModeType.Cell) {
-        //delete grid row immediately
-        grid.removeItem(rowItem);
-      }
-    };
-
     const onCellValueChanging = (s: IgcDataGridComponent, e: IgcGridCellValueChangingEventArgs) => {
       if (s.editMode === EditModeType.CellBatch || grid.editMode === EditModeType.Row) {
         commitButton.disabled = !grid.canCommit;
@@ -170,9 +188,8 @@ export default class $(ClassName) extends HTMLElement {
         commitButton.disabled = true;
         s.setEditError(e.editID, 'Error, cell is empty');
       }
-  };
+    };
 
-    const grid = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('grid') as IgcDataGridComponent;
     if (grid !== null) {
       grid.dataSource = this.data;
       grid.activationMode = GridActivationMode.Cell;
@@ -181,32 +198,17 @@ export default class $(ClassName) extends HTMLElement {
       grid.cellValueChanging = onCellValueChanging;
     }
 
-    const dropDown = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('editModeDropBox');
+    const dropDown = document.getElementsByTagName('app-grid-editing')[0].shadowRoot!.getElementById('editModeDropBox');
     if (dropDown !== null) {
       dropDown.onchange = editModeChanged;
     }
 
-    const dropDown2 = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('editModeClickActionDropBox');
+    const dropDown2 = document.getElementsByTagName('app-grid-editing')[0].shadowRoot!.getElementById('editModeClickActionDropBox');
     if (dropDown2 !== null) {
       dropDown2.onchange = editModeClickActionChanged;
     }
 
-    let commitButton = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('commitClick') as HTMLButtonElement;
-    if (commitButton !== null) {
-      commitButton.onclick = onCommitClick;
-    }
-
-    let undoButton = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('undoClick') as HTMLButtonElement;
-    if (undoButton !== null) {
-      undoButton.onclick = onUndoClick;
-    }
-
-    let redoButton = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('redoClick') as HTMLButtonElement;
-    if (redoButton !== null) {
-      redoButton.onclick = onRedoClick;
-    }
-
-    const deleteRowColumn = document.getElementsByTagName('app-$(path)')[0].shadowRoot!.getElementById('deleteRowColumn') as IgcTemplateColumnComponent;
+    const deleteRowColumn = document.getElementsByTagName('app-grid-editing')[0].shadowRoot!.getElementById('deleteRowColumn') as IgcTemplateColumnComponent;
     if (deleteRowColumn !== null) {
       deleteRowColumn.cellUpdating = onDeleteCellUpdating;
     }
diff --git a/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/files/src/app/__path__/DataGridSharedData.ts b/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/files/src/app/__path__/DataGridSharedData.ts
index eec8efd89..8c84a3600 100644
--- a/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/files/src/app/__path__/DataGridSharedData.ts
+++ b/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/files/src/app/__path__/DataGridSharedData.ts
@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 export class DataGridSharedData {
   public static getEmployees(count?: number): any[] {
     if (count === undefined) {
@@ -102,7 +103,7 @@ export class DataGridSharedData {
       const items = this.getRandomNumber(10, 80);
       const value = price * items;
       const margin = this.getRandomNumber(3, 10);
-      const profit = Math.round((price * margin / 100) * items);
+      const profit = Math.round((price * (margin / 100)) * items);
       const country = this.getRandomItem(countries);
       sales.push({
         BundlePrice: price,
diff --git a/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/files/src/app/__path__/__filePrefix__.ts
index 3d23af084..ce1ee4bd4 100644
--- a/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/files/src/app/__path__/__filePrefix__.ts
+++ b/packages/cli/templates/webcomponents/igc-ts/grid/grid-summaries/files/src/app/__path__/__filePrefix__.ts
@@ -1,3 +1,4 @@
+/* eslint-disable import/extensions, max-classes-per-file, class-methods-use-this */
 import {
   IgcDataGridModule,
   IgcGridColumnOptionsModule,
@@ -62,6 +63,8 @@ export default class $(ClassName) extends HTMLElement {
   }
 
   connectedCallback() {
+    const grid = document.getElementsByTagName('app-grid-summaries')[0].shadowRoot!.getElementById('grid') as IgcDataGridComponent;
+
     // Custom Calculator - calculates the count for all USA.
     class CustomDomestic extends SummaryCalculator {
       get displayName(): string {
@@ -81,13 +84,14 @@ export default class $(ClassName) extends HTMLElement {
 
       public aggregate(a: any): void {
         if (a.Countries === 'USA') {
-            this.usCountries += 1;
+          this.usCountries += 1;
         }
       }
     }
 
-    const onProvideCalculator = (s: IgcColumnSummaryDescription, e: IgcProvideCalculatorEventArgs) => {
-        e.calculator = new CustomDomestic();
+    const onProvideCalculator = (s: IgcColumnSummaryDescription,
+      e: IgcProvideCalculatorEventArgs) => {
+      e.calculator = new CustomDomestic();
     };
 
     const onLoad = () => {
@@ -175,7 +179,6 @@ export default class $(ClassName) extends HTMLElement {
       grid.summaryDescriptions.add(countries);
     };
 
-    const grid = document.getElementsByTagName('app-grid-summaries')[0].shadowRoot!.getElementById('grid') as IgcDataGridComponent;
     grid.dataSource = DataGridSharedData.getSales();
 
     onLoad();
diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/src/app.ts b/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/src/app.ts
index d4b354b2e..6225ce1f8 100644
--- a/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/src/app.ts
+++ b/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/src/app.ts
@@ -1,3 +1,4 @@
+/* eslint-disable no-return-assign */
 import {
   defineComponents,
   IgcNavDrawerComponent,
diff --git a/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/src/index.ts b/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/src/index.ts
index e76a56770..ee5ce9c3b 100644
--- a/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/src/index.ts
+++ b/packages/cli/templates/webcomponents/igc-ts/projects/empty/files/src/index.ts
@@ -1,3 +1,4 @@
+/* eslint-disable import/extensions, quotes, no-tabs, indent, comma-dangle */
 import {
   Route,
   Router