diff --git a/projects/igniteui-angular/src/lib/grids/column.component.ts b/projects/igniteui-angular/src/lib/grids/column.component.ts
index 392a2d04947..ce491d1a587 100644
--- a/projects/igniteui-angular/src/lib/grids/column.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/column.component.ts
@@ -1347,7 +1347,7 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
                 return acc;
             }
 
-            if (val.width && val.width.indexOf('%') !== -1) {
+            if (val.width && val.width.indexOf && val.width.indexOf('%') !== -1) {
                 isChildrenWidthInPercent = true;
             }
 
diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts
index d131d7a4cac..e47f0fb7dcf 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts
@@ -37,7 +37,8 @@ describe('IgxGrid - multi-column headers', () => {
                 EmptyColGridComponent,
                 OneColPerGroupGridComponent,
                 NestedColumnGroupsGridComponent,
-                DynamicGridComponent
+                DynamicGridComponent,
+                NumberColWidthGridComponent
             ],
             imports: [
                 NoopAnimationsModule,
@@ -1378,6 +1379,13 @@ describe('IgxGrid - multi-column headers', () => {
         const colsCount = 2; // 1 col group and 1 col
         expect(grid.onColumnInit.emit).toHaveBeenCalledTimes(colsCount);
     });
+
+    fit('Should not throw exception if multi-column header columns width is set as number', () => {
+        expect(() => {
+            const fixture = TestBed.createComponent(NumberColWidthGridComponent);
+            fixture.detectChanges();
+        }).not.toThrow();
+    });
 });
 
 @Component({
@@ -2006,6 +2014,32 @@ export class DynamicGridComponent {
     data = SampleTestData.contactInfoDataFull();
 }
 
+@Component({
+    template: `
+        <igx-grid #grid [data]="data" height="500px">
+            <igx-column-group header="MCH">
+                <igx-column *ngFor="let c of columns"
+                    [field]="c.field"
+                    [header]="c.field"
+                    [width]="c.width"></igx-column>
+            </igx-column-group>
+        </igx-grid>
+    `
+})
+export class NumberColWidthGridComponent {
+    @ViewChild(IgxGridComponent, { read: IgxGridComponent })
+    grid: IgxGridComponent;
+
+    data = SampleTestData.contactInfoDataFull();
+
+    columns = [
+        { field: 'ID', width: 100 },
+        { field: 'CompanyName', width: 200 },
+        { field: 'ContactName', width: 150 },
+        { field: 'City', width: 100 },
+    ];
+}
+
 function getColGroup(grid: IgxGridComponent, headerName: string): IgxColumnGroupComponent {
     const colGroups = grid.columnList.filter(c => c.columnGroup && c.header === headerName);
     if (colGroups.length === 0) {