Merge branch 'master' into simeonoff/indigo-icons

CHANGELOG.md

@@ -6,6 +6,8 @@ All notable changes for each version of this project will be documented in this
 ### New Features
 - `IgxSimpleCombo`
  - Introduced ability for Simple Combo to automatically select and retain valid input on "Tab" press enhancing user experience by streamlining data entry and reducing the need for manual selection improving form navigation.
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+ - To streamline the sorting of columns with custom formats, a new `FormattedValuesSortingStrategy` has been introduced. This strategy simplifies the sorting process by allowing direct sorting based on formatted values, eliminating the need to extend the `DefaultSortingStrategy` or implement a custom `ISortingStrategy`. This enhancement improves the ease of handling sorting with custom column formatters.
 
 #### Scrollbar: New CSS variables
 

projects/igniteui-angular/src/lib/data-operations/sorting-strategy.ts

@@ -132,3 +132,60 @@ export class GroupMemberCountSortingStrategy implements ISortingStrategy {
  return reverse * (firstItemValuesLength - secondItemValuesLength);
  }
 }
+
+export class FormattedValuesSortingStrategy extends DefaultSortingStrategy {
+ protected static override _instance: FormattedValuesSortingStrategy = null;
+
+ constructor() {
+ super();
+ }
+
+ public static override instance(): FormattedValuesSortingStrategy {
+ return this._instance || (this._instance = new this());
+ }
+
+ public override sort(
+ data: any[],
+ fieldName: string,
+ dir: SortingDirection,
+ ignoreCase: boolean,
+ valueResolver: (obj: any, key: string, isDate?: boolean) => any,
+ isDate?: boolean,
+ isTime?: boolean,
+ grid?: GridType
+ ) {
+ const key = fieldName;
+ const reverse = (dir === SortingDirection.Desc ? -1 : 1);
+ const cmpFunc = (obj1: any, obj2: any) => this.compareObjects(obj1, obj2, key, reverse, ignoreCase, valueResolver, isDate, isTime, grid);
+ return this.arraySort(data, cmpFunc);
+ }
+
+ protected override compareObjects(
+ obj1: any,
+ obj2: any,
+ key: string,
+ reverse: number,
+ ignoreCase: boolean,
+ valueResolver: (obj: any, key: string, isDate?: boolean, isTime?: boolean) => any,
+ isDate: boolean,
+ isTime: boolean,
+ grid?: GridType
+ ) {
+ let a = valueResolver.call(this, obj1, key, isDate, isTime);
+ let b = valueResolver.call(this, obj2, key, isDate, isTime);
+
+ if (grid) {
+ const col = grid.getColumnByName(key);
+ if (col && col.formatter) {
+ a = col.formatter(a);
+ b = col.formatter(b);
+ }
+ }
+
+ if (ignoreCase) {
+ a = a && a.toLowerCase ? a.toLowerCase() : a;
+ b = b && b.toLowerCase ? b.toLowerCase() : b;
+ }
+ return reverse * this.compareValues(a, b);
+ }
+}

projects/igniteui-angular/src/lib/grids/columns/column-group.component.ts

@@ -312,6 +312,9 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
  if (this.pinned) {
  child.pinned = this.pinned;
  }
+ if (this._hidden) {
+ child.hidden = this._hidden;
+ }
  });
  if (this.collapsible) {
  this.setExpandCollapseState();

projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts

@@ -18,7 +18,8 @@ import { OneGroupOneColGridComponent, OneGroupThreeColsGridComponent,
  NestedColGroupsGridComponent, StegosaurusGridComponent,
  OneColPerGroupGridComponent, NestedColumnGroupsGridComponent,
  DynamicGridComponent, NestedColGroupsWithTemplatesGridComponent,
- DynamicColGroupsGridComponent } from '../../test-utils/grid-mch-sample.spec';
+ DynamicColGroupsGridComponent,
+ ColumnGroupHiddenInTemplateComponent} from '../../test-utils/grid-mch-sample.spec';
 import { CellType } from '../common/grid.interface';
 
 const GRID_COL_THEAD_TITLE_CLASS = 'igx-grid-th__title';
@@ -47,7 +48,8 @@ describe('IgxGrid - multi-column headers #grid', () => {
  NestedColumnGroupsGridComponent,
  DynamicGridComponent,
  NestedColGroupsWithTemplatesGridComponent,
- DynamicColGroupsGridComponent
+ DynamicColGroupsGridComponent,
+ ColumnGroupHiddenInTemplateComponent
  ]
  })
  .compileComponents();
