igniteui-angular-sovn/src/lib/test-utils/grid-samples.spec.ts

Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps

import { Component, TemplateRef, ViewChild, Input, AfterViewInit, QueryList, ViewChildren, OnInit } from '@angular/core';
import { NgFor, NgIf } from '@angular/common';

import { IgxDateSummaryOperand, IgxNumberSummaryOperand, IgxSummaryResult } from '../grids/summaries/grid-summary';
import { IGridCellEventArgs } from '../grids/common/events';
import {
    BasicGridComponent, BasicGridSearchComponent, GridAutoGenerateComponent,
    GridWithSizeComponent, PagingComponent
} from './grid-base-components.spec';
import { IGridSelection } from './grid-interfaces.spec';
import { SampleTestData, DataParent } from './sample-test-data.spec';
import { ColumnDefinitions, GridTemplateStrings, EventSubscriptions, TemplateDefinitions, ExternalTemplateDefinitions } from './template-strings.spec';
import { IgxColumnComponent } from '../grids/columns/column.component';
import { IgxFilteringOperand, IgxNumberFilteringOperand } from '../data-operations/filtering-condition';
import { IFilteringExpressionsTree, FilteringExpressionsTree } from '../data-operations/filtering-expressions-tree';
import { FilteringStrategy, IgxFilterItem } from '../data-operations/filtering-strategy';
import { IgxExcelStyleHeaderIconDirective, IgxGridComponent, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective } from '../grids/grid/public_api';
import { IgxRowAddTextDirective, IgxRowEditActionsDirective, IgxRowEditTabStopDirective, IgxRowEditTemplateDirective, IgxRowEditTextDirective } from '../grids/grid.rowEdit.directive';
import { IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective, IgxGridExcelStyleFilteringComponent } from '../grids/filtering/excel-style/excel-style-filtering.component';
import { FilteringLogic } from '../data-operations/filtering-expression.interface';
import { ISortingStrategy, SortingDirection } from '../data-operations/sorting-strategy';
import { IgxActionStripComponent } from '../action-strip/action-strip.component';
import { IDataCloneStrategy } from '../data-operations/data-clone-strategy';
import { IgxColumnLayoutComponent } from '../grids/columns/column-layout.component';
import { IgxPaginatorComponent } from '../paginator/paginator.component';
import { IgxColumnGroupComponent } from '../grids/columns/column-group.component';
import { IgxIconComponent } from '../icon/icon.component';
import { IgxExcelStyleMovingComponent } from '../grids/filtering/excel-style/excel-style-moving.component';
import { IgxExcelStylePinningComponent } from '../grids/filtering/excel-style/excel-style-pinning.component';
import { IgxExcelStyleSearchComponent } from '../grids/filtering/excel-style/excel-style-search.component';
import { IgxExcelStyleSelectingComponent } from '../grids/filtering/excel-style/excel-style-selecting.component';
import { IgxInputGroupComponent } from '../input-group/input-group.component';
import { IgxInputDirective, IgxPrefixDirective, IgxSuffixDirective } from '../input-group/public_api';
import { IgxGridToolbarComponent } from '../grids/toolbar/grid-toolbar.component';
import { IgxCheckboxComponent } from '../checkbox/checkbox.component';
import { IgxGridToolbarActionsComponent } from '../grids/toolbar/common';
import { IgxGridToolbarHidingComponent } from '../grids/toolbar/grid-toolbar-hiding.component';
import { IgxButtonDirective } from '../directives/button/button.directive';
import { IgxGridEditingActionsComponent } from '../action-strip/grid-actions/grid-editing-actions.component';
import { IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxCollapsibleIndicatorTemplateDirective, IgxFilterCellTemplateDirective } from '../grids/columns/templates.directive';
import { IgxGroupByRowSelectorDirective, IgxHeadSelectorDirective, IgxRowSelectorDirective } from '../grids/selection/row-selectors';
import { CellType, ColumnType, IgxAdvancedFilteringDialogComponent } from '../grids/public_api';

@Component({
    template: GridTemplateStrings.declareGrid('', '',
        `<igx-column field="ID" [hidden]="true"></igx-column>`),
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent]
})
export class ColumnHiddenFromMarkupComponent extends BasicGridComponent {
    public override data = SampleTestData.personIDNameData();
}

@Component({
    template: `
        <igx-grid #grid1 [data]="data" [width]="'900px'" [height]="'600px'" [moving]="true">
            <igx-column *ngFor="let c of columns" [field]="c.field"
                [header]="c.field"
                [width]="c.width"
                [editable]="true"
                [pinned]="c.pinned"
                [dataType]="c.type">
            </igx-column>
        </igx-grid>
    `,
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent, NgFor]
})
export class GridAddColumnComponent extends BasicGridComponent implements OnInit {
    public columns: Array<any>;
    public override data = SampleTestData.contactInfoDataFull();
    public ngOnInit(): void {
        this.columns = [
            { field: 'ID', width: 150, type: 'string', pinned: true },
            { field: 'CompanyName', width: 150, type: 'string' },
            { field: 'ContactName', width: 150, type: 'string' },
            { field: 'ContactTitle', width: 150, type: 'string' },
            { field: 'Address', width: 150, type: 'string' }];
    }
}

@Component({
    template: GridTemplateStrings.declareGrid('', '',
        ColumnDefinitions.idNameFormatter),
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent]
})
export class ColumnCellFormatterComponent extends BasicGridComponent {
    public override data = SampleTestData.personIDNameData();

    public multiplier(value: number): string {
        return `${value * value}`;
    }

    public containsY(_: number, data: { ID: number; Name: string }) {
        return data.Name.includes('y') ? 'true' : 'false';
    }

    public boolFormatter(value: boolean): string {
        return value ? 'check' : 'close';
    }
}

