diff --git a/live-editing/configs/GridConfigGenerator.ts b/live-editing/configs/GridConfigGenerator.ts
index 3868d63fdd..431bb36310 100644
--- a/live-editing/configs/GridConfigGenerator.ts
+++ b/live-editing/configs/GridConfigGenerator.ts
@@ -1,4 +1,3 @@
-/* tslint:disable:object-literal-sort-keys */
 import { HttpClientModule } from "@angular/common/http";
 import { Router, RouterModule } from "@angular/router";
 import {
@@ -29,8 +28,9 @@ import {
     IgxToastModule,
     IgxTooltipModule
 } from "igniteui-angular";
-// tslint:disable-next-line: max-line-length
-import { CustomGridPagingStyleSample } from "../../src/app/grid/custom-grid-paging-style/custom-grid-paging-style.component";
+import {
+    CustomGridPagingStyleSample
+} from "../../src/app/grid/custom-grid-paging-style/custom-grid-paging-style.component";
 import {
     GridBatchEditingSampleComponent
 } from "../../src/app/grid/grid-batch-editing/grid-batch-editing-sample.component";
@@ -49,8 +49,9 @@ import {
 import {
     GridColumnHidingToolbarStyleComponent
 } from "../../src/app/grid/grid-column-hiding-toolbar-style/grid-column-hiding-toolbar-style.component";
-// tslint:disable-next-line:max-line-length
-import { GridCompositeDataComponent } from "../../src/app/grid/grid-composite-data-binding/grid-composite-data.component";
+import {
+    GridCompositeDataComponent
+} from "../../src/app/grid/grid-composite-data-binding/grid-composite-data.component";
 import {
     GridConditionalCellStyleComponent
 } from "../../src/app/grid/grid-conditional-cell-style/grid-conditional-cell-style.component";
@@ -62,8 +63,12 @@ import { GridCustomFilteringComponent } from "../../src/app/grid/grid-custom-fil
 import {
     GridCustomKBNavigationComponent
 } from "../../src/app/grid/grid-custom-kb-navigation/grid-custom-kb-navigation-sample.component";
-import { GridCustomSummariesSelection } from "../../src/app/grid/grid-custom-summaries-selection/grid-custom-summaries-selection.component";
-import { SummariesData } from "../../src/app/grid/grid-custom-summaries-selection/summaries-data/summaries-data.component";
+import {
+    GridCustomSummariesSelection
+} from "../../src/app/grid/grid-custom-summaries-selection/grid-custom-summaries-selection.component";
+import {
+    SummariesData
+} from "../../src/app/grid/grid-custom-summaries-selection/summaries-data/summaries-data.component";
 import {
     GridDisplayDensitySampleComponent
 } from "../../src/app/grid/grid-displaydensity-sample/grid-displaydensity-sample.component";
@@ -72,6 +77,10 @@ import { GridEditingSampleComponent } from "../../src/app/grid/grid-editing-samp
 import {
     GridEditingStyleSample
 } from "../../src/app/grid/grid-editing-style-sample/grid-editing-style-sample.component";
+import {
+    GridExcelStyleFilteringLoadOnDemandComponent
+} from "../../src/app/grid/grid-excel-style-filtering-load-on-demand/grid-excel-style-filtering-load-on-demand.component";
+import { RemoteValuesService } from "../../src/app/grid/grid-excel-style-filtering-load-on-demand/remoteValues.service";
 import {
     ExcelStyleFilteringSample1Component
 } from "../../src/app/grid/grid-excel-style-filtering-sample-1/grid-excel-style-filtering-sample-1.component";
@@ -84,9 +93,6 @@ import {
 import {
     ExcelStyleFilteringStyleComponent
 } from "../../src/app/grid/grid-excel-style-filtering-style/grid-excel-style-filtering-style.component";
-import {
-    GridExcelStyleFilteringLoadOnDemandComponent
-} from "../../src/app/grid/grid-excel-style-filtering-load-on-demand/grid-excel-style-filtering-load-on-demand.component";
 import { FilteringSampleComponent } from "../../src/app/grid/grid-filtering-sample/grid-filtering-sample.component";
 import { GridFilteringStyleComponent } from "../../src/app/grid/grid-filtering-style/grid-filtering-style.component";
 import {
@@ -96,7 +102,7 @@ import {
     GridGroupByPagingSampleComponent
 } from "../../src/app/grid/grid-group-by-paging-sample/grid-group-by-paging-sample.component";
 import { GridGroupBySampleComponent } from "../../src/app/grid/grid-groupby-sample/grid-groupby-sample.component";
-import { GridGroupByStyling } from '../../src/app/grid/grid-groupby-styling/grid-groupby-styling.component';
+import { GridGroupByStyling } from "../../src/app/grid/grid-groupby-styling/grid-groupby-styling.component";
 import {
     GridGroupBySummarySampleComponent
 } from "../../src/app/grid/grid-groupby-summary-sample/grid-groupby-summary-sample.component";
@@ -118,6 +124,8 @@ import {
 import {
     GridMultiRowLayoutConfigurationComponent
 } from "../../src/app/grid/grid-multi-row-layout-configuration/grid-multi-row-layout-configuration.component";
+import { GridMultiRowLayoutStylingComponent
+} from "../../src/app/grid/grid-multi-row-layout-styling/grid-multi-row-layout-styling.component";
 import { GridMultiRowLayoutComponent } from "../../src/app/grid/grid-multi-row-layout/grid-multi-row-layout.component";
 import { GridNestedDataBindComponent } from "../../src/app/grid/grid-nested-data-binding/grid-nested-data-bind";
 import { GridPagerSampleComponent } from "../../src/app/grid/grid-pager-sample/grid-pager-sample.component";
@@ -146,9 +154,14 @@ import { GridRowReorderComponent } from "../../src/app/grid/grid-row-reorder-sam
 import { FinancialSampleComponent, LocalService } from "../../src/app/grid/grid-sample-2/grid-sample-2.component";
 import { GridSample3Component } from "../../src/app/grid/grid-sample-3/grid-sample-3.component";
 import { GridRemoteVirtualizationSampleComponent } from "../../src/app/grid/grid-sample-4/grid-sample-4.component";
-import { PinningStylingComponent } from '../../src/app/grid/grid-sample-pinning-styling/grid-pinning-styling.component';
+import { PinningStylingComponent } from "../../src/app/grid/grid-sample-pinning-styling/grid-pinning-styling.component";
 import { PinningSampleComponent } from "../../src/app/grid/grid-sample-pinning/grid-pinning.component";
 import { PinningToolbarSampleComponent } from "../../src/app/grid/grid-sample-pinning/grid-toolbar-pinning.component";
+import { GridSelectionTemplateExcelComponent
+} from "../../src/app/grid/grid-sample-selection-template-excel/grid-sample-selection-template-excel.component";
+import {
+    GridSelectionTemplateNumbersComponent
+} from "../../src/app/grid/grid-sample-selection-template-numbers/grid-sample-selection-template-numbers.component";
 import { GridSelectionSampleComponent } from "../../src/app/grid/grid-sample-selection/grid-selection.component";
 import { AboutComponent } from "../../src/app/grid/grid-save-state/about.component";
 import { GridSaveStateComponent } from "../../src/app/grid/grid-save-state/grid-state.component";
@@ -172,12 +185,9 @@ import { DataService } from "../../src/app/grid/services/data.service";
 import { RemoteFilteringService } from "../../src/app/grid/services/remoteFilteringService";
 import { RemotePagingService } from "../../src/app/grid/services/remotePagingService";
 import { RemoteServiceVirt } from "../../src/app/grid/services/remoteService";
-import { RemoteValuesService } from "../../src/app/grid/grid-excel-style-filtering-load-on-demand/remoteValues.service";
 import { AppModuleConfig } from "./core/AppModuleConfig";
 import { Config } from "./core/Config";
 import { IConfigGenerator } from "./core/IConfigGenerator";
-import { GridMultiRowLayoutStylingComponent }
-    from'../../src/app/grid/grid-multi-row-layout-styling/grid-multi-row-layout-styling.component';
 
 // tslint:enable:max-line-length
 
@@ -327,7 +337,7 @@ export class GridConfigGenerator implements IConfigGenerator {
 
         configs.push(new Config({
             component: GridSelectionSampleComponent,
-            additionalFiles: ["/src/app/grid/grid-sample-selection/financialData.ts"],
+            additionalFiles: ["/src/app/grid/services/financialData.ts"],
             appModuleConfig: new AppModuleConfig({
                 imports: [HttpClientModule, IgxAvatarModule, IgxBadgeModule, IgxButtonModule, IgxSnackbarModule,
                     IgxGridModule, IgxIconModule, IgxInputGroupModule, IgxSwitchModule, GridSelectionSampleComponent],
@@ -338,6 +348,31 @@ export class GridConfigGenerator implements IConfigGenerator {
             })
         }));
 
+        configs.push(new Config({
+            component: GridSelectionTemplateExcelComponent,
+            additionalFiles: ["/src/app/data/customers.ts"],
+            appModuleConfig: new AppModuleConfig({
+                imports: [IgxGridModule, GridSelectionTemplateExcelComponent],
+                ngDeclarations: [GridSelectionTemplateExcelComponent],
+                ngImports: [IgxGridModule],
+                ngProviders: []
+            })
+        }));
+
+        configs.push(new Config({
+            component: GridSelectionTemplateNumbersComponent,
+            additionalFiles: [
+                "/src/app/data/customers.ts"
+            ],
+            appModuleConfig: new AppModuleConfig({
+                imports: [IgxCheckboxModule, IgxGridModule,
+                    GridSelectionTemplateNumbersComponent],
+                ngDeclarations: [GridSelectionTemplateNumbersComponent],
+                ngImports: [IgxCheckboxModule, IgxGridModule],
+                ngProviders: []
+            })
+        }));
+
         configs.push(new Config({
             component: GridSearchSampleComponent,
             additionalFiles: ["/src/app/grid/grid-search-sample/data.ts"],
@@ -481,7 +516,7 @@ export class GridConfigGenerator implements IConfigGenerator {
         // column-moving sample
         configs.push(new Config({
             component: GridMovingSampleComponent,
-            additionalFiles: ["/src/app/grid/grid-sample-selection/financialData.ts"],
+            additionalFiles: ["/src/app/grid/services/financialData.ts"],
             appModuleConfig: new AppModuleConfig({
                 imports: [GridMovingSampleComponent, IgxGridModule, IgxBadgeModule, IgxIconModule],
                 ngDeclarations: [GridMovingSampleComponent],
@@ -492,7 +527,7 @@ export class GridConfigGenerator implements IConfigGenerator {
 
         configs.push(new Config({
             component: GridMovingStyledSampleComponent,
-            additionalFiles: ["/src/app/grid/grid-sample-selection/financialData.ts"],
+            additionalFiles: ["/src/app/grid/services/financialData.ts"],
             appModuleConfig: new AppModuleConfig({
                 imports: [GridMovingStyledSampleComponent, IgxGridModule, IgxBadgeModule, IgxIconModule],
                 ngDeclarations: [GridMovingStyledSampleComponent],
diff --git a/live-editing/configs/HierarchicalGridConfigGenerator.ts b/live-editing/configs/HierarchicalGridConfigGenerator.ts
index 2f4b21a55a..6e76729aff 100644
--- a/live-editing/configs/HierarchicalGridConfigGenerator.ts
+++ b/live-editing/configs/HierarchicalGridConfigGenerator.ts
@@ -32,6 +32,7 @@ import { HGridEditingEventsComponent } from "../../src/app/hierarchical-grid/hie
 import { HGridEditingStyleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-editing-style/hierarchical-grid-editing-style.component";
 import { HGridEditingSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-editing/hierarchical-grid-editing.component";
 import { HierarchicalGridExcelStyleFilteringLoadOnDemandComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-load-on-demand/hierarchical-grid-excel-style-filtering-load-on-demand.component";
+import { RemoteValuesService } from "../../src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-load-on-demand/remoteValues.service";
 import {
     HGridExcelStyleFilteringSample1Component
 } from "../../src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-sample-1/hierarchical-grid-excel-style-filtering-sample-1.component";
@@ -66,10 +67,12 @@ import { HGridDragSampleComponent } from "../../src/app/hierarchical-grid/hierar
 import { HGridRowEditStyleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-row-edit-style/hierarchical-grid-row-edit-style.component";
 import { HGridRowEditingSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-row-editing/hierarchical-grid-row-editing.component";
 import { HGridRowReorderComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-row-reorder/hierarchical-grid-row-reorder.component";
+import { HGridSelectionTemplateNumbersSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-selection-template-numbers/hierarchical-grid-selection-template-numbers.component"
 import { HGridSelectionSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-selection/hierarchical-grid-selection.component";
 import { HGridSortingStylingComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-sorting-styling/hierarchical-grid-sorting-styling.component";
 import { HGridContextmenuComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-sorting/hgrid-contextmenu/hgrid-contextmenu.component";
 import { HGridSortingSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-sorting/hierarchical-grid-sorting.component";
+import { HGridStylingComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-styling/hierarchical-grid-styling.component";
 import { HGridSummaryStylingComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-summary-styling/hierarchical-grid-summary-styling.component";
 import { HGridSummarySampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-summary/hierarchical-grid-summary.component";
 import { HierarchicalGridToolbarStyleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-toolbar-style/hierarchical-grid-toolbar-style.component";
@@ -77,11 +80,9 @@ import { HGridToolbarCustomSampleComponent } from "../../src/app/hierarchical-gr
 import { HGridToolbarOptionsSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-options.component";
 import { HGridToolbarTitleSampleComponent } from "../../src/app/hierarchical-grid/hierarchical-grid-toolbar/hierarchical-grid-toolbar-title.component";
 import { RemoteLoDService } from "../../src/app/hierarchical-grid/services/remote-lod.service";
-import { RemoteValuesService } from "../../src/app/hierarchical-grid/hierarchical-grid-excel-style-filtering-load-on-demand/remoteValues.service";
 import { AppModuleConfig } from "./core/AppModuleConfig";
 import { Config } from "./core/Config";
 import { IConfigGenerator } from "./core/IConfigGenerator";
-import { HGridStylingComponent } from '../../src/app/hierarchical-grid/hierarchical-grid-styling/hierarchical-grid-styling.component';
 
 export class HierarchicalGridConfigGenerator implements IConfigGenerator {
     public generateConfigs(): Config[] {
@@ -578,6 +579,18 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator {
             component: HGridStylingComponent
         }));
 
+        configs.push(new Config({
+            additionalFiles: [
+                "/src/app/hierarchical-grid/data.ts"
+            ],
+            appModuleConfig: new AppModuleConfig({
+                imports: [IgxCheckboxModule, IgxHierarchicalGridModule, HGridSelectionTemplateNumbersSampleComponent],
+                ngDeclarations: [HGridSelectionTemplateNumbersSampleComponent],
+                ngImports: [IgxCheckboxModule, IgxHierarchicalGridModule]
+            }),
+            component: HGridSelectionTemplateNumbersSampleComponent
+        }));
+
         return configs;
     }
 }
diff --git a/live-editing/configs/TreeGridConfigGenerator.ts b/live-editing/configs/TreeGridConfigGenerator.ts
index 58c8651558..e8dce47803 100644
--- a/live-editing/configs/TreeGridConfigGenerator.ts
+++ b/live-editing/configs/TreeGridConfigGenerator.ts
@@ -41,7 +41,8 @@ import { TreeGridDisplaydensitySampleComponent } from "../../src/app/tree-grid/t
 import { TreeGridEditingEventsComponent } from "../../src/app/tree-grid/tree-grid-editing-events/tree-grid-editing-events.component";
 import { TreeGridEditingSampleComponent } from "../../src/app/tree-grid/tree-grid-editing-sample/tree-grid-editing-sample.component";
 import { TreeGridEditingStyleComponent } from "../../src/app/tree-grid/tree-grid-editing-style/tree-grid-editing-sample.component";
-import { TreeGridExcelStyleFilteringLoadOnDemandComponent } from '../../src/app/tree-grid/tree-grid-excel-style-filtering-load-on-demand/tree-grid-excel-style-filtering-load-on-demand.component';
+import { RemoteValuesService } from "../../src/app/tree-grid/tree-grid-excel-style-filtering-load-on-demand/remoteValues.service";
+import { TreeGridExcelStyleFilteringLoadOnDemandComponent } from "../../src/app/tree-grid/tree-grid-excel-style-filtering-load-on-demand/tree-grid-excel-style-filtering-load-on-demand.component";
 import {
     TreeGridExcelStyleFilteringSample1Component
 } from "../../src/app/tree-grid/tree-grid-excel-style-filtering-sample-1/tree-grid-excel-style-filtering-sample-1.component";
@@ -78,6 +79,7 @@ import { TreeGridRowEditSampleComponent } from "../../src/app/tree-grid/tree-gri
 import { TreeGridRowReorderComponent } from "../../src/app/tree-grid/tree-grid-row-reorder/tree-grid-row-reorder.component";
 import { TreeGridSearchSampleComponent } from "../../src/app/tree-grid/tree-grid-search-sample/tree-grid-search-sample.component";
 import { TreeGridSelectionSampleComponent } from "../../src/app/tree-grid/tree-grid-selection-sample/tree-grid-selection-sample.component";
+import { TreeGridSelectionTemplateNumbersSampleComponent } from "../../src/app/tree-grid/tree-grid-selection-template-numbers/tree-grid-selection-template-numbers.component";
 import { TreeGridContextmenuComponent } from "../../src/app/tree-grid/tree-grid-sorting-sample/tree-grid-contextmenu/tree-grid-contextmenu.component";
 import { TreeGridSortingSampleComponent } from "../../src/app/tree-grid/tree-grid-sorting-sample/tree-grid-sorting-sample.component";
 import { TreeGridSortingStylingComponent } from "../../src/app/tree-grid/tree-grid-sorting-styling/tree-grid-sorting-styling.component";
@@ -90,7 +92,6 @@ import { TreeGridToolbarSample3Component } from "../../src/app/tree-grid/tree-gr
 import { TreeGridToolbarSample4Component } from "../../src/app/tree-grid/tree-grid-toolbar-sample-4/tree-grid-toolbar-sample-4.component";
 import { TreeGridToolbarStyleComponent } from "../../src/app/tree-grid/tree-grid-toolbar-style/tree-grid-toolbar-style.component";
 import { TreeGridVirtualizationSampleComponent } from "../../src/app/tree-grid/tree-grid-virtualization-sample/tree-grid-virtualization-sample.component";
-import { RemoteValuesService } from '../../src/app/tree-grid/tree-grid-excel-style-filtering-load-on-demand/remoteValues.service';
 import { AppModuleConfig } from "./core/AppModuleConfig";
 import { Config } from "./core/Config";
 import { IConfigGenerator } from "./core/IConfigGenerator";
@@ -790,6 +791,20 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
             })
         }));
 
+        // TreeGrid Row Selectors Template - Numbers
+        configs.push(new Config({
+            additionalFiles: [
+                "/src/app/tree-grid/data/employees-flat.ts"
+            ],
+            appModuleConfig: new AppModuleConfig({
+                imports: [IgxCheckboxModule, IgxTreeGridModule, TreeGridSelectionTemplateNumbersSampleComponent],
+                ngDeclarations: [TreeGridSelectionTemplateNumbersSampleComponent],
+                ngImports: [IgxCheckboxModule, IgxTreeGridModule]
+            }),
+            component: TreeGridSelectionTemplateNumbersSampleComponent,
+            shortenComponentPathBy: "/tree-grid/"
+        }));
+
         return configs;
     }
 }
diff --git a/src/app/grid/grid-moving-sample/grid-moving-sample.component.ts b/src/app/grid/grid-moving-sample/grid-moving-sample.component.ts
index 3c460a48ba..1214193088 100644
--- a/src/app/grid/grid-moving-sample/grid-moving-sample.component.ts
+++ b/src/app/grid/grid-moving-sample/grid-moving-sample.component.ts
@@ -1,6 +1,6 @@
 import { AfterViewInit, Component, TemplateRef, ViewChild, ViewEncapsulation } from "@angular/core";
 import { IgxColumnComponent, IgxGridComponent } from "igniteui-angular";
-import { DATA } from "../grid-sample-selection/financialData";
+import { DATA } from "../services/financialData";
 
 @Component({
     selector: "app-grid-moving-sample",
diff --git a/src/app/grid/grid-moving-styled-sample/grid-moving-styled-sample.component.ts b/src/app/grid/grid-moving-styled-sample/grid-moving-styled-sample.component.ts
index 60296a5244..7a804c1d55 100644
--- a/src/app/grid/grid-moving-styled-sample/grid-moving-styled-sample.component.ts
+++ b/src/app/grid/grid-moving-styled-sample/grid-moving-styled-sample.component.ts
@@ -1,6 +1,6 @@
 import { AfterViewInit, Component, TemplateRef, ViewChild, ViewEncapsulation } from "@angular/core";
 import { IgxColumnComponent, IgxGridComponent } from "igniteui-angular";
-import { DATA } from "../grid-sample-selection/financialData";
+import { DATA } from "../services/financialData";
 
 @Component({
     selector: "app-grid-moving-styled-sample",
diff --git a/src/app/grid/grid-routes-data.ts b/src/app/grid/grid-routes-data.ts
index da38f3bd6f..cd7d0bb87a 100644
--- a/src/app/grid/grid-routes-data.ts
+++ b/src/app/grid/grid-routes-data.ts
@@ -37,6 +37,8 @@ export const gridsRoutesData = {
     "grid-sample-4": { displayName: "Grid Remote Virtualization", parentName: "Grid" },
     "grid-remote-filtering": { displayName: "Grid Remote Filtering", parentName: "Grid" },
     "grid-selection": { displayName: "Grid Selection", parentName: "Grid" },
+    "grid-selection-template-numbering": { displayName: "Grid Row Selectors Template - Numbers", parentName: "Grid" },
+    "grid-selection-template-excel": { displayName: "Grid Row Selectors Template - Excel", parentName: "Grid" },
     "grid-search-sample": { displayName: "Grid Search", parentName: "Grid" },
     "grid-column-hiding-sample": { displayName: "Grid Column Hiding", parentName: "Grid" },
     "grid-column-hiding-toolbar-sample": { displayName: "Grid Column Hiding with Toolbar", parentName: "Grid" },
diff --git a/src/app/grid/grid-sample-selection-template-excel/grid-sample-selection-template-excel.component.html b/src/app/grid/grid-sample-selection-template-excel/grid-sample-selection-template-excel.component.html
new file mode 100644
index 0000000000..aa1439db03
--- /dev/null
+++ b/src/app/grid/grid-sample-selection-template-excel/grid-sample-selection-template-excel.component.html
@@ -0,0 +1,25 @@
+<div class="grid__wrapper">
+    <igx-grid #myGrid [data]="data" primaryKey="ID" rowSelection="multiple" cellSelection="none"
+        [paging]="true" [height]="'530px'" width="100%">
+        <igx-column field='ContactName' width="20%"></igx-column>
+        <igx-column field='Country' width="20%"></igx-column>
+        <igx-column field='City' width="20%" dataType="number"></igx-column>
+        <igx-column field='PostalCode' width="20%" dataType="number"></igx-column>
+        <igx-column field='CompanyName' width="20%" dataType="number"></igx-column>
+
+        <ng-template igxHeadSelector let-headContext>
+            <div class="header-selector" [ngClass]="{
+                'excel-style-arrow-all': headContext.selectedCount === headContext.totalCount && headContext.totalCount !== 0,
+                'excel-style-arrow': headContext.selectedCount !== headContext.totalCount
+            }">
+                <i class="material-icons">signal_cellular_4_bar</i>
+            </div>
+        </ng-template>
+
+        <ng-template igxRowSelector let-rowContext>
+            <div class="row-selector">
+                <span>{{ rowContext.index + 1 }}</span>
+            </div>
+        </ng-template>
+    </igx-grid>
+</div>
diff --git a/src/app/grid/grid-sample-selection-template-excel/grid-sample-selection-template-excel.component.scss b/src/app/grid/grid-sample-selection-template-excel/grid-sample-selection-template-excel.component.scss
new file mode 100644
index 0000000000..7c7591b800
--- /dev/null
+++ b/src/app/grid/grid-sample-selection-template-excel/grid-sample-selection-template-excel.component.scss
@@ -0,0 +1,40 @@
+@import "~igniteui-angular/lib/core/styles/themes/index";
+
+$default-arrow-color: igx-color($default-palette, 'grays', 400);
+$default-arrow-hover-color: igx-color($default-palette, 'grays', 800);
+$default-arrow-all-color: igx-color($default-palette, 'secondary', 100);
+
+@mixin selector($justify, $align) {
+    display: flex;
+    justify-content: $justify;
+    align-items: $align;
+    min-width: 50px;
+    cursor: pointer;
+}
+
+.header-selector {
+    @include selector(flex-end, flex-end);
+    height: 100%;
+    padding: 8px;
+}
+
+.row-selector {
+    @include selector(center, center);
+}
+
+::ng-deep {
+    .igx-grid__cbx-selection {
+        padding: 0;
+    }
+}
+
+.excel-style-arrow {
+    color: $default-arrow-color;
+    &:hover {
+        color: $default-arrow-hover-color;
+    }
+}
+
+.excel-style-arrow-all {
+    color: $default-arrow-all-color;
+}
diff --git a/src/app/grid/grid-sample-selection-template-excel/grid-sample-selection-template-excel.component.ts b/src/app/grid/grid-sample-selection-template-excel/grid-sample-selection-template-excel.component.ts
new file mode 100644
index 0000000000..c57287e5e5
--- /dev/null
+++ b/src/app/grid/grid-sample-selection-template-excel/grid-sample-selection-template-excel.component.ts
@@ -0,0 +1,16 @@
+import { Component } from "@angular/core";
+import { DATA } from "../../data/customers";
+
+@Component({
+    selector: "grid-selection-template-excel",
+    styleUrls: ["./grid-sample-selection-template-excel.component.scss"],
+    templateUrl: "grid-sample-selection-template-excel.component.html"
+})
+
+export class GridSelectionTemplateExcelComponent {
+    public data: any[];
+
+    constructor() {
+        this.data = DATA;
+    }
+}
diff --git a/src/app/grid/grid-sample-selection-template-numbers/grid-sample-selection-template-numbers.component.html b/src/app/grid/grid-sample-selection-template-numbers/grid-sample-selection-template-numbers.component.html
new file mode 100644
index 0000000000..e978b2b07e
--- /dev/null
+++ b/src/app/grid/grid-sample-selection-template-numbers/grid-sample-selection-template-numbers.component.html
@@ -0,0 +1,27 @@
+<div class="grid__wrapper">
+    <igx-grid #myGrid [data]="data" primaryKey="ID" rowSelection="multiple" cellSelection="none"
+        [paging]="true" [height]="'530px'" width="100%">
+        <igx-column field='ContactName' width="20%"></igx-column>
+        <igx-column field='Country' width="20%"></igx-column>
+        <igx-column field='City' width="20%" dataType="number"></igx-column>
+        <igx-column field='PostalCode' width="20%" dataType="number"></igx-column>
+        <igx-column field='CompanyName' width="20%" dataType="number"></igx-column>
+
+        <ng-template igxHeadSelector>
+            <div class="header-selector">
+                <img src="assets/images/card/avatars/igLogo.png" class="header-image">
+            </div>
+        </ng-template>
+
+        <ng-template igxRowSelector let-rowContext>
+            <div class="row-selector">
+                <span class="row-selector-index">{{ rowContext.index + 1 }}</span>
+                <igx-checkbox class="row-selector-checkbox"
+                    [checked]="rowContext.selected"
+                    [readonly]="true"
+                    disableRipple="true" [disableTransitions]="myGrid.disableTransitions">
+                </igx-checkbox>
+            </div>
+        </ng-template>
+    </igx-grid>
+</div>
diff --git a/src/app/grid/grid-sample-selection-template-numbers/grid-sample-selection-template-numbers.component.scss b/src/app/grid/grid-sample-selection-template-numbers/grid-sample-selection-template-numbers.component.scss
new file mode 100644
index 0000000000..29a2e320cd
--- /dev/null
+++ b/src/app/grid/grid-sample-selection-template-numbers/grid-sample-selection-template-numbers.component.scss
@@ -0,0 +1,33 @@
+.grid__wrapper {
+    margin: 0 16px;
+}
+
+.header-selector {
+    width: 70px;
+    height: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.header-image {
+    width: 40px;
+    height: 40px;
+}
+
+.row-selector {
+    width: 70px;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    height: 100%;
+}
+
+.row-selector-index {
+    width: 35px;
+    text-align: center;
+}
+
+::ng-deep .igx-grid__cbx-selection {
+    padding: 0;
+}
diff --git a/src/app/grid/grid-sample-selection-template-numbers/grid-sample-selection-template-numbers.component.ts b/src/app/grid/grid-sample-selection-template-numbers/grid-sample-selection-template-numbers.component.ts
new file mode 100644
index 0000000000..230f43795a
--- /dev/null
+++ b/src/app/grid/grid-sample-selection-template-numbers/grid-sample-selection-template-numbers.component.ts
@@ -0,0 +1,16 @@
+import { Component } from "@angular/core";
+import { DATA } from "../../data/customers";
+
+@Component({
+    selector: "grid-selection-template-numbers",
+    styleUrls: ["./grid-sample-selection-template-numbers.component.scss"],
+    templateUrl: "grid-sample-selection-template-numbers.component.html"
+})
+
+export class GridSelectionTemplateNumbersComponent {
+    public data: any[];
+
+    constructor() {
+        this.data = [...DATA];
+    }
+}
diff --git a/src/app/grid/grid-sample-selection/financialData.ts b/src/app/grid/grid-sample-selection/financialData.ts
deleted file mode 100644
index 25879dbb83..0000000000
--- a/src/app/grid/grid-sample-selection/financialData.ts
+++ /dev/null
@@ -1,814 +0,0 @@
-/* tslint:disable */
-export const DATA: any[] = [
- {
-   "Category": "Metal",
-   "Type": "Gold",
-   "Spread": 0.01,
-   "Open Price": 1281.10,
-   "Price": 1280.7317,
-   "Buy": 1280.7267,
-   "Sell": 1280.7367,
-   "Change": -0.3683,
-   "Change(%)": -0.0287,
-   "Volume": 48387,
-   "High(D)": 1289.50,
-   "Low(D)": 1279.10,
-   "High(Y)": 1306,
-   "Low(Y)": 1047.20,
-   "Start(Y)": 1176.60,
-   "Change On Year(%)": 8.8502
- },
- {
-   "Category": "Metal",
-   "Type": "Silver",
-   "Spread": 0.01,
-   "Open Price": 17.43,
-   "Price": 17.42,
-   "Buy": 17.43,
-   "Sell": 17.43,
-   "Change": -0.01,
-   "Change(%)": -0.0574,
-   "Volume": 11720,
-   "High(D)": 17.51,
-   "Low(D)": 17.37,
-   "High(Y)": 18.06,
-   "Low(Y)": 13.73,
-   "Start(Y)": 15.895,
-   "Change On Year(%)": 9.5942
- },
- {
-   "Category": "Metal",
-   "Type": "Copper",
-   "Spread": 0.02,
-   "Open Price": 2.123,
-   "Price": 2.113,
-   "Buy": 2.123,
-   "Sell": 2.123,
-   "Change": -0.01,
-   "Change(%)": -0.471,
-   "Volume": 28819,
-   "High(D)": 2.16,
-   "Low(D)": 2.11,
-   "High(Y)": 2.94,
-   "Low(Y)": 1.96,
-   "Start(Y)": 2.45,
-   "Change On Year(%)": -13.7551
- },
- {
-   "Category": "Metal",
-   "Type": "Platinum",
-   "Spread": 0.01,
-   "Open Price": 1071.60,
-   "Price": 1071.0993,
-   "Buy": 1071.0943,
-   "Sell": 1071.1043,
-   "Change": -0.5007,
-   "Change(%)": -0.0467,
-   "Volume": 3039,
-   "High(D)": 1081.20,
-   "Low(D)": 1070.50,
-   "High(Y)": 1120.60,
-   "Low(Y)": 812.40,
-   "Start(Y)": 966.50,
-   "Change On Year(%)": 10.8225
- },
- {
-   "Category": "Metal",
-   "Type": "Palladium",
-   "Spread": 0.01,
-   "Open Price": 600.55,
-   "Price": 601.0005,
-   "Buy": 600.9955,
-   "Sell": 601.0055,
-   "Change": 0.4505,
-   "Change(%)": 0.075,
-   "Volume": 651,
-   "High(D)": 607.20,
-   "Low(D)": 598.40,
-   "High(Y)": 690,
-   "Low(Y)": 458.6,
-   "Start(Y)": 574.3,
-   "Change On Year(%)": 4.6492
- },
- {
-   "Category": "Oil",
-   "Type": "Oil",
-   "Spread": 0.015,
-   "Open Price": 45.54,
-   "Price": 45.7899,
-   "Buy": 45.7824,
-   "Sell": 45.7974,
-   "Change": 0.2499,
-   "Change(%)": 0.5487,
-   "Volume": 107196,
-   "High(D)": 45.94,
-   "Low(D)": 45.00,
-   "High(Y)": 65.28,
-   "Low(Y)": 30.79,
-   "Start(Y)": 48.035,
-   "Change On Year(%)": -4.6739
- },
- {
-   "Category": "Oil",
-   "Type": "Brent",
-   "Spread": 0.01,
-   "Open Price": 46.06,
-   "Price": 46.05,
-   "Buy": 46.06,
-   "Sell": 46.06,
-   "Change": -0.01,
-   "Change(%)": -0.0217,
-   "Volume": 59818,
-   "High(D)": 46.48,
-   "Low(D)": 45.60,
-   "High(Y)": 71.14,
-   "Low(Y)": 30.02,
-   "Start(Y)": 50.58,
-   "Change On Year(%)": -8.9561
- },
- {
-   "Category": "Oil",
-   "Type": "Natural Gas",
-   "Spread": 0.02,
-   "Open Price": 2.094,
-   "Price": 2.104,
-   "Buy": 2.094,
-   "Sell": 2.094,
-   "Change": 0.01,
-   "Change(%)": 0.4776,
-   "Volume": 2783,
-   "High(D)": 2.11,
-   "Low(D)": 2.09,
-   "High(Y)": 3.20,
-   "Low(Y)": 1.84,
-   "Start(Y)": 2.52,
-   "Change On Year(%)": -16.5079
- },
- {
-   "Category": "Oil",
-   "Type": "RBOB Gas",
-   "Spread": 0.015,
-   "Open Price": 1.5086,
-   "Price": 1.9532,
-   "Buy": 1.9457,
-   "Sell": 1.9607,
-   "Change": 0.4446,
-   "Change(%)": 29.4686,
-   "Volume": 2646,
-   "High(D)": 1.9532,
-   "Low(D)": 1.50,
-   "High(Y)": 2.05,
-   "Low(Y)": 1.15,
-   "Start(Y)": 1.60,
-   "Change On Year(%)": 22.0727
- },
- {
-   "Category": "Oil",
-   "Type": "Diesel",
-   "Spread": 0.015,
-   "Open Price": 1.3474,
-   "Price": 1.3574,
-   "Buy": 1.3474,
-   "Sell": 1.3474,
-   "Change": 0.01,
-   "Change(%)": 0.7422,
-   "Volume": 2971,
-   "High(D)": 1.36,
-   "Low(D)": 1.34,
-   "High(Y)": 2.11,
-   "Low(Y)": 0.92,
-   "Start(Y)": 1.515,
-   "Change On Year(%)": -10.4026
- },
- {
-   "Category": "Oil",
-   "Type": "Ethanol",
-   "Spread": 0.01,
-   "Open Price": 1.512,
-   "Price": 2.7538,
-   "Buy": 2.7488,
-   "Sell": 2.7588,
-   "Change": 1.2418,
-   "Change(%)": 82.1323,
-   "Volume": 14,
-   "High(D)": 2.7538,
-   "Low(D)": 1.1168,
-   "High(Y)": 2.7538,
-   "Low(Y)": 1.1168,
-   "Start(Y)": 1.475,
-   "Change On Year(%)": 86.7011
- },
- {
-   "Category": "Oil",
-   "Type": "Uranium",
-   "Spread": 0.02,
-   "Open Price": 27.55,
-   "Price": 27.58,
-   "Buy": 27.55,
-   "Sell": 27.55,
-   "Change": 0.03,
-   "Change(%)": 0.1089,
-   "Volume": 12,
-   "High(D)": 27.55,
-   "Low(D)": 27.55,
-   "High(Y)": 29.32,
-   "Low(Y)": 21.28,
-   "Start(Y)": 25.30,
-   "Change On Year(%)": 9.0119
- },
- {
-   "Category": "Oil",
-   "Type": "Coal",
-   "Spread": 0.015,
-   "Open Price": 0.4363,
-   "Price": 0.4163,
-   "Buy": 0.4363,
-   "Sell": 0.4363,
-   "Change": -0.02,
-   "Change(%)": -4.584,
-   "Volume": 3,
-   "High(D)": 0.4363,
-   "Low(D)": 0.4363,
-   "High(Y)": 0.4841,
-   "Low(Y)": 0.3954,
-   "Start(Y)": 0.4398,
-   "Change On Year(%)": -5.3326
- },
- {
-   "Category": "Agriculture",
-   "Type": "Wheat",
-   "Spread": 0.01,
-   "Open Price": 465.50,
-   "Price": 465.52,
-   "Buy": 465.50,
-   "Sell": 465.50,
-   "Change": 0.02,
-   "Change(%)": 0.0043,
-   "Volume": 4318,
-   "High(D)": 467.00,
-   "Low(D)": 463.25,
-   "High(Y)": 628.50,
-   "Low(Y)": 449.50,
-   "Start(Y)": 539.00,
-   "Change On Year(%)": -13.6327
- },
- {
-   "Category": "Agriculture",
-   "Type": "Corn",
-   "Spread": 0.01,
-   "Open Price": 379.50,
-   "Price": 379.8026,
-   "Buy": 379.7976,
-   "Sell": 379.8076,
-   "Change": 0.3026,
-   "Change(%)": 0.0797,
-   "Volume": 11266,
-   "High(D)": 381.00,
-   "Low(D)": 377.75,
-   "High(Y)": 471.25,
-   "Low(Y)": 351.25,
-   "Start(Y)": 411.25,
-   "Change On Year(%)": -7.6468
- },
- {
-   "Category": "Agriculture",
-   "Type": "Sugar",
-   "Spread": 0.01,
-   "Open Price": 15.68,
-   "Price": 14.6742,
-   "Buy": 14.6692,
-   "Sell": 14.6792,
-   "Change": -1.0058,
-   "Change(%)": -6.4146,
-   "Volume": 4949,
-   "High(D)": 15.70,
-   "Low(D)": 14.6742,
-   "High(Y)": 16.87,
-   "Low(Y)": 11.37,
-   "Start(Y)": 14.12,
-   "Change On Year(%)": 3.9249
- },
- {
-   "Category": "Agriculture",
-   "Type": "Soybean",
-   "Spread": 0.01,
-   "Open Price": 1038.00,
-   "Price": 1038.6171,
-   "Buy": 1038.6121,
-   "Sell": 1038.6221,
-   "Change": 0.6171,
-   "Change(%)": 0.0595,
-   "Volume": 20356,
-   "High(D)": 1044.00,
-   "Low(D)": 1031.75,
-   "High(Y)": 1057.00,
-   "Low(Y)": 859.50,
-   "Start(Y)": 958.25,
-   "Change On Year(%)": 8.3869
- },
- {
-   "Category": "Agriculture",
-   "Type": "Soy oil",
-   "Spread": 0.01,
-   "Open Price": 33.26,
-   "Price": 33.7712,
-   "Buy": 33.7662,
-   "Sell": 33.7762,
-   "Change": 0.5112,
-   "Change(%)": 1.5371,
-   "Volume": 10592,
-   "High(D)": 33.7712,
-   "Low(D)": 33.06,
-   "High(Y)": 35.43,
-   "Low(Y)": 26.61,
-   "Start(Y)": 31.02,
-   "Change On Year(%)": 8.8692
- },
- {
-   "Category": "Agriculture",
-   "Type": "Soy Meat",
-   "Spread": 0.01,
-   "Open Price": 342.60,
-   "Price": 342.62,
-   "Buy": 342.60,
-   "Sell": 342.60,
-   "Change": 0.02,
-   "Change(%)": 0.0058,
-   "Volume": 5646,
-   "High(D)": 345.40,
-   "Low(D)": 340.30,
-   "High(Y)": 353.40,
-   "Low(Y)": 261.70,
-   "Start(Y)": 307.55,
-   "Change On Year(%)": 11.403
- },
- {
-   "Category": "Agriculture",
-   "Type": "OJ Future",
-   "Spread": 0.01,
-   "Open Price": 140.60,
-   "Price": 140.1893,
-   "Buy": 140.1843,
-   "Sell": 140.1943,
-   "Change": -0.4107,
-   "Change(%)": -0.2921,
-   "Volume": 7,
-   "High(D)": 140.1893,
-   "Low(D)": 0.00,
-   "High(Y)": 155.95,
-   "Low(Y)": 113.00,
-   "Start(Y)": 134.475,
-   "Change On Year(%)": 4.2493
- },
- {
-   "Category": "Agriculture",
-   "Type": "Coffee",
-   "Spread": 0.01,
-   "Open Price": 125.70,
-   "Price": 125.69,
-   "Buy": 125.70,
-   "Sell": 125.70,
-   "Change": -0.01,
-   "Change(%)": -0.008,
-   "Volume": 1654,
-   "High(D)": 125.80,
-   "Low(D)": 125.00,
-   "High(Y)": 155.75,
-   "Low(Y)": 115.35,
-   "Start(Y)": 135.55,
-   "Change On Year(%)": -7.2741
- },
- {
-   "Category": "Agriculture",
-   "Type": "Cocoa",
-   "Spread": 0.01,
-   "Open Price": 3076.00,
-   "Price": 3076.03,
-   "Buy": 3076.00,
-   "Sell": 3076.00,
-   "Change": 0.03,
-   "Change(%)": 0.001,
-   "Volume": 978,
-   "High(D)": 3078.00,
-   "Low(D)": 3066.00,
-   "High(Y)": 3406.00,
-   "Low(Y)": 2746.00,
-   "Start(Y)": 3076.00,
-   "Change On Year(%)": 0.001
- },
- {
-   "Category": "Agriculture",
-   "Type": "Rice",
-   "Spread": 0.01,
-   "Open Price": 11.245,
-   "Price": 10.4154,
-   "Buy": 10.4104,
-   "Sell": 10.4204,
-   "Change": -0.8296,
-   "Change(%)": -7.3779,
-   "Volume": 220,
-   "High(D)": 11.38,
-   "Low(D)": 10.4154,
-   "High(Y)": 14.14,
-   "Low(Y)": 9.70,
-   "Start(Y)": 11.92,
-   "Change On Year(%)": -12.6228
- },
- {
-   "Category": "Agriculture",
-   "Type": "Oats",
-   "Spread": 0.01,
-   "Open Price": 194.50,
-   "Price": 194.2178,
-   "Buy": 194.2128,
-   "Sell": 194.2228,
-   "Change": -0.2822,
-   "Change(%)": -0.1451,
-   "Volume": 64,
-   "High(D)": 195.75,
-   "Low(D)": 194.00,
-   "High(Y)": 241.25,
-   "Low(Y)": 183.75,
-   "Start(Y)": 212.50,
-   "Change On Year(%)": -8.6034
- },
- {
-   "Category": "Agriculture",
-   "Type": "Milk",
-   "Spread": 0.01,
-   "Open Price": 12.87,
-   "Price": 12.86,
-   "Buy": 12.87,
-   "Sell": 12.87,
-   "Change": -0.01,
-   "Change(%)": -0.0777,
-   "Volume": 7,
-   "High(D)": 12.89,
-   "Low(D)": 12.81,
-   "High(Y)": 16.96,
-   "Low(Y)": 12.81,
-   "Start(Y)": 14.885,
-   "Change On Year(%)": -13.6043
- },
- {
-   "Category": "Agriculture",
-   "Type": "Cotton",
-   "Spread": 0.01,
-   "Open Price": 61.77,
-   "Price": 61.76,
-   "Buy": 61.77,
-   "Sell": 61.77,
-   "Change": -0.01,
-   "Change(%)": -0.0162,
-   "Volume": 3612,
-   "High(D)": 62.06,
-   "Low(D)": 61.32,
-   "High(Y)": 67.59,
-   "Low(Y)": 54.33,
-   "Start(Y)": 60.96,
-   "Change On Year(%)": 1.3123
- },
- {
-   "Category": "Agriculture",
-   "Type": "Lumber",
-   "Spread": 0.01,
-   "Open Price": 303.90,
-   "Price": 304.5994,
-   "Buy": 304.5944,
-   "Sell": 304.6044,
-   "Change": 0.6994,
-   "Change(%)": 0.2302,
-   "Volume": 2,
-   "High(D)": 304.5994,
-   "Low(D)": 303.90,
-   "High(Y)": 317.10,
-   "Low(Y)": 236.00,
-   "Start(Y)": 276.55,
-   "Change On Year(%)": 10.1426
- },
- {
-   "Category": "Livestock",
-   "Type": "LV Cattle",
-   "Spread": 0.01,
-   "Open Price": 120.725,
-   "Price": 120.705,
-   "Buy": 120.725,
-   "Sell": 120.725,
-   "Change": -0.02,
-   "Change(%)": -0.0166,
-   "Volume": 4,
-   "High(D)": 120.725,
-   "Low(D)": 120.725,
-   "High(Y)": 147.98,
-   "Low(Y)": 113.90,
-   "Start(Y)": 130.94,
-   "Change On Year(%)": -7.8166
- },
- {
-   "Category": "Livestock",
-   "Type": "FD Cattle",
-   "Spread": 0.01,
-   "Open Price": 147.175,
-   "Price": 148.6065,
-   "Buy": 148.6015,
-   "Sell": 148.6115,
-   "Change": 1.4315,
-   "Change(%)": 0.9727,
-   "Volume": 5,
-   "High(D)": 148.6065,
-   "Low(D)": 147.175,
-   "High(Y)": 190.00,
-   "Low(Y)": 138.10,
-   "Start(Y)": 164.05,
-   "Change On Year(%)": -9.4139
- },
- {
-   "Category": "Livestock",
-   "Type": "Lean Hogs",
-   "Spread": 0.01,
-   "Open Price": 81.275,
-   "Price": 81.8146,
-   "Buy": 81.8096,
-   "Sell": 81.8196,
-   "Change": 0.5396,
-   "Change(%)": 0.664,
-   "Volume": 1,
-   "High(D)": 81.8146,
-   "Low(D)": 81.275,
-   "High(Y)": 83.98,
-   "Low(Y)": 70.25,
-   "Start(Y)": 77.115,
-   "Change On Year(%)": 6.0943
- },
- {
-   "Category": "Currencies",
-   "Type": "USD IDX Future",
-   "Spread": 0.02,
-   "Open Price": 93.88,
-   "Price": 93.7719,
-   "Buy": 93.7619,
-   "Sell": 93.7819,
-   "Change": -0.1081,
-   "Change(%)": -0.1151,
-   "Volume": 5788,
-   "High(D)": 94.05,
-   "Low(D)": 93.7534,
-   "High(Y)": 100.70,
-   "Low(Y)": 91.88,
-   "Start(Y)": 96.29,
-   "Change On Year(%)": -2.6151
- },
- {
-   "Category": "Currencies",
-   "Type": "USD/JPY Future",
-   "Spread": 0.02,
-   "Open Price": 9275.50,
-   "Price": 9277.3342,
-   "Buy": 9277.3242,
-   "Sell": 9277.3442,
-   "Change": 1.8342,
-   "Change(%)": 0.0198,
-   "Volume": 47734,
-   "High(D)": 9277.3342,
-   "Low(D)": 0.93,
-   "High(Y)": 9483.00,
-   "Low(Y)": 0.93,
-   "Start(Y)": 4741.965,
-   "Change On Year(%)": 95.6432
- },
- {
-   "Category": "Currencies",
-   "Type": "GBP/USD Future",
-   "Spread": 0.02,
-   "Open Price": 1.4464,
-   "Price": 1.1941,
-   "Buy": 1.1841,
-   "Sell": 1.2041,
-   "Change": -0.2523,
-   "Change(%)": -17.4441,
-   "Volume": 29450,
-   "High(D)": 1.45,
-   "Low(D)": 1.1941,
-   "High(Y)": 1.59,
-   "Low(Y)": 1.1941,
-   "Start(Y)": 1.485,
-   "Change On Year(%)": -19.59
- },
- {
-   "Category": "Currencies",
-   "Type": "AUD/USD Future",
-   "Spread": 0.02,
-   "Open Price": 0.7344,
-   "Price": 0.7444,
-   "Buy": 0.7344,
-   "Sell": 0.7344,
-   "Change": 0.01,
-   "Change(%)": 1.3617,
-   "Volume": 36764,
-   "High(D)": 0.74,
-   "Low(D)": 0.73,
-   "High(Y)": 0.79,
-   "Low(Y)": 0.68,
-   "Start(Y)": 0.735,
-   "Change On Year(%)": 1.2789
- },
- {
-   "Category": "Currencies",
-   "Type": "USD/CAD Future",
-   "Spread": 0.02,
-   "Open Price": 0.7744,
-   "Price": 0.9545,
-   "Buy": 0.9445,
-   "Sell": 0.9645,
-   "Change": 0.1801,
-   "Change(%)": 23.2622,
-   "Volume": 13669,
-   "High(D)": 0.9545,
-   "Low(D)": 0.77,
-   "High(Y)": 0.9545,
-   "Low(Y)": 0.68,
-   "Start(Y)": 0.755,
-   "Change On Year(%)": 26.4295
- },
- {
-   "Category": "Currencies",
-   "Type": "USD/CHF Future",
-   "Spread": 0.02,
-   "Open Price": 1.0337,
-   "Price": 1.0437,
-   "Buy": 1.0337,
-   "Sell": 1.0337,
-   "Change": 0.01,
-   "Change(%)": 0.9674,
-   "Volume": 5550,
-   "High(D)": 1.03,
-   "Low(D)": 1.03,
-   "High(Y)": 1.11,
-   "Low(Y)": 0.98,
-   "Start(Y)": 1.045,
-   "Change On Year(%)": -0.1244
- },
- {
-   "Category": "Index",
-   "Type": "DOW Future",
-   "Spread": 0.01,
-   "Open Price": 17711.00,
-   "Price": 17712.1515,
-   "Buy": 17712.1465,
-   "Sell": 17712.1565,
-   "Change": 1.1515,
-   "Change(%)": 0.0065,
-   "Volume": 22236,
-   "High(D)": 17727.00,
-   "Low(D)": 17642.00,
-   "High(Y)": 18083.00,
-   "Low(Y)": 15299.00,
-   "Start(Y)": 16691.00,
-   "Change On Year(%)": 6.118
- },
- {
-   "Category": "Index",
-   "Type": "S&P Future",
-   "Spread": 0.01,
-   "Open Price": 2057.50,
-   "Price": 2056.6018,
-   "Buy": 2056.5968,
-   "Sell": 2056.6068,
-   "Change": -0.8982,
-   "Change(%)": -0.0437,
-   "Volume": 142780,
-   "High(D)": 2059.50,
-   "Low(D)": 2049.00,
-   "High(Y)": 2105.50,
-   "Low(Y)": 1794.50,
-   "Start(Y)": 1950.00,
-   "Change On Year(%)": 5.4668
- },
- {
-   "Category": "Index",
-   "Type": "NAS Future",
-   "Spread": 0.01,
-   "Open Price": 4341.25,
-   "Price": 4341.28,
-   "Buy": 4341.25,
-   "Sell": 4341.25,
-   "Change": 0.03,
-   "Change(%)": 0.0007,
-   "Volume": 18259,
-   "High(D)": 4347.00,
-   "Low(D)": 4318.00,
-   "High(Y)": 4719.75,
-   "Low(Y)": 3867.75,
-   "Start(Y)": 4293.75,
-   "Change On Year(%)": 1.107
- },
- {
-   "Category": "Index",
-   "Type": "S&P MID MINI",
-   "Spread": 0.01,
-   "Open Price": 1454.30,
-   "Price": 1455.7812,
-   "Buy": 1455.7762,
-   "Sell": 1455.7862,
-   "Change": 1.4812,
-   "Change(%)": 0.1018,
-   "Volume": 338,
-   "High(D)": 1455.7812,
-   "Low(D)": 1448.00,
-   "High(Y)": 1527.30,
-   "Low(Y)": 1236.00,
-   "Start(Y)": 1381.65,
-   "Change On Year(%)": 5.3654
- },
- {
-   "Category": "Index",
-   "Type": "S&P 600 MINI",
-   "Spread": 0.01,
-   "Open Price": 687.90,
-   "Price": 687.88,
-   "Buy": 687.90,
-   "Sell": 687.90,
-   "Change": -0.02,
-   "Change(%)": -0.0029,
-   "Volume": 0,
-   "High(D)": 0.00,
-   "Low(D)": 0.00,
-   "High(Y)": 620.32,
-   "Low(Y)": 595.90,
-   "Start(Y)": 608.11,
-   "Change On Year(%)": 13.1177
- },
- {
-   "Category": "Interest Rate",
-   "Type": "US 30YR Future",
-   "Spread": 0.01,
-   "Open Price": 164.875,
-   "Price": 164.1582,
-   "Buy": 164.1532,
-   "Sell": 164.1632,
-   "Change": -0.7168,
-   "Change(%)": -0.4347,
-   "Volume": 28012,
-   "High(D)": 165.25,
-   "Low(D)": 164.0385,
-   "High(Y)": 169.38,
-   "Low(Y)": 151.47,
-   "Start(Y)": 160.425,
-   "Change On Year(%)": 2.3271
- },
- {
-   "Category": "Interest Rate",
-   "Type": "US 2Y Future",
-   "Spread": 0.01,
-   "Open Price": 109.3984,
-   "Price": 109.3884,
-   "Buy": 109.3984,
-   "Sell": 109.3984,
-   "Change": -0.01,
-   "Change(%)": -0.0091,
-   "Volume": 17742,
-   "High(D)": 109.41,
-   "Low(D)": 109.38,
-   "High(Y)": 109.80,
-   "Low(Y)": 108.62,
-   "Start(Y)": 109.21,
-   "Change On Year(%)": 0.1634
- },
- {
-   "Category": "Interest Rate",
-   "Type": "US 10YR Future",
-   "Spread": 0.01,
-   "Open Price": 130.5625,
-   "Price": 130.5825,
-   "Buy": 130.5625,
-   "Sell": 130.5625,
-   "Change": 0.02,
-   "Change(%)": 0.0153,
-   "Volume": 189310,
-   "High(D)": 130.63,
-   "Low(D)": 130.44,
-   "High(Y)": 132.64,
-   "Low(Y)": 125.48,
-   "Start(Y)": 129.06,
-   "Change On Year(%)": 1.1797
- },
- {
-   "Category": "Interest Rate",
-   "Type": "Euro$ 3M",
-   "Spread": 0.01,
-   "Open Price": 99.18,
-   "Price": 99.17,
-   "Buy": 99.18,
-   "Sell": 99.18,
-   "Change": -0.01,
-   "Change(%)": -0.0101,
-   "Volume": 29509,
-   "High(D)": 99.18,
-   "Low(D)": 99.17,
-   "High(Y)": 99.38,
-   "Low(Y)": 98.41,
-   "Start(Y)": 98.895,
-   "Change On Year(%)": 0.2781
- }
-];
-/* tslint:enable */
diff --git a/src/app/grid/grid-sample-selection/grid-selection.component.ts b/src/app/grid/grid-sample-selection/grid-selection.component.ts
index 2fe181701c..809ddcf5e3 100644
--- a/src/app/grid/grid-sample-selection/grid-selection.component.ts
+++ b/src/app/grid/grid-sample-selection/grid-selection.component.ts
@@ -2,7 +2,7 @@ import { AfterViewInit, Component, Injectable, ViewChild } from "@angular/core";
 
 import { IgxBannerComponent, IgxGridComponent, IgxSnackbarComponent } from "igniteui-angular";
 import { BehaviorSubject, Observable } from "rxjs";
-import { DATA } from "./financialData";
+import { DATA } from "../services/financialData";
 
 @Injectable()
 export class LocalService {
diff --git a/src/app/grid/grids-routing.module.ts b/src/app/grid/grids-routing.module.ts
index a18d935e64..53a863e013 100644
--- a/src/app/grid/grids-routing.module.ts
+++ b/src/app/grid/grids-routing.module.ts
@@ -53,6 +53,8 @@ import { GridSample3Component } from "./grid-sample-3/grid-sample-3.component";
 import { GridRemoteVirtualizationSampleComponent } from "./grid-sample-4/grid-sample-4.component";
 import { PinningSampleComponent } from "./grid-sample-pinning/grid-pinning.component";
 import { PinningToolbarSampleComponent } from "./grid-sample-pinning/grid-toolbar-pinning.component";
+import { GridSelectionTemplateExcelComponent} from "./grid-sample-selection-template-excel/grid-sample-selection-template-excel.component";
+import { GridSelectionTemplateNumbersComponent } from "./grid-sample-selection-template-numbers/grid-sample-selection-template-numbers.component";
 import { GridSelectionSampleComponent } from "./grid-sample-selection/grid-selection.component";
 import { AboutComponent } from "./grid-save-state/about.component";
 import { GridSaveStateComponent } from "./grid-save-state/grid-state.component";
@@ -262,6 +264,16 @@ export const gridsRoutes: Routes = [
         data: gridsRoutesData["grid-selection"],
         path: "grid-selection"
     },
+    {
+        component: GridSelectionTemplateNumbersComponent,
+        data: gridsRoutesData["grid-selection-template-numbering"],
+        path: "grid-selection-template-numbering"
+    },
+    {
+        component: GridSelectionTemplateExcelComponent,
+        data: gridsRoutesData["grid-selection-template-excel"],
+        path: "grid-selection-template-excel"
+    },
     {
         component: GridSearchSampleComponent,
         data: gridsRoutesData["grid-search-sample"],
diff --git a/src/app/grid/grids.module.ts b/src/app/grid/grids.module.ts
index 3e1eea71dd..30063aa884 100644
--- a/src/app/grid/grids.module.ts
+++ b/src/app/grid/grids.module.ts
@@ -76,6 +76,8 @@ import { GridRemoteVirtualizationSampleComponent } from "./grid-sample-4/grid-sa
 import { PinningStylingComponent } from "./grid-sample-pinning-styling/grid-pinning-styling.component";
 import { PinningSampleComponent } from "./grid-sample-pinning/grid-pinning.component";
 import { PinningToolbarSampleComponent } from "./grid-sample-pinning/grid-toolbar-pinning.component";
+import { GridSelectionTemplateExcelComponent} from "./grid-sample-selection-template-excel/grid-sample-selection-template-excel.component";
+import { GridSelectionTemplateNumbersComponent } from "./grid-sample-selection-template-numbers/grid-sample-selection-template-numbers.component";
 import { GridSelectionSampleComponent } from "./grid-sample-selection/grid-selection.component";
 import { AboutComponent } from "./grid-save-state/about.component";
 import { GridSaveStateComponent } from "./grid-save-state/grid-state.component";
@@ -133,6 +135,8 @@ import { DataService } from "./services/data.service";
         PinningSampleComponent,
         PinningToolbarSampleComponent,
         GridSelectionSampleComponent,
+        GridSelectionTemplateExcelComponent,
+        GridSelectionTemplateNumbersComponent,
         GridSearchSampleComponent,
         SortingSampleComponent,
         SortingStylingComponent,
diff --git a/src/app/hierarchical-grid/hierarchical-grid-routes-data.ts b/src/app/hierarchical-grid/hierarchical-grid-routes-data.ts
index fbb5b36b64..c7a2d8659c 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-routes-data.ts
+++ b/src/app/hierarchical-grid/hierarchical-grid-routes-data.ts
@@ -20,6 +20,7 @@ export const hierarchicalGridRoutesData = {
     "hierarchical-grid-sorting": { displayName: "Hierarchical Grid Sorting", parentName: "Hierarchical Grid" },
     "hierarchical-grid-sorting-styling": { displayName: "Hierarchical Grid Sorting Styling", parentName: "Hierarchical Grid" },
     "hierarchical-grid-selection": { displayName: "Hierarchical Grid Selection", parentName: "Hierarchical Grid" },
+    "hierarchical-grid-selection-template-numbers": { displayName: "Hierarchical Grid Row Selectors Template - Numbers", parentName: "Hierarchical Grid" },
     "hierarchical-grid-styling": { displayName: "Hierarchical Grid Styling", parentName: "Hierarchical Grid"},
     "hierarchical-grid-summary": { displayName: "Hierarchical Grid Summary", parentName: "Hierarchical Grid" },
     "hierarchical-grid-summary-styling": { displayName: "Hierarchical Grid Summary Styling", parentName: "Hierarchical Grid" },
diff --git a/src/app/hierarchical-grid/hierarchical-grid-routing.module.ts b/src/app/hierarchical-grid/hierarchical-grid-routing.module.ts
index fd8c7f15f0..35e64fc486 100644
--- a/src/app/hierarchical-grid/hierarchical-grid-routing.module.ts
+++ b/src/app/hierarchical-grid/hierarchical-grid-routing.module.ts
@@ -48,6 +48,7 @@ import { HGridDragSampleComponent } from "./hierarchical-grid-row-drag/hierarchi
 import { HGridRowEditStyleComponent } from "./hierarchical-grid-row-edit-style/hierarchical-grid-row-edit-style.component";
 import { HGridRowEditingSampleComponent } from "./hierarchical-grid-row-editing/hierarchical-grid-row-editing.component";
 import { HGridRowReorderComponent } from "./hierarchical-grid-row-reorder/hierarchical-grid-row-reorder.component";
+import { HGridSelectionTemplateNumbersSampleComponent} from "./hierarchical-grid-selection-template-numbers/hierarchical-grid-selection-template-numbers.component";
 import { HGridSelectionSampleComponent } from "./hierarchical-grid-selection/hierarchical-grid-selection.component";
 import { HGridSortingStylingComponent } from "./hierarchical-grid-sorting-styling/hierarchical-grid-sorting-styling.component";
 import { HGridSortingSampleComponent } from "./hierarchical-grid-sorting/hierarchical-grid-sorting.component";
@@ -126,6 +127,11 @@ export const hierarchicalGridRoutes: Routes = [
         data: hierarchicalGridRoutesData["hierarchical-grid-selection"],
         path: "hierarchical-grid-selection"
     },
+    {
+        component: HGridSelectionTemplateNumbersSampleComponent,
+        data: hierarchicalGridRoutesData["hierarchical-grid-selection-template-numbers"],
+        path: "hierarchical-grid-selection-template-numbers"
+    },
     {
         component: HGridSummarySampleComponent,
         // tslint:disable-next-line:no-string-literal
diff --git a/src/app/hierarchical-grid/hierarchical-grid-selection-template-numbers/hierarchical-grid-selection-template-numbers.component.html b/src/app/hierarchical-grid/hierarchical-grid-selection-template-numbers/hierarchical-grid-selection-template-numbers.component.html
new file mode 100644
index 0000000000..8a8d9ebd3c
--- /dev/null
+++ b/src/app/hierarchical-grid/hierarchical-grid-selection-template-numbers/hierarchical-grid-selection-template-numbers.component.html
@@ -0,0 +1,44 @@
+<igx-hierarchical-grid #hierarchicalGrid class="hgrid" [data]="localData" rowSelection="multiple"
+    cellSelection="none" [autoGenerate]="false" height="600px" width="100%" [paging]="true">
+    <igx-column field="Artist"></igx-column>
+    <igx-column field="Debut"></igx-column>
+    <igx-column field="GrammyNominations" header="Grammy Nominations"></igx-column>
+    <igx-column field="GrammyAwards" header="Grammy Awards"></igx-column>
+
+    <igx-row-island key="Albums" [autoGenerate]="false">
+        <igx-column field="Album"></igx-column>
+        <igx-column field="LaunchDate" header="Launch Date"></igx-column>
+        <igx-column field="BillboardReview" header="Billboard Review"></igx-column>
+        <igx-column field="USBillboard200" header="US Billboard 200"></igx-column>
+        <igx-row-island [key]="'Songs'" [autoGenerate]="false">
+            <igx-column field="Number" header="No."></igx-column>
+            <igx-column field="Title"></igx-column>
+            <igx-column field="Released"></igx-column>
+            <igx-column field="Genre"></igx-column>
+        </igx-row-island>
+    </igx-row-island>
+
+    <igx-row-island key="Tours" [autoGenerate]="false">
+        <igx-column field="Tour"></igx-column>
+        <igx-column field="StartedOn" header="Started on"></igx-column>
+        <igx-column field="Location"></igx-column>
+        <igx-column field="Headliner"></igx-column>
+    </igx-row-island>
+
+    <ng-template igxHeadSelector>
+        <div class="header-selector">
+            <img src="assets/images/card/avatars/igLogo.png" class="header-image">
+        </div>
+    </ng-template>
+
+    <ng-template igxRowSelector let-rowContext>
+        <div class="row-selector">
+            <span class="row-selector-index">{{ rowContext.index + 1 }}</span>
+            <igx-checkbox class="row-selector-checkbox"
+                [checked]="rowContext.selected"
+                [readonly]="true"
+                disableRipple="true" [disableTransitions]="hierarchicalGrid.disableTransitions">
+            </igx-checkbox>
+        </div>
+    </ng-template>
+</igx-hierarchical-grid>
diff --git a/src/app/hierarchical-grid/hierarchical-grid-selection-template-numbers/hierarchical-grid-selection-template-numbers.component.scss b/src/app/hierarchical-grid/hierarchical-grid-selection-template-numbers/hierarchical-grid-selection-template-numbers.component.scss
new file mode 100644
index 0000000000..89643d9220
--- /dev/null
+++ b/src/app/hierarchical-grid/hierarchical-grid-selection-template-numbers/hierarchical-grid-selection-template-numbers.component.scss
@@ -0,0 +1,33 @@
+.grid__wrapper {
+    margin: 0 16px;
+}
+
+.header-selector {
+    width: 60px;
+    height: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.header-image {
+    width: 40px;
+    height: 40px;
+}
+
+.row-selector {
+    width: 60px;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    height: 100%;
+}
+
+.row-selector-index {
+    width: 20px;
+    text-align: center;
+}
+
+::ng-deep .igx-grid__cbx-selection {
+    padding: 0;
+}
diff --git a/src/app/hierarchical-grid/hierarchical-grid-selection-template-numbers/hierarchical-grid-selection-template-numbers.component.ts b/src/app/hierarchical-grid/hierarchical-grid-selection-template-numbers/hierarchical-grid-selection-template-numbers.component.ts
new file mode 100644
index 0000000000..8d8af8f848
--- /dev/null
+++ b/src/app/hierarchical-grid/hierarchical-grid-selection-template-numbers/hierarchical-grid-selection-template-numbers.component.ts
@@ -0,0 +1,16 @@
+import { Component } from "@angular/core";
+import { SINGERS } from "../data";
+
+@Component({
+    selector: "hierarchical-grid-selection-template-numbers",
+    styleUrls: ["./hierarchical-grid-selection-template-numbers.component.scss"],
+    templateUrl: "hierarchical-grid-selection-template-numbers.component.html"
+})
+
+export class HGridSelectionTemplateNumbersSampleComponent {
+    public localData;
+
+    constructor() {
+        this.localData = SINGERS;
+    }
+}
diff --git a/src/app/hierarchical-grid/hierarchical-grid.module.ts b/src/app/hierarchical-grid/hierarchical-grid.module.ts
index a797834e36..eb65b36a12 100644
--- a/src/app/hierarchical-grid/hierarchical-grid.module.ts
+++ b/src/app/hierarchical-grid/hierarchical-grid.module.ts
@@ -48,6 +48,7 @@ import { HGridDragSampleComponent } from "./hierarchical-grid-row-drag/hierarchi
 import { HGridRowEditStyleComponent } from "./hierarchical-grid-row-edit-style/hierarchical-grid-row-edit-style.component";
 import { HGridRowEditingSampleComponent } from "./hierarchical-grid-row-editing/hierarchical-grid-row-editing.component";
 import { HGridRowReorderComponent } from "./hierarchical-grid-row-reorder/hierarchical-grid-row-reorder.component";
+import { HGridSelectionTemplateNumbersSampleComponent} from "./hierarchical-grid-selection-template-numbers/hierarchical-grid-selection-template-numbers.component";
 import { HGridSelectionSampleComponent } from "./hierarchical-grid-selection/hierarchical-grid-selection.component";
 import { HGridSortingStylingComponent } from "./hierarchical-grid-sorting-styling/hierarchical-grid-sorting-styling.component";
 import { HGridContextmenuComponent } from "./hierarchical-grid-sorting/hgrid-contextmenu/hgrid-contextmenu.component";
@@ -68,6 +69,7 @@ import { HGridToolbarTitleSampleComponent } from "./hierarchical-grid-toolbar/hi
         HGridSortingSampleComponent,
         HGridContextmenuComponent,
         HGridSelectionSampleComponent,
+        HGridSelectionTemplateNumbersSampleComponent,
         HGridSummarySampleComponent,
         HGridSummaryStylingComponent,
         HGridPagingSampleComponent,
diff --git a/src/app/tree-grid/tree-grid-routes-data.ts b/src/app/tree-grid/tree-grid-routes-data.ts
index b27a816b1a..26b2237ce0 100644
--- a/src/app/tree-grid/tree-grid-routes-data.ts
+++ b/src/app/tree-grid/tree-grid-routes-data.ts
@@ -13,6 +13,10 @@ export const treeGridRoutesData = {
     "treegrid-column-hiding": { displayName: "TreeGrid Column Hiding", parentName: "TreeGrid" },
     "treegrid-column-hiding-toolbar": { displayName: "TreeGrid Column Hiding Toolbar", parentName: "TreeGrid" },
     "treegrid-selection": { displayName: "TreeGrid Selection", parentName: "TreeGrid" },
+    "tree-grid-selection-template-numbers": {
+        displayName: "TreeGrid Row Selectors Template - Numbers",
+        parentName: "TreeGrid"
+    },
     "treegrid-sorting": { displayName: "TreeGrid Sorting", parentName: "TreeGrid" },
     "treegrid-sorting-styling": { displayName: "TreeGrid Sorting Styling", parentName: "TreeGrid" },
     "treegrid-column-moving": { displayName: "TreeGrid Column Moving", parentName: "TreeGrid" },
diff --git a/src/app/tree-grid/tree-grid-routing.module.ts b/src/app/tree-grid/tree-grid-routing.module.ts
index 34963d0f36..23ee7847df 100644
--- a/src/app/tree-grid/tree-grid-routing.module.ts
+++ b/src/app/tree-grid/tree-grid-routing.module.ts
@@ -109,6 +109,9 @@ import { TreeGridRowEditSampleComponent } from "./tree-grid-row-edit/tree-grid-r
 import { TreeGridRowReorderComponent } from "./tree-grid-row-reorder/tree-grid-row-reorder.component";
 import { TreeGridSearchSampleComponent } from "./tree-grid-search-sample/tree-grid-search-sample.component";
 import { TreeGridSelectionSampleComponent } from "./tree-grid-selection-sample/tree-grid-selection-sample.component";
+import {
+    TreeGridSelectionTemplateNumbersSampleComponent
+} from "./tree-grid-selection-template-numbers/tree-grid-selection-template-numbers.component";
 import { TreeGridSortingSampleComponent } from "./tree-grid-sorting-sample/tree-grid-sorting-sample.component";
 import { TreeGridSortingStylingComponent } from "./tree-grid-sorting-styling/tree-grid-sorting-styling.component";
 import { TreeGridSummarySampleComponent } from "./tree-grid-summary-sample/tree-grid-summary-sample.component";
@@ -197,6 +200,11 @@ export const treeGridRoutes: Routes = [
         data: treeGridRoutesData["treegrid-selection"],
         path: "treegrid-selection"
     },
+    {
+        component: TreeGridSelectionTemplateNumbersSampleComponent,
+        data: treeGridRoutesData["tree-grid-selection-template-numbers"],
+        path: "tree-grid-selection-template-numbers"
+    },
     {
         component: TreeGridSortingSampleComponent,
         data: treeGridRoutesData["treegrid-sorting"],
diff --git a/src/app/tree-grid/tree-grid-selection-template-numbers/tree-grid-selection-template-numbers.component.html b/src/app/tree-grid/tree-grid-selection-template-numbers/tree-grid-selection-template-numbers.component.html
new file mode 100644
index 0000000000..616c66c797
--- /dev/null
+++ b/src/app/tree-grid/tree-grid-selection-template-numbers/tree-grid-selection-template-numbers.component.html
@@ -0,0 +1,27 @@
+<div class="grid__wrapper">
+    <igx-tree-grid #treeGrid [data]="data" rowSelection="multiple" cellSelection="none" primaryKey="ID"
+        foreignKey="ParentID" height="530px" width="100%" [autoGenerate]="false" [paging]="true">
+        <igx-column field="Name"></igx-column>
+        <igx-column field="Title"></igx-column>
+        <igx-column field="HireDate"></igx-column>
+        <igx-column field="Age" width="15%"></igx-column>
+        <igx-column field="OnPTO" width="15%"></igx-column>
+
+        <ng-template igxHeadSelector>
+            <div class="header-selector">
+                <img src="assets/images/card/avatars/igLogo.png" class="header-image">
+            </div>
+        </ng-template>
+
+        <ng-template igxRowSelector let-rowContext>
+            <div class="row-selector">
+                <span class="row-selector-index">{{ rowContext.index + 1 }}</span>
+                <igx-checkbox class="row-selector-checkbox"
+                    [checked]="rowContext.selected"
+                    [readonly]="true"
+                    disableRipple="true" [disableTransitions]="treeGrid.disableTransitions">
+                </igx-checkbox>
+            </div>
+        </ng-template>
+    </igx-tree-grid>
+</div>
diff --git a/src/app/tree-grid/tree-grid-selection-template-numbers/tree-grid-selection-template-numbers.component.scss b/src/app/tree-grid/tree-grid-selection-template-numbers/tree-grid-selection-template-numbers.component.scss
new file mode 100644
index 0000000000..9c98077d63
--- /dev/null
+++ b/src/app/tree-grid/tree-grid-selection-template-numbers/tree-grid-selection-template-numbers.component.scss
@@ -0,0 +1,33 @@
+.grid__wrapper {
+    margin: 0 16px;
+}
+
+.header-selector {
+    width: 60px;
+    height: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.header-image {
+    width: 40px;
+    height: 40px;
+}
+
+.row-selector {
+    width: 60px;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    height: 100%;
+}
+
+.row-selector-index {
+    width: 25px;
+    text-align: center;
+}
+
+::ng-deep .igx-grid__cbx-selection {
+    padding: 0;
+}
diff --git a/src/app/tree-grid/tree-grid-selection-template-numbers/tree-grid-selection-template-numbers.component.ts b/src/app/tree-grid/tree-grid-selection-template-numbers/tree-grid-selection-template-numbers.component.ts
new file mode 100644
index 0000000000..f3efc377ce
--- /dev/null
+++ b/src/app/tree-grid/tree-grid-selection-template-numbers/tree-grid-selection-template-numbers.component.ts
@@ -0,0 +1,17 @@
+import { Component, OnInit } from "@angular/core";
+import { generateEmployeeFlatData } from "../data/employees-flat";
+
+@Component({
+    selector: "tree-grid-selection-template-numbers",
+    styleUrls: ["./tree-grid-selection-template-numbers.component.scss"],
+    templateUrl: "./tree-grid-selection-template-numbers.component.html"
+})
+export class TreeGridSelectionTemplateNumbersSampleComponent implements OnInit {
+    public data: any[];
+
+    constructor() { }
+
+    public ngOnInit(): void {
+        this.data = generateEmployeeFlatData();
+    }
+}
diff --git a/src/app/tree-grid/tree-grid.module.ts b/src/app/tree-grid/tree-grid.module.ts
index f60e9ffd65..65e3da4bc9 100644
--- a/src/app/tree-grid/tree-grid.module.ts
+++ b/src/app/tree-grid/tree-grid.module.ts
@@ -130,6 +130,9 @@ import { TreeGridRowEditSampleComponent } from "./tree-grid-row-edit/tree-grid-r
 import { TreeGridRowReorderComponent } from "./tree-grid-row-reorder/tree-grid-row-reorder.component";
 import { TreeGridSearchSampleComponent } from "./tree-grid-search-sample/tree-grid-search-sample.component";
 import { TreeGridSelectionSampleComponent } from "./tree-grid-selection-sample/tree-grid-selection-sample.component";
+import {
+    TreeGridSelectionTemplateNumbersSampleComponent
+} from "./tree-grid-selection-template-numbers/tree-grid-selection-template-numbers.component";
 import {
     TreeGridContextmenuComponent
 } from "./tree-grid-sorting-sample/tree-grid-contextmenu/tree-grid-contextmenu.component";
@@ -168,6 +171,7 @@ import {
         TreeGridColumnHidingSampleComponent,
         TreeGridColumnHidingToolbarSampleComponent,
         TreeGridSelectionSampleComponent,
+        TreeGridSelectionTemplateNumbersSampleComponent,
         TreeGridSortingSampleComponent,
         TreeGridSortingStylingComponent,
         TreeGridContextmenuComponent,