@@ -392,6 +394,20 @@ describe('IgxGrid - multi-column headers #grid', () => {
  expect(generalHeader.nativeElement.firstElementChild.title).toBe('General Information Title');
  expect(addressHeader.nativeElement.firstElementChild.title).toBe('Address Information');
  });
+
+ it('should hide column group when hidden property is set to true in the template - parent and child level', () => {
+ fixture = TestBed.createComponent(ColumnGroupHiddenInTemplateComponent);
+ fixture.detectChanges();
+
+ grid = fixture.componentInstance.grid;
+ const generalGroup = grid.columnList.find(c => c.header === 'General Information');
+ const locationGroup = grid.columnList.find(c => c.header === 'Location');
+ expect(generalGroup.hidden).toBe(true);
+ expect(locationGroup.hidden).toBe(true);
+
+ expect(GridFunctions.getColumnHeaders(fixture).length).toEqual(6);
+ expect(GridFunctions.getColumnGroupHeaders(fixture).length).toEqual(2);
+ });
  });
 
  describe('Columns widths tests (1 group 1 column) ', () => {

projects/igniteui-angular/src/lib/grids/grid/grid.sorting.spec.ts

@@ -1,14 +1,15 @@
 import { TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { IgxGridComponent } from './grid.component';
-import { DefaultSortingStrategy, SortingDirection } from '../../data-operations/sorting-strategy';
+import { DefaultSortingStrategy, FormattedValuesSortingStrategy, SortingDirection } from '../../data-operations/sorting-strategy';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { GridFunctions } from '../../test-utils/grid-functions.spec';
-import { GridDeclaredColumnsComponent, SortByParityComponent, GridWithPrimaryKeyComponent, SortByAnotherColumnComponent, SortOnInitComponent } from '../../test-utils/grid-samples.spec';
+import { GridDeclaredColumnsComponent, SortByParityComponent, GridWithPrimaryKeyComponent, SortByAnotherColumnComponent, SortOnInitComponent, IgxGridFormattedValuesSortingComponent } from '../../test-utils/grid-samples.spec';
 import { UIInteractions } from '../../test-utils/ui-interactions.spec';
 import { SampleTestData } from '../../test-utils/sample-test-data.spec';
 import { CellType } from '../common/grid.interface';
 import { NoopSortingStrategy } from '../common/strategy';
+import { By } from '@angular/platform-browser';
 
 describe('IgxGrid - Grid Sorting #grid', () => {
 
@@ -21,7 +22,8 @@ describe('IgxGrid - Grid Sorting #grid', () => {
  GridDeclaredColumnsComponent,
  SortByParityComponent,
  GridWithPrimaryKeyComponent,
- NoopAnimationsModule
+ NoopAnimationsModule,
+ IgxGridFormattedValuesSortingComponent
  ]
  });
  }));
@@ -405,6 +407,58 @@ describe('IgxGrid - Grid Sorting #grid', () => {
  expect(grid.getCellByKey(6, 'LastName').row.index).toBeGreaterThan(grid.getCellByKey(7, 'LastName').row.index);
  expect(grid.getCellByKey(4, 'LastName').row.index).toBeGreaterThan(grid.getCellByKey(5, 'LastName').row.index);
  });
+
+ it('Should sort grid by formatted values using FormattedValuesSortingStrategy', fakeAsync(() => {
+ fixture = TestBed.createComponent(IgxGridFormattedValuesSortingComponent);
+ tick();
+ fixture.detectChanges();
+
+ grid = fixture.componentInstance.grid;
+ tick();
+ fixture.detectChanges();
+
+ const productNameColumn = grid.getColumnByName("ProductName");
+ const quantityColumn = grid.getColumnByName("QuantityPerUnit");
+
+ expect(productNameColumn.sortStrategy instanceof FormattedValuesSortingStrategy).toBeTruthy();
+ expect(quantityColumn.sortStrategy instanceof FormattedValuesSortingStrategy).toBeTruthy();
+
+ const productNameHeaderCell = GridFunctions.getColumnHeader('ProductName', fixture);
+
+ GridFunctions.clickHeaderSortIcon(productNameHeaderCell);
+ tick(30);
+ fixture.detectChanges();
+
+ const firstProductNameCell = fixture.debugElement.queryAll(By.css('.igx-grid__td'))[1];
+ expect(firstProductNameCell.nativeElement.textContent.trim()).toBe("a-Alice Mutton");
+
+ GridFunctions.clickHeaderSortIcon(productNameHeaderCell);
+ tick(30);
+ fixture.detectChanges();
+
+ const lastProductNameCell = fixture.debugElement.queryAll(By.css('.igx-grid__td'))[1];
+ expect(lastProductNameCell.nativeElement.textContent.trim()).toBe("b-Tofu");
+
+ grid.clearSort();
+ tick();
+ fixture.detectChanges();
+
+ const quantityPerUnitHeaderCell = GridFunctions.getColumnHeader('QuantityPerUnit', fixture);
+
+ GridFunctions.clickHeaderSortIcon(quantityPerUnitHeaderCell);
+ tick(30);
+ fixture.detectChanges();
+
+ const firstQuantityCell = fixture.debugElement.queryAll(By.css('.igx-grid__td'))[2];
+ expect(firstQuantityCell.nativeElement.textContent.trim()).toBe("c");
+
+ GridFunctions.clickHeaderSortIcon(quantityPerUnitHeaderCell);
+ tick(30);
+ fixture.detectChanges();
+
+ const lastQuantityCell = fixture.debugElement.queryAll(By.css('.igx-grid__td'))[2];
+ expect(lastQuantityCell.nativeElement.textContent.trim()).toBe("d-36 boxes");
+ }));
  });
 
  describe('UI tests', () => {

projects/igniteui-angular/src/lib/test-utils/grid-mch-sample.spec.ts

@@ -660,3 +660,36 @@ export class NestedColGroupsWithTemplatesGridComponent {
 
  public data = SampleTestData.contactInfoDataFull();
 }
+
+@Component({
+ template: `
+ <igx-grid #grid [data]="data" height="500px" >
+ <igx-column field="ID"></igx-column>
+ <igx-column-group header="General Information" [hidden]="true">
+ <igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="CompanyName"></igx-column>
+ <igx-column-group header="Person Details">
+ <igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="ContactName"></igx-column>
+ <igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="ContactTitle"></igx-column>
+ </igx-column-group>
+ </igx-column-group>
+ <igx-column-group header="Address Information">
+ <igx-column-group header="Location" [hidden]="true">
+ <igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="Country"></igx-column>
+ <igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="Region"></igx-column>
+ </igx-column-group>
+ <igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="City"></igx-column>
+ <igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="Address"></igx-column>
+ <igx-column-group header="Contact Information">
+ <igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="Phone"></igx-column>
+ <igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="Fax"></igx-column>
+ <igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="PostalCode"></igx-column>
+ </igx-column-group>
+ </igx-column-group>
+ <igx-column-group #emptyColGroup header="Empty Header">
+ </igx-column-group>
+ </igx-grid>
+ `,
+ standalone: true,
+ imports: [IgxGridComponent, IgxColumnGroupComponent, IgxColumnComponent]
+})
+export class ColumnGroupHiddenInTemplateComponent extends ColumnGroupTestComponent { }

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

@@ -18,7 +18,7 @@ import { ISortingOptions, IgxExcelStyleHeaderIconDirective, IgxGridToolbarAdvanc
 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 { FormattedValuesSortingStrategy, 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';
@@ -2266,6 +2266,42 @@ export class SortOnInitComponent extends GridDeclaredColumnsComponent implements
  }
 }
 
+@Component({
+ template: `
+ <igx-grid #grid [data]="data" [primaryKey]="'ProductID'" width="900px" height="600px">
+ <igx-column field="ProductID" header="Product ID" [sortable]="true"></igx-column>
+ <igx-column field="ProductName" header="Product Name" [dataType]="'string'" [sortable]="true"
+ [formatter]="formatProductName" [sortStrategy]="sortStrategy"></igx-column>
+ <igx-column field="QuantityPerUnit" header="Quantity Per Unit" [dataType]="'string'" [sortable]="true"
+ [formatter]="formatQuantity" [sortStrategy]="sortStrategy"></igx-column>
+ <igx-column field="UnitPrice" header="Unit Price" [dataType]="'number'" [sortable]="true"></igx-column>
+ <igx-column field="OrderDate" header="Order Date" [dataType]="'date'" [sortable]="true"></igx-column>
+ </igx-grid>
+ `,
+ standalone: true,
+ imports: [IgxGridComponent, IgxColumnComponent]
+})
+export class IgxGridFormattedValuesSortingComponent extends BasicGridComponent {
+ public override data = SampleTestData.gridProductData();
+ public sortStrategy = new FormattedValuesSortingStrategy();
+
+ public formatProductName = (value: string) => {
+ if (!value) {
+ return 'a';
+ }
+ const prefix = value.length > 10 ? 'a' : 'b';
+ return `${prefix}-${value}`;
+ }
+
+ public formatQuantity = (value: string) => {
+ if (!value) {
+ return 'c';
+ }
+ const prefix = value.length > 10 ? 'c' : 'd';
+ return `${prefix}-${value}`;
+ }
+}
+
 @Component({
  template: `
  <igx-grid #grid [data]="data" [height]="'500px'" [width]="'500px'">