@Component({
    template: GridTemplateStrings.declareGrid(` height="500px"`, '',
        ColumnDefinitions.productFilterable),
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent]
})
export class FilteringComponent extends BasicGridComponent {
    public override data = SampleTestData.productInfoData();
}

@Component({
    template: GridTemplateStrings.declareGrid(
        ` [width]="width" [height]="height" [rowSelection]="'multiple'" [primaryKey]="'ProductID'" [selectedRows]="selectedRows"`,
        '', ColumnDefinitions.productBasicNumberID, '', '<igx-paginator *ngIf="paging"></igx-paginator>'),
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent, IgxPaginatorComponent, NgIf]
})
export class RowSelectionComponent extends BasicGridComponent {
    public override data = SampleTestData.foodProductDataExtended();
    public width = '800px';
    public height = '600px';
    public selectedRows = [];
    public paging = false;
}

@Component({
    template: GridTemplateStrings.declareGrid(
        ` [width]="width" [height]="height" [rowSelection]="'single'" [primaryKey]="'ProductID'"`,
        '', ColumnDefinitions.productBasicNumberID),
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent]
})
export class SingleRowSelectionComponent extends BasicGridComponent {
    public override data = SampleTestData.foodProductDataExtended();
    public width = '800px';
    public height = '600px';
}

@Component({
    template: GridTemplateStrings.declareGrid(
        ` [width]="width" [height]="height" [rowSelection]="'multiple'"`,
        '',
        ColumnDefinitions.idFirstLastNameSortable),
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent]
})
export class RowSelectionWithoutPrimaryKeyComponent extends BasicGridComponent {
    public override data = SampleTestData.personIDNameRegionData();
    public width = '800px';
    public height = '600px';
}

@Component({
    template: GridTemplateStrings.declareGrid(
        ` [primaryKey]="'ID'"
          [width]="'900px'"
          [height]="'900px'"
          [columnWidth]="'200px'"`,
        '', ColumnDefinitions.idNameJobTitleCompany),
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent]
})
export class NoScrollsComponent extends GridWithSizeComponent {
    public override data = SampleTestData.personIDNameJobCompany();
}

class DealsSummaryMinMax extends IgxNumberSummaryOperand {
    constructor() {
        super();
    }

    public override operate(summaries?: any[]): IgxSummaryResult[] {
        const result = super.operate(summaries).filter((obj) => {
            if (obj.key === 'min' || obj.key === 'max') {
                return obj;
            }
        });
        return result;
    }
}
@Component({
    template: GridTemplateStrings.declareGrid(
        `  [primaryKey]="'ProductID'" [height]="null" [allowFiltering]="true"`,
        '', ColumnDefinitions.productDefaultSummaries),
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent]
})
export class SummaryColumnComponent extends BasicGridComponent {
    public override data = SampleTestData.foodProductData();
    public hasSummary = true;

    public numberSummary = new IgxNumberSummaryOperand();
    public dateSummary = new IgxDateSummaryOperand();
    public dealsSummaryMinMax = DealsSummaryMinMax;
}

@Component({
    template: GridTemplateStrings.declareGrid('', '', ColumnDefinitions.productBasic, '', '<igx-paginator *ngIf="paging"></igx-paginator>'),
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent, IgxPaginatorComponent, NgIf]
})
export class ProductsComponent extends BasicGridComponent {
    public override data = SampleTestData.foodProductData();

    public paging = false;

    @ViewChild(IgxPaginatorComponent)
    public paginator: IgxPaginatorComponent;
}

@Component({
    template: GridTemplateStrings.declareBasicGridWithColumns(ColumnDefinitions.idFirstLastNameSortable),
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent]
})
export class GridDeclaredColumnsComponent extends BasicGridComponent {
    @ViewChild('nameColumn', { static: true }) public nameColumn;

    public override data = SampleTestData.personIDNameRegionData();
}

@Component({
    template: GridTemplateStrings.declareGrid(` [autoGenerate]="autoGenerate" [height]="height" [width]="width"`,
        `${EventSubscriptions.columnInit}${EventSubscriptions.selected}`, ''),
    standalone: true,
    imports: [IgxGridComponent]
})
export class PinOnInitAndSelectionComponent extends GridWithSizeComponent {
    public override data = SampleTestData.contactInfoDataFull();
    public override width = '800px';
    public override height = '300px';

    public selectedCell;
    public columnInit(column) {
        if (column.field === 'CompanyName' || column.field === 'ContactName') {
            column.pinned = true;
        }
        column.width = '200px';
    }

    public cellSelected(event) {
        this.selectedCell = event.cell;
    }
}

@Component({
    template: `
        <igx-grid
            [width]='"800px"'
            [height]='"500px"'
            [data]="data"
            [autoGenerate]="false">
            <igx-column-layout *ngFor='let group of colGroups' [pinned]='group.pinned'>
                <igx-column *ngFor='let col of group.columns'
                [rowStart]="col.rowStart" [colStart]="col.colStart"
                [colEnd]="col.colEnd" [rowEnd]="col.rowEnd" [field]='col.field'></igx-column>
            </igx-column-layout>
        </igx-grid>
    `,
    standalone: true,
    imports: [IgxGridComponent, IgxColumnLayoutComponent, IgxColumnComponent, NgFor]
})
export class GridPinningMRLComponent extends PinOnInitAndSelectionComponent {
    public colGroups = [
        {
            field: 'group1',
            group: 'group1',
            pinned: true,
            columns: [
                { field: 'ID', rowStart: 1, colStart: 1 },
                { field: 'CompanyName', rowStart: 1, colStart: 2 },
                { field: 'ContactName', rowStart: 1, colStart: 3 },
                { field: 'ContactTitle', rowStart: 2, colStart: 1, rowEnd: 4, colEnd: 4 },
            ]
        },
        {
            field: 'group2',
            group: 'group2',
            columns: [
                { field: 'Country', rowStart: 1, colStart: 1, colEnd: 4, rowEnd: 3 },
                { field: 'Region', rowStart: 3, colStart: 1 },
                { field: 'PostalCode', rowStart: 3, colStart: 2 },
                { field: 'Fax', rowStart: 3, colStart: 3 }
            ]
        }
    ];
}

