Toolbar
-+
+
+
+
+
+
- {{getCarouselLabel}}
+ {{getCarouselLabel}}
-
+
+
{{ column.header }} {{ column.visibleIndex }}
diff --git a/src/app/grid-column-pinning/grid-column-pinning.sample.html b/src/app/grid-column-pinning/grid-column-pinning.sample.html
index f43d20d9824..569d13cfb93 100644
--- a/src/app/grid-column-pinning/grid-column-pinning.sample.html
+++ b/src/app/grid-column-pinning/grid-column-pinning.sample.html
@@ -9,6 +9,12 @@
+
{{column.expanded ? 'remove' : 'add'}}
-
+
+
+ Grid Toolbar
+
+
+
-
+
;
+ /**
+ * @hidden
+ * @internal
+ */
+ public stoppedByInteraction: boolean;
private _interval: number;
private _resourceStrings = CurrentResourceStrings.CarouselResStrings;
private lastInterval: any;
private playing: boolean;
- private stoppedByInteraction: boolean;
private destroyed: boolean;
private destroy$ = new Subject();
private differ: IterableDiffer | null = null;
@@ -420,14 +410,14 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
* By default it uses EN resources.
*/
@Input()
- set resourceStrings(value: ICarouselResourceStrings) {
+ public set resourceStrings(value: ICarouselResourceStrings) {
this._resourceStrings = Object.assign({}, this._resourceStrings, value);
}
/**
* An accessor that returns the resource strings.
*/
- get resourceStrings(): ICarouselResourceStrings {
+ public get resourceStrings(): ICarouselResourceStrings {
return this._resourceStrings;
}
@@ -484,7 +474,7 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
* @memberOf IgxCarouselComponent
*/
public get total(): number {
- return this.slides.length;
+ return this.slides?.length;
}
/**
@@ -530,7 +520,7 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
*
* @memberof IgxCarouselComponent
*/
- get nativeElement(): any {
+ public get nativeElement(): any {
return this.element.nativeElement;
}
@@ -543,7 +533,7 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
* @memberof IgxCarouselComponent
*/
@Input()
- get interval(): number {
+ public get interval(): number {
return this._interval;
}
@@ -556,7 +546,7 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
*
* @memberof IgxCarouselComponent
*/
- set interval(value: number) {
+ public set interval(value: number) {
this._interval = +value;
this.restartInterval();
}
@@ -566,13 +556,14 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
this.differ = this.iterableDiffers.find([]).create(null);
}
+
/** @hidden */
@HostListener('keydown.arrowright', ['$event'])
public onKeydownArrowRight(event) {
if (this.keyboardSupport) {
event.preventDefault();
this.next();
- requestAnimationFrame(() => this.nativeElement.focus());
+ requestAnimationFrame(() => this.slides.find(s => s.active).nativeElement.focus());
}
}
@@ -582,7 +573,7 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
if (this.keyboardSupport) {
event.preventDefault();
this.prev();
- requestAnimationFrame(() => this.nativeElement.focus());
+ requestAnimationFrame(() => this.slides.find(s => s.active).nativeElement.focus());
}
}
@@ -608,7 +599,7 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
if (this.keyboardSupport && this.slides.length > 0) {
event.preventDefault();
this.slides.first.active = true;
- requestAnimationFrame(() => this.nativeElement.focus());
+ requestAnimationFrame(() => this.slides.find(s => s.active).nativeElement.focus());
}
}
@@ -618,7 +609,7 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
if (this.keyboardSupport && this.slides.length > 0) {
event.preventDefault();
this.slides.last.active = true;
- requestAnimationFrame(() => this.nativeElement.focus());
+ requestAnimationFrame(() => this.slides.find(s => s.active).nativeElement.focus());
}
}
@@ -713,11 +704,6 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
}
}
- /** @hidden */
- public setAriaLabel(slide) {
- return `Item ${slide.index + 1} of ${this.total}`;
- }
-
/**
* Returns the slide corresponding to the provided `index` or null.
* ```typescript
@@ -1104,6 +1090,7 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
this.slides.reduce((any, c, ind) => c.index = ind, 0); // reset slides indexes
diff.forEachAddedItem((record: IterableChangeRecord) => {
const slide = record.item;
+ slide.total = this.total;
this.onSlideAdded.emit({ carousel: this, slide });
if (slide.active) {
this.currentSlide = slide;
diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.directives.ts b/projects/igniteui-angular/src/lib/carousel/carousel.directives.ts
index ea26c4a5e93..366d6fcc03e 100644
--- a/projects/igniteui-angular/src/lib/carousel/carousel.directives.ts
+++ b/projects/igniteui-angular/src/lib/carousel/carousel.directives.ts
@@ -1,4 +1,4 @@
-import { Directive, TemplateRef } from '@angular/core';
+import { Directive } from '@angular/core';
@Directive({
selector: '[igxCarouselIndicator]'
diff --git a/projects/igniteui-angular/src/lib/carousel/slide.component.ts b/projects/igniteui-angular/src/lib/carousel/slide.component.ts
index 2747627e76b..dc8ef6d28b2 100644
--- a/projects/igniteui-angular/src/lib/carousel/slide.component.ts
+++ b/projects/igniteui-angular/src/lib/carousel/slide.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnDestroy, Input, HostBinding, Output, EventEmitter, ElementRef, ChangeDetectorRef } from '@angular/core';
+import { Component, OnDestroy, Input, HostBinding, Output, EventEmitter, ElementRef, AfterContentChecked } from '@angular/core';
import { Subject } from 'rxjs';
export enum Direction { NONE, NEXT, PREV }
@@ -20,7 +20,7 @@ export enum Direction { NONE, NEXT, PREV }
templateUrl: 'slide.component.html'
})
-export class IgxSlideComponent implements OnDestroy {
+export class IgxSlideComponent implements AfterContentChecked, OnDestroy {
/**
* Gets/sets the `index` of the slide inside the carousel.
* ```html
@@ -45,6 +45,9 @@ export class IgxSlideComponent implements OnDestroy {
*/
@Input() public direction: Direction;
+ @Input()
+ public total: number;
+
/**
* Returns the `tabIndex` of the slide component.
* ```typescript
@@ -54,35 +57,28 @@ export class IgxSlideComponent implements OnDestroy {
* @memberof IgxSlideComponent
*/
@HostBinding('attr.tabindex')
- get tabIndex() {
+ public get tabIndex() {
return this.active ? 0 : null;
}
/**
- * Returns the `aria-selected` of the slide.
- *
- * ```typescript
- * let slide = this.slide.ariaSelected;
- * ```
- *
+ * @hidden
*/
- @HostBinding('attr.aria-selected')
- public get ariaSelected(): boolean {
- return this.active;
- }
+ @HostBinding('attr.id')
+ public id: string;
/**
- * Returns the `aria-live` of the slide.
- *
- * ```typescript
- * let slide = this.slide.ariaLive;
- * ```
+ * Returns the `role` of the slide component.
+ * By default is set to `tabpanel`
*
+ * @memberof IgxSlideComponent
*/
- @HostBinding('attr.aria-selected')
- public get ariaLive() {
- return this.active ? 'polite' : null;
- }
+ @HostBinding('attr.role')
+ public tab = 'tabpanel';
+
+ /** @hidden */
+ @HostBinding('attr.aria-labelledby')
+ public ariaLabelledBy;
/**
* Returns the class of the slide component.
@@ -155,6 +151,11 @@ export class IgxSlideComponent implements OnDestroy {
return this._destroy$;
}
+ public ngAfterContentChecked() {
+ this.id = `panel-${this.index}`;
+ this.ariaLabelledBy = `tab-${this.index}-${this.total}`;
+ }
+
/**
* @hidden
*/
diff --git a/projects/igniteui-angular/src/lib/core/i18n/carousel-resources.ts b/projects/igniteui-angular/src/lib/core/i18n/carousel-resources.ts
index 3ddc7899040..4745b4ecc88 100644
--- a/projects/igniteui-angular/src/lib/core/i18n/carousel-resources.ts
+++ b/projects/igniteui-angular/src/lib/core/i18n/carousel-resources.ts
@@ -1,7 +1,13 @@
export interface ICarouselResourceStrings {
igx_carousel_of?: string;
+ igx_carousel_slide?: string;
+ igx_carousel_previous_slide?: string;
+ igx_carousel_next_slide?: string;
}
export const CarouselResourceStringsEN: ICarouselResourceStrings = {
- igx_carousel_of: 'of'
+ igx_carousel_of: 'of',
+ igx_carousel_slide: 'slide',
+ igx_carousel_previous_slide: 'previous slide',
+ igx_carousel_next_slide: 'next slide'
};
diff --git a/projects/igniteui-angular/src/lib/core/styles/spec/_functions.spec.scss b/projects/igniteui-angular/src/lib/core/styles/spec/_functions.spec.scss
new file mode 100644
index 00000000000..20f39477b46
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/spec/_functions.spec.scss
@@ -0,0 +1,51 @@
+@include describe('Unit conversions') {
+ @include it('should convert pixel numbers to rem') {
+ @include assert-equal(rem(16px, 16px), 1rem);
+ }
+
+ @include it('should convert unitless numbers to rem') {
+ @include assert-equal(rem(16, 16), 1rem);
+ }
+
+ @include it('should convert pixel numbers to em') {
+ @include assert-equal(em(16px, 16px), 1em);
+ }
+
+ @include it('should convert unitless numbers to em') {
+ @include assert-equal(em(16px, 16px), 1em);
+ }
+
+ @include it('should convert relative unit numbers to pixels') {
+ @include assert-equal(px(1em, 16px), 16px);
+ @include assert-equal(px(1rem, 16px), 16px);
+ }
+
+ @include it('should convert unitless numbers to pixels') {
+ @include assert-equal(px(1, 16), 16px);
+ }
+}
+
+@include describe('Luminance') {
+ @include it('should return a number') {
+ @include assert-true(type-of(luminance(blue)), 'number');
+ }
+
+ @include it('should retrieve luminance for a given color value') {
+ @include assert-equal(luminance(red), .2126);
+ }
+
+ @include it('should pass through non-color values') {
+ @include assert-equal(luminance('bozo'), 'bozo');
+ }
+}
+
+@include describe('Contrast') {
+ @include it('should return a number') {
+ @include assert-true(type-of(contrast(white, black)), 'number');
+ }
+
+ @include it('should return the contrast ratio between two colors') {
+ @include assert-equal(contrast(white, black), 21);
+ @include assert-equal(round(contrast(#09f, black)), 7);
+ }
+}
diff --git a/projects/igniteui-angular/src/lib/core/styles/spec/_index.scss b/projects/igniteui-angular/src/lib/core/styles/spec/_index.scss
new file mode 100644
index 00000000000..3df95537655
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/spec/_index.scss
@@ -0,0 +1,5 @@
+@import 'node_modules/sass-true/sass/true';
+@import '../base/index';
+
+@import 'functions.spec';
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/spec/tests.ts b/projects/igniteui-angular/src/lib/core/styles/spec/tests.ts
new file mode 100644
index 00000000000..b311df0c588
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/spec/tests.ts
@@ -0,0 +1,5 @@
+import * as path from 'path';
+import * as sassTrue from 'sass-true';
+
+const file = path.join(__dirname, '_index.scss');
+sassTrue.runSass({ file }, { describe, it });
diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts
index bfe08c815e7..6324a084c8e 100644
--- a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts
+++ b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts
@@ -196,6 +196,7 @@ export class IgxExpansionPanelComponent implements IgxExpansionPanelBase, AfterC
() => {
this.onCollapsed.emit({ event: evt, panel: this, owner: this });
this.collapsed = true;
+ this.cdr.markForCheck();
}
);
}
diff --git a/projects/igniteui-angular/src/lib/services/csv/csv-exporter.ts b/projects/igniteui-angular/src/lib/services/csv/csv-exporter.ts
index de7d505abbb..6655b104c28 100644
--- a/projects/igniteui-angular/src/lib/services/csv/csv-exporter.ts
+++ b/projects/igniteui-angular/src/lib/services/csv/csv-exporter.ts
@@ -1,5 +1,5 @@
import { EventEmitter, Injectable, Output } from '@angular/core';
-import { IgxBaseExporter } from '../exporter-common/base-export-service';
+import { IExportRecord, IgxBaseExporter } from '../exporter-common/base-export-service';
import { ExportUtilities } from '../exporter-common/export-utilities';
import { CharSeparatedValueData } from './char-separated-value-data';
import { CsvFileTypes, IgxCsvExporterOptions } from './csv-exporter-options';
@@ -48,8 +48,8 @@ export class IgxCsvExporterService extends IgxBaseExporter {
private _stringData: string;
- protected exportDataImplementation(data: any[], options: IgxCsvExporterOptions) {
- data = data.map((item) => item.rowData);
+ protected exportDataImplementation(data: IExportRecord[], options: IgxCsvExporterOptions) {
+ data = data.map((item) => item.data);
const csvData = new CharSeparatedValueData(data, options.valueDelimiter);
csvData.prepareDataAsync((r) => {
this._stringData = r;
diff --git a/projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts b/projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts
index 8ce1c764b34..0c49ed04c82 100644
--- a/projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts
+++ b/projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts
@@ -14,7 +14,8 @@ import {
GridIDNameJobTitleComponent,
ProductsComponent,
GridIDNameJobTitleHireDataPerformanceComponent,
- GridHireDateComponent
+ GridHireDateComponent,
+ GridExportGroupedDataComponent
} from '../../test-utils/grid-samples.spec';
import { SampleTestData } from '../../test-utils/sample-test-data.spec';
import { first } from 'rxjs/operators';
@@ -43,9 +44,10 @@ describe('Excel Exporter', () => {
GridIDNameJobTitleComponent,
IgxTreeGridPrimaryForeignKeyComponent,
ProductsComponent,
- GridWithEmtpyColumnsComponent,
+ GridWithEmptyColumnsComponent,
GridIDNameJobTitleHireDataPerformanceComponent,
- GridHireDateComponent
+ GridHireDateComponent,
+ GridExportGroupedDataComponent
],
imports: [IgxGridModule, IgxTreeGridModule, NoopAnimationsModule]
}).compileComponents();
@@ -256,7 +258,7 @@ describe('Excel Exporter', () => {
wrapper = await getExportedData(grid, options);
await wrapper.verifyDataFilesContent(
- actualData.simpleGridSortByNameDesc(true), 'Descending sorted data should have been exported.');
+ actualData.simpleGridSortByNameDesc(), 'Descending sorted data should have been exported.');
grid.clearSort();
grid.sort({fieldName: 'ID', dir: SortingDirection.Asc, ignoreCase: true, strategy: DefaultSortingStrategy.instance()});
@@ -458,7 +460,7 @@ describe('Excel Exporter', () => {
});
it('should export columns without header', async () => {
- const fix = TestBed.createComponent(GridWithEmtpyColumnsComponent);
+ const fix = TestBed.createComponent(GridWithEmptyColumnsComponent);
fix.detectChanges();
await wait();
@@ -539,6 +541,97 @@ describe('Excel Exporter', () => {
await exportAndVerify(grid, options, actualData.hireDate);
});
+
+ it('Should export grouped grid', async () => {
+ const fix = TestBed.createComponent(GridExportGroupedDataComponent);
+ fix.detectChanges();
+ await wait();
+
+ const grid = fix.componentInstance.grid;
+
+ grid.groupBy({ fieldName: 'Brand', dir: SortingDirection.Asc, ignoreCase: false });
+ grid.groupBy({ fieldName: 'Price', dir: SortingDirection.Desc, ignoreCase: false });
+
+ fix.detectChanges();
+
+ await exportAndVerify(grid, options, actualData.exportGroupedData);
+ });
+
+ it('Should export grouped grid with collapsed rows', async () => {
+ const fix = TestBed.createComponent(GridExportGroupedDataComponent);
+ fix.detectChanges();
+ await wait();
+
+ const grid = fix.componentInstance.grid;
+
+ grid.groupBy({ fieldName: 'Brand', dir: SortingDirection.Asc, ignoreCase: false });
+ grid.groupBy({ fieldName: 'Price', dir: SortingDirection.Desc, ignoreCase: false });
+
+ fix.detectChanges();
+
+ const groupRows = grid.groupsRowList.toArray();
+
+ grid.toggleGroup(groupRows[2].groupRow);
+ grid.toggleGroup(groupRows[3].groupRow);
+ grid.toggleGroup(groupRows[6].groupRow);
+
+ fix.detectChanges();
+
+
+ await exportAndVerify(grid, options, actualData.exportGroupedDataWithCollapsedRows);
+ });
+
+ it('Should export grouped grid with ignored sorting', async () => {
+ const fix = TestBed.createComponent(GridExportGroupedDataComponent);
+ fix.detectChanges();
+ await wait();
+
+ const grid = fix.componentInstance.grid;
+
+ grid.groupBy({ fieldName: 'Brand', dir: SortingDirection.Asc, ignoreCase: false });
+ grid.sort({fieldName: 'Price', dir: SortingDirection.Desc});
+
+ options.ignoreSorting = true;
+
+ fix.detectChanges();
+
+ await exportAndVerify(grid, options, actualData.exportGroupedDataWithIgnoreSorting);
+ });
+
+ it('Should export grouped grid with ignored filtering', async () => {
+ const fix = TestBed.createComponent(GridExportGroupedDataComponent);
+ fix.detectChanges();
+ await wait();
+
+ const grid = fix.componentInstance.grid;
+
+ grid.groupBy({ fieldName: 'Brand', dir: SortingDirection.Asc, ignoreCase: false });
+
+ grid.filter('Model', 'Model', IgxStringFilteringOperand.instance().condition('contains'), true);
+ fix.detectChanges();
+
+ options.ignoreFiltering = true;
+
+ fix.detectChanges();
+
+ await exportAndVerify(grid, options, actualData.exportGroupedDataWithIgnoreFiltering);
+ });
+
+ it('Should export grouped grid with ignored grouping', async () => {
+ const fix = TestBed.createComponent(GridExportGroupedDataComponent);
+ fix.detectChanges();
+ await wait();
+
+ const grid = fix.componentInstance.grid;
+
+ grid.groupBy({ fieldName: 'Brand', dir: SortingDirection.Asc, ignoreCase: false });
+
+ options.ignoreGrouping = true;
+
+ fix.detectChanges();
+
+ await exportAndVerify(grid, options, actualData.exportGroupedDataWithIgnoreGrouping);
+ });
});
describe('', () => {
@@ -607,6 +700,22 @@ describe('Excel Exporter', () => {
await exportAndVerify(treeGrid, options, actualData.treeGridDataExpDepth(0));
});
+ it('should export tree grid with ignore filtering properly.', async () => {
+ treeGrid.filter('Age', 52, IgxNumberFilteringOperand.instance().condition('greaterThan'));
+ options.ignoreFiltering = true;
+ fix.detectChanges();
+
+ await exportAndVerify(treeGrid, options, actualData.treeGridDataIgnoreFiltering);
+ });
+
+ it('should export tree grid with ignore sorting properly.', async () => {
+ treeGrid.sort({fieldName: 'Age', dir: SortingDirection.Desc});
+ options.ignoreSorting = true;
+ fix.detectChanges();
+
+ await exportAndVerify(treeGrid, options, actualData.treeGridData);
+ });
+
it('should throw an exception when nesting level is greater than 8.', async () => {
const nestedData = SampleTestData.employeePrimaryForeignKeyTreeData();
for (let i = 1; i < 9; i++) {
@@ -769,7 +878,7 @@ describe('Excel Exporter', () => {
`
})
-export class GridWithEmtpyColumnsComponent {
+export class GridWithEmptyColumnsComponent {
@ViewChild('grid1', { static: true }) public grid: IgxGridComponent;
public data = SampleTestData.personJobDataFull();
diff --git a/projects/igniteui-angular/src/lib/services/excel/excel-exporter.ts b/projects/igniteui-angular/src/lib/services/excel/excel-exporter.ts
index d92d41e68e3..4f483fab688 100644
--- a/projects/igniteui-angular/src/lib/services/excel/excel-exporter.ts
+++ b/projects/igniteui-angular/src/lib/services/excel/excel-exporter.ts
@@ -5,7 +5,7 @@ import { ExcelElementsFactory } from './excel-elements-factory';
import { ExcelFolderTypes } from './excel-enums';
import { IgxExcelExporterOptions } from './excel-exporter-options';
import { IExcelFolder } from './excel-interfaces';
-import { IgxBaseExporter } from '../exporter-common/base-export-service';
+import { IExportRecord, IgxBaseExporter } from '../exporter-common/base-export-service';
import { ExportUtilities } from '../exporter-common/export-utilities';
import { WorksheetData } from './worksheet-data';
import { IBaseEventArgs } from '../../core/utils';
@@ -72,19 +72,22 @@ export class IgxExcelExporterService extends IgxBaseExporter {
}
}
- protected exportDataImplementation(data: any[], options: IgxExcelExporterOptions): void {
- if (this._isTreeGrid) {
+ protected exportDataImplementation(data: IExportRecord[], options: IgxExcelExporterOptions): void {
+ const level = data[0]?.level;
+
+ if (typeof level !== 'undefined') {
let maxLevel = 0;
+
data.forEach((r) => {
- maxLevel = Math.max(maxLevel, r.originalRowData.level);
+ maxLevel = Math.max(maxLevel, r.level);
});
+
if (maxLevel > 7) {
throw Error('Can create an outline of up to eight levels!');
}
}
- const worksheetData =
- new WorksheetData(data, this.columnWidthList, options, this._indexOfLastPinnedColumn, this._sort, this._isTreeGrid);
+ const worksheetData = new WorksheetData(data, this.columnWidthList, options, this._indexOfLastPinnedColumn, this._sort);
this._xlsx = new JSZip();
diff --git a/projects/igniteui-angular/src/lib/services/excel/excel-files.ts b/projects/igniteui-angular/src/lib/services/excel/excel-files.ts
index 75dd60397c7..e5bbf14f3d1 100644
--- a/projects/igniteui-angular/src/lib/services/excel/excel-files.ts
+++ b/projects/igniteui-angular/src/lib/services/excel/excel-files.ts
@@ -61,83 +61,7 @@ export class WorksheetFile implements IExcelFile {
private freezePane = '';
private rowHeight = '';
- public writeElement(folder: JSZip, worksheetData: WorksheetData) {
- const sheetData = [];
- const cols = [];
- let dimension: string;
- const dictionary = worksheetData.dataDictionary;
- let freezePane = '';
- let maxOutlineLevel = 0;
-
- if (worksheetData.isEmpty) {
- sheetData.push('');
- const height = worksheetData.options.rowHeight;
- const rowHeight = height ? ' ht="' + height + '" customHeight="1"' : '';
-
- sheetData.push(``);
- for (let i = 0; i < worksheetData.columnCount; i++) {
- const column = ExcelStrings.getExcelColumn(i) + 1;
- const value = dictionary.saveValue(worksheetData.keys[i], i, true);
- sheetData.push(`${value}
');
-
- for (let i = 1; i < worksheetData.rowCount; i++) {
- if (!worksheetData.isTreeGridData) {
- sheetData.push(``);
- } else {
- const rowData = worksheetData.data[i - 1].originalRowData;
- const sCollapsed = (!rowData.expanded) ? '' : (rowData.expanded === true) ? '' : ` collapsed="1"`;
- const sHidden = (rowData.parent && this.hasCollapsedParent(rowData)) ? ` hidden="1"` : '';
- const rowOutlineLevel = rowData.level ? rowData.level : 0;
- const sOutlineLevel = rowOutlineLevel > 0 ? ` outlineLevel="${rowOutlineLevel}"` : '';
- maxOutlineLevel = maxOutlineLevel < rowOutlineLevel ? rowOutlineLevel : maxOutlineLevel;
-
- sheetData.push(``);
- }
- for (let j = 0; j < worksheetData.columnCount; j++) {
- const cellData = WorksheetFile.getCellData(worksheetData, i, j);
- sheetData.push(cellData);
- }
- sheetData.push('
');
- }
- sheetData.push('
');
- dimension = 'A1:' + ExcelStrings.getExcelColumn(worksheetData.columnCount - 1) + worksheetData.rowCount;
-
- cols.push('');
-
- for (let i = 0; i < worksheetData.columnCount; i++) {
- const width = dictionary.columnWidths[i];
- // Use the width provided in the options if it exists
- let widthInTwips = worksheetData.options.columnWidth !== undefined ?
- worksheetData.options.columnWidth :
- Math.max(((width / 96) * 14.4), WorksheetFile.MIN_WIDTH);
- if (!(widthInTwips > 0)) {
- widthInTwips = WorksheetFile.MIN_WIDTH;
- }
-
- cols.push(` ');
-
- if (worksheetData.indexOfLastPinnedColumn !== -1 &&
- !worksheetData.options.ignorePinning &&
- !worksheetData.options.ignoreColumnsOrder) {
- const frozenColumnCount = worksheetData.indexOfLastPinnedColumn + 1;
- const firstCell = ExcelStrings.getExcelColumn(frozenColumnCount) + '1';
- freezePane = ``;
- } else {
- const originalData = worksheetData.data[i - 1].originalRowData;
- const sCollapsed = (!originalData.expanded) ? '' : (originalData.expanded === true) ? '' : ` collapsed="1"`;
- const sHidden = (originalData.parent && this.hasCollapsedParent(originalData)) ? ` hidden="1"` : '';
- const rowOutlineLevel = originalData.level ? originalData.level : 0;
- const sOutlineLevel = rowOutlineLevel > 0 ? ` outlineLevel="${rowOutlineLevel}"` : '';
- this.maxOutlineLevel = this.maxOutlineLevel < rowOutlineLevel ? rowOutlineLevel : this.maxOutlineLevel;
- rowData[0] = ``;
- }
+ const record = worksheetData.data[i - 1];
+ const sHidden = record.hidden ? ` hidden="1"` : '';
+ const rowLevel = record.level;
+ const outlineLevel = rowLevel > 0 ? ` outlineLevel="${rowLevel}"` : '';
+
+ this.maxOutlineLevel = this.maxOutlineLevel < rowLevel ? rowLevel : this.maxOutlineLevel;
+
+ rowData[0] = ``;
for (let j = 0; j < worksheetData.columnCount; j++) {
const cellData = WorksheetFile.getCellData(worksheetData, i, j);
rowData[j + 1] = cellData;
}
+
rowData[worksheetData.columnCount + 1] = '
';
return rowData.join('');
}
- private hasCollapsedParent(rowData) {
- let result = !rowData.parent.expanded;
- while (rowData.parent) {
- result = result || !rowData.parent.expanded;
- rowData = rowData.parent;
- }
-
- return result;
- }
/* eslint-disable @typescript-eslint/member-ordering */
private static getCellData(worksheetData: WorksheetData, row: number, column: number): string {
const dictionary = worksheetData.dataDictionary;
const columnName = ExcelStrings.getExcelColumn(column) + (row + 1);
const columnHeader = worksheetData.keys[column];
+ const fullRow = worksheetData.data[row - 1];
- const rowData = worksheetData.data[row - 1].rowData;
-
- const cellValue = worksheetData.isSpecialData ? rowData : rowData[columnHeader];
+ const cellValue = worksheetData.isSpecialData ?
+ fullRow.data :
+ fullRow.data[columnHeader];
if (cellValue === undefined || cellValue === null) {
return `' + freezePane + ' ID Name JobTitle Tanya Bennett Director Leslie Hansen Associate Software Developer Jack Simon Software Developer Gilberto Todd Erma Walsh CEO Erika Wells Software Development Team Lead Eduardo Ramirez Manager Debra Morton Celia Martinez Senior Software Developer Casey Houston Vice President 0 1 2 |
3 3 4 |
9 5 6 |
4 7 8 |
2 9 4 |
6 10 11 |
8 12 13 |
10 14 15 |
7 16 6 |
5 17 18 |
1 19 20 |
Leslie Hansen Tanya Bennett 0 1 2 |
1 3 4 |
5 5 6 |
7 7 8 |
10 9 10 |
8 11 12 |
6 13 14 |
2 15 16 |
4 17 18 |
9 19 8 |
3 20 16 |
ID ParentID Name JobTitle Age Casey Houston Vice President Gilberto Todd Director Tanya Bennett Debra Morton Associate Software Developer Jack Simon Software Developer Erma Walsh CEO Eduardo Ramirez Manager Leslie Hansen 0 1 2 3 4 |
1 -1 5 6 32 |
2 1 7 8 41 |
3 2 9 8 29 |
7 2 10 11 35 |
4 1 12 13 33 |
6 -1 14 15 52 |
10 -1 16 17 53 |
9 10 18 11 44 |
ID ParentID Name JobTitle Age Casey Houston Vice President Gilberto Todd Director Tanya Bennett Debra Morton Associate Software Developer Jack Simon Software Developer Erma Walsh CEO Eduardo Ramirez Manager Leslie Hansen ID ParentID Name JobTitle Age Eduardo Ramirez Manager Leslie Hansen Associate Software Developer Erma Walsh CEO Casey Houston Vice President Jack Simon Software Developer Gilberto Todd Director Debra Morton Tanya Bennett ID ParentID Name JobTitle Age Erma Walsh CEO Eduardo Ramirez Manager Leslie Hansen Associate Software Developer Casey Houston Vice President Jack Simon Software Developer Gilberto Todd Director Debra Morton Model Edition Brand: BMW (2) Price: 150000 (1) M5 Competition Price: 100000 (1) Performance Brand: Tesla (3) Roadster Price: 75000 (1) Model S Sport Price: 65000 (1) Base Brand: VW (3) Arteon R Line Business Passat 0 1 |
2 |
3 |
4 5 |
6 |
4 7 |
8 |
6 |
9 7 |
10 |
11 12 |
13 |
11 14 |
15 |
6 |
16 17 |
10 |
16 18 |
13 |
19 18 |
Model Edition Brand: BMW (2) Price: 150000 (1) M5 Competition Price: 100000 (1) Performance Brand: Tesla (3) Roadster Price: 75000 (1) Model S Sport Price: 65000 (1) Base Brand: VW (3) Arteon R Line Business Passat 0 1 |
2 |
3 |
4 5 |
6 |
4 7 |
8 |
6 |
9 7 |
10 |
11 12 |
13 |
11 14 |
15 |
6 |
16 17 |
10 |
16 18 |
13 |
19 18 |
Price Model Edition Brand: Tesla (3) 75000 Model S Sport 100000 Roadster Performance 65000 Base Brand: BMW (2) 150000 M5 Competition Brand: VW (3) Arteon Business Passat R Line 0 1 2 |
3 |
4 5 6 |
7 8 9 |
10 5 11 |
12 |
13 14 15 |
7 14 9 |
16 |
4 17 18 |
10 19 18 |
7 17 20 |
Price Model Edition Brand: BMW (2) 150000 M5 Competition 100000 Performance Brand: Tesla (3) 75000 Model S Sport Roadster 65000 Base Brand: VW (3) Arteon Business Passat R Line 0 1 2 |
3 |
4 5 6 |
7 5 8 |
9 |
10 11 12 |
7 13 8 |
14 11 15 |
16 |
10 17 18 |
14 19 18 |
7 17 20 |
Price Model Edition M5 Competition Performance Model S Sport Roadster Base Arteon Business Passat R Line 0 1 2 |
150000 3 4 |
100000 3 5 |
75000 6 7 |
100000 8 5 |
65000 6 9 |
75000 10 11 |
65000 12 11 |
100000 10 13 |
();
- protected _isTreeGrid = false;
protected _indexOfLastPinnedColumn = -1;
protected _sort = null;
private _columnList: any[];
- private flatRecords = [];
private _columnWidthList: number[];
+ private flatRecords: IExportRecord[] = [];
public get columnWidthList() {
return this._columnWidthList;
@@ -125,7 +146,7 @@ export abstract class IgxBaseExporter {
this._columnWidthList = new Array(columns.filter(c => !c.hidden).length);
const hiddenColumns = [];
- let lastVisbleColumnIndex = -1;
+ let lastVisibleColumnIndex = -1;
columns.forEach((column) => {
const columnHeader = column.header !== '' ? column.header : column.field;
@@ -145,7 +166,7 @@ export abstract class IgxBaseExporter {
if (index !== -1) {
this._columnList[index] = columnInfo;
this._columnWidthList[index] = columnWidth;
- lastVisbleColumnIndex = Math.max(lastVisbleColumnIndex, index);
+ lastVisibleColumnIndex = Math.max(lastVisibleColumnIndex, index);
} else {
hiddenColumns.push(columnInfo);
}
@@ -157,11 +178,11 @@ export abstract class IgxBaseExporter {
// Append the hidden columns to the end of the list
hiddenColumns.forEach((hiddenColumn) => {
- this._columnList[++lastVisbleColumnIndex] = hiddenColumn;
+ this._columnList[++lastVisibleColumnIndex] = hiddenColumn;
});
- const data = this.prepareData(grid, options);
- this.exportData(data, options);
+ this.prepareData(grid, options);
+ this.exportGridRecordsData(this.flatRecords, options);
}
/**
@@ -177,8 +198,27 @@ export abstract class IgxBaseExporter {
throw Error('No options provided!');
}
+ const records = data.map(d => {
+ const record: IExportRecord = {
+ data: d,
+ type: ExportRecordType.DataRecord,
+ level: 0
+ };
+
+ return record;
+ });
+
+ this.exportGridRecordsData(records, options);
+ }
+
+ private exportGridRecordsData(records: IExportRecord[], options: IgxExporterOptionsBase) {
+ if (options === undefined || options === null) {
+ throw Error('No options provided!');
+ }
+
if (!this._columnList || this._columnList.length === 0) {
- const keys = ExportUtilities.getKeysFromData(data);
+ const recordsData = records.map(r => r.data);
+ const keys = ExportUtilities.getKeysFromData(recordsData);
this._columnList = keys.map((k) => ({ header: k, field: k, skip: false }));
this._columnWidthList = new Array(keys.length).fill(DEFAULT_COLUMN_WIDTH);
}
@@ -188,8 +228,11 @@ export abstract class IgxBaseExporter {
this._columnList.forEach((column, index) => {
if (!column.skip) {
const columnExportArgs = {
- header: ExportUtilities.isNullOrWhitespaces(column.header) ?
- 'Column' + columnsWithoutHeaderCount++ : column.header,
+ header: !ExportUtilities.isNullOrWhitespaces(column.header) ?
+ column.header :
+ !ExportUtilities.isNullOrWhitespaces(column.field) ?
+ column.field :
+ 'Column' + columnsWithoutHeaderCount++,
field: column.field,
columnIndex: index,
cancel: false,
@@ -217,11 +260,12 @@ export abstract class IgxBaseExporter {
this._indexOfLastPinnedColumn -= skippedPinnedColumnsCount;
- const dataToExport = new Array();
- const isSpecialData = ExportUtilities.isSpecialData(data);
+ const dataToExport = new Array();
+ const actualData = records.map(r => r.data);
+ const isSpecialData = ExportUtilities.isSpecialData(actualData);
- yieldingLoop(data.length, 100, (i) => {
- const row = data[i];
+ yieldingLoop(records.length, 100, (i) => {
+ const row = records[i];
this.exportRow(dataToExport, row, i, isSpecialData);
}, () => {
this.exportDataImplementation(dataToExport, options);
@@ -229,14 +273,13 @@ export abstract class IgxBaseExporter {
});
}
- private exportRow(data: any[], rowData: any, index: number, isSpecialData: boolean) {
- let row;
-
+ private exportRow(data: IExportRecord[], record: IExportRecord, index: number, isSpecialData: boolean) {
if (!isSpecialData) {
- row = this._columnList.reduce((a, e) => {
+ record.data = this._columnList.reduce((a, e) => {
if (!e.skip) {
- let rawValue = this._isTreeGrid ? resolveNestedPath(rowData.data, e.field) : resolveNestedPath(rowData, e.field);
- const shouldApplyFormatter = e.formatter && !e.skipFormatter;
+ let rawValue = resolveNestedPath(record.data, e.field);
+
+ const shouldApplyFormatter = e.formatter && !e.skipFormatter && record.type !== ExportRecordType.GroupedRecord;
if (e.dataType === 'date' &&
!(rawValue instanceof Date) &&
@@ -252,82 +295,217 @@ export abstract class IgxBaseExporter {
}
return a;
}, {});
- } else {
- row = this._isTreeGrid ? rowData.data : rowData;
}
const rowArgs = {
- rowData: row,
+ rowData: record.data,
rowIndex: index,
cancel: false
};
+
this.onRowExport.emit(rowArgs);
if (!rowArgs.cancel) {
- data.push({ rowData: rowArgs.rowData, originalRowData: rowData });
+ data.push(record);
}
}
- private prepareData(grid: any, options: IgxExporterOptionsBase): any[] {
+ private prepareData(grid: IgxGridBaseDirective, options: IgxExporterOptionsBase) {
this.flatRecords = [];
- let rootRecords = grid.rootRecords;
- this._isTreeGrid = rootRecords !== undefined;
+ const tagName = grid.nativeElement.tagName.toLowerCase();
+
+ const hasFiltering = (grid.filteringExpressionsTree && grid.filteringExpressionsTree.filteringOperands.length > 0) ||
+ (grid.advancedFilteringExpressionsTree && grid.advancedFilteringExpressionsTree.filteringOperands.length > 0);
+
+ const hasSorting = grid.sortingExpressions &&
+ grid.sortingExpressions.length > 0;
- if (this._isTreeGrid) {
- this.prepareHierarchicalData(rootRecords);
+
+ if (tagName === 'igx-grid') {
+ this.prepareGridData(grid as IgxGridComponent, options, hasFiltering, hasSorting);
+ } if (tagName === 'igx-tree-grid') {
+ this.prepareTreeGridData(grid as IgxTreeGridComponent, options, hasFiltering, hasSorting);
}
+ }
- let data = this._isTreeGrid ? this.flatRecords : grid.data;
-
- if (((grid.filteringExpressionsTree &&
- grid.filteringExpressionsTree.filteringOperands.length > 0) ||
- (grid.advancedFilteringExpressionsTree &&
- grid.advancedFilteringExpressionsTree.filteringOperands.length > 0)) &&
- !options.ignoreFiltering) {
- const filteringState: any = {
- expressionsTree: grid.filteringExpressionsTree,
- advancedExpressionsTree: grid.advancedFilteringExpressionsTree,
- logic: grid.filteringLogic
- };
+ private prepareGridData(grid: IgxGridComponent, options: IgxExporterOptionsBase, hasFiltering: boolean, hasSorting: boolean) {
+ const groupedGridGroupingState: IGroupingState = {
+ expressions: grid.groupingExpressions,
+ expansion: grid.groupingExpansionState,
+ defaultExpanded: grid.groupsExpanded,
+ };
- if (this._isTreeGrid) {
- this.flatRecords = [];
- filteringState.strategy = (grid.filterStrategy) ? grid.filterStrategy : new TreeGridFilteringStrategy();
- rootRecords = filteringState.strategy.filter(rootRecords,
- filteringState.expressionsTree, filteringState.advancedExpressionsTree);
- this.prepareHierarchicalData(rootRecords);
- data = this.flatRecords;
+ const hasGrouping = grid.groupingExpressions &&
+ grid.groupingExpressions.length > 0;
+
+ const skipOperations =
+ (!hasFiltering || !options.ignoreFiltering) &&
+ (!hasSorting || !options.ignoreSorting) &&
+ (!hasGrouping || !options.ignoreGrouping);
+
+ if (skipOperations) {
+ if (hasGrouping) {
+ this.addGroupedData(grid, grid.groupsRecords, groupedGridGroupingState);
} else {
+ this.addFlatData(grid.filteredSortedData);
+ }
+ } else {
+ let gridData = grid.data;
+
+ if (hasFiltering && !options.ignoreFiltering) {
+ const filteringState: IFilteringState = {
+ expressionsTree: grid.filteringExpressionsTree,
+ advancedExpressionsTree: grid.advancedFilteringExpressionsTree,
+ };
filteringState.strategy = grid.filterStrategy;
- data = DataUtil.filter(data, filteringState, grid);
+ gridData = DataUtil.filter(gridData, filteringState, grid);
}
- }
- if (grid.sortingExpressions &&
- grid.sortingExpressions.length > 0 &&
- !options.ignoreSorting) {
- this._sort = cloneValue(grid.sortingExpressions[0]);
+ if (hasSorting && !options.ignoreSorting) {
+ // TODO: We should drop support for this since in a grouped grid it doesn't make sense
+ // this._sort = !isGroupedGrid ?
+ // cloneValue(grid.sortingExpressions[0]) :
+ // grid.sortingExpressions.length > 1 ?
+ // cloneValue(grid.sortingExpressions[1]) :
+ // cloneValue(grid.sortingExpressions[0]);
- if (this._isTreeGrid) {
- this.flatRecords = [];
- rootRecords = DataUtil.treeGridSort(rootRecords, grid.sortingExpressions, grid.sortStrategy);
- this.prepareHierarchicalData(rootRecords);
- data = this.flatRecords;
+ gridData = DataUtil.sort(gridData, grid.sortingExpressions, grid.sortStrategy, grid);
+ }
+
+ if (hasGrouping && !options.ignoreGrouping) {
+ const groupsRecords = [];
+ DataUtil.group(cloneArray(gridData), groupedGridGroupingState, grid, groupsRecords);
+ gridData = groupsRecords;
+ }
+
+ if (hasGrouping && !options.ignoreGrouping) {
+ this.addGroupedData(grid, gridData, groupedGridGroupingState);
} else {
- data = DataUtil.sort(data, grid.sortingExpressions, grid.sortStrategy, grid);
+ this.addFlatData(gridData);
}
}
+ }
+
+ private prepareTreeGridData(grid: IgxTreeGridComponent, options: IgxExporterOptionsBase, hasFiltering: boolean, hasSorting: boolean) {
+ const skipOperations =
+ (!hasFiltering || !options.ignoreFiltering) &&
+ (!hasSorting || !options.ignoreSorting);
+
+ if (skipOperations) {
+ this.addTreeGridData(grid.processedRootRecords);
+ } else {
+ let gridData = grid.rootRecords;
+
+ if (hasFiltering && !options.ignoreFiltering) {
+ const filteringState: IFilteringState = {
+ expressionsTree: grid.filteringExpressionsTree,
+ advancedExpressionsTree: grid.advancedFilteringExpressionsTree,
+ };
- return data;
+ filteringState.strategy = (grid.filterStrategy) ? grid.filterStrategy : new TreeGridFilteringStrategy();
+
+ gridData = filteringState.strategy
+ .filter(gridData, filteringState.expressionsTree, filteringState.advancedExpressionsTree);
+ }
+
+ if (hasSorting && !options.ignoreSorting) {
+ this._sort = cloneValue(grid.sortingExpressions[0]);
+
+ gridData = DataUtil.treeGridSort(gridData, grid.sortingExpressions, grid.sortStrategy);
+ }
+
+ this.addTreeGridData(gridData);
+ }
}
- private prepareHierarchicalData(records: ITreeGridRecord[]) {
+ private addTreeGridData(records: ITreeGridRecord[], parentExpanded: boolean = true) {
if (!records) {
return;
}
- for (const hierarchicalRecord of records) {
+
+ for (const record of records) {
+ const hierarchicalRecord: IExportRecord = {
+ data: record.data,
+ level: record.level,
+ hidden: !parentExpanded,
+ type: ExportRecordType.TreeGridRecord
+ };
this.flatRecords.push(hierarchicalRecord);
- this.prepareHierarchicalData(hierarchicalRecord.children);
+ this.addTreeGridData(record.children, parentExpanded && record.expanded);
+ }
+ }
+
+ private addFlatData(records: any) {
+ if (!records) {
+ return;
+ }
+ for (const record of records) {
+ const data: IExportRecord = {
+ data: record,
+ type: ExportRecordType.DataRecord,
+ level: 0
+ };
+
+ this.flatRecords.push(data);
+ }
+ }
+
+ private addGroupedData(grid: IgxGridComponent, records: IGroupByRecord[],
+ groupingState: IGroupingState, parentExpanded: boolean = true) {
+ if (!records) {
+ return;
+ }
+
+ const firstCol = this._columnList[0].field;
+
+ for (const record of records) {
+ let recordVal = record.value;
+
+ const hierarchy = getHierarchy(record);
+ const expandState: IGroupByExpandState = groupingState.expansion.find((s) =>
+ isHierarchyMatch(s.hierarchy || [{ fieldName: record.expression.fieldName, value: recordVal }], hierarchy));
+ const expanded = expandState ? expandState.expanded : groupingState.defaultExpanded;
+
+ const isDate = recordVal instanceof Date;
+
+ if (isDate) {
+ const timeZoneOffset = recordVal.getTimezoneOffset() * 60000;
+ const isoString = (new Date(recordVal - timeZoneOffset)).toISOString();
+ const pipe = new DatePipe(grid.locale);
+ recordVal = pipe.transform(isoString);
+ }
+
+ const groupExpressionName = record.column && record.column.header ?
+ record.column.header :
+ record.expression.fieldName;
+
+ recordVal = recordVal !== null ? recordVal : '';
+
+ const groupExpression: IExportRecord = {
+ data: { [firstCol]: `${groupExpressionName}: ${recordVal} (${record.records.length})` },
+ level: record.level,
+ hidden: !parentExpanded,
+ type: ExportRecordType.GroupedRecord,
+ };
+
+ this.flatRecords.push(groupExpression);
+
+ if (record.groups.length > 0) {
+ this.addGroupedData(grid, record.groups, groupingState, expanded && parentExpanded);
+ } else {
+ const rowRecords = record.records;
+
+ for (const rowRecord of rowRecords) {
+ const currentRecord: IExportRecord = {
+ data: rowRecord,
+ level: record.level + 1,
+ hidden: !(expanded && parentExpanded),
+ type: ExportRecordType.DataRecord
+ };
+
+ this.flatRecords.push(currentRecord);
+ }
+ }
}
}
diff --git a/projects/igniteui-angular/src/lib/services/exporter-common/exporter-options-base.ts b/projects/igniteui-angular/src/lib/services/exporter-common/exporter-options-base.ts
index be0392e7053..60d3f731449 100644
--- a/projects/igniteui-angular/src/lib/services/exporter-common/exporter-options-base.ts
+++ b/projects/igniteui-angular/src/lib/services/exporter-common/exporter-options-base.ts
@@ -34,6 +34,8 @@ export abstract class IgxExporterOptionsBase {
/**
* Specifies whether the exported data should be sorted as in the provided IgxGrid.
+ * When you export grouped data, setting ignoreSorting to true will cause
+ * the grouping to fail because it relies on the sorting of the records.
* ```typescript
* let ignoreSorting = this.exportOptions.ignoreSorting;
* this.exportOptions.ignoreSorting = true;
@@ -43,6 +45,17 @@ export abstract class IgxExporterOptionsBase {
*/
public ignoreSorting = false;
+ /**
+ * Specifies whether the exported data should be grouped as in the provided IgxGrid.
+ * ```typescript
+ * let ignoreGrouping = this.exportOptions.ignoreGrouping;
+ * this.exportOptions.ignoreGrouping = true;
+ * ```
+ *
+ * @memberof IgxExporterOptionsBase
+ */
+ public ignoreGrouping = false;
+
private _fileName: string;
constructor(fileName: string, protected _fileExtension: string) {
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 0bdcec18451..886e4ea9c49 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
@@ -2316,3 +2316,10 @@ export class IgxAddRowComponent implements OnInit {
/* eslint-enable max-len */
}
}
+
+@Component({
+ template: GridTemplateStrings.declareGrid(` [hideGroupedColumns]="true"`, '', ColumnDefinitions.exportGroupedDataColumns)
+})
+export class GridExportGroupedDataComponent extends BasicGridComponent {
+ data = SampleTestData.exportGroupedDataColumns();
+}
diff --git a/projects/igniteui-angular/src/lib/test-utils/sample-test-data.spec.ts b/projects/igniteui-angular/src/lib/test-utils/sample-test-data.spec.ts
index d19dbe3ebb9..47d43b872d7 100644
--- a/projects/igniteui-angular/src/lib/test-utils/sample-test-data.spec.ts
+++ b/projects/igniteui-angular/src/lib/test-utils/sample-test-data.spec.ts
@@ -1576,6 +1576,17 @@ export class SampleTestData {
}
]);
+ /* Data fields: Price: number, Brand: string, Model: string, Edition: string */
+ public static exportGroupedDataColumns = () => ([
+ { Price: 75000, Brand: 'Tesla', Model: 'Model S', Edition: 'Sport' },
+ { Price: 100000, Brand: 'Tesla', Model: 'Roadster', Edition: 'Performance' },
+ { Price: 65000, Brand: 'Tesla', Model: 'Model S', Edition: 'Base' },
+ { Price: 150000, Brand: 'BMW', Model: 'M5', Edition: 'Competition' },
+ { Price: 100000, Brand: 'BMW', Model: 'M5', Edition: 'Performance' },
+ { Price: 75000, Brand: 'VW', Model: 'Arteon', Edition: 'Business' },
+ { Price: 65000, Brand: 'VW', Model: 'Passat', Edition: 'Business' },
+ { Price: 100000, Brand: 'VW', Model: 'Arteon', Edition: 'R Line' },
+ ]);
/**
* Generates simple array of primitve values
diff --git a/projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts b/projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts
index 68fa6c3405c..f014689ee2f 100644
--- a/projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts
+++ b/projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts
@@ -454,6 +454,13 @@ export class ColumnDefinitions {
-
- ![]()
-
-
- ![]()
- ![]()
-
-
-
-
diff --git a/src/app/grid-auto-size/grid-auto-size.sample.html b/src/app/grid-auto-size/grid-auto-size.sample.html
index 7982446268a..ee7f55cf21e 100644
--- a/src/app/grid-auto-size/grid-auto-size.sample.html
+++ b/src/app/grid-auto-size/grid-auto-size.sample.html
@@ -24,7 +24,6 @@
#grid1
[data]="data"
[displayDensity]="density"
- [showToolbar]="true" [columnHiding]="true"
[allowFiltering]="true"
[rowSelection]="selectionMode"
[filterMode]="'excelStyleFilter'"
diff --git a/src/app/grid-column-actions/grid-column-actions.sample.html b/src/app/grid-column-actions/grid-column-actions.sample.html
index 912e909dccb..80b12304a00 100644
--- a/src/app/grid-column-actions/grid-column-actions.sample.html
+++ b/src/app/grid-column-actions/grid-column-actions.sample.html
@@ -1,5 +1,5 @@
Desktop
-
+
![]()
@@ -45,28 +45,7 @@
- Desktop
-
+
@@ -15,7 +15,6 @@
diff --git a/src/app/grid-column-groups/grid-column-groups.sample.html b/src/app/grid-column-groups/grid-column-groups.sample.html
index a2893e13878..bcd4a951f5b 100644
--- a/src/app/grid-column-groups/grid-column-groups.sample.html
+++ b/src/app/grid-column-groups/grid-column-groups.sample.html
@@ -2,7 +2,14 @@