diff --git a/CHANGELOG.md b/CHANGELOG.md index 249a2ddcfa2..1e4d4546c94 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,19 @@ All notable changes for each version of this project will be documented in this file. +## 13.1.0 + +### General + +- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid` + - **Breaking Change** - `movable` property of `IgxColumnComponent` is now deprecated and will be removed in future version. Instead, use the newly exposed `moving` property on grid-level: + ```html + + + + + ``` + ## 13.0.5 ### New Features diff --git a/projects/igniteui-angular/migrations/migration-collection.json b/projects/igniteui-angular/migrations/migration-collection.json index 88831dca026..d33f375156f 100644 --- a/projects/igniteui-angular/migrations/migration-collection.json +++ b/projects/igniteui-angular/migrations/migration-collection.json @@ -110,6 +110,11 @@ "version": "13.0.0-alpha", "description": "Updates Ignite UI for Angular from v12.2.x to v13.0.0", "factory": "./update-13_0_0" + }, + "migration-23": { + "version": "13.1.0", + "description": "Updates Ignite UI for Angular from v13.0.x to v13.1.0", + "factory": "./update-13_1_0" } } } diff --git a/projects/igniteui-angular/migrations/update-13_1_0/index.spec.ts b/projects/igniteui-angular/migrations/update-13_1_0/index.spec.ts new file mode 100644 index 00000000000..4e1b4b30f0f --- /dev/null +++ b/projects/igniteui-angular/migrations/update-13_1_0/index.spec.ts @@ -0,0 +1,87 @@ +import * as path from 'path'; + +import { EmptyTree } from '@angular-devkit/schematics'; +import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing'; + +const version = '13.1.0'; + +describe(`Update to ${version}`, () => { + let appTree: UnitTestTree; + const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json')); + const configJson = { + defaultProject: 'testProj', + projects: { + testProj: { + sourceRoot: '/testSrc' + } + }, + schematics: { + '@schematics/angular:component': { + prefix: 'appPrefix' + } + } + }; + + beforeEach(() => { + appTree = new UnitTestTree(new EmptyTree()); + appTree.create('/angular.json', JSON.stringify(configJson)); + }); + + const migrationName = 'migration-23'; + + it('should remove columns` movable prop and enable grid`s moving prop if there is movable columns', async () => { + appTree.create( + `/testSrc/appPrefix/component/test.component.html`, + ` + + + + +` + ); + + const tree = await schematicRunner + .runSchematicAsync(migrationName, {}, appTree) + .toPromise(); + + expect( + tree.readContent('/testSrc/appPrefix/component/test.component.html') + ).toEqual( + ` + + + + +` + ); + }); + + it('should remove columns` movable prop and don`t set the grid`s moving prop if there isn`t movable columns', async () => { + appTree.create( + `/testSrc/appPrefix/component/test.component.html`, + ` + + + + +` + ); + + const tree = await schematicRunner + .runSchematicAsync(migrationName, {}, appTree) + .toPromise(); + + expect( + tree.readContent('/testSrc/appPrefix/component/test.component.html') + ).toEqual( + ` + + + + +` + ); + }); + + +}); diff --git a/projects/igniteui-angular/migrations/update-13_1_0/index.ts b/projects/igniteui-angular/migrations/update-13_1_0/index.ts new file mode 100644 index 00000000000..8e9b4485abd --- /dev/null +++ b/projects/igniteui-angular/migrations/update-13_1_0/index.ts @@ -0,0 +1,72 @@ +import { Element } from '@angular/compiler'; +import { + Rule, + SchematicContext, + Tree +} from '@angular-devkit/schematics'; +import { UpdateChanges } from '../common/UpdateChanges'; +import { nativeImport } from '../common/import-helper.js'; +import { FileChange, findElementNodes, getAttribute, getSourceOffset, hasAttribute, parseFile } from '../common/util'; + +const version = '13.1.0'; + +export default (): Rule => async (host: Tree, context: SchematicContext) => { + context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`); + const { HtmlParser } = await nativeImport('@angular/compiler') as typeof import('@angular/compiler'); + + const update = new UpdateChanges(__dirname, host, context); + const GRID_TAGS = ['igx-grid', 'igx-tree-grid', 'igx-hierarchical-grid', 'igx-row-island']; + const prop = ['[movable]']; + const changes = new Map(); + + const gridsToMigrate = new Set(); + + const applyChanges = () => { + for (const [path, change] of changes.entries()) { + let buffer = host.read(path).toString(); + + change.sort((c, c1) => c.position - c1.position) + .reverse() + .forEach(c => buffer = c.apply(buffer)); + + host.overwrite(path, buffer); + } + }; + + const addChange = (path: string, change: FileChange) => { + if (changes.has(path)) { + changes.get(path).push(change); + } else { + changes.set(path, [change]); + } + }; + + // migrate movable on column-level to moving on grid-level for grid, tree grid, hierarchical grid and row island + for (const path of update.templateFiles) { + const grids = findElementNodes(parseFile(new HtmlParser(), host, path), GRID_TAGS); + grids.forEach(grid => { + const grid_elem = grid as Element; + const columns = grid_elem.children.filter(column => (column as Element).name === 'igx-column' && hasAttribute(column as Element, prop)); + columns.map(node => getSourceOffset(node as Element)) + .forEach(offset => { + const { startTag, file, node } = offset; + const { name, value } = getAttribute(node, prop)[0]; + if (value === 'true') { + gridsToMigrate.add(grid_elem); + } + const repTxt = file.content.substring(startTag.start, startTag.end); + const property = `${name}="${value}"`; + const removePropTxt = repTxt.replace(property, ''); + addChange(file.url, new FileChange(startTag.start, removePropTxt, repTxt, 'replace')); + }); + }); + + Array.from(gridsToMigrate).map(node => getSourceOffset(node as Element)).forEach(offset => { + const { startTag, file } = offset; + addChange(file.url, new FileChange(startTag.end - 1, ' [moving]="true"')); + }); + } + + applyChanges(); + changes.clear(); +}; diff --git a/projects/igniteui-angular/src/lib/grids/README.md b/projects/igniteui-angular/src/lib/grids/README.md index ab2dae66d67..87834432d5b 100644 --- a/projects/igniteui-angular/src/lib/grids/README.md +++ b/projects/igniteui-angular/src/lib/grids/README.md @@ -167,6 +167,7 @@ Below is the list of all inputs that the developers may set to configure the gri |`resourceStrings`| IGridResourceStrings | Resource strings of the grid. | |`autoGenerate`|boolean|Autogenerate grid's columns, default value is _false_| |`batchEditing`|boolean|Toggles batch editing in the grid, default is _false_| +|`moving`|boolean|Enables the columns moving feature. Defaults to _false_| |`paging`|boolean|Enables the paging feature. Defaults to _false_.| |`page`| number | The current page index.| |`perPage`|number|Visible items per page, default is 15| @@ -333,7 +334,6 @@ Inputs available on the **IgxGridColumnComponent** to define columns: |`hasSummary`| boolean |Sets whether or not the specific column has summaries enabled.| |`summaries`| IgxSummaryOperand |Set custom summary for the specific column| |`hidden`|boolean|Visibility of the column| -|`movable`|boolean|Set column to be movable| |`resizable`|boolean|Set column to be resizable| |`selectable`|boolean|Set column to be selectable| |`selected`|boolean|Set column to be selected| diff --git a/projects/igniteui-angular/src/lib/grids/columns/column-layout.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column-layout.component.ts index 153658c2c23..4406922528b 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/column-layout.component.ts +++ b/projects/igniteui-angular/src/lib/grids/columns/column-layout.component.ts @@ -122,10 +122,6 @@ export class IgxColumnLayoutComponent extends IgxColumnGroupComponent implements } else { this.children.forEach(child => child.hidden = this.hidden); } - - this.children.forEach(child => { - child.movable = false; - }); } /* diff --git a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts index 670d408ebc4..d6da1c58df3 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts +++ b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts @@ -422,8 +422,11 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy @Input() public disablePinning = false; /** + * @deprecated in version 13.1.0. Use `IgxGridComponent.moving` instead. + * * Sets/gets whether the column is movable. * Default value is `false`. + * * ```typescript * let isMovable = this.column.movable; * ``` @@ -433,8 +436,6 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy * * @memberof IgxColumnComponent */ - @WatchColumnChanges() - @notifyChanges() @Input() public movable = false; /** diff --git a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts index 80a2e4fb5ba..9f07a0d2abd 100644 --- a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts +++ b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts @@ -143,6 +143,7 @@ export interface ColumnType { resizable: boolean; searchable: boolean; columnGroup: boolean; + /** @deprecated in version 13.1.0. Use `IgxGridComponent.moving` instead.*/ movable: boolean; groupable: boolean; sortable: boolean; @@ -267,6 +268,7 @@ export interface GridType extends IGridDataBindable { pipeTrigger: number; summaryPipeTrigger: number; hasColumnLayouts: boolean; + moving: boolean; isLoading: boolean; dataCloneStrategy: IDataCloneStrategy; diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.html index 72477854113..a96efcc0190 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.html @@ -9,7 +9,7 @@ - + diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index de1ad74aba5..7a38ce95f28 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -189,6 +189,13 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements @Input() public autoGenerate = false; + /** + * Controls whether columns moving is enabled in the grid. + * + */ + @Input() + public moving = false; + /** * Gets/Sets a custom template when empty. * @@ -4879,13 +4886,16 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements /** * Returns if the `IgxGridComponent` has moveable columns. * + * @deprecated + * Use `IgxGridComponent.moving` instead. + * * @example * ```typescript * const movableGrid = this.grid.hasMovableColumns; * ``` */ public get hasMovableColumns(): boolean { - return this.columnList && this.columnList.some((col) => col.movable); + return this.moving; } /** diff --git a/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts index 858723dacc1..3d8eb1b6b90 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts @@ -424,11 +424,10 @@ describe('IgxGrid - Cell component #grid', () => { }); @Component({ template: ` - + { fixture = TestBed.createComponent(MovableColumnsComponent); fixture.detectChanges(); grid = fixture.componentInstance.grid; + grid.moving = true; })); it('Should be able to reorder columns.', (() => { @@ -264,33 +265,6 @@ describe('IgxGrid - Column Moving #grid', () => { expect(grid.getCellByColumn(0, 'ID').selected).toBeTruthy(); })); - - - it('Should reorder only movable columns when dropping the ghost image on an interactive area.', (async () => { - const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS)); - - expect(grid.columnList.get(0).movable).toBeTruthy(); - expect(grid.columnList.get(2).movable).toBeFalsy(); - - // step 1 - verify columns are not reordered when - // moving a column that is not movable - const header = headers[2].nativeElement; - UIInteractions.simulatePointerEvent('pointerdown', header, 450, 75); - await wait(); - UIInteractions.simulatePointerEvent('pointermove', header, 455, 81); - await wait(50); - UIInteractions.simulatePointerEvent('pointermove', header, 100, 75); - await wait(); - UIInteractions.simulatePointerEvent('pointerup', header, 100, 75); - await wait(); - fixture.detectChanges(); - - const columnsList = grid.columnList; - expect(columnsList.get(0).field).toEqual('ID'); - expect(columnsList.get(1).field).toEqual('Name'); - expect(columnsList.get(2).field).toEqual('LastName'); - })); - it('Should not reorder columns when dropping the ghost image on a non-interactive area.', (async () => { const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS)); @@ -735,6 +709,7 @@ describe('IgxGrid - Column Moving #grid', () => { fixture = TestBed.createComponent(MovableTemplatedColumnsComponent); fixture.detectChanges(); grid = fixture.componentInstance.grid; + grid.moving = true; })); it('Should reorder movable columns with templated headers.', (async () => { @@ -771,6 +746,7 @@ describe('IgxGrid - Column Moving #grid', () => { fixture = TestBed.createComponent(MovableColumnsLargeComponent); fixture.detectChanges(); grid = fixture.componentInstance.grid; + grid.moving = true; })); it('Should be able to scroll forwards to reorder columns that are out of view.', (async () => { @@ -1304,7 +1280,6 @@ describe('IgxGrid - Column Moving #grid', () => { })); it('Pinning - Should not be able to pin a column programmaticaly if disablePinning is enabled for that column', (async () => { - const columnsList = grid.columnList; // step 1 - pin some columns grid.getColumnByName('Address').pinned = true; @@ -1398,6 +1373,7 @@ describe('IgxGrid - Column Moving #grid', () => { fixture = TestBed.createComponent(MultiColumnHeadersComponent); fixture.detectChanges(); grid = fixture.componentInstance.grid; + grid.moving = true; })); it('MCH - should reorder only columns on the same level (top level simple column).', (async () => { diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-selection.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-selection.spec.ts index 92f5e7dc968..db5b48db39b 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-selection.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-selection.spec.ts @@ -1091,8 +1091,6 @@ describe('IgxGrid - Column Selection #grid', () => { }); it('Moving: Verify that when move a column, it stays selected', () => { - colProductID.movable = true; - colProductName.movable = true; colProductID.selected = true; fix.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts index 4679e698344..3dcd6f488aa 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts @@ -214,7 +214,8 @@ describe('IgxGrid - Column properties #grid', () => { const maxVindex = fix.componentInstance.columns.length - 1; // add to unpinned area - fix.componentInstance.columns.push({ field: 'City', width: 150, movable: true, type: 'string' }); + grid.moving = true; + fix.componentInstance.columns.push({ field: 'City', width: 150, type: 'string' }); fix.detectChanges(); let cityCol = grid.getColumnByName('City'); @@ -227,8 +228,8 @@ describe('IgxGrid - Column properties #grid', () => { cityCol = grid.getColumnByName('City'); expect(cityCol).not.toBeDefined(); - // add to pinned area - fix.componentInstance.columns.push({ field: 'City', width: 150, movable: true, type: 'string', pinned: true }); + // add to pinned area + fix.componentInstance.columns.push({ field: 'City', width: 150, type: 'string', pinned: true }); fix.detectChanges(); cityCol = grid.getColumnByName('City'); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts index c6f90a16ba3..70b4805704c 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts @@ -3085,7 +3085,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { })); it('Should move column left/right when clicking buttons.', fakeAsync(() => { - grid.columnList.get(2).movable = true; + grid.moving = true; fix.detectChanges(); GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Downloads'); @@ -3126,7 +3126,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { expect(grid.pinnedColumns.length).toBe(1); const columnToMove = grid.unpinnedColumns[grid.unpinnedColumns.length - 1]; - columnToMove.movable = true; + grid.moving = true; GridFunctions.clickExcelFilterIconFromCode(fix, grid, columnToMove.field); @@ -3584,11 +3584,10 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { })); it('Should move pinned column correctly by using move buttons', fakeAsync(() => { + grid.moving = true; const productNameCol = grid.getColumnByName('ProductName'); const idCol = grid.getColumnByName('ID'); - productNameCol.movable = true; productNameCol.pinned = true; - idCol.movable = true; idCol.pinned = true; fix.detectChanges(); @@ -3629,11 +3628,10 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { })); it('Should move unpinned column correctly by using move buttons', fakeAsync(() => { + grid.moving = true; const productNameCol = grid.getColumnByName('ProductName'); const downloadsCol = grid.getColumnByName('Downloads'); - productNameCol.movable = true; productNameCol.pinned = true; - downloadsCol.movable = true; fix.detectChanges(); expect(GridFunctions.getColumnHeaderTitleByIndex(fix, 0).innerText).toBe('ProductName'); expect(GridFunctions.getColumnHeaderTitleByIndex(fix, 2).innerText).toBe('Downloads'); @@ -3728,7 +3726,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { it('display density is properly applied on the excel style filtering component', fakeAsync(() => { const column = grid.columnList.find((c) => c.field === 'ProductName'); column.sortable = true; - column.movable = true; + grid.moving = true; fix.detectChanges(); // Open excel style filtering component and verify its display density @@ -3792,7 +3790,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { it('display density is properly applied on the excel style custom filtering dialog', fakeAsync(() => { const column = grid.columnList.find((c) => c.field === 'ProductName'); column.sortable = true; - column.movable = true; + grid.moving = true; fix.detectChanges(); // Open excel style custom filtering dialog and verify its display density @@ -5602,7 +5600,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { })); it('Should move column left/right when clicking buttons from template', fakeAsync(() => { - grid.columnList.get(2).movable = true; + grid.moving = true; fix.detectChanges(); GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Downloads'); @@ -6067,8 +6065,8 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { }); fix.detectChanges(); // Make 'AnotherField' column movable. - const column = grid.columnList.find((c) => c.field === 'AnotherField'); - column.movable = true; + const column = grid.columns.find((c) => c.field === 'AnotherField'); + grid.moving = true; fix.detectChanges(); // Pin the 'General Information' group by pinning its child 'ProductName' column. diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row-editing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row-editing.spec.ts index 8c4542e8c86..7e419ab8906 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-row-editing.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row-editing.spec.ts @@ -1411,9 +1411,9 @@ describe('IgxGrid - Row Editing #grid', () => { })); it(`Moving: Should exit edit mode when moving a column`, () => { + grid.moving = true; const column = grid.columnList.filter(c => c.field === 'ProductName')[0]; const targetColumn = grid.columnList.filter(c => c.field === 'ProductID')[0]; - column.movable = true; fix.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts index ccaaa62fb59..e64877a135a 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts @@ -615,9 +615,9 @@ describe('IgxGrid - Summaries #grid', () => { })); it('Moving: should move summaries when move column', () => { + grid.moving = true; const colUnitsInStock = grid.getColumnByName('UnitsInStock'); const colProductID = grid.getColumnByName('ProductID'); - colUnitsInStock.movable = true; fix.detectChanges(); grid.moveColumn(colUnitsInStock, colProductID, DropPosition.BeforeDropTarget); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html index f44631dc6a6..28d67267565 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html @@ -37,10 +37,10 @@ (dragStop)="selectionService.dragMode = $event" (scroll)='preventContainerScroll($event)' (dragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode" [style.height.px]='totalHeight' [style.width.px]='calcWidth || null' #tbody [attr.aria-activedescendant]="activeDescendant"> - - @@ -139,7 +139,7 @@ -
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts index aaf43342fa8..690c6f9287a 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts @@ -1884,7 +1884,7 @@ describe('IgxGrid Component Tests #grid', () => { prevCellCoords = grid.getPreviousCell(0, 2, (col) => col.editable); expect(prevCellCoords).toEqual({ rowIndex: 0, visibleColumnIndex: 2 }); // when the filter function has no matching colums - prevCellCoords = grid.getPreviousCell(0, 3, (col) => col.movable); + prevCellCoords = grid.getPreviousCell(0, 3, (col) => col.pinned); expect(prevCellCoords).toEqual({ rowIndex: 0, visibleColumnIndex: 3 }); // when grid has no data grid.filter('col0', 2, IgxNumberFilteringOperand.instance().condition('greaterThan')); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.spec.ts index 69152d83971..daac553d45b 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.spec.ts @@ -1164,10 +1164,10 @@ export class ColumnLayoutTestComponent { @Component({ template: ` - + - + diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html b/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html index 6ebf8a9e13a..3fa766222f9 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html +++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html @@ -1,5 +1,5 @@ - +
+ @@ -33,7 +33,7 @@ - +
- + - + - + diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.html b/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.html index ff9fb67e214..b7715f3b796 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.html @@ -5,11 +5,11 @@
- + - + @@ -115,7 +115,7 @@ - +
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html index bf512a95298..5131185057b 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html @@ -21,10 +21,10 @@ (keydown)="navigation.handleNavigation($event)" (dragStop)="selectionService.dragMode = $event" (dragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode" [attr.aria-activedescendant]="activeDescendant" [attr.role]="dataView.length ? null : 'row'" [style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='preventContainerScroll($event)'> - - @@ -93,7 +93,7 @@ -
@@ -102,7 +102,7 @@
-
diff --git a/projects/igniteui-angular/src/lib/grids/moving/moving.drag.directive.ts b/projects/igniteui-angular/src/lib/grids/moving/moving.drag.directive.ts index 0714397d6b3..963bd2f30d9 100644 --- a/projects/igniteui-angular/src/lib/grids/moving/moving.drag.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/moving/moving.drag.directive.ts @@ -16,7 +16,7 @@ export class IgxColumnMovingDragDirective extends IgxDragDirective implements On public column: ColumnType; public get draggable(): boolean { - return this.column && (this.column.movable || (this.column.groupable && !this.column.columnGroup)); + return this.column && (this.column.grid.moving || (this.column.groupable && !this.column.columnGroup)); } public get icon(): HTMLElement { diff --git a/projects/igniteui-angular/src/lib/grids/moving/moving.drop.directive.ts b/projects/igniteui-angular/src/lib/grids/moving/moving.drop.directive.ts index 5ed83ba7f3e..3e190714cac 100644 --- a/projects/igniteui-angular/src/lib/grids/moving/moving.drop.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/moving/moving.drop.directive.ts @@ -27,7 +27,7 @@ export class IgxColumnMovingDropDirective extends IgxDropDirective implements On } public get isDropTarget(): boolean { - return this.column && this.column.grid.hasMovableColumns && this.cms.column?.movable && + return this.column && this.column.grid.moving && ((!this.column.pinned && this.cms.column?.disablePinning) || !this.cms.column?.disablePinning); } diff --git a/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts b/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts index 8d4842b08f9..fea7377506f 100644 --- a/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts @@ -41,7 +41,8 @@ describe('IgxGridState - input properties #grid', () => { rowSelection: true, columnSelection: true, rowPinning: true, - expansion: true + expansion: true, + moving: true }; const fix = TestBed.createComponent(IgxGridStateComponent); @@ -66,6 +67,7 @@ describe('IgxGridState - input properties #grid', () => { rowPinning: true, expansion: true, groupBy: false, + moving: false }; const fix = TestBed.createComponent(IgxGridStateWithOptionsComponent); @@ -75,8 +77,8 @@ describe('IgxGridState - input properties #grid', () => { expect(state.options).toEqual(jasmine.objectContaining(optionsInput)); }); - it('getState should return corect JSON string', () => { - const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"groupBy":{"expressions":[],"expansion":[],"defaultExpanded":true},"paging":{"index":0,"recordsPerPage":15,"metadata":{"countPages":1,"countRecords":10,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[]}'; + it('getState should return correct JSON string', () => { + const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"groupBy":{"expressions":[],"expansion":[],"defaultExpanded":true},"paging":{"index":0,"recordsPerPage":15,"metadata":{"countPages":1,"countRecords":10,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"moving":true}'; const fix = TestBed.createComponent(IgxGridStateComponent); fix.detectChanges(); @@ -115,6 +117,7 @@ describe('IgxGridState - input properties #grid', () => { const columns = fix.componentInstance.columns; const paging = grid.pagingState; + const moving = grid.moving; const sorting = grid.sortingExpressions; const groupBy = grid.groupingExpressions; const groupByExpansion = grid.groupingExpansionState; @@ -127,6 +130,7 @@ describe('IgxGridState - input properties #grid', () => { HelperFunctions.verifyGroupingExpressions(groupBy, gridState); HelperFunctions.verifyGroupingExpansion(groupByExpansion, gridState.groupBy); HelperFunctions.verifyFilteringExpressions(filtering, gridState); + HelperFunctions.verifyMoving(moving, gridState); }); it('getState should return corect IGridState object when options are not default', () => { @@ -137,10 +141,12 @@ describe('IgxGridState - input properties #grid', () => { let gridState = state.getState(false) as IGridState; expect(gridState['sorting']).toBeFalsy(); expect(gridState['groupBy']).toBeFalsy(); + expect(gridState['moving']).toBeFalsy(); - gridState = state.getState(false, ['filtering', 'sorting', 'groupBy']) as IGridState; + gridState = state.getState(false, ['filtering', 'sorting', 'groupBy', 'moving']) as IGridState; expect(gridState['sorting']).toBeFalsy(); expect(gridState['groupBy']).toBeFalsy(); + expect(gridState['groupBy']).toBeFalsy(); }); it('getState should return corect filtering state', () => { @@ -295,8 +301,8 @@ describe('IgxGridState - input properties #grid', () => { fix.detectChanges(); const state = fix.componentInstance.state; /* eslint-disable max-len */ - const columnsState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"200px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}]}'; - const initialState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false}]}'; + const columnsState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}]}'; + const initialState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false}]}'; /* eslint-enable max-len */ const columns = JSON.parse(columnsState).columns; @@ -315,8 +321,8 @@ describe('IgxGridState - input properties #grid', () => { fix.detectChanges(); const state = fix.componentInstance.state; /* eslint-disable max-len */ - const columnsState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"200px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}]}'; - const initialState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false}]}'; + const columnsState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"200px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}]}'; + const initialState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false}]}'; /* eslint-enable max-len */ const columnsStateObject = JSON.parse(columnsState); @@ -437,6 +443,55 @@ describe('IgxGridState - input properties #grid', () => { expect(grid.pinnedRows[0].key).toBe(1); expect(grid.pinnedRows[1].key).toBe(3); }); + + it('setState should correctly restore grid moving state from string', () => { + const fix = TestBed.createComponent(IgxGridStateComponent); + fix.detectChanges(); + const grid = fix.componentInstance.grid; + const state = fix.componentInstance.state; + + const movingState = '{"moving":false}'; + const initialState = '{"moving":true}'; + + let gridState = state.getState(true, 'moving'); + expect(gridState).toBe(initialState); + + state.setState(movingState); + expect(grid.moving).toBeFalsy(); + gridState = state.getState(true, 'moving'); + expect(gridState).toBe(movingState); + + }); + + it('setState should correctly restore grid moving state from object', () => { + const fix = TestBed.createComponent(IgxGridStateComponent); + fix.detectChanges(); + const grid = fix.componentInstance.grid; + const state = fix.componentInstance.state; + const movingState = '{"moving":false}'; + const initialState = '{"moving":true}'; + const movingStateObject = JSON.parse(movingState); + + let gridState = state.getState(true, 'moving'); + expect(gridState).toBe(initialState); + + state.setState(movingStateObject); + fix.detectChanges(); + + expect(grid.moving).toBeFalsy(); + gridState = state.getState(true, 'moving'); + expect(gridState).toBe(movingState); + + grid.moving = true; + fix.detectChanges(); + + state.setState(movingStateObject); + fix.detectChanges(); + + expect(grid.moving).toBeFalsy(); + gridState = state.getState(true, 'moving'); + expect(gridState).toBe(movingState); + }); it('setState should correctly restore grid cell selection state from string', () => { const fix = TestBed.createComponent(IgxGridStateComponent); @@ -586,6 +641,10 @@ class HelperFunctions { expect(paging).toEqual(jasmine.objectContaining(gridState.paging)); } + public static verifyMoving(moving: boolean, gridState: IGridState){ + expect(moving).toEqual(gridState.moving); + } + public static verifyRowSelection(selectedRows: any[], gridState: IGridState) { gridState.rowSelection.forEach((s, index) => { expect(s).toBe(selectedRows[index]); @@ -608,12 +667,11 @@ class HelperFunctions { @Component({ template: ` - IGridState; - restoreFeatureState: (context: IgxGridStateDirective, state: IColumnState[] | IPagingState | ISortingExpression[] | + restoreFeatureState: (context: IgxGridStateDirective, state: IColumnState[] | IPagingState | boolean | ISortingExpression[] | IGroupingState | IFilteringExpressionsTree | GridSelectionRange[] | IPinningConfig | any[]) => void; } @@ -111,6 +113,7 @@ export class IgxGridStateDirective { columnSelection: true, rowPinning: true, expansion: true, + moving: true, rowIslands: true }; private FEATURES = { @@ -265,6 +268,14 @@ export class IgxGridStateDirective { context.currGrid.paginator.page = state.index; } }, + moving: { + getFeatureState: (context: IgxGridStateDirective): IGridState => { + return { moving: context.currGrid.moving }; + }, + restoreFeatureState: (context: IgxGridStateDirective, state: boolean): void => { + context.currGrid.moving = state; + } + }, rowSelection: { getFeatureState: (context: IgxGridStateDirective): IGridState => { const selection = context.currGrid.selectedRows; @@ -496,7 +507,7 @@ export class IgxGridStateDirective { this.featureKeys.forEach(f => { if (this.options[f]) { const featureState = state[f]; - if (featureState) { + if (f === 'moving' || featureState) { const feature = this.getFeature(f); feature.restoreFeatureState(this, featureState); } diff --git a/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts b/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts index 8167f1212a7..f2f3b0d65cf 100644 --- a/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts @@ -52,7 +52,8 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => { rowSelection: true, columnSelection: true, expansion: true, - rowIslands: true + rowIslands: true, + moving: true }; const state = fix.componentInstance.state; @@ -79,7 +80,8 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => { rowSelection: true, columnSelection: true, expansion: true, - rowIslands: false + rowIslands: false, + moving:true }; const state = fix.componentInstance.state; @@ -89,7 +91,7 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => { it('getState should return corect JSON string', () => { pending(); - const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":4,"countRecords":20,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[{"id":"igx-row-island-childData","parentRowID":"0","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"1","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":3,"countRecords":14,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"2","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"3","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":3,"countRecords":14,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"4","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}}]}'; + const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":4,"countRecords":20,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[{"id":"igx-row-island-childData","parentRowID":"0","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"1","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":3,"countRecords":14,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"2","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"3","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":3,"countRecords":14,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"4","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}}]}'; fix.detectChanges(); const state = fix.componentInstance.state; @@ -133,7 +135,8 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => { const optionsInput = { paging: false, - sorting: false + sorting: false, + moving: false }; state.options = optionsInput; @@ -141,6 +144,7 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => { let gridState = state.getState(false) as IGridState; expect(gridState['sorting']).toBeFalsy(); expect(gridState['paging']).toBeFalsy(); + expect(gridState['moving']).toBeFalsy(); const gridsCollection = HelperFunctions.getChildGridsCollection(grid, gridState); gridsCollection.forEach(childGrid => { @@ -148,11 +152,47 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => { expect(childGrid.state['paging']).toBeFalsy(); }); - gridState = state.getState(false, ['filtering', 'sorting', 'paging', 'rowIslands']) as IGridState; + gridState = state.getState(false, ['filtering', 'sorting', 'paging', 'rowIslands', 'moving']) as IGridState; expect(gridState['sorting']).toBeFalsy(); expect(gridState['paging']).toBeFalsy(); + expect(gridState['moving']).toBeFalsy(); }); + it('getState should return correct moving state', () => { + const state = fix.componentInstance.state; + const initialState = HelperFunctions.buildStateString(grid, 'moving', 'true', 'true'); + + let gridState = state.getState(true, ['moving', 'rowIslands']); + expect(gridState).toBe(initialState); + + gridState = state.getState(false, ['moving', 'rowIslands']) as IGridState; + HelperFunctions.verifyMoving(grid.moving, gridState); + }); + + it('setState should correctly restore grid moving state from string', fakeAsync(() => { + const state = fix.componentInstance.state; + + const initialState = HelperFunctions.buildStateString(grid, 'moving', 'true', 'true'); + const movingState = HelperFunctions.buildStateString(grid, 'moving', 'false', 'false'); + + const movingStateObject = JSON.parse(movingState) as IGridState; + + let gridState = state.getState(true, ['moving', 'rowIslands']); + expect(gridState).toBe(initialState); + + state.setState(JSON.stringify(movingStateObject)); + tick(); + fix.detectChanges(); + gridState = state.getState(false, ['moving', 'rowIslands']) as IGridState; + HelperFunctions.verifyMoving(grid.moving, gridState); + const gridsCollection = HelperFunctions.getChildGridsCollection(grid, gridState); + gridsCollection.forEach(childGrid => { + HelperFunctions.verifyMoving(childGrid.grid.moving, childGrid.state); + }); + gridState = state.getState(true, ['moving', 'rowIslands']); + expect(gridState).toBe(movingState); + })); + it('getState should return correct filtering state', () => { const state = fix.componentInstance.state; const filtering = grid.filteringExpressionsTree; @@ -427,9 +467,9 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => { fix.detectChanges(); const state = fix.componentInstance.state; - const rootGridColumns = '[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}]'; - const childGridColumns = '[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}]'; - const initialState = HelperFunctions.buildStateString(grid, 'columns', rootGridColumns, childGridColumns); + // const rootGridColumns = '[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}]'; + // const childGridColumns = '[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}]'; + const initialState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}],"rowIslands":[{"id":"igx-row-island-childData","parentRowID":"0","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"1","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"2","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"3","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"4","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}],"rowIslands":[]}}]}' const newColumns = '[{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","groupable":false,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"363px","header":"Product Name","resizable":false,"searchable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","groupable":false,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"363px","header":"ID","resizable":false,"searchable":true,"disableHiding":true}]'; const newColumnsState = HelperFunctions.buildStateString(grid, 'columns', newColumns, newColumns); @@ -521,6 +561,10 @@ class HelperFunctions { expect(paging).toEqual(jasmine.objectContaining(gridState.paging)); } + public static verifyMoving(moving: boolean, gridState: IGridState){ + expect(moving).toEqual(gridState.moving); + } + public static verifyRowSelection(selectedRows: any[], gridState: IGridState) { gridState.rowSelection.forEach((s, index) => { expect(s).toBe(selectedRows[index]); @@ -580,12 +624,11 @@ class HelperFunctions { @Component({ template: ` - + - + { rowSelection: true, columnSelection: true, rowIslands: true, - expansion: true + rowPinning: true, + expansion: true, + moving: true }; fix.detectChanges(); @@ -60,7 +62,8 @@ describe('IgxTreeGridState - input properties #tGrid', () => { it('getState should return corect IGridState object when options are not default', () => { const options = { sorting: false, - paging: false + paging: false, + moving: false }; fix.detectChanges(); const state = fix.componentInstance.state; @@ -70,15 +73,17 @@ describe('IgxTreeGridState - input properties #tGrid', () => { let gridState = state.getState(false) as IGridState; expect(gridState['sorting']).toBeFalsy(); expect(gridState['groupBy']).toBeFalsy(); + expect(gridState['moving']).toBeFalsy(); gridState = state.getState(false, ['filtering', 'sorting', 'groupBy']) as IGridState; expect(gridState['sorting']).toBeFalsy(); expect(gridState['groupBy']).toBeFalsy(); + expect(gridState['moving']).toBeFalsy(); }); it('getState should return corect JSON string', () => { // eslint-disable-next-line max-len - const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"Name","width":"150px","header":"Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"date","hasSummary":true,"field":"Hire Date","width":"140px","header":"Hire Date","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"Age","width":"110px","header":"Age","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":4,"countRecords":18,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}'; + const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"field":"Name","width":"150px","header":"Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"date","hasSummary":true,"field":"Hire Date","width":"140px","header":"Hire Date","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"Age","width":"110px","header":"Age","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":4,"countRecords":18,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"moving":true,"rowIslands":[]}'; fix.detectChanges(); const state = fix.componentInstance.state; @@ -143,6 +148,35 @@ describe('IgxTreeGridState - input properties #tGrid', () => { expect(gridState).toBe(filteringState); }); + it('getState should return corect moving state', () => { + fix.detectChanges(); + const state = fix.componentInstance.state; + const moving = grid.moving; + + let gridState = state.getState(true, 'moving'); + expect(gridState).toBe('{"moving":true}', 'JSON string'); + + gridState = state.getState(false, ['moving']) as IGridState; + HelperFunctions.verifyMoving(moving, gridState); + }); + + it('setState should correctly restore grid moving state from string', () => { + fix.detectChanges(); + const state = fix.componentInstance.state; + // eslint-disable-next-line max-len + const movingState = '{"moving":false}'; + const initialState = '{"moving":true}'; + + let gridState = state.getState(true, 'moving'); + expect(gridState).toBe(initialState); + + state.setState(movingState); + gridState = state.getState(false, 'moving') as IGridState; + HelperFunctions.verifyMoving(grid.moving, gridState); + gridState = state.getState(true, 'moving'); + expect(gridState).toBe(movingState); + }); + it('setState should correctly restore grid sorting state from string', () => { fix.detectChanges(); const state = fix.componentInstance.state; @@ -164,7 +198,7 @@ describe('IgxTreeGridState - input properties #tGrid', () => { fix.detectChanges(); const state = fix.componentInstance.state; /* eslint-disable max-len */ - const initialColumnsState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"Name","width":"150px","header":"Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"date","hasSummary":true,"field":"Hire Date","width":"140px","header":"Hire Date","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"Age","width":"110px","header":"Age","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}]}'; + const initialColumnsState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"field":"Name","width":"150px","header":"Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"date","hasSummary":true,"field":"Hire Date","width":"140px","header":"Hire Date","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"Age","width":"110px","header":"Age","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}]}'; const newColumnsState = '{"columns":[{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"Name","width":"150px","header":"Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"Age","width":"110px","header":"Age","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"date","hasSummary":true,"field":"Hire Date","width":"140px","header":"Hire Date","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}]}'; /* eslint-enable max-len */ const columns = JSON.parse(newColumnsState).columns; @@ -295,6 +329,10 @@ class HelperFunctions { expect(paging).toEqual(jasmine.objectContaining(gridState.paging)); } + public static verifyMoving(moving: boolean, gridState: IGridState){ + expect(moving).toEqual(gridState.moving); + } + public static verifyRowSelection(selectedRows: any[], gridState: IGridState) { gridState.rowSelection.forEach((s, index) => { expect(s).toBe(selectedRows[index]); @@ -310,13 +348,12 @@ class HelperFunctions { @Component({ template: ` - { it('(UI) should transform a non-tree column into a tree column when moving the original tree-column through', (async () => { TreeGridFunctions.verifyTreeColumn(fix, 'ID', 4); - const column = treeGrid.columnList.filter(c => c.field === 'ID')[0]; - column.movable = true; + treeGrid.moving = true; const header = TreeGridFunctions.getHeaderCell(fix, 'ID').nativeElement; UIInteractions.simulatePointerEvent('pointerdown', header, 50, 50); @@ -268,8 +267,7 @@ describe('IgxTreeGrid - Integration #tGrid', () => { it('(UI) should transform a non-tree column into a tree column when moving the original tree-column through', (async () => { TreeGridFunctions.verifyTreeColumn(fix, 'ID', 5); - const column = treeGrid.columnList.filter(c => c.field === 'ID')[0]; - column.movable = true; + treeGrid.moving = true; const header = TreeGridFunctions.getHeaderCell(fix, 'ID').nativeElement; UIInteractions.simulatePointerEvent('pointerdown', header, 50, 50); @@ -1296,8 +1294,7 @@ describe('IgxTreeGrid - Integration #tGrid', () => { it('(UI) Should transform a non-tree column into a tree column when moving it first within a group', (async () => { TreeGridFunctions.verifyTreeColumnInMultiColHeaders(fix, 'ID', 4); - const column = treeGrid.columnList.filter(c => c.field === 'ID')[0]; - column.movable = true; + treeGrid.moving = true; const header = TreeGridFunctions.getHeaderCellMultiColHeaders(fix, 'ID').nativeElement; UIInteractions.simulatePointerEvent('pointerdown', header, 100, 90); @@ -1325,8 +1322,7 @@ describe('IgxTreeGrid - Integration #tGrid', () => { it('(UI) Should transform a non-tree column of a column group to a tree column when its group is moved first', (async () => { TreeGridFunctions.verifyTreeColumnInMultiColHeaders(fix, 'ID', 4); - const column = treeGrid.columnList.filter(c => c.header === 'General Information')[0]; - column.movable = true; + treeGrid.moving = true; fix.detectChanges(); // const header = fix.debugElement.queryAll(By.css('.igx-grid-thead__item'))[0].nativeElement; diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html index 9d4402aabba..32b641f81db 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html @@ -20,10 +20,10 @@ (dragStop)="selectionService.dragMode = $event" [attr.aria-activedescendant]="activeDescendant" [attr.role]="dataView.length ? null : 'row'" (dragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode" [style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='preventContainerScroll($event)'> - - @@ -94,7 +94,7 @@
-
diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts index 169d6e23ce6..c77d29a2511 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts @@ -183,7 +183,7 @@ export class ColumnHidingTestComponent extends GridWithSizeComponent implements @Component({ template: `
- ${ GridTemplateStrings.declareGrid(' #grid [height]="height" [width]="width"', '', ColumnDefinitions.contactInfoGroupableColumns) } + ${ GridTemplateStrings.declareGrid(' #grid [height]="height" [width]="width" [moving]="true"', '', ColumnDefinitions.contactInfoGroupableColumns) }
` }) export class ColumnGroupsHidingTestComponent extends ColumnHidingTestComponent { @@ -250,7 +250,7 @@ export class ColumnPinningWithTemplateTestComponent extends ColumnPinningTestCom @Component({ template: `
- ${ GridTemplateStrings.declareGrid(' #grid [height]="height" ', '', ColumnDefinitions.contactInfoGroupableColumns, + ${ GridTemplateStrings.declareGrid(' #grid [height]="height" [moving]="true"', '', ColumnDefinitions.contactInfoGroupableColumns, '')}
` }) 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 70f590e87de..2292f4ba8cf 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 @@ -123,10 +123,9 @@ export class ColumnHiddenFromMarkupComponent extends BasicGridComponent { @Component({ template: ` - + ${GridTemplateStrings.declareGrid( - '[height]="height" [width]="width" [rowSelection]="rowSelection" [autoGenerate]="autoGenerate"', + '[height]="height" [moving]="true" [width]="width" [moving]="true" [rowSelection]="rowSelection" [autoGenerate]="autoGenerate"', EventSubscriptions.columnMovingStart + EventSubscriptions.columnMoving + EventSubscriptions.columnMovingEnd, ColumnDefinitions.movableColumns)}
` }) @@ -811,7 +810,7 @@ export class MovableColumnsComponent extends BasicGridComponent { } @Component({ - template: GridTemplateStrings.declareGrid(`height="300px" width="500px"`, '', ColumnDefinitions.movableColumns) + template: GridTemplateStrings.declareGrid(`[moving]="true" height="300px" width="500px"`, '', ColumnDefinitions.movableColumns) }) export class MovableTemplatedColumnsComponent extends BasicGridComponent { public data = SampleTestData.personIDNameRegionData(); @@ -821,7 +820,7 @@ export class MovableTemplatedColumnsComponent extends BasicGridComponent { } @Component({ - template: GridTemplateStrings.declareGrid(`height="300px" width="500px" [autoGenerate]="autoGenerate" [paging]="paging"`, + template: GridTemplateStrings.declareGrid(`height="300px" width="500px" [moving]="true" [autoGenerate]="autoGenerate" [paging]="paging"`, EventSubscriptions.columnInit, '') }) export class MovableColumnsLargeComponent extends GridAutoGenerateComponent { @@ -833,7 +832,6 @@ export class MovableColumnsLargeComponent extends GridAutoGenerateComponent { public paging = false; public columnInit(column: IgxColumnComponent) { - column.movable = true; column.sortable = true; column.width = '100px'; } @@ -853,7 +851,7 @@ export class MultiColumnHeadersComponent extends BasicGridComponent { } @Component({ - template: GridTemplateStrings.declareGrid(`height="800px" width="500px"`, '', + template: GridTemplateStrings.declareGrid(`[moving]="true" height="800px" width="500px"`, '', ColumnDefinitions.multiColHeadersWithGroupingColumns) }) export class MultiColumnHeadersWithGroupingComponent extends BasicGridComponent { @@ -1224,20 +1222,20 @@ export class IgxGridFilteringESFLoadOnDemandComponent extends BasicGridComponent } @Component({ - template: ` + template: ` + [filterable]="false" [resizable]="resizable" [sortable]="'true'"> + [sortable]="'true'"> + [sortable]="'true'"> + [sortable]="'true'"> + [filterable]="filterable" [resizable]="resizable" dataType="date" [sortable]="'true'"> + dataType="string" [filters]="customFilter" [sortable]="'true'"> @@ -1254,20 +1252,20 @@ export class IgxGridFilteringESFEmptyTemplatesComponent extends BasicGridCompone } @Component({ - template: ` + template: ` + [filterable]="false" [resizable]="resizable" [sortable]="'true'"> + [sortable]="'true'"> + [sortable]="'true'"> + [sortable]="'true'"> + [filterable]="filterable" [resizable]="resizable" dataType="date" [sortable]="'true'"> + dataType="string" [filters]="customFilter" [sortable]="'true'"> @@ -1660,7 +1658,7 @@ export class IgxGridRowEditingWithoutEditableColumnsComponent extends BasicGridC @Component({ template: ` - + @@ -1671,7 +1669,7 @@ export class IgxGridRowEditingWithoutEditableColumnsComponent extends BasicGridC - + @@ -2351,9 +2349,9 @@ export class MRLTestComponent { @Component({ template: ` + [rowEditable]="true" [primaryKey]="'ID'" [allowFiltering]="true" [moving]="true"> + [width]="c.width" [resizable]='true'> @@ -2428,7 +2426,7 @@ export class GridExportGroupedDataComponent extends BasicGridComponent { } @Component({ - template: GridTemplateStrings.declareGrid(` height="1000px"`, '', ColumnDefinitions.multiColHeadersExportColumns) + template: GridTemplateStrings.declareGrid(`[moving]="true" height="1000px"`, '', ColumnDefinitions.multiColHeadersExportColumns) }) export class MultiColumnHeadersExportComponent extends BasicGridComponent { public data = SampleTestData.contactInfoDataFull(); diff --git a/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts index 6ac92ca045a..034bdb98499 100644 --- a/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts @@ -12,16 +12,16 @@ import { IgxHierarchicalTransactionServiceFactory } from '../grids/hierarchical- @Component({ template: ` - + [height]="'600px'" [width]="'700px'" #hierarchicalGrid [primaryKey]="'ID'" [moving]="true"> + - - + + - +
ID @@ -74,16 +74,16 @@ export class IgxHierarchicalGridTestBaseComponent { @Component({ template: ` - + [height]="'600px'" [width]="'700px'" #hierarchicalGrid [primaryKey]="'ID'" [moving]="true"> + - - + + - +
ID @@ -415,21 +415,21 @@ export class IgxHierarchicalGridExportComponent { @Component({ template: ` - - - - - - - + + + + + + + - - - - + + + + @@ -438,19 +438,19 @@ export class IgxHierarchicalGridExportComponent { - - - - - + + + + + - - - - + + + + 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 f3f4f4c74df..8fb1f82f720 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 @@ -353,7 +353,7 @@ export class ColumnDefinitions { `; public static movableColumns = ` - - - - - - - - - + + + + + - - + + {{ column.field }} @@ -401,39 +401,39 @@ export class ColumnDefinitions { {{val}} - - - + + + `; public static multiColHeadersWithGroupingColumns = ` - - - - - - + + + + + - + `; public static contactInfoGroupableColumns = ` - - - + - - + - - `; @@ -473,13 +473,13 @@ export class ColumnDefinitions { `; public static multiColHeadersExportColumns = ` - - - - + + + - - + + diff --git a/src/app/drag-drop/shadow-dom-grid/shadow-grid-sample.html b/src/app/drag-drop/shadow-dom-grid/shadow-grid-sample.html index 75a4e446892..e4d19961d21 100644 --- a/src/app/drag-drop/shadow-dom-grid/shadow-grid-sample.html +++ b/src/app/drag-drop/shadow-dom-grid/shadow-grid-sample.html @@ -1,2 +1,3 @@ - - \ No newline at end of file + + diff --git a/src/app/drag-drop/shadow-dom-grid/shadow-grid-sample.ts b/src/app/drag-drop/shadow-dom-grid/shadow-grid-sample.ts index 7724a35f52b..c43d6d51a6d 100644 --- a/src/app/drag-drop/shadow-dom-grid/shadow-grid-sample.ts +++ b/src/app/drag-drop/shadow-dom-grid/shadow-grid-sample.ts @@ -23,7 +23,6 @@ export class ShadowGridSampleComponent implements OnInit { public initColumns(event: IgxColumnComponent) { const column: IgxColumnComponent = event; - column.movable = true; if (column.field === 'Name') { column.filterable = true; column.sortable = true; diff --git a/src/app/gird-cell-styling/grid-cell-styling.sample.html b/src/app/gird-cell-styling/grid-cell-styling.sample.html index 68ea50b0308..2e086560ddb 100644 --- a/src/app/gird-cell-styling/grid-cell-styling.sample.html +++ b/src/app/gird-cell-styling/grid-cell-styling.sample.html @@ -12,6 +12,7 @@
Grid sample with rowClasses property applied based on row ID Grid sample with rowClasses property applied based on row ID Grid sample with rowClasses property applied based on row ID Grid sample with rowClasses property applied based on row ID
- @@ -211,8 +211,8 @@
- - + diff --git a/src/app/grid-cell-api/grid-cell-api.sample.ts b/src/app/grid-cell-api/grid-cell-api.sample.ts index c1c0401795c..cf9c10d5219 100644 --- a/src/app/grid-cell-api/grid-cell-api.sample.ts +++ b/src/app/grid-cell-api/grid-cell-api.sample.ts @@ -76,16 +76,16 @@ export class GridCellAPISampleComponent implements OnInit { ]; this.treeGridHierColumns = [ - { field: 'ID', width: 200, resizable: true, movable: true, pinned: true }, - { field: 'CompanyName', width: 150, resizable: true, movable: true }, - { field: 'ContactName', width: 150, resizable: true, movable: true }, - { field: 'ContactTitle', width: 150, resizable: true, movable: true }, - { field: 'Address', width: 150, resizable: true, movable: true }, - { field: 'City', width: 150, resizable: true, movable: true, summary: true }, - { field: 'Region', width: 150, resizable: true, movable: true }, - { field: 'PostalCode', width: 150, resizable: true, movable: true }, - { field: 'Phone', width: 150, resizable: true, movable: true }, - { field: 'Fax', width: 150, resizable: true, movable: true } + { field: 'ID', width: 200, resizable: true, pinned: true }, + { field: 'CompanyName', width: 150, resizable: true }, + { field: 'ContactName', width: 150, resizable: true }, + { field: 'ContactTitle', width: 150, resizable: true }, + { field: 'Address', width: 150, resizable: true}, + { field: 'City', width: 150, resizable: true, summary: true }, + { field: 'Region', width: 150, resizable: true }, + { field: 'PostalCode', width: 150, resizable: true }, + { field: 'Phone', width: 150, resizable: true }, + { field: 'Fax', width: 150, resizable: true } ]; this.treeGridHierData = HIERARCHICAL_SAMPLE_DATA.slice(0); @@ -123,11 +123,11 @@ export class GridCellAPISampleComponent implements OnInit { // treegrid cols and data this.treeColumns = [ - { field: 'employeeID', label: 'ID', width: 200, resizable: true, movable: true, dataType: 'number', hasSummary: false }, - { field: 'Salary', label: 'Salary', width: 200, resizable: true, movable: true, dataType: 'number', hasSummary: true }, - { field: 'firstName', label: 'First Name', width: 300, resizable: true, movable: true, dataType: 'string', hasSummary: false }, - { field: 'lastName', label: 'Last Name', width: 150, resizable: true, movable: true, dataType: 'string', hasSummary: false }, - { field: 'Title', label: 'Title', width: 200, resizable: true, movable: true, dataType: 'string', hasSummary: true } + { field: 'employeeID', label: 'ID', width: 200, resizable: true, dataType: 'number', hasSummary: false }, + { field: 'Salary', label: 'Salary', width: 200, resizable: true, dataType: 'number', hasSummary: true }, + { field: 'firstName', label: 'First Name', width: 300, resizable: true, dataType: 'string', hasSummary: false }, + { field: 'lastName', label: 'Last Name', width: 150, resizable: true, dataType: 'string', hasSummary: false }, + { field: 'Title', label: 'Title', width: 200, resizable: true, dataType: 'string', hasSummary: true } ]; this.treeData = [ { Salary: 2500, employeeID: 0, PID: -1, firstName: 'Andrew', lastName: 'Fuller', Title: 'Vice President, Sales' }, diff --git a/src/app/grid-cellEditing/grid-cellEditing.component.html b/src/app/grid-cellEditing/grid-cellEditing.component.html index 9ddd3030222..5d2e0d80f67 100644 --- a/src/app/grid-cellEditing/grid-cellEditing.component.html +++ b/src/app/grid-cellEditing/grid-cellEditing.component.html @@ -3,13 +3,13 @@

Grid with primary key ProductID

- - + + - + @@ -22,19 +22,19 @@

Grid with primary key ProductID

 - + - + - + - + @@ -50,7 +50,7 @@

Grid with primary key ProductID

Grid without PK

- + @@ -59,18 +59,18 @@

Grid without PK

 - + - + - + - + - + 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 e399b65ce29..cb1d22b15a8 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,7 @@ {{column.expanded ? 'remove' : 'add'}} - + @@ -10,25 +10,25 @@ - - - + + + - - - + + + {{column.expanded ? 'remove' : 'add'}} - - - - - - - + + + + + + + diff --git a/src/app/grid-column-moving/grid-column-moving.sample.html b/src/app/grid-column-moving/grid-column-moving.sample.html index b3b9036865a..163f92c0196 100644 --- a/src/app/grid-column-moving/grid-column-moving.sample.html +++ b/src/app/grid-column-moving/grid-column-moving.sample.html @@ -5,7 +5,7 @@
- +
@@ -13,21 +13,10 @@
- + @@ -35,20 +24,11 @@ - - + + @@ -56,29 +36,34 @@ Drag mode: {{ grid1.selectionService.dragMode }}
- +
Grid with MCH -
+
- +
- - + + {{ column.header }} {{ column.visibleIndex }} - + {{ column.field }} {{ column.visibleIndex }} @@ -88,64 +73,81 @@ {{ column.field }} {{ column.visibleIndex }} - + {{ column.header }} {{ column.visibleIndex }} - + {{ column.field }} {{ column.visibleIndex }} - + {{ column.field }} {{ column.visibleIndex }} - + {{column.expanded ? 'remove' : 'add'}} - + {{ column.field }} {{ column.visibleIndex }} - + {{ column.header }} {{ column.visibleIndex }} - - {{ column.field }} {{ column.visibleIndex }} - - + {{ column.field }} {{ column.visibleIndex }} - - {{ column.field }} {{ column.visibleIndex }} - - - {{ column.field }} {{ column.visibleIndex }} - - - {{ column.field }} {{ column.visibleIndex }} - - + + + {{ column.field }} {{ column.visibleIndex }} - + + + + {{ column.field }} {{ column.visibleIndex }} + + + + + {{ column.field }} {{ column.visibleIndex }} + + + + + {{ column.field }} {{ column.visibleIndex }} + + + + + {{ column.field }} {{ column.visibleIndex }} + + {{ column.field }} {{ column.visibleIndex }} - - {{ column.field }} {{ column.visibleIndex }} - - - {{ column.field }} {{ column.visibleIndex }} - + + + {{ column.field }} {{ column.visibleIndex }} + + + + + {{ column.field }} {{ column.visibleIndex }} + + @@ -154,4 +156,4 @@
-
+ \ No newline at end of file diff --git a/src/app/grid-column-moving/grid-column-moving.sample.ts b/src/app/grid-column-moving/grid-column-moving.sample.ts index 1316b99eda9..48c5dec30f5 100644 --- a/src/app/grid-column-moving/grid-column-moving.sample.ts +++ b/src/app/grid-column-moving/grid-column-moving.sample.ts @@ -66,31 +66,31 @@ export class GridColumnMovingSampleComponent implements OnInit { this.data = SAMPLE_DATA; this.columns = [ - { field: 'ID', width: 150, resizable: true, movable: true, sortable: false, filterable: true, groupable: true, + { field: 'ID', width: 150, resizable: true, sortable: false, filterable: true, groupable: true, summary: true, type: 'string', pinned: false }, - { field: 'CompanyName', width: 150, resizable: true, movable: true, sortable: true, filterable: true, groupable: true, + { field: 'CompanyName', width: 150, resizable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string'}, - { field: 'ContactName', width: 150, resizable: true, movable: true, sortable: true, filterable: true, groupable: true, + { field: 'ContactName', width: 150, resizable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string' }, - { field: 'ContactTitle', width: 150, resizable: true, movable: true, sortable: true, filterable: true, groupable: true, + { field: 'ContactTitle', width: 150, resizable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string' }, - { field: 'Address', width: 150, resizable: true, movable: true, sortable: true, filterable: true, groupable: true, + { field: 'Address', width: 150, resizable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string' }, - { field: 'City', width: 150, resizable: true, movable: true, sortable: false, filterable: false, groupable: true, + { field: 'City', width: 150, resizable: true, sortable: false, filterable: false, groupable: true, summary: true, type: 'string' }, - { field: 'Region', width: 150, resizable: true, movable: true, sortable: true, filterable: true, groupable: true, + { field: 'Region', width: 150, resizable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string' }, - { field: 'PostalCode', width: 150, resizable: true, movable: true, sortable: true, filterable: true, groupable: true, + { field: 'PostalCode', width: 150, resizable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string', pinned: false }, - { field: 'Phone', width: 150, resizable: true, movable: true, sortable: true, filterable: true, groupable: true, + { field: 'Phone', width: 150, resizable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string', pinned: false }, - { field: 'Fax', width: 150, resizable: true, movable: true, sortable: true, filterable: true, groupable: true, + { field: 'Fax', width: 150, resizable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string' }, - { field: 'Employees', width: 150, resizable: true, movable: true, sortable: true, filterable: true, groupable: true, + { field: 'Employees', width: 150, resizable: true, sortable: true, filterable: true, groupable: true, summary: false, type: 'number' }, { field: 'DateCreated', width: 150, resizable: true, pinned: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'time' }, - { field: 'Contract', width: 150, resizable: true, movable: true, sortable: true, filterable: true, groupable: true, + { field: 'Contract', width: 150, resizable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'boolean' } ]; } diff --git a/src/app/grid-column-selection/grid-column-selection.sample.html b/src/app/grid-column-selection/grid-column-selection.sample.html index cbbfb66cf3c..8a1acd70651 100644 --- a/src/app/grid-column-selection/grid-column-selection.sample.html +++ b/src/app/grid-column-selection/grid-column-selection.sample.html @@ -15,7 +15,7 @@ @@ -51,7 +51,7 @@ - diff --git a/src/app/grid-column-selection/grid-column-selection.sample.ts b/src/app/grid-column-selection/grid-column-selection.sample.ts index c6703b48fdf..c6956711075 100644 --- a/src/app/grid-column-selection/grid-column-selection.sample.ts +++ b/src/app/grid-column-selection/grid-column-selection.sample.ts @@ -85,14 +85,14 @@ export class GridColumnSelectionSampleComponent implements OnInit, AfterViewInit this.columns = [ { field: 'ID', width: 150, groupable: true, summary: true, selectable: true, type: 'string' }, { field: 'CompanyName', width: 150, groupable: true, summary: true, selectable: true, type: 'string', }, - { field: 'ContactName', width: 150, resizable: true, movable: true, selectable: false, summary: true, type: 'string' }, - { field: 'ContactTitle', width: 150, movable: true, sortable: true, selectable: true, summary: true, type: 'string' }, - { field: 'Address', width: 150, resizable: true, movable: true, sortable: true, selectable: true, type: 'string' }, - { field: 'City', width: 150, movable: true, sortable: false, selectable: true, type: 'string' }, - { field: 'Region', width: 150, movable: true, sortable: true, selectable: true, type: 'string' }, - { field: 'PostalCode', width: 150, movable: true, selectable: true, type: 'string' }, - { field: 'Phone', width: 150, resizable: true, movable: true, sortable: true, type: 'string' }, - { field: 'Fax', width: 150, resizable: true, movable: true, selectable: true, type: 'string' }, + { field: 'ContactName', width: 150, resizable: true, selectable: false, summary: true, type: 'string' }, + { field: 'ContactTitle', width: 150, sortable: true, selectable: true, summary: true, type: 'string' }, + { field: 'Address', width: 150, resizable: true, sortable: true, selectable: true, type: 'string' }, + { field: 'City', width: 150, sortable: false, selectable: true, type: 'string' }, + { field: 'Region', width: 150, sortable: true, selectable: true, type: 'string' }, + { field: 'PostalCode', width: 150, selectable: true, type: 'string' }, + { field: 'Phone', width: 150, resizable: true, sortable: true, type: 'string' }, + { field: 'Fax', width: 150, resizable: true, selectable: true, type: 'string' }, { field: 'Employees', width: 150, resizable: true, summary: false, selectable: true, type: 'number' }, { field: 'DateCreated', width: 150, resizable: true, selectable: true, type: 'date' }, { field: 'Contract', width: 150, resizable: true, selectable: true, type: 'boolean' } diff --git a/src/app/grid-column-types/grid-column-types.sample.html b/src/app/grid-column-types/grid-column-types.sample.html index f2f65378b68..8ee116cc4b4 100644 --- a/src/app/grid-column-types/grid-column-types.sample.html +++ b/src/app/grid-column-types/grid-column-types.sample.html @@ -7,6 +7,7 @@ [columnSelection]="'single'" [data]="data" [allowFiltering]="true" + [moving]="true" [filterMode]="filterMode" [rowSelection] ="'multiple'" [rowEditable]="false" @@ -23,7 +24,6 @@ - \ No newline at end of file + diff --git a/src/app/grid-column-types/grid-column-types.sample.ts b/src/app/grid-column-types/grid-column-types.sample.ts index 19f08bd50d1..639e4dabc17 100644 --- a/src/app/grid-column-types/grid-column-types.sample.ts +++ b/src/app/grid-column-types/grid-column-types.sample.ts @@ -31,11 +31,11 @@ export class GridColumnTypesSampleComponent implements OnInit { this.data = SAMPLE_DATA; this.columns = [ - { field: 'ID', width: 150, resizable: true, movable: true, sortable: false, filterable: true, groupable: true, + { field: 'ID', width: 150, resizable: true, sortable: false, filterable: true, groupable: true, summary: true, type: 'string', pinned: false }, - { field: 'CompanyName', width: 150, resizable: true, movable: true, sortable: true, filterable: true, groupable: true, + { field: 'CompanyName', width: 150, resizable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string'}, - { field: 'Employees', width: 150, resizable: true, movable: true, sortable: true, filterable: true, groupable: true, + { field: 'Employees', width: 150, resizable: true, sortable: true, filterable: true, groupable: true, summary: false, type: 'number' }, { field: 'DateCreated', width: 150, resizable: true, pinned: false, sortable: true, filterable: true, groupable: true, summary: true, type: 'dateTime' }, @@ -43,17 +43,17 @@ export class GridColumnTypesSampleComponent implements OnInit { summary: true, type: 'time' }, { field: 'Discount', width: 150, resizable: true, pinned: false, sortable: true, filterable: true, groupable: true, summary: true, type: 'percent' }, - { field: 'Contract', width: 150, resizable: true, movable: true, sortable: true, filterable: true, groupable: true, + { field: 'Contract', width: 150, resizable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'boolean' }, - { field: 'ContactName', width: 150, resizable: true, movable: true, sortable: true, filterable: true, groupable: true, + { field: 'ContactName', width: 150, resizable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string' }, - { field: 'ContactTitle', width: 150, resizable: true, movable: true, sortable: true, filterable: true, groupable: true, + { field: 'ContactTitle', width: 150, resizable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string' }, - { field: 'Address', width: 150, resizable: true, movable: true, sortable: true, filterable: true, groupable: true, + { field: 'Address', width: 150, resizable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string' }, - { field: 'City', width: 150, resizable: true, movable: true, sortable: false, filterable: false, groupable: true, + { field: 'City', width: 150, resizable: true, sortable: false, filterable: false, groupable: true, summary: true, type: 'string' }, - { field: 'Phone', width: 150, resizable: true, movable: true, sortable: true, filterable: true, groupable: true, + { field: 'Phone', width: 150, resizable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string', pinned: false } ]; } diff --git a/src/app/grid-esf-load-on-demand/grid-esf-load-on-demand.component.html b/src/app/grid-esf-load-on-demand/grid-esf-load-on-demand.component.html index 17f9534abdd..6cf40719c3a 100644 --- a/src/app/grid-esf-load-on-demand/grid-esf-load-on-demand.component.html +++ b/src/app/grid-esf-load-on-demand/grid-esf-load-on-demand.component.html @@ -4,7 +4,7 @@
- @@ -13,11 +13,11 @@ - - - - - + + + + + - + - + - + - + @@ -33,38 +31,31 @@

Grid with local data

Grid with remote data

- + - + - + - + - +

Tree Grid

- - + + diff --git a/src/app/grid-formatting/grid-formatting.component.ts b/src/app/grid-formatting/grid-formatting.component.ts index f49a765f0af..8f02898a3ee 100644 --- a/src/app/grid-formatting/grid-formatting.component.ts +++ b/src/app/grid-formatting/grid-formatting.component.ts @@ -48,17 +48,17 @@ export class GridFormattingComponent implements OnInit, AfterViewInit { public ngOnInit() { this.remoteData = this.remoteService.remoteData; this.treeGridColumns = [ - { field: 'ID', width: 150, resizable: true, movable: true, pinned: true }, - { field: 'CompanyName', width: 150, resizable: true, movable: true }, - { field: 'ContactName', width: 150, resizable: true, movable: true }, - { field: 'OrderDate', dataType: 'date', width: 150, groupable: true, movable: true }, - { field: 'ContactTitle', width: 150, resizable: true, movable: true }, - { field: 'Address', width: 150, resizable: true, movable: true }, - { field: 'City', width: 150, resizable: true, movable: true }, - { field: 'Region', width: 150, resizable: true, movable: true }, - { field: 'PostalCode', width: 150, resizable: true, movable: true }, - { field: 'Phone', width: 150, resizable: true, movable: true }, - { field: 'Fax', width: 150, resizable: true, movable: true } + { field: 'ID', width: 150, resizable: true, pinned: true }, + { field: 'CompanyName', width: 150, resizable: true }, + { field: 'ContactName', width: 150, resizable: true }, + { field: 'OrderDate', dataType: 'date', width: 150, groupable: true }, + { field: 'ContactTitle', width: 150, resizable: true }, + { field: 'Address', width: 150, resizable: true }, + { field: 'City', width: 150, resizable: true }, + { field: 'Region', width: 150, resizable: true }, + { field: 'PostalCode', width: 150, resizable: true }, + { field: 'Phone', width: 150, resizable: true }, + { field: 'Fax', width: 150, resizable: true } ]; this.treeData = HIERARCHICAL_SAMPLE_DATA.slice(0).map((el, index) => { const obj = el as any; diff --git a/src/app/grid-groupby/grid-groupby.sample.html b/src/app/grid-groupby/grid-groupby.sample.html index 1d0fecaf3ea..d6fb732fc0b 100644 --- a/src/app/grid-groupby/grid-groupby.sample.html +++ b/src/app/grid-groupby/grid-groupby.sample.html @@ -27,11 +27,11 @@ - diff --git a/src/app/grid-multi-row-layout/grid-mrl.sample.html b/src/app/grid-multi-row-layout/grid-mrl.sample.html index f5402e6106d..9e719cfe9ac 100644 --- a/src/app/grid-multi-row-layout/grid-mrl.sample.html +++ b/src/app/grid-multi-row-layout/grid-mrl.sample.html @@ -21,12 +21,12 @@ - + - - + + diff --git a/src/app/grid-percentage-columns/grid-percantge-widths.sample.html b/src/app/grid-percentage-columns/grid-percantge-widths.sample.html index 830c9c8a2bc..66e3025f968 100644 --- a/src/app/grid-percentage-columns/grid-percantge-widths.sample.html +++ b/src/app/grid-percentage-columns/grid-percantge-widths.sample.html @@ -1,20 +1,20 @@
- - + + - + - + {{val | date:'dd/MM/yyyy'}} - - + diff --git a/src/app/grid-row-api/grid-row-api.sample.html b/src/app/grid-row-api/grid-row-api.sample.html index 3a4f01f724f..b204da36ebd 100644 --- a/src/app/grid-row-api/grid-row-api.sample.html +++ b/src/app/grid-row-api/grid-row-api.sample.html @@ -26,13 +26,14 @@
-
+
- +
Country: {{dataItem.Country}}
@@ -40,7 +41,9 @@
Address: {{dataItem.Address}}
 - +
@@ -68,7 +71,7 @@
-
+
@@ -99,25 +102,28 @@
-
+
- - + + - <<<<<<< HEAD + - - ======= + + ======= - - >>>>>>> cd5c7d39bc2332a9430668d37fa597000039943c +
@@ -160,14 +166,17 @@
-
+
- - + + @@ -213,16 +222,20 @@
-
+
- - + + - - + + diff --git a/src/app/grid-row-api/grid-row-api.sample.ts b/src/app/grid-row-api/grid-row-api.sample.ts index 3f525a8c3b7..5bfde56e20a 100644 --- a/src/app/grid-row-api/grid-row-api.sample.ts +++ b/src/app/grid-row-api/grid-row-api.sample.ts @@ -86,16 +86,16 @@ export class GridRowAPISampleComponent implements OnInit { ]; this.treeGridHierColumns = [ - { field: 'ID', width: 200, resizable: true, movable: true, pinned: true }, - { field: 'CompanyName', width: 150, resizable: true, movable: true }, - { field: 'ContactName', width: 150, resizable: true, movable: true }, - { field: 'ContactTitle', width: 150, resizable: true, movable: true }, - { field: 'Address', width: 150, resizable: true, movable: true }, - { field: 'City', width: 150, resizable: true, movable: true, summary: true }, - { field: 'Region', width: 150, resizable: true, movable: true }, - { field: 'PostalCode', width: 150, resizable: true, movable: true }, - { field: 'Phone', width: 150, resizable: true, movable: true }, - { field: 'Fax', width: 150, resizable: true, movable: true } + { field: 'ID', width: 200, resizable: true, pinned: true }, + { field: 'CompanyName', width: 150, resizable: true }, + { field: 'ContactName', width: 150, resizable: true }, + { field: 'ContactTitle', width: 150, resizable: true }, + { field: 'Address', width: 150, resizable: true }, + { field: 'City', width: 150, resizable: true, summary: true }, + { field: 'Region', width: 150, resizable: true }, + { field: 'PostalCode', width: 150, resizable: true }, + { field: 'Phone', width: 150, resizable: true }, + { field: 'Fax', width: 150, resizable: true } ]; this.treeGridHierData = HIERARCHICAL_SAMPLE_DATA.slice(0); @@ -133,11 +133,11 @@ export class GridRowAPISampleComponent implements OnInit { // treegrid cols and data this.treeColumns = [ - { field: 'employeeID', label: 'ID', width: 200, resizable: true, movable: true, dataType: 'number', hasSummary: false }, - { field: 'Salary', label: 'Salary', width: 200, resizable: true, movable: true, dataType: 'number', hasSummary: true }, - { field: 'firstName', label: 'First Name', width: 300, resizable: true, movable: true, dataType: 'string', hasSummary: false }, - { field: 'lastName', label: 'Last Name', width: 150, resizable: true, movable: true, dataType: 'string', hasSummary: false }, - { field: 'Title', label: 'Title', width: 200, resizable: true, movable: true, dataType: 'string', hasSummary: true } + { field: 'employeeID', label: 'ID', width: 200, resizable: true, dataType: 'number', hasSummary: false }, + { field: 'Salary', label: 'Salary', width: 200, resizable: true, dataType: 'number', hasSummary: true }, + { field: 'firstName', label: 'First Name', width: 300, resizable: true, dataType: 'string', hasSummary: false }, + { field: 'lastName', label: 'Last Name', width: 150, resizable: true, dataType: 'string', hasSummary: false }, + { field: 'Title', label: 'Title', width: 200, resizable: true, dataType: 'string', hasSummary: true } ]; this.treeData = [ { Salary: 2500, employeeID: 0, PID: -1, firstName: 'Andrew', lastName: 'Fuller', Title: 'Vice President, Sales' }, diff --git a/src/app/grid-row-edit/grid-row-edit-sample.component.html b/src/app/grid-row-edit/grid-row-edit-sample.component.html index f890827ee02..83c890aa259 100644 --- a/src/app/grid-row-edit/grid-row-edit-sample.component.html +++ b/src/app/grid-row-edit/grid-row-edit-sample.component.html @@ -82,7 +82,7 @@

Cancel Grid Edit Events

Row - DONE
- @@ -100,7 +100,7 @@

Cancel Grid Edit Events

 - + diff --git a/src/app/grid-row-pinning/grid-row-pinning.sample.html b/src/app/grid-row-pinning/grid-row-pinning.sample.html index cd246620d15..58c6c888665 100644 --- a/src/app/grid-row-pinning/grid-row-pinning.sample.html +++ b/src/app/grid-row-pinning/grid-row-pinning.sample.html @@ -15,7 +15,9 @@ Bottom Row Pinning toggle Right Column Pinning toggle - + @@ -32,7 +34,8 @@ - + @@ -41,15 +44,18 @@ - + -
+
igxHierarchicalGrid
- + @@ -69,10 +75,12 @@ - + - + @@ -81,7 +89,9 @@
igxTreeGrid
- + @@ -100,11 +110,13 @@ - +
-
\ No newline at end of file + diff --git a/src/app/grid-row-pinning/grid-row-pinning.sample.ts b/src/app/grid-row-pinning/grid-row-pinning.sample.ts index f57fd1ea016..3135955a73c 100644 --- a/src/app/grid-row-pinning/grid-row-pinning.sample.ts +++ b/src/app/grid-row-pinning/grid-row-pinning.sample.ts @@ -137,11 +137,11 @@ export class GridRowPinningSampleComponent implements OnInit, AfterViewInit { // treegrid cols and data this.treeColumns = [ - { field: 'employeeID', label: 'ID', width: 200, resizable: true, movable: true, dataType: 'number', hasSummary: false }, - { field: 'Salary', label: 'Salary', width: 200, resizable: true, movable: true, dataType: 'number', hasSummary: true }, - { field: 'firstName', label: 'First Name', width: 300, resizable: true, movable: true, dataType: 'string', hasSummary: false }, - { field: 'lastName', label: 'Last Name', width: 150, resizable: true, movable: true, dataType: 'string', hasSummary: false }, - { field: 'Title', label: 'Title', width: 200, resizable: true, movable: true, dataType: 'string', hasSummary: true } + { field: 'employeeID', label: 'ID', width: 200, resizable: true, dataType: 'number', hasSummary: false }, + { field: 'Salary', label: 'Salary', width: 200, resizable: true, dataType: 'number', hasSummary: true }, + { field: 'firstName', label: 'First Name', width: 300, resizable: true, dataType: 'string', hasSummary: false }, + { field: 'lastName', label: 'Last Name', width: 150, resizable: true, dataType: 'string', hasSummary: false }, + { field: 'Title', label: 'Title', width: 200, resizable: true, dataType: 'string', hasSummary: true } ]; this.treeData = [ { Salary: 2500, employeeID: 0, PID: -1, firstName: 'Andrew', lastName: 'Fuller', Title: 'Vice President, Sales' }, diff --git a/src/app/grid-search/grid-search.sample.html b/src/app/grid-search/grid-search.sample.html index 53c08160f67..3fbc5b8faa1 100644 --- a/src/app/grid-search/grid-search.sample.html +++ b/src/app/grid-search/grid-search.sample.html @@ -5,15 +5,8 @@ - + @@ -26,19 +19,9 @@ - +
diff --git a/src/app/grid-search/grid-search.sample.ts b/src/app/grid-search/grid-search.sample.ts index 3dd7b840f02..3c690be5aac 100644 --- a/src/app/grid-search/grid-search.sample.ts +++ b/src/app/grid-search/grid-search.sample.ts @@ -26,19 +26,19 @@ export class GridSearchComponent implements OnInit { ]; this.columns = [ - { field: 'ID', width: 80, resizable: true, movable: true }, - { field: 'CompanyName', width: 150, resizable: true, movable: true, type: 'string'}, - { field: 'ContactName', width: 150, resizable: true, movable: true, type: 'string' }, - { field: 'Employees', width: 150, resizable: true, movable: true, type: 'number' }, - { field: 'ContactTitle', width: 150, resizable: true, movable: true, type: 'string' }, - { field: 'DateCreated', width: 150, resizable: true, movable: true, type: 'date' }, - { field: 'Address', width: 150, resizable: true, movable: true, type: 'string' }, - { field: 'City', width: 150, resizable: true, movable: true, type: 'string' }, - { field: 'Region', width: 150, resizable: true, movable: true, type: 'string' }, - { field: 'PostalCode', width: 150, resizable: true, movable: true, type: 'string' }, - { field: 'Phone', width: 150, resizable: true, movable: true, type: 'string' }, - { field: 'Fax', width: 150, resizable: true, movable: true, type: 'string' }, - { field: 'Contract', width: 150, resizable: true, movable: true, type: 'boolean' } + { field: 'ID', width: 80, resizable: true }, + { field: 'CompanyName', width: 150, resizable: true, type: 'string'}, + { field: 'ContactName', width: 150, resizable: true, type: 'string' }, + { field: 'Employees', width: 150, resizable: true, type: 'number' }, + { field: 'ContactTitle', width: 150, resizable: true, type: 'string' }, + { field: 'DateCreated', width: 150, resizable: true, type: 'date' }, + { field: 'Address', width: 150, resizable: true, type: 'string' }, + { field: 'City', width: 150, resizable: true, type: 'string' }, + { field: 'Region', width: 150, resizable: true, type: 'string' }, + { field: 'PostalCode', width: 150, resizable: true, type: 'string' }, + { field: 'Phone', width: 150, resizable: true, type: 'string' }, + { field: 'Fax', width: 150, resizable: true, type: 'string' }, + { field: 'Contract', width: 150, resizable: true, type: 'boolean' } ]; this.data = [ { diff --git a/src/app/grid-state/grid-state.component.html b/src/app/grid-state/grid-state.component.html index 2128db469df..914d67c3132 100644 --- a/src/app/grid-state/grid-state.component.html +++ b/src/app/grid-state/grid-state.component.html @@ -22,10 +22,10 @@ - + @@ -53,22 +53,24 @@ - - - - - - - - + + + + + + + - - - - - + + + + + - + + @@ -90,17 +92,17 @@ + rowSelection="multiple" [autoGenerate]="false" [allowFiltering]="true" primaryKey="ID" + [height]="'1300px'" [width]="'100%'" #hGrid> - + - + - + - + @@ -163,10 +163,9 @@ + [header]="c.header" [pinned]="c.pinned" [groupable]="false" [resizable]="c.resizable" + [width]="c.width" [sortable]="true" [filterable]="true" [editable]="true" [hidden]="c.hidden" + [hasSummary]="c.hasSummary" [minWidth]="c.minWidth" [maxWidth]="c.maxWidth">
@@ -188,20 +187,20 @@ + [rowSelection]="'multiple'" [allowFiltering]="true" [moving]="true"> - - + - - + @@ -240,4 +239,4 @@ - \ No newline at end of file + diff --git a/src/app/grid/grid.sample.html b/src/app/grid/grid.sample.html index d87cecb66f2..202bf091fd0 100644 --- a/src/app/grid/grid.sample.html +++ b/src/app/grid/grid.sample.html @@ -75,9 +75,6 @@

{{ col.field }}

Disable Hiding
-
- Movable -
@@ -114,9 +111,6 @@

{{ col.field }}

Disable Hiding
-
- Movable -
diff --git a/src/app/tree-grid-add-row/tree-grid-add-row.sample.html b/src/app/tree-grid-add-row/tree-grid-add-row.sample.html index d538c964ab4..549ec59221c 100644 --- a/src/app/tree-grid-add-row/tree-grid-add-row.sample.html +++ b/src/app/tree-grid-add-row/tree-grid-add-row.sample.html @@ -1,8 +1,8 @@
- + @@ -30,4 +30,4 @@
- \ No newline at end of file + diff --git a/src/app/tree-grid-add-row/tree-grid-add-row.sample.ts b/src/app/tree-grid-add-row/tree-grid-add-row.sample.ts index b9eccf09a1e..79d693e8c94 100644 --- a/src/app/tree-grid-add-row/tree-grid-add-row.sample.ts +++ b/src/app/tree-grid-add-row/tree-grid-add-row.sample.ts @@ -32,11 +32,11 @@ export class TreeGridAddRowSampleComponent implements OnInit { public ngOnInit(): void { this.columns = [ - { field: 'employeeID', label: 'ID', width: 200, resizable: true, movable: true, dataType: 'number', hasSummary: false }, - { field: 'Salary', label: 'Salary', width: 200, resizable: true, movable: true, dataType: 'number', hasSummary: true }, - { field: 'firstName', label: 'First Name', width: 300, resizable: true, movable: true, dataType: 'string', hasSummary: false }, - { field: 'lastName', label: 'Last Name', width: 150, resizable: true, movable: true, dataType: 'string', hasSummary: false }, - { field: 'Title', label: 'Title', width: 200, resizable: true, movable: true, dataType: 'string', hasSummary: true } + { field: 'employeeID', label: 'ID', width: 200, resizable: true, dataType: 'number', hasSummary: false }, + { field: 'Salary', label: 'Salary', width: 200, resizable: true, dataType: 'number', hasSummary: true }, + { field: 'firstName', label: 'First Name', width: 300, resizable: true, dataType: 'string', hasSummary: false }, + { field: 'lastName', label: 'Last Name', width: 150, resizable: true, dataType: 'string', hasSummary: false }, + { field: 'Title', label: 'Title', width: 200, resizable: true, dataType: 'string', hasSummary: true } ]; this.data = [ { Salary: 2500, employeeID: 0, PID: -1, firstName: 'Andrew', lastName: 'Fuller', Title: 'Vice President, Sales' }, diff --git a/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.html b/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.html index 2c67239a43a..26f05231bbf 100644 --- a/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.html +++ b/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.html @@ -7,10 +7,10 @@ - + diff --git a/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.ts b/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.ts index 8ea3fe68f75..bea0bcc3e5e 100644 --- a/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.ts +++ b/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.ts @@ -55,11 +55,11 @@ export class TreeGridFlatDataSampleComponent implements OnInit { ]; this.columns = [ - { field: 'employeeID', label: 'ID', width: 200, resizable: true, movable: true, dataType: 'number', hasSummary: false }, - { field: 'Salary', label: 'Salary', width: 200, resizable: true, movable: true, dataType: 'number', hasSummary: true }, - { field: 'firstName', label: 'First Name', width: 300, resizable: true, movable: true, dataType: 'string', hasSummary: false }, - { field: 'lastName', label: 'Last Name', width: 150, resizable: true, movable: true, dataType: 'string', hasSummary: false }, - { field: 'Title', label: 'Title', width: 200, resizable: true, movable: true, dataType: 'string', hasSummary: true } + { field: 'employeeID', label: 'ID', width: 200, resizable: true, dataType: 'number', hasSummary: false }, + { field: 'Salary', label: 'Salary', width: 200, resizable: true, dataType: 'number', hasSummary: true }, + { field: 'firstName', label: 'First Name', width: 300, resizable: true, dataType: 'string', hasSummary: false }, + { field: 'lastName', label: 'Last Name', width: 150, resizable: true, dataType: 'string', hasSummary: false }, + { field: 'Title', label: 'Title', width: 200, resizable: true, dataType: 'string', hasSummary: true } ]; this.data = [ { Salary: 2500, employeeID: 0, PID: -1, firstName: 'Andrew', lastName: 'Fuller', Title: 'Vice President, Sales' }, diff --git a/src/app/tree-grid-groupby/tree-grid-groupby.sample.html b/src/app/tree-grid-groupby/tree-grid-groupby.sample.html index 864e28ca544..609728a924f 100644 --- a/src/app/tree-grid-groupby/tree-grid-groupby.sample.html +++ b/src/app/tree-grid-groupby/tree-grid-groupby.sample.html @@ -5,6 +5,7 @@ diff --git a/src/app/tree-grid-load-on-demand/tree-grid-load-on-demand.sample.html b/src/app/tree-grid-load-on-demand/tree-grid-load-on-demand.sample.html index e892180aa34..c811a63e1ed 100644 --- a/src/app/tree-grid-load-on-demand/tree-grid-load-on-demand.sample.html +++ b/src/app/tree-grid-load-on-demand/tree-grid-load-on-demand.sample.html @@ -7,11 +7,10 @@

Primary/Foreign key

- + @@ -25,8 +24,8 @@

Primary/Foreign key