@Component({
    template: GridTemplateStrings.declareGrid(` [height]="height" [width]="width"`,
        `${EventSubscriptions.selected}${EventSubscriptions.columnPin}`,
        ColumnDefinitions.generatedWithWidth),
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent, NgFor]
})
export class PinningComponent extends GridWithSizeComponent
    implements IGridSelection {

    public column: IgxColumnComponent;
    public columns = [
        { field: 'ID', width: 100 },
        { field: 'CompanyName', width: 300 },
        { field: 'ContactName', width: 200 },
        { field: 'ContactTitle', width: 200 },
        { field: 'Address', width: 300 },
        { field: 'City', width: 100 },
        { field: 'Region', width: 100 },
        { field: 'PostalCode', width: 100 },
        { field: 'Phone', width: 150 },
        { field: 'Fax', width: 150 }
    ];

    public override data = SampleTestData.contactMariaAndersData();
    public override width = '800px';
    public override height = '300px';

    public selectedCell: CellType;
    public cellSelected(event: IGridCellEventArgs) {
        this.selectedCell = event.cell;
    }

    public columnPinning($event) {
        $event.insertAtIndex = 0;
    }
}

@Component({
    template: GridTemplateStrings.declareBasicGridWithColumns(ColumnDefinitions.productFilterSortPin),
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent]
})
export class GridFeaturesComponent extends BasicGridComponent {
    public override data = SampleTestData.productInfoData();

}

@Component({
    template: GridTemplateStrings.declareGrid(
        ` columnWidth="200" `,
        '', ColumnDefinitions.idNameJobHireDate, '', '<igx-paginator *ngIf="paging"></igx-paginator>'),
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent, IgxPaginatorComponent, NgIf]
})
export class ScrollableGridSearchComponent extends BasicGridSearchComponent {
    public override data = SampleTestData.generateFromData(SampleTestData.personJobDataFull(), 30);
    public override paging = false;
}

@Component({
    template: GridTemplateStrings.declareGrid(
        ` columnWidth="200" [height]="null" `,
        '', ColumnDefinitions.idNameJobTitleCompany, '', '<igx-paginator *ngIf="paging"></igx-paginator>'),
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent, IgxPaginatorComponent, NgIf]
})
export class GroupableGridSearchComponent extends ScrollableGridSearchComponent {
    public override data = SampleTestData.personIDNameJobCompany();
    public override paging = false;
}

@Component({
    template: GridTemplateStrings.declareGrid(
        ` [height]="height" [width]="width" [columnWidth]="columnWidth" `,
        '', ColumnDefinitions.productAllColumnFeatures),
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent]
})
export class GridAllFeaturesComponent extends GridWithSizeComponent {
    @Input()
    public columnWidth = 200;

}

@Component({
    template: GridTemplateStrings.declareBasicGridWithColumns(ColumnDefinitions.nameJobTitleId),
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent]
})
export class ReorderedColumnsComponent extends BasicGridComponent {
    public override data = SampleTestData.personJobData();
}

@Component({
    template: GridTemplateStrings.declareBasicGridWithColumns(ColumnDefinitions.simpleDatePercentColumns),
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent]
})
export class GridUserMeetingDataComponent extends BasicGridComponent {
    public override data = SampleTestData.personMeetingData();
}

@Component({
    template: GridTemplateStrings.declareBasicGridWithColumns(ColumnDefinitions.idNameJobTitleEditable),
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent]
})
export class GridIDNameJobTitleComponent extends PagingComponent {
    public override data = SampleTestData.personJobDataFull();
    public override width = '100%';
    public override height = '100%';
}

@Component({
    template: GridTemplateStrings.declareBasicGridWithColumns(ColumnDefinitions.idNameJobHoursHireDatePerformance),
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent]
})
export class GridIDNameJobTitleHireDataPerformanceComponent extends BasicGridComponent {
    public override data = SampleTestData.personJobHoursDataPerformance();
}

@Component({
    template: GridTemplateStrings.declareBasicGridWithColumns(ColumnDefinitions.hireDate),
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent]
})
export class GridHireDateComponent extends BasicGridComponent {
    public override data = SampleTestData.hireDate();
}

@Component({
    template: `<div style="margin: 50px;">
            ${GridTemplateStrings.declareGrid(
        '[height]="height" [moving]="true" [width]="width" [rowSelection]="rowSelection" [autoGenerate]="autoGenerate"',
        EventSubscriptions.columnMovingStart + EventSubscriptions.columnMoving + EventSubscriptions.columnMovingEnd,
        ColumnDefinitions.movableColumns)}</div>`,
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent]
})
export class MovableColumnsComponent extends BasicGridComponent {
    public override data = SampleTestData.personIDNameRegionData();
    public autoGenerate = false;
    public rowSelection = 'none';
    public isFilterable = false;
    public isSortable = false;
    public isResizable = false;
    public isEditable = false;
    public isHidden = false;
    public isGroupable = false;
    public width = '500px';
    public height = '300px';
    public count = 0;
    public countStart = 0;
    public countEnd = 0;
    public cancel = false;
    public source: IgxColumnComponent;
    public target: IgxColumnComponent;

    public columnMovingStarted(event) {
        this.countStart++;
        this.source = event.source;
    }

    public columnMoving(event) {
        this.count++;
        this.source = event.source;

        if (this.cancel) {
            event.cancel = true;
        }
    }

    public columnMovingEnded(event) {
        this.countEnd++;
        this.source = event.source;
        this.target = event.target;

        if (event.target.field === 'Region') {
            event.cancel = true;
        }
    }
}

