diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row-custom-selectors.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row-custom-selectors.spec.ts
deleted file mode 100644
index 1230327fea4..00000000000
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-row-custom-selectors.spec.ts
+++ /dev/null
@@ -1,253 +0,0 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { async, TestBed } from '@angular/core/testing';
-import { Calendar } from '../../calendar';
-import { IgxGridComponent } from './grid.component';
-import { IgxGridModule, IgxColumnComponent } from './index';
-import { SampleTestData } from '../../test-utils/sample-test-data.spec';
-import { IgxHierarchicalGridMultiLayoutComponent } from '../hierarchical-grid/hierarchical-grid.spec';
-import { IgxHierarchicalGridModule } from '../hierarchical-grid/hierarchical-grid.module';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { configureTestSuite } from '../../test-utils/configure-suite';
-
-describe('IgxGrid - Custom Row Selectors', () => {
- configureTestSuite();
-
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [
- GridWithPagingAndSelectionComponent,
- GridWithSelectionFilteringComponent,
- GridSummaryComponent,
- GridCancelableComponent,
- GridFeaturesComponent,
- HierarchicalGridRowSelectableIslandComponent
- ],
- imports: [
- NoopAnimationsModule,
- IgxGridModule,
- IgxHierarchicalGridModule
- ]
- })
- .compileComponents();
- }));
-
-
- // Events
- it('Firing onRowSelectionChange event', () => { });
- it('Canceling onRowSelectionChange event', () => { });
- it('Firing onHeaderSelectionChange event???', () => { });
- it('Canceling onHeaderSelectionChange event???', () => { });
-
- // Testing with different row selector templates
- it('Row selector template and header selector template with different sizes', () => { });
-
- // API
- it('', () => { });
-
- // Feature integration
- it('Pinned columns', () => { });
- it('Multi-column headers', () => { });
- it('Multi-row layout', () => { });
-
- // Aplication scenario test
- it('Conditional row selectors', () => { });
-
- it('',
- () => {
- // fakeAsync(() => {
- // async () => {
- const fix = TestBed.createComponent(GridWithPagingAndSelectionComponent);
- fix.detectChanges();
- const grid = fix.componentInstance.gridSelection2;
- expect(true).toBeTruthy();
- expect(10).toEqual(10, '10');
- const checkboxElement1: HTMLElement = grid.getRowByIndex(5).nativeElement.querySelector('.igx-checkbox__input');
-
- spyOn(grid, 'triggerRowSelectionChange').and.callThrough();
- spyOn(grid.onRowSelectionChange, 'emit').and.callThrough();
- expect(grid.triggerRowSelectionChange).toHaveBeenCalledTimes(0);
- expect(grid.onRowSelectionChange.emit).toHaveBeenCalledTimes(0);
-
- });
-
-});
-
-@Component({
- template: `
-
-
-
-
- `
-})
-export class GridWithPagingAndSelectionComponent implements OnInit {
- public data = [];
-
- @ViewChild('gridSelection2', { read: IgxGridComponent, static: true })
- public gridSelection2: IgxGridComponent;
-
- ngOnInit() {
- const bigData = [];
- for (let i = 0; i < 100; i++) {
- for (let j = 0; j < 5; j++) {
- bigData.push({
- ID: i.toString() + '_' + j.toString(),
- Column1: i * j,
- Column2: i * j * Math.pow(10, i),
- Column3: i * j * Math.pow(100, i)
- });
- }
- }
- this.data = bigData;
- }
-
- public ChangePage(val) {
- switch (val) {
- case -1:
- this.gridSelection2.previousPage();
- break;
- case 1:
- this.gridSelection2.nextPage();
- break;
- default:
- this.gridSelection2.paginate(val);
- break;
- }
- }
-}
-
-@Component({
- template: `
-
-
-
-
-
-
-
- `
-})
-export class GridWithSelectionFilteringComponent {
-
- public timeGenerator: Calendar = new Calendar();
- public today: Date = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 0, 0, 0);
-
- @ViewChild('gridSelection4', { read: IgxGridComponent, static: true })
- public gridSelection4: IgxGridComponent;
-
- public data = SampleTestData.productInfoData();
-
- @ViewChild(IgxGridComponent, { static: true }) public grid: IgxGridComponent;
-}
-
-
-
-@Component({
- template: `
-
-
-
-
-
-
-
-
-
-
-
-
- `
-})
-export class GridSummaryComponent {
- public data = SampleTestData.foodProductData();
- @ViewChild('grid1', { read: IgxGridComponent, static: true })
- public gridSummaries: IgxGridComponent;
-}
-
-@Component({
- template: `
-
-
-
-
-
-
-
-
-
-
-
-
- `
-})
-export class GridCancelableComponent {
- public data = SampleTestData.foodProductData();
- @ViewChild('gridCancelable', { read: IgxGridComponent, static: true })
- public gridCancelable: IgxGridComponent;
-
- public cancelClick(evt) {
- if (evt.row && (evt.row.index + 1) % 2 === 0) {
- evt.newSelection = evt.oldSelection || [];
- }
- }
-}
-
-@Component({
- template: `
-
-
- `
-})
-export class GridFeaturesComponent {
-
- @ViewChild('grid1', { read: IgxGridComponent, static: true }) public grid: IgxGridComponent;
- public data = [
- {
- Name: 'Alice',
- Age: 25
- },
- {
- Name: 'Bob',
- Age: 23
- }
- ];
-
- public initColumns(column: IgxColumnComponent) {
- column.filterable = true;
- column.sortable = true;
- column.editable = true;
- column.resizable = true;
- }
-}
-
-@Component({
- template: `
-
-
-
-
-
-
-
-
-
-
-
-
- `
-})
-export class HierarchicalGridRowSelectableIslandComponent extends IgxHierarchicalGridMultiLayoutComponent { }
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row-selection.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row-selection.spec.ts
index e30848013fb..79d7a750a45 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-row-selection.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row-selection.spec.ts
@@ -12,13 +12,15 @@ import {
SelectionWithScrollsComponent,
SingleRowSelectionComponent,
RowSelectionWithoutPrimaryKeyComponent,
- SelectionWithTransactionsComponent
+ SelectionWithTransactionsComponent,
+ GridCustomSelectorsComponent
} from '../../test-utils/grid-samples.spec';
import { IgxHierarchicalGridModule } from '../hierarchical-grid/hierarchical-grid.module';
import { HelperUtils } from '../../test-utils/helper-utils.spec';
import { GridFunctions } from '../../test-utils/grid-functions.spec';
import { SampleTestData } from '../../test-utils/sample-test-data.spec';
import { helpers } from 'handlebars';
+import { IgxHierarchicalGridCustomSelectorsComponent } from '../../test-utils/hierarhical-grid-components.spec';
const DEBOUNCETIME = 30;
@@ -1807,7 +1809,68 @@ describe('IgxGrid - Row Selection', () => {
HelperUtils.verifyRowSelected(addedRow);
});
});
-});
+ describe('Custom selectors', () => {
+ let fix;
+ let grid;
+
+ beforeEach(fakeAsync(() => {
+ fix = TestBed.createComponent(GridCustomSelectorsComponent);
+ fix.detectChanges();
+ grid = fix.componentInstance.grid;
+ grid.rowSelection = GridSelectionMode.multiple;
+ fix.detectChanges();
+ }));
+
+ it('Should be able to select a row by clicking on the custom row selector', () => {
+ // TODO
+ });
+
+ it('Should be able to deselect a selected row by clicking on the custom row selector', () => {
+ // TODO
+ });
+
+ it('Should select/deselect all rows by clicking on the custom header selector', () => {
+ // TODO
+ });
+
+ it('Should have the correct properties in the custom row selector template', () => {
+ // TODO
+ });
+
+ it('Should have the correct properties in the custom row selector header template', () => {
+ // TODO
+ });
+
+ describe('Custom selectors - Hierarchical Grid', () => {
+ let fixture;
+ let hGrid;
+ beforeEach(fakeAsync(() => {
+ fixture = TestBed.createComponent(IgxHierarchicalGridCustomSelectorsComponent);
+ fixture.detectChanges();
+ hGrid = fixture.componentInstance.hGrid;
+ hGrid.rowSelection = GridSelectionMode.multiple;
+ fixture.detectChanges();
+ }));
+ /** Tests should check root and child grids */
+
+ it('Row context `select` method selects a single row', () => {
+ // TODO
+ });
+
+ it('Row context `deselect` method deselects an already selected row', () => {
+ // TODO
+ });
+
+ it('Header context `selectAll` method selects all rows', () => {
+ // TODO
+ });
+
+ it('Header context `deselectAll` method deselects all rows', () => {
+ // TODO
+ });
+ });
+ });
+});
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html
index 2f5ba02ea61..843ba8f276a 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html
@@ -10,7 +10,7 @@
+ context: { $implicit: { index: this.index + this.grid.page * this.grid.perPage, rowID: rowID, selected: selected }}">
diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts
index fbe2243a55c..738aa77b086 100644
--- a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts
+++ b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts
@@ -13,6 +13,7 @@ import { IgxFilteringOperand } from '../data-operations/filtering-condition';
import { ExpressionUI } from '../grids/filtering/grid-filtering.service';
import { IFilteringExpressionsTree } from '../data-operations/filtering-expressions-tree';
import { FilteringStrategy } from '../data-operations/filtering-strategy';
+import { IgxGridComponent } from '../grids/grid';
@Component({
template: `
@@ -1168,3 +1169,26 @@ export class DynamicColumnsComponent extends GridWithSizeComponent {
width = '800px';
height = '800px';
}
+
+@Component({
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+
+ `
+})
+export class GridCustomSelectorsComponent extends BasicGridComponent {
+ data = SampleTestData.contactInfoDataFull();
+
+ @ViewChild('gridCustomSelectors', { read: IgxGridComponent, static: true })
+ public grid: IgxGridComponent;
+}
diff --git a/projects/igniteui-angular/src/lib/test-utils/hierarhical-grid-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/hierarhical-grid-components.spec.ts
index 7f84f180e20..bcda463e9c0 100644
--- a/projects/igniteui-angular/src/lib/test-utils/hierarhical-grid-components.spec.ts
+++ b/projects/igniteui-angular/src/lib/test-utils/hierarhical-grid-components.spec.ts
@@ -89,3 +89,61 @@ export class IgxHierarchicalGridRowSelectionComponent {
this.data = SampleTestData.generateHGridData(40, 3);
}
}
+
+
+@Component({
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `
+})
+export class IgxHierarchicalGridCustomSelectorsComponent {
+ public data;
+
+ @ViewChild('hGgridCustomSelectors', { read: IgxHierarchicalGridComponent, static: true })
+ public hGrid: IgxHierarchicalGridComponent;
+
+ @ViewChild('rowIsland1', { read: IgxRowIslandComponent, static: true })
+ public firstRowIsland: IgxRowIslandComponent;
+
+ @ViewChild('rowIsland2', { read: IgxRowIslandComponent, static: true })
+ public secondRowIsland: IgxRowIslandComponent;
+
+ constructor() {
+ // 3 level hierarchy
+ this.data = SampleTestData.generateHGridData(40, 3);
+ }
+
+ public handleHeadSelectorClick(event, headContext) {
+ headContext.totalCount !== headContext.selectedCount ? headContext.selectAll() : headContext.deselectAll();
+ }
+
+ public handleRowSelectorClick(event, rowContext) {
+ rowContext.selected ? rowContext.deselect() : rowContext.select();
+ }
+}