@Component({
    template: GridTemplateStrings.declareGrid(`[moving]="true" height="300px" width="500px"`, '', ColumnDefinitions.movableColumns),
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent]
})
export class MovableTemplatedColumnsComponent extends BasicGridComponent {
    public override data = SampleTestData.personIDNameRegionData();
    public isFilterable = false;
    public isSortable = false;
    public isResizable = false;
}

@Component({
    template: GridTemplateStrings.declareGrid(`height="300px" width="500px" [moving]="true" [autoGenerate]="autoGenerate"`,
        EventSubscriptions.columnInit, '', '', '<igx-paginator *ngIf="paging"></igx-paginator>'),
    standalone: true,
    imports: [IgxGridComponent, IgxPaginatorComponent, NgIf]
})
export class MovableColumnsLargeComponent extends GridAutoGenerateComponent {

    public override data = SampleTestData.contactInfoDataFull();

    public width = '500px';
    public height = '400px';

    public columnInit(column: IgxColumnComponent) {
        column.sortable = true;
        column.width = '100px';
    }

    public pinColumn(name: string) {
        const col = this.grid.getColumnByName(name);
        col.pinned = !col.pinned;
    }
}

@Component({
    template: GridTemplateStrings.declareGrid(`height="800px"`, '', ColumnDefinitions.multiColHeadersColumns),
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent, IgxColumnGroupComponent, IgxCellTemplateDirective, IgxCellHeaderTemplateDirective]
})
export class MultiColumnHeadersComponent extends BasicGridComponent {
    public override data = SampleTestData.contactInfoDataFull();
    public isPinned = false;
}

@Component({
    template: GridTemplateStrings.declareGrid(`[moving]="true" height="800px" width="500px"`, '',
        ColumnDefinitions.multiColHeadersWithGroupingColumns),
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent, IgxColumnGroupComponent]
})
export class MultiColumnHeadersWithGroupingComponent extends BasicGridComponent {
    public override data = SampleTestData.contactInfoDataFull();
    public isPinned = false;
}


@Component({
    template: GridTemplateStrings.declareBasicGridWithColumns(ColumnDefinitions.nameAvatar),
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective]
})
export class GridWithAvatarComponent extends GridWithSizeComponent {
    public override data = SampleTestData.personAvatarData();
    public override height = '500px';
}


@Component({
    template: GridTemplateStrings.declareGrid(`height="1000px"  width="900px" primaryKey="ID"`, '',
        ColumnDefinitions.summariesGroupByColumns, '', '<igx-paginator *ngIf="paging"></igx-paginator>'),
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent, IgxPaginatorComponent, NgIf]
})
export class SummariesGroupByComponent extends BasicGridComponent {
    public override data = SampleTestData.employeeGroupByData();
    public calculationMode = 'rootAndChildLevels';
    public ageSummary = AgeSummary;
    public ageSummaryTest = AgeSummaryTest;
    public paging = false;
}

@Component({
    template: GridTemplateStrings.declareGrid(`height="600px"  width="900px" [batchEditing]="true" primaryKey="ID"`, '',
    ColumnDefinitions.summariesGroupByTansColumns),
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent]
})
export class SummariesGroupByTransactionsComponent extends BasicGridComponent {
    public override data = SampleTestData.employeeGroupByData();
    public calculationMode = 'rootAndChildLevels';
    public ageSummary = AgeSummary;
    public ageSummaryMinMax = DealsSummaryMinMax;
}

class AgeSummary extends IgxNumberSummaryOperand {
    constructor() {
        super();
    }

    public override operate(summaries?: any[]): IgxSummaryResult[] {
        const result = super.operate(summaries).filter((obj) => {
            if (obj.key === 'average' || obj.key === 'sum' || obj.key === 'count') {
                const summaryResult = obj.summaryResult;
                // apply formatting to float numbers
                if (Number(summaryResult) === summaryResult) {
                    obj.summaryResult = summaryResult.toLocaleString('en-us', { maximumFractionDigits: 2 });
                }
                return obj;
            }
        });
        return result;
    }
}

class AgeSummaryTest extends IgxNumberSummaryOperand {
    constructor() {
        super();
    }

    public override operate(summaries?: any[]): IgxSummaryResult[] {
        const result = super.operate(summaries);
        result.push({
            key: 'test',
            label: 'Test',
            summaryResult: summaries.filter(rec => rec > 10 && rec < 40).length
        });

        return result;
    }
}

@Component({
    template: GridTemplateStrings.declareGrid(`[height]="gridHeight" [columnWidth]="defaultWidth" [width]="gridWidth"`,
        `${EventSubscriptions.selected}`, ColumnDefinitions.generatedWithWidth),
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent, NgFor]
})
export class VirtualGridComponent extends BasicGridComponent {
    public gridWidth = '800px';
    public gridHeight = '300px';
    public defaultWidth = '200px';
    public columns = [
        { field: 'index' },
        { field: 'value' },
        { field: 'other' },
        { field: 'another' }
    ];
    public selectedCell: CellType;
    constructor() {
        super();
        this.data = this.generateData(1000);
    }
    public generateCols(numCols: number, defaultColWidth = null) {
        const cols = [];
        for (let j = 0; j < numCols; j++) {
            cols.push({
                field: j.toString(),
                width: defaultColWidth || (j % 8 < 2 ? 100 : (j % 6) * 125)
            });
        }
        return cols;
    }
    public generateData(numRows: number) {
        const data = [];
        for (let i = 0; i < numRows; i++) {
            const obj = {};
            for (let j = 0; j < this.columns.length; j++) {
                const col = this.columns[j].field;
                obj[col] = 10 * i * j;
            }
            data.push(obj);
        }
        return data;
    }
    public cellSelected(event: IGridCellEventArgs) {
        this.selectedCell = event.cell;
    }
    public scrollTop(newTop: number) {
        this.grid.verticalScrollContainer.getScroll().scrollTop = newTop;
    }
    public scrollLeft(newLeft: number) {
        this.grid.headerContainer.getScroll().scrollLeft = newLeft;
    }
}

@Component({
    template: GridTemplateStrings.declareGrid(
        ` [primaryKey]="'ID'"`,
        '', ColumnDefinitions.idNameJobHireWithTypes),
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent]
})
export class GridWithPrimaryKeyComponent extends BasicGridSearchComponent {
    public override data = SampleTestData.personJobDataFull();
}

@Component({
    template: GridTemplateStrings.declareGrid(`height="300px"  width="600px" primaryKey="ID"`, '',
        ColumnDefinitions.selectionWithScrollsColumns, '', '<igx-paginator *ngIf="paging"></igx-paginator>'),
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent, IgxPaginatorComponent, NgIf]
})
export class SelectionWithScrollsComponent extends BasicGridComponent {
    public override data = SampleTestData.employeeGroupByData();
    public paging = false;
}

@Component({
    template: GridTemplateStrings.declareGrid(`height="300px"  width="600px" primaryKey="ID" cellSelection="none"`, '',
        ColumnDefinitions.selectionWithScrollsColumns),
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent]
})
export class CellSelectionNoneComponent extends BasicGridComponent {
    public override data = SampleTestData.employeeGroupByData();
}

@Component({
    template: GridTemplateStrings.declareGrid(`height="300px"  width="600px" primaryKey="ID" cellSelection="single"`, '',
        ColumnDefinitions.selectionWithScrollsColumns),
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent]
})
export class CellSelectionSingleComponent extends BasicGridComponent {
    public override data = SampleTestData.employeeGroupByData();
}
@Component({
    template: GridTemplateStrings.declareGrid(`height="300px"  width="600px" [batchEditing]="true" primaryKey="ID"`, '',
        ColumnDefinitions.selectionWithScrollsColumns),
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent]
})
export class SelectionWithTransactionsComponent extends BasicGridComponent {
    public override data = SampleTestData.employeeGroupByData();
}

export class CustomFilter extends IgxFilteringOperand {
    private constructor() {
        super();
        this.operations = [{
            name: 'custom',
            isUnary: false,
            logic: (target: string): boolean => target === 'custom',
            iconName: 'custom'
        }];
    }
}
@Component({
    template: `<igx-grid [data]="data" height="500px" [allowFiltering]="true">
        <igx-column width="100px" [field]="'ID'" [header]="'ID'" [hasSummary]="true"
            [filterable]="false" [resizable]="resizable"></igx-column>
        <igx-column width="100px" [field]="'ProductName'" [filterable]="filterable" [resizable]="resizable" dataType="string"></igx-column>
        <igx-column width="100px" [field]="'Downloads'" [filterable]="filterable" [resizable]="resizable" dataType="number"></igx-column>
        <igx-column width="100px" [field]="'Released'" [filterable]="filterable" [resizable]="resizable" dataType="boolean"></igx-column>
        <igx-column width="100px" [field]="'ReleaseDate'" [header]="'ReleaseDate'" headerClasses="header-release-date"
            [filterable]="filterable" [resizable]="resizable" dataType="date">
        </igx-column>
        <igx-column width="100px" [field]="'ReleaseDateTime'" [header]="'ReleaseDateTime'" headerClasses="header-release-date-time"
            [filterable]="filterable" [resizable]="resizable" dataType="dateTime">
        </igx-column>
        <igx-column width="100px" [field]="'ReleaseTime'" [header]="'ReleaseTime'" headerClasses="header-release-time"
            [filterable]="filterable" [resizable]="resizable" dataType="time">
        </igx-column>
        <igx-column width="100px" [field]="'AnotherField'" [header]="'Another Field'" [filterable]="filterable"
            dataType="string" [filters]="customFilter">
        </igx-column>
    </igx-grid>`,
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent]
})
export class IgxGridFilteringComponent extends BasicGridComponent {
    public customFilter = CustomFilter.instance();
    public resizable = false;
    public filterable = true;

    public override data = SampleTestData.excelFilteringData();
    public activateFiltering(activate: boolean) {
        this.grid.allowFiltering = activate;
        this.grid.cdr.markForCheck();
    }
}

@Component({
    template: `<igx-grid [data]="data" height="500px" [allowFiltering]="true">
        <igx-column width="100px" [field]="'ID'" [header]="'ID'" [hasSummary]="true"
            [filterable]="false" [resizable]="resizable"></igx-column>
        <igx-column width="100px" [field]="'ProductName'" [filterable]="filterable" [resizable]="resizable" dataType="string"></igx-column>
        <igx-column width="100px" [field]="'Downloads'" [filterable]="filterable" [resizable]="resizable" dataType="number"></igx-column>
        <igx-column width="100px" [field]="'Released'" [filterable]="filterable" [resizable]="resizable" dataType="boolean"></igx-column>
        <igx-column width="100px" [field]="'ReleaseDate'" [header]="'ReleaseDate'" headerClasses="header-release-date"
            [filterable]="filterable" [resizable]="resizable" dataType="date">
        </igx-column>
        <igx-column width="100px" [field]="'AnotherField'" [header]="'Another Field'" [filterable]="filterable"
            dataType="string" [filters]="customFilter">
        </igx-column>
        <igx-column width="100px" [field]="'ReleaseTime'" [header]="'Release Time'" [filterable]="filterable"
            dataType="dateTime">
        </igx-column>
        <igx-column width="100px" [field]="'Revenue'" [header]="'Revenue'" [filterable]="filterable"
            dataType="currency">
        </igx-column>
    </igx-grid>`,
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent]
})
export class IgxGridDatesFilteringComponent extends BasicGridComponent {
    public customFilter = CustomFilter.instance();
    public resizable = false;
    public filterable = true;

    public override data = SampleTestData.excelFilteringData().map(rec => {
        const newRec = Object.assign({}, rec) as any;
        newRec.ReleaseDate = rec.ReleaseDate ? rec.ReleaseDate.toISOString() : null;
        return newRec;
    });
    public activateFiltering(activate: boolean) {
        this.grid.allowFiltering = activate;
        this.grid.cdr.markForCheck();
    }
}

@Component({
    template: `
    <igx-grid-excel-style-filtering #esf style="height: 700px; width: 350px">
    </igx-grid-excel-style-filtering>
    <igx-grid #grid1 [data]="data" height="500px">
        <igx-column width="100px" [field]="'ID'" [header]="'ID'" [hasSummary]="true"
            [filterable]="false" [resizable]="resizable"></igx-column>
        <igx-column width="100px" [field]="'ProductName'" [sortable]="true"
            [filterable]="filterable" [resizable]="resizable" dataType="string" [selectable]="false"></igx-column>
        <igx-column width="100px" [field]="'Downloads'" [filterable]="filterable" [resizable]="resizable" dataType="number"></igx-column>
        <igx-column width="100px" [field]="'Released'" [filterable]="filterable"
            [selectable]="false" [resizable]="resizable" dataType="boolean"></igx-column>
        <igx-column width="100px" [field]="'ReleaseDate'" [header]="'ReleaseDate'" headerClasses="header-release-date"
            [filterable]="filterable" [resizable]="resizable" dataType="date">
        </igx-column>
        <igx-column width="100px" [field]="'AnotherField'" [header]="'Another Field'" [filterable]="filterable"
            dataType="string" [filters]="customFilter">
        </igx-column>
    </igx-grid>`,
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent, IgxGridExcelStyleFilteringComponent]
})
export class IgxGridExternalESFComponent extends BasicGridComponent implements AfterViewInit {
    @ViewChild('esf', { read: IgxGridExcelStyleFilteringComponent, static: true })
    public esf: IgxGridExcelStyleFilteringComponent;

    public customFilter = CustomFilter.instance();
    public resizable = false;
    public filterable = true;

    public override data = SampleTestData.excelFilteringData();

    constructor() {
        super();
    }

    public ngAfterViewInit(): void {
        this.esf.column = this.grid.getColumnByName('ProductName');
    }
}

export class CustomFilterStrategy extends FilteringStrategy {
    constructor() {
        super();
    }

    public override findMatchByExpression(rec, expr): boolean {
        const cond = expr.condition;
        const val = this.getFieldValue(rec, expr.fieldName);
        const ignoreCase = expr.fieldName === 'JobTitle' ? false : true;
        return cond.logic(val, expr.searchVal, ignoreCase);
    }

    public override filter<T>(data: T[], expressionsTree: IFilteringExpressionsTree): T[] {
        return super.filter(data, expressionsTree, null, null);
    }

    public override getFieldValue(rec, fieldName: string): any {
        return fieldName === 'Name' ? rec[fieldName]['FirstName'] : rec[fieldName];
    }
}

@Component({
    template: `<igx-grid [data]="data" height="500px" width="600px" [allowFiltering]="true">
        <igx-column [field]="'ID'" [header]="'ID'" [filterable]="false"></igx-column>
        <igx-column width="100px" [field]="'Name'" [filterable]="filterable">
            <ng-template igxCell let-val>
                <span>{{val.FirstName}}</span>
            </ng-template>
        </igx-column>
        <igx-column [field]="'JobTitle'" [filterable]="filterable" ></igx-column>
        <igx-column [field]="'Company'" [filterable]="filterable" ></igx-column>
    </igx-grid>`,
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent]
})
export class CustomFilteringStrategyComponent extends BasicGridComponent {
    public strategy = new CustomFilterStrategy();
    public filterable = true;

    public override data = SampleTestData.personNameObjectJobCompany();
}


export class LoadOnDemandFilterStrategy extends FilteringStrategy {
    public override getFilterItems(column: ColumnType, tree: IFilteringExpressionsTree): Promise<IgxFilterItem[]> {
        return new Promise(resolve => setTimeout(() =>
            resolve(super.getFilterItems(column, tree)), 1000));
    }
}

@Component({
    template: `<igx-grid [data]="data" height="500px" [allowFiltering]="true"
                         [filterMode]="'excelStyleFilter'" [uniqueColumnValuesStrategy]="columnValuesStrategy">
        <igx-column width="100px" [field]="'ID'"></igx-column>
        <igx-column width="100px" [field]="'ProductName'" dataType="string"></igx-column>
        <igx-column width="100px" [field]="'Downloads'" dataType="number"></igx-column>
        <igx-column width="100px" [field]="'Released'" dataType="boolean"></igx-column>
        <igx-column width="100px" [field]="'ReleaseDate'" dataType="date">
        </igx-column>
    </igx-grid>`,
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent]
})
export class IgxGridFilteringESFLoadOnDemandComponent extends BasicGridComponent {
    public override data = SampleTestData.excelFilteringData();
    public doneCallbackCounter = 0;

    private _filteringStrategy = new FilteringStrategy();

    public columnValuesStrategy = (column: IgxColumnComponent,
        columnExprTree: IFilteringExpressionsTree,
        done: (uniqueValues: any[]) => void) => {
        setTimeout(() => {
            const filteredData = this._filteringStrategy.filter(this.data, columnExprTree, null, null);
            const columnValues = filteredData.map(record => record[column.field]);
            done(columnValues);
            this.doneCallbackCounter++;
        }, 1000);
    };
}

@Component({
    template: `<igx-grid [data]="data" height="500px" [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [moving]="true">
        <igx-column width="100px" [field]="'ID'" [header]="'ID'" [hasSummary]="true"
            [filterable]="false" [resizable]="resizable" [sortable]="true"></igx-column>
        <igx-column width="100px" [field]="'ProductName'" [filterable]="filterable" [resizable]="resizable" dataType="string"
            [sortable]="true"></igx-column>
        <igx-column width="100px" [field]="'Downloads'" [filterable]="filterable" [resizable]="resizable" dataType="number"
            [sortable]="true"></igx-column>
        <igx-column width="100px" [field]="'Released'" [filterable]="filterable" [resizable]="resizable" dataType="boolean"
            [sortable]="true"></igx-column>
        <igx-column width="100px" [field]="'ReleaseDate'" [header]="'ReleaseDate'" headerClasses="header-release-date"
            [filterable]="filterable" [resizable]="resizable" dataType="date" [sortable]="true">
        </igx-column>
        <igx-column width="100px" [field]="'AnotherField'" [header]="'Another Field'" [filterable]="filterable"
            dataType="string" [filters]="customFilter" [sortable]="true">
        </igx-column>

        <igx-grid-excel-style-filtering [minHeight]="'0px'" [maxHeight]="'500px'">
            <igx-excel-style-column-operations>Column Operations Template</igx-excel-style-column-operations>
            <igx-excel-style-filter-operations>Filter Operations Template</igx-excel-style-filter-operations>
        </igx-grid-excel-style-filtering>
    </igx-grid>`,
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent, IgxGridExcelStyleFilteringComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective]
})
export class IgxGridFilteringESFEmptyTemplatesComponent extends BasicGridComponent {
    public customFilter = CustomFilter.instance();
    public resizable = false;
    public filterable = true;
    public override data = SampleTestData.excelFilteringData();
}

@Component({
    template: `<igx-grid [data]="data" height="500px" [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [moving]="true">
        <igx-column width="100px" [field]="'ID'" [header]="'ID'" [hasSummary]="true"
            [filterable]="false" [resizable]="resizable" [sortable]="true"></igx-column>
        <igx-column width="100px" [field]="'ProductName'" [filterable]="filterable" [resizable]="resizable" dataType="string"
            [sortable]="true"></igx-column>
        <igx-column width="100px" [field]="'Downloads'" [filterable]="filterable" [resizable]="resizable" dataType="number"
            [sortable]="true"></igx-column>
        <igx-column width="100px" [field]="'Released'" [filterable]="filterable" [resizable]="resizable" dataType="boolean"
            [sortable]="true"></igx-column>
        <igx-column width="100px" [field]="'ReleaseDate'" [header]="'ReleaseDate'" headerClasses="header-release-date"
            [filterable]="filterable" [resizable]="resizable" dataType="date" [sortable]="true">
        </igx-column>
        <igx-column width="100px" [field]="'AnotherField'" [header]="'Another Field'" [filterable]="filterable"
            dataType="string" [filters]="customFilter" [sortable]="true">
        </igx-column>

        <ng-template igxExcelStyleHeaderIcon>
            <igx-icon>filter_alt</igx-icon>
        </ng-template>

        <igx-grid-excel-style-filtering [minHeight]="'0px'" [maxHeight]="'500px'">
            <igx-excel-style-column-operations>
                <igx-excel-style-moving></igx-excel-style-moving>
                <igx-excel-style-pinning></igx-excel-style-pinning>
            </igx-excel-style-column-operations>
            <igx-excel-style-filter-operations>
                <igx-excel-style-search></igx-excel-style-search>
            </igx-excel-style-filter-operations>
        </igx-grid-excel-style-filtering>
    </igx-grid>
    <ng-template #template igxExcelStyleHeaderIcon>
            <igx-icon>search</igx-icon>
    </ng-template>
    `,
    standalone: true,
    imports: [
        IgxGridComponent,
        IgxColumnComponent,
        IgxGridExcelStyleFilteringComponent,
        IgxExcelStyleColumnOperationsTemplateDirective,
        IgxExcelStyleFilterOperationsTemplateDirective,
        IgxIconComponent,
        IgxExcelStyleMovingComponent,
        IgxExcelStylePinningComponent,
        IgxExcelStyleSearchComponent,
        IgxExcelStyleHeaderIconDirective
    ]
})
export class IgxGridFilteringESFTemplatesComponent extends BasicGridComponent {
    public customFilter = CustomFilter.instance();
    public resizable = false;
    public filterable = true;
    public override data = SampleTestData.excelFilteringData();
    @ViewChild('template', {read: TemplateRef })
    public customExcelHeaderIcon: TemplateRef<any>;
}

@Component({
    template: `
    <igx-grid-excel-style-filtering #esf style="height: 700px; width: 350px">
        <igx-excel-style-column-operations>
            <igx-excel-style-selecting></igx-excel-style-selecting>
        </igx-excel-style-column-operations>
        <igx-excel-style-filter-operations>Filter Operations Template</igx-excel-style-filter-operations>
    </igx-grid-excel-style-filtering>
    <igx-grid #grid1 [data]="data" height="500px">
        <igx-column width="100px" [field]="'ID'" [header]="'ID'" [hasSummary]="true"
            [filterable]="false" [resizable]="resizable"></igx-column>
        <igx-column width="100px" [field]="'ProductName'" [sortable]="true"
            [filterable]="filterable" [resizable]="resizable" dataType="string" [selectable]="false"></igx-column>
        <igx-column width="100px" [field]="'Downloads'" [filterable]="filterable" [resizable]="resizable" dataType="number"></igx-column>
        <igx-column width="100px" [field]="'Released'" [filterable]="filterable"
            [selectable]="false" [resizable]="resizable" dataType="boolean"></igx-column>
        <igx-column width="100px" [field]="'ReleaseDate'" [header]="'ReleaseDate'" headerClasses="header-release-date"
            [filterable]="filterable" [resizable]="resizable" dataType="date">
        </igx-column>
        <igx-column width="100px" [field]="'AnotherField'" [header]="'Another Field'" [filterable]="filterable"
            dataType="string" [filters]="customFilter">
        </igx-column>
    </igx-grid>`,
    standalone: true,
    imports: [
        IgxGridComponent,
        IgxColumnComponent,
        IgxGridExcelStyleFilteringComponent,
        IgxExcelStyleColumnOperationsTemplateDirective,
        IgxExcelStyleFilterOperationsTemplateDirective,
        IgxExcelStyleSelectingComponent
    ]
})
export class IgxGridExternalESFTemplateComponent extends BasicGridComponent implements OnInit {
    @ViewChild('esf', { read: IgxGridExcelStyleFilteringComponent, static: true })
    public esf: IgxGridExcelStyleFilteringComponent;

    public customFilter = CustomFilter.instance();
    public resizable = false;
    public filterable = true;

    public override data = SampleTestData.excelFilteringData();

    constructor() {
        super();
    }

    public ngOnInit(): void {
        this.esf.column = this.grid.getColumnByName('Downloads');
    }
}

@Component({
    template: `<igx-grid [data]="data" height="500px" [allowFiltering]="true">
        <igx-column width="100px" [field]="'ID'" [header]="'ID'" [hasSummary]="true"
            [filterable]="false" [resizable]="resizable"></igx-column>
        <igx-column width="100px" [field]="'ProductName'" [filterable]="filterable" [resizable]="resizable" dataType="string"
                    [filterCellTemplate]="filterTemplate"></igx-column>
        <igx-column width="100px" [field]="'Downloads'" [filterable]="filterable" [resizable]="resizable" dataType="number"
                    [filterCellTemplate]="filterTemplate"></igx-column>
        <igx-column width="100px" [field]="'Released'" [filterable]="filterable" [resizable]="resizable" dataType="boolean"
                    [filterCellTemplate]="filterTemplate"></igx-column>
        <igx-column width="100px" [field]="'ReleaseDate'" [header]="'ReleaseDate'" headerClasses="header-release-date"
                    [filterable]="filterable" [resizable]="resizable" dataType="date" [filterCellTemplate]="filterTemplate">
        </igx-column>
        <igx-column width="100px" field="Licensed" [filterable]="filterable"
                    [resizable]="resizable" dataType="boolean">
        </igx-column>
    </igx-grid>
    <ng-template #filterTemplate igxFilterCellTemplate let-column="column">
        <div class="custom-filter" style="flex-grow: 1;">
            <igx-input-group class="filter-input" type="box">
                <igx-prefix>
                    <igx-icon>search</igx-icon>
                </igx-prefix>
                <input #input igxInput tabindex="0" placeholder="Filter..." />
                <igx-suffix tabindex="0">
                    <igx-icon>clear</igx-icon>
                </igx-suffix>
            </igx-input-group>
        </div>
    </ng-template>
    `,
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxSuffixDirective, IgxInputDirective, IgxFilterCellTemplateDirective, IgxIconComponent]
})
export class IgxGridFilteringTemplateComponent extends BasicGridComponent {
    public resizable = false;
    public filterable = true;

    public override data = SampleTestData.excelFilteringData();
}

@Component({
    template: `<igx-grid [data]="data" height="500px" width="500px" [allowFiltering]="true">
        <igx-column [field]="'ID'" [header]="'ID'"></igx-column>
        <igx-column [field]="'ProductName'" dataType="string"></igx-column>
        <igx-column [field]="'Downloads'" dataType="number" [filterable]="false"></igx-column>
        <igx-column [field]="'Released'" dataType="boolean"></igx-column>
        <igx-column [field]="'ReleaseDate'" [header]="'ReleaseDate'" headerClasses="header-release-date"
            dataType="date">
        </igx-column>
        <igx-column [field]="'AnotherField'" [header]="'Another Field'"
            dataType="string" [filters]="customFilter">
        </igx-column>
    </igx-grid>`,
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent]
})
export class IgxGridFilteringScrollComponent extends IgxGridFilteringComponent { }

@Component({
    template: `<igx-grid [data]="data" height="500px" [allowFiltering]="true">
        <igx-column-group header="General Information" field='General'>
            <igx-column [field]="'ID'" [header]="'ID'"></igx-column>
            <igx-column [field]="'ProductName'" dataType="string"></igx-column>
            <igx-column-group header="Details" field='Details'>
                <igx-column [field]="'Downloads'" dataType="number" [filterable]="false"></igx-column>
                <igx-column [field]="'Released'" dataType="boolean"></igx-column>
                <igx-column [field]="'ReleaseDate'" [header]="'ReleaseDate'" headerClasses="header-release-date"
                    dataType="date">
                </igx-column>
            </igx-column-group>
        </igx-column-group>
        <igx-column [field]="'AnotherField'" [header]="'Another Field'"
            dataType="string" [filters]="customFilter">
        </igx-column>
    </igx-grid>`,
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent, IgxColumnGroupComponent]
})
export class IgxGridFilteringMCHComponent extends IgxGridFilteringComponent { }

@Component({
    template: `<igx-grid [data]="data" height="500px" [allowAdvancedFiltering]="true">
        <igx-grid-toolbar></igx-grid-toolbar>
        <igx-column width="100px" [field]="'ID'" [header]="'HeaderID'" [hasSummary]="true"></igx-column>
        <igx-column width="100px" [field]="'ProductName'" dataType="string"></igx-column>
        <igx-column width="100px" [field]="'Downloads'" dataType="number" [hasSummary]="true"></igx-column>
        <igx-column width="100px" [field]="'Released'" dataType="boolean"></igx-column>
        <igx-column width="100px" [field]="'ReleaseDate'" dataType="date" headerClasses="header-release-date"></igx-column>
        <igx-column width="100px" [field]="'AnotherField'" [header]="'Another Field'" dataType="string" [filters]="customFilter">
        </igx-column>
    </igx-grid>`,
    standalone: true,
    imports: [IgxGridComponent, IgxColumnComponent, IgxGridToolbarComponent]
})
export class IgxGridAdv