@catull/igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
1,286 lines • 163 kB
JavaScript
import { __decorate, __extends, __metadata, __values } from "tslib";
import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter, ContentChild, ViewChildren, QueryList, ViewChild, ElementRef, TemplateRef, HostBinding, forwardRef, HostListener } from '@angular/core';
import { GridBaseAPIService } from '../api.service';
import { IgxGridBaseDirective } from '../grid-base.directive';
import { IgxGridNavigationService } from '../grid-navigation.service';
import { IgxGridAPIService } from './grid-api.service';
import { cloneArray } from '../../core/utils';
import { IgxGroupByRowTemplateDirective, IgxGridDetailTemplateDirective } from './grid.directives';
import { IgxGridGroupByRowComponent } from './groupby-row.component';
import { takeUntil, first } from 'rxjs/operators';
import { IgxFilteringService } from '../filtering/grid-filtering.service';
import { IgxColumnResizingService } from '../resizing/resizing.service';
import { IgxGridSummaryService } from '../summaries/grid-summary.service';
import { IgxGridSelectionService, IgxGridCRUDService } from '../selection/selection.service';
import { IgxForOfSyncService, IgxForOfScrollSyncService } from '../../directives/for-of/for_of.sync.service';
import { IgxGridMRLNavigationService } from '../grid-mrl-navigation.service';
import { IgxRowIslandAPIService } from '../hierarchical-grid/row-island-api.service';
import { FilterMode } from '../common/enums';
var NEXT_ID = 0;
/**
* **Ignite UI for Angular Grid** -
* [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid.html)
*
* The Ignite UI Grid is used for presenting and manipulating tabular data in the simplest way possible. Once data
* has been bound, it can be manipulated through filtering, sorting & editing operations.
*
* Example:
* ```html
* <igx-grid [data]="employeeData" autoGenerate="false">
* <igx-column field="first" header="First Name"></igx-column>
* <igx-column field="last" header="Last Name"></igx-column>
* <igx-column field="role" header="Role"></igx-column>
* </igx-grid>
* ```
*/
var IgxGridComponent = /** @class */ (function (_super) {
__extends(IgxGridComponent, _super);
function IgxGridComponent() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this._id = "igx-grid-" + NEXT_ID++;
/**
* @hidden
*/
_this._groupingExpressions = [];
/**
* @hidden
*/
_this._groupingExpandState = [];
_this._hideGroupedColumns = false;
_this._dropAreaMessage = null;
_this._filteredData = null;
_this.childDetailTemplates = new Map();
/**
*@hidden
*/
_this.groupingExpressionsChange = new EventEmitter();
/**
*@hidden
*/
_this.groupingExpansionStateChange = new EventEmitter();
/**
* An @Input property that determines whether created groups are rendered expanded or collapsed.
* The default rendered state is expanded.
* ```html
* <igx-grid #grid [data]="Data" [groupsExpanded]="false" [autoGenerate]="true"></igx-grid>
* ```
* @memberof IgxGridComponent
*/
_this.groupsExpanded = true;
/**
* A hierarchical representation of the group by records.
* ```typescript
* let groupRecords = this.grid.groupsRecords;
* ```
* @memberof IgxGridComponent
*/
_this.groupsRecords = [];
/**
* Emitted when a new `IgxColumnComponent` gets grouped/ungrouped, or multiple columns get
* grouped/ungrouped at once by using the Group By API.
* The `onGroupingDone` event would be raised only once if several columns get grouped at once by calling
* the `groupBy()` or `clearGrouping()` API methods and passing an array as an argument.
* The event arguments provide the `expressions`, `groupedColumns` and `ungroupedColumns` properties, which contain
* the `ISortingExpression` and the `IgxColumnComponent` related to the grouping/ungrouping operation.
* Please note that `groupedColumns` and `ungroupedColumns` show only the **newly** changed columns (affected by the **last**
* grouping/ungrouping operation), not all columns which are currently grouped/ungrouped.
* columns.
* ```typescript
* groupingDone(event: IGroupingDoneEventArgs){
* const expressions = event.expressions;
* //the newly grouped columns
* const groupedColumns = event.groupedColumns;
* //the newly ungrouped columns
* const ungroupedColumns = event.ungroupedColumns;
* }
* ```
* ```html
* <igx-grid #grid [data]="localData" (onGroupingDone)="groupingDone($event)" [autoGenerate]="true"></igx-grid>
* ```
* @memberof IgxGridComponent
*/
_this.onGroupingDone = new EventEmitter();
_this.detailTemplate = null;
_this._expansionStates = new Map();
/**
*@hidden
*/
_this.expansionStatesChange = new EventEmitter();
/**
*@hidden
*/
_this._focusIn = new EventEmitter();
return _this;
}
IgxGridComponent_1 = IgxGridComponent;
Object.defineProperty(IgxGridComponent.prototype, "id", {
/**
* An @Input property that sets the value of the `id` attribute. If not provided it will be automatically generated.
* ```html
* <igx-grid [id]="'igx-grid-1'" [data]="Data" [autoGenerate]="true"></igx-grid>
* ```
* @memberof IgxGridComponent
*/
get: function () {
return this._id;
},
set: function (value) {
this._id = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridComponent.prototype, "data", {
/**
* An @Input property that lets you fill the `IgxGridComponent` with an array of data.
* ```html
* <igx-grid [data]="Data" [autoGenerate]="true"></igx-grid>
* ```
* @memberof IgxGridComponent
*/
get: function () {
return this._data;
},
set: function (value) {
this._data = value || [];
this.summaryService.clearSummaryCache();
if (this.shouldGenerate) {
this.setupColumns();
}
this.cdr.markForCheck();
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridComponent.prototype, "filteredData", {
/**
* Returns an array of objects containing the filtered data in the `IgxGridComponent`.
* ```typescript
* let filteredData = this.grid.filteredData;
* ```
* @memberof IgxGridComponent
*/
get: function () {
return this._filteredData;
},
/**
* Sets an array of objects containing the filtered data in the `IgxGridComponent`.
* ```typescript
* this.grid.filteredData = [{
* ID: 1,
* Name: "A"
* }];
* ```
* @memberof IgxGridComponent
*/
set: function (value) {
this._filteredData = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridComponent.prototype, "virtualizationState", {
/**
* Returns the state of the grid virtualization, including the start index and how many records are rendered.
* ```typescript
* const gridVirtState = this.grid1.virtualizationState;
* ```
* @memberof IgxGridComponent
*/
get: function () {
return this.verticalScrollContainer.state;
},
/**
* @hidden
*/
set: function (state) {
this.verticalScrollContainer.state = state;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridComponent.prototype, "totalItemCount", {
/**
* Returns the total number of records in the data source.
* Works only with remote grid virtualization.
* ```typescript
* const itemCount = this.grid1.totalItemCount;
* ```
* @memberof IgxGridComponent
*/
get: function () {
return this.verticalScrollContainer.totalItemCount;
},
/**
* Sets the total number of records in the data source.
* This property is required for remote grid virtualization to function when it is bound to remote data.
* ```typescript
* this.grid1.totalItemCount = 55;
* ```
* @memberof IgxGridComponent
*/
set: function (count) {
this.verticalScrollContainer.totalItemCount = count;
this.cdr.detectChanges();
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridComponent.prototype, "_gridAPI", {
get: function () {
return this.gridAPI;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridComponent.prototype, "groupingExpressions", {
/**
* Returns the group by state of the `IgxGridComponent`.
* ```typescript
* let groupByState = this.grid.groupingExpressions;
* ```
* @memberof IgxGridComponent
*/
get: function () {
return this._groupingExpressions;
},
/**
* Sets the group by state of the `IgxGridComponent` and emits the `onGroupingDone`
* event with the appropriate arguments.
* ```typescript
* this.grid.groupingExpressions = [{
* fieldName: "ID",
* dir: SortingDirection.Asc,
* ignoreCase: false
* }];
* ```
*
* Two-way data binding.
* ```html
* <igx-grid #grid [data]="Data" [autoGenerate]="true" [(groupingExpressions)]="model.groupingExpressions"></igx-grid>
* ```
* @memberof IgxGridComponent
*/
set: function (value) {
var _this = this;
if (value && value.length > 10) {
throw Error('Maximum amount of grouped columns is 10.');
}
var oldExpressions = this.groupingExpressions;
var newExpressions = value;
this._groupingExpressions = cloneArray(value);
this.groupingExpressionsChange.emit(this._groupingExpressions);
this.chipsGoupingExpressions = cloneArray(value);
if (this._gridAPI.grid) {
/* grouping should work in conjunction with sorting
and without overriding separate sorting expressions */
this._applyGrouping();
this._gridAPI.arrange_sorting_expressions();
this.notifyChanges();
}
else {
// setter called before grid is registered in grid API service
this.sortingExpressions.unshift.apply(this.sortingExpressions, this._groupingExpressions);
}
if (!this._init && JSON.stringify(oldExpressions) !== JSON.stringify(newExpressions) && this.columnList) {
var groupedCols_1 = [];
var ungroupedCols_1 = [];
var groupedColsArr = newExpressions.filter(function (obj) {
return !oldExpressions.some(function (obj2) {
return obj.fieldName === obj2.fieldName;
});
});
groupedColsArr.forEach(function (elem) {
groupedCols_1.push(_this.getColumnByName(elem.fieldName));
}, this);
var ungroupedColsArr = oldExpressions.filter(function (obj) {
return !newExpressions.some(function (obj2) {
return obj.fieldName === obj2.fieldName;
});
});
ungroupedColsArr.forEach(function (elem) {
ungroupedCols_1.push(_this.getColumnByName(elem.fieldName));
}, this);
this.notifyChanges();
var groupingDoneArgs = {
expressions: newExpressions,
groupedColumns: groupedCols_1,
ungroupedColumns: ungroupedCols_1
};
this.onGroupingDone.emit(groupingDoneArgs);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridComponent.prototype, "groupingExpansionState", {
/**
* Returns a list of expansion states for group rows.
* Includes only states that differ from the default one (controlled through groupsExpanded and states that the user has changed.
* Contains the expansion state (expanded: boolean) and the unique identifier for the group row (Array).
* ```typescript
* const groupExpState = this.grid.groupingExpansionState;
* ```
* @memberof IgxGridComponent
*/
get: function () {
return this._groupingExpandState;
},
/**
* Sets a list of expansion states for group rows.
* ```typescript
* this.grid.groupingExpansionState = [{
* expanded: false,
* hierarchy: [{ fieldName: 'ID', value: 1 }]
* }];
* // You can use DataUtil.getHierarchy(groupRow) to get the group `IgxGridRowComponent` hierarchy.
* ```
*
* Two-way data binding.
* ```html
* <igx-grid #grid [data]="Data" [autoGenerate]="true" [(groupingExpansionState)]="model.groupingExpansionState"></igx-grid>
* ```
* @memberof IgxGridComponent
*/
set: function (value) {
if (value !== this._groupingExpandState) {
this.groupingExpansionStateChange.emit(value);
}
this._groupingExpandState = value;
if (this.gridAPI.grid) {
this.cdr.detectChanges();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridComponent.prototype, "hideGroupedColumns", {
/**
* An @Input property that sets whether the grouped columns should be hidden as well.
* The default value is "false"
* ```html
* <igx-grid #grid [data]="localData" [hideGroupedColumns]="true" [autoGenerate]="true"></igx-grid>
* ```
* @memberof IgxGridComponent
*/
get: function () {
return this._hideGroupedColumns;
},
set: function (value) {
if (value) {
this.groupingDiffer = this.differs.find(this.groupingExpressions).create();
}
else {
this.groupingDiffer = null;
}
if (this.columnList && this.groupingExpressions) {
this._setGroupColsVisibility(value);
}
this._hideGroupedColumns = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridComponent.prototype, "dropAreaMessage", {
/**
* An accessor that returns the message displayed inside the GroupBy drop area where columns can be dragged on.
*/
get: function () {
return this._dropAreaMessage || this.resourceStrings.igx_grid_groupByArea_message;
},
/**
* An @Input property that sets the message displayed inside the GroupBy drop area where columns can be dragged on.
* Note: The grid needs to have at least one groupable column in order the GroupBy area to be displayed.
* ```html
* <igx-grid dropAreaMessage="Drop here to group!">
* <igx-column [groupable]="true" field="ID"></igx-column>
* </igx-grid>
* ```
* @memberof IgxGridComponent
*/
set: function (value) {
this._dropAreaMessage = value;
this.notifyChanges();
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridComponent.prototype, "groupsRowList", {
/**
* A list of all group rows.
* ```typescript
* const groupList = this.grid.groupsRowList;
* ```
* @memberof IgxGridComponent
*/
get: function () {
var res = new QueryList();
if (!this._groupsRowList) {
return res;
}
var rList = this._groupsRowList.filter(function (item) {
return item.element.nativeElement.parentElement !== null;
}).sort(function (item1, item2) { return item1.index - item2.index; });
res.reset(rList);
return res;
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridComponent.prototype, "expansionStates", {
/**
* Returns a list of key-value pairs [row ID, expansion state]. Includes only states that differ from the default one.
* ```typescript
* const expansionStates = this.grid.expansionStates;
* ```
* @memberof IgxGridComponent
*/
get: function () {
return this._expansionStates;
},
/**
* Sets a list of key-value pairs [row ID, expansion state].
* ```typescript
* const states = new Map<any, boolean>();
* states.set(1, true);
* this.grid.expansionStates = states;
* ```
*
* Two-way data binding.
* ```html
* <igx-grid #grid [data]="data" [(expansionStates)]="model.expansionStates">
* <ng-template igxGridDetail let-dataItem>
* <div *ngIf="dataItem.Category">
* <header>{{dataItem.Category?.CategoryName}}</header>
* <span>{{dataItem.Category?.Description}}</span>
* </div>
* </ng-template>
* </igx-grid>
* ```
* @memberof IgxGridComponent
*/
set: function (value) {
this._expansionStates = new Map(value);
this.expansionStatesChange.emit(this._expansionStates);
if (this.gridAPI.grid) {
this.cdr.detectChanges();
this._focusActiveCell();
}
},
enumerable: true,
configurable: true
});
IgxGridComponent.prototype.onFocusIn = function () {
this._focusIn.emit();
};
/**
* Expands all master rows.
* ```typescript
* this.grid.expandAll();
* ```
* @memberof IgxGridComponent
*/
IgxGridComponent.prototype.expandAll = function () {
var _this = this;
var expandedStates = this.expansionStates;
this.data.forEach(function (rec) {
expandedStates.set(_this.primaryKey ? rec[_this.primaryKey] : rec, true);
});
this.expansionStates = expandedStates;
};
/**
* Collapses all master rows.
* ```typescript
* this.grid.collapseAll();
* ```
* @memberof IgxGridComponent
*/
IgxGridComponent.prototype.collapseAll = function () {
this.expansionStates = new Map();
};
/**
* Expands the master row by its id. ID is either the primaryKey value or the data record instance.
* ```typescript
* this.grid.expand(rowID);
* ```
* @memberof IgxGridComponent
*/
IgxGridComponent.prototype.expand = function (rowID) {
var expandedStates = this.expansionStates;
expandedStates.set(rowID, true);
this.expansionStates = expandedStates;
};
/**
* Collapses the master row by its id. ID is either the primaryKey value or the data record instance.
* ```typescript
* this.grid.collapse(rowID);
* ```
* @memberof IgxGridComponent
*/
IgxGridComponent.prototype.collapse = function (rowID) {
var expandedStates = this.expansionStates;
expandedStates.set(rowID, false);
this.expansionStates = expandedStates;
};
/**
* Toggles the master row by its id. ID is either the primaryKey value or the data record instance.
* ```typescript
* this.grid.toggle(rowID);
* ```
* @memberof IgxGridComponent
*/
IgxGridComponent.prototype.toggleRow = function (rowID) {
var expandedStates = this.expansionStates;
var state = expandedStates.get(rowID);
expandedStates.set(rowID, !state);
this.expansionStates = expandedStates;
};
IgxGridComponent.prototype.getDetailsContext = function (rowData, index) {
return {
$implicit: rowData,
index: index
};
};
IgxGridComponent.prototype.preventContainerScroll = function (evt) {
var _this = this;
if (evt.target.scrollTop !== 0 && this.hasDetails) {
var activeElem_1 = document.activeElement;
this.verticalScrollContainer.addScrollTop(evt.target.scrollTop);
evt.target.scrollTop = 0;
this.verticalScrollContainer.onChunkLoad.pipe(first()).subscribe(function () {
var active = _this.selectionService.activeElement;
var currRow = _this.navigation.getRowByIndex(active.row, '');
// check if the focused element was a child of the details view
if (_this.isDetailRecord(active.row) && currRow && currRow.contains(activeElem_1)) {
// Some browsers (like Edge/IE) lose focus after scrolling even when the element was in the DOM.
activeElem_1.focus({ preventScroll: true });
return;
}
var nextCellTarget = _this.navigation.getCellElementByVisibleIndex(active.row, active.column);
var nextRowTarget = _this.navigation.getRowByIndex(active.row + 1, '');
if (nextCellTarget) {
nextCellTarget.focus({ preventScroll: true });
}
else if (nextRowTarget) {
nextRowTarget.focus({ preventScroll: true });
}
});
}
};
/**
* @hidden
*/
IgxGridComponent.prototype.trackChanges = function (index, rec) {
if (rec.detailsData !== undefined) {
return rec.detailsData;
}
return rec;
};
IgxGridComponent.prototype.detailsViewFocused = function (container, rowIndex) {
this.selectionService.activeElement = {
row: rowIndex,
column: this.selectionService.activeElement ? this.selectionService.activeElement.column : 0
};
};
IgxGridComponent.prototype.detailsKeyboardHandler = function (event, rowIndex, container) {
var _this = this;
var colIndex = this.selectionService.activeElement ? this.selectionService.activeElement.column : 0;
var shift = event.shiftKey;
var ctrl = event.ctrlKey;
var key = event.key.toLowerCase();
var target = event.target;
if (key === 'tab') {
event.stopPropagation();
var lastColIndex_1 = this.unpinnedColumns[this.unpinnedColumns.length - 1].visibleIndex;
if (shift && target === container) {
// shift + tab from details to data row
event.preventDefault();
this.navigateTo(rowIndex - 1, lastColIndex_1, function (args) { return args.target.nativeElement.focus(); });
}
else if (!shift) {
// when the next element is focused via tab check if it is an element outside the details view
// if so we have exited the details view and focus should move to the first cell in the next row
this._focusIn.pipe(first()).subscribe(function () {
if (!container.contains(document.activeElement)) {
_this.navigation.performTab(container, { row: rowIndex, column: lastColIndex_1 });
}
});
}
}
else if (key === 'arrowup' && !ctrl && target === container) {
this.navigation.navigateUp(container, { row: rowIndex, column: colIndex });
}
else if (key === 'arrowup' && ctrl && target === container) {
this.navigation.navigateTop(colIndex);
}
else if (key === 'arrowdown' && !ctrl && target === container) {
this.navigation.navigateDown(container, { row: rowIndex, column: colIndex });
}
else if (key === 'arrowdown' && ctrl && target === container) {
this.navigation.navigateBottom(colIndex);
}
};
Object.defineProperty(IgxGridComponent.prototype, "hasDetails", {
get: function () {
return !!this.gridDetailsTemplate;
},
enumerable: true,
configurable: true
});
/**
* @hidden
*/
IgxGridComponent.prototype.getRowTemplate = function (rowData) {
if (this.isGroupByRecord(rowData)) {
return this.defaultGroupTemplate;
}
else if (this.isSummaryRow(rowData)) {
return this.summaryTemplate;
}
else if (this.hasDetails && this.isDetailRecord(rowData)) {
return this.detailTemplateContainer;
}
else {
return this.recordTemplate;
}
};
IgxGridComponent.prototype.isDetailRecord = function (record) {
return record.detailsData !== undefined;
};
Object.defineProperty(IgxGridComponent.prototype, "groupAreaHostClass", {
/**
* @hidden
*/
get: function () {
return this.getComponentDensityClass('igx-drop-area');
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridComponent.prototype, "groupRowTemplate", {
/**
* Returns the template reference of the `IgxGridComponent`'s group row.
* ```
* const groupRowTemplate = this.grid.groupRowTemplate;
* ```
* @memberof IgxGridComponent
*/
get: function () {
return this._groupRowTemplate;
},
/**
* Sets the template reference of the `IgxGridComponent`'s group `IgxGridRowComponent`.
* ```typescript
* this.grid.groupRowTemplate = myRowTemplate.
* ```
* @memberof IgxGridComponent
*/
set: function (template) {
this._groupRowTemplate = template;
this.notifyChanges();
},
enumerable: true,
configurable: true
});
Object.defineProperty(IgxGridComponent.prototype, "groupAreaTemplate", {
/**
* Returns the template reference of the `IgxGridComponent`'s group area.
* ```typescript
* const groupAreaTemplate = this.grid.groupAreaTemplate;
* ```
* @memberof IgxGridComponent
*/
get: function () {
return this._groupAreaTemplate;
},
/**
* Sets the template reference of the `IgxGridComponent`'s group area.
* ```typescript
* this.grid.groupAreaTemplate = myAreaTemplate.
* ```
* @memberof IgxGridComponent
*/
set: function (template) {
this._groupAreaTemplate = template;
this.notifyChanges();
},
enumerable: true,
configurable: true
});
/**
* Groups by a new `IgxColumnComponent` based on the provided expression, or modifies an existing one.
* Also allows for multiple columns to be grouped at once if an array of `ISortingExpression` is passed.
* The onGroupingDone event would get raised only **once** if this method gets called multiple times with the same arguments.
* ```typescript
* this.grid.groupBy({ fieldName: name, dir: SortingDirection.Asc, ignoreCase: false });
* this.grid.groupBy([
{ fieldName: name1, dir: SortingDirection.Asc, ignoreCase: false },
{ fieldName: name2, dir: SortingDirection.Desc, ignoreCase: true },
{ fieldName: name3, dir: SortingDirection.Desc, ignoreCase: false }
]);
* ```
* @memberof IgxGridComponent
*/
IgxGridComponent.prototype.groupBy = function (expression) {
if (this.checkIfNoColumnField(expression)) {
return;
}
this.endEdit(true);
if (expression instanceof Array) {
this._gridAPI.groupBy_multiple(expression);
}
else {
this._gridAPI.groupBy(expression);
}
this.notifyChanges(true);
};
/**
* Clears all grouping in the grid, if no parameter is passed.
* If a parameter is provided, clears grouping for a particular column or an array of columns.
* ```typescript
* this.grid.clearGrouping(); //clears all grouping
* this.grid.clearGrouping("ID"); //ungroups a single column
* this.grid.clearGrouping(["ID", "Column1", "Column2"]); //ungroups multiple columns
* ```
*
*/
IgxGridComponent.prototype.clearGrouping = function (name) {
this._gridAPI.clear_groupby(name);
this.notifyChanges(true);
};
/**
* Returns if a group is expanded or not.
* ```typescript
* public groupRow: IGroupByRecord;
* const expandedGroup = this.grid.isExpandedGroup(this.groupRow);
* ```
* @memberof IgxGridComponent
*/
IgxGridComponent.prototype.isExpandedGroup = function (group) {
var state = this._getStateForGroupRow(group);
return state ? state.expanded : this.groupsExpanded;
};
/**
* Toggles the expansion state of a group.
* ```typescript
* public groupRow: IGroupByRecord;
* const toggleExpGroup = this.grid.toggleGroup(this.groupRow);
* ```
* @memberof IgxGridComponent
*/
IgxGridComponent.prototype.toggleGroup = function (groupRow) {
this._toggleGroup(groupRow);
this.notifyChanges();
};
/**
* Expands the specified group and all of its parent groups.
* ```typescript
* public groupRow: IGroupByRecord;
* this.grid.fullyExpandGroup(this.groupRow);
* ```
* @memberof IgxGridComponent
*/
IgxGridComponent.prototype.fullyExpandGroup = function (groupRow) {
this._fullyExpandGroup(groupRow);
this.notifyChanges();
};
/**
* @hidden
*/
IgxGridComponent.prototype.isGroupByRecord = function (record) {
// return record.records instance of GroupedRecords fails under Webpack
return record.records && record.records.length;
};
/**
* Toggles the expansion state of all group rows recursively.
* ```typescript
* this.grid.toggleAllGroupRows;
* ```
* @memberof IgxGridComponent
*/
IgxGridComponent.prototype.toggleAllGroupRows = function () {
this.groupingExpansionState = [];
this.groupsExpanded = !this.groupsExpanded;
this.notifyChanges();
};
Object.defineProperty(IgxGridComponent.prototype, "hasGroupableColumns", {
/**
* Returns if the `IgxGridComponent` has groupable columns.
* ```typescript
* const groupableGrid = this.grid.hasGroupableColumns;
* ```
* @memberof IgxGridComponent
*/
get: function () {
return this.columnList.some(function (col) { return col.groupable && !col.columnGroup; });
},
enumerable: true,
configurable: true
});
IgxGridComponent.prototype._setGroupColsVisibility = function (value) {
var _this = this;
if (this.columnList && !this.hasColumnLayouts) {
this.groupingExpressions.forEach(function (expr) {
var col = _this.getColumnByName(expr.fieldName);
col.hidden = value;
});
}
};
Object.defineProperty(IgxGridComponent.prototype, "dropAreaVisible", {
/**
* Returns if the grid's group by drop area is visible.
* ```typescript
* const dropVisible = this.grid.dropAreaVisible;
* ```
* @memberof IgxGridComponent
*/
get: function () {
return (this.draggedColumn && this.draggedColumn.groupable) ||
!this.chipsGoupingExpressions.length;
},
enumerable: true,
configurable: true
});
/**
* @hidden
*/
IgxGridComponent.prototype._getStateForGroupRow = function (groupRow) {
return this._gridAPI.groupBy_get_expanded_for_group(groupRow);
};
/**
* @hidden
*/
IgxGridComponent.prototype._toggleGroup = function (groupRow) {
this._gridAPI.groupBy_toggle_group(groupRow);
};
/**
* @hidden
*/
IgxGridComponent.prototype._fullyExpandGroup = function (groupRow) {
this._gridAPI.groupBy_fully_expand_group(groupRow);
};
/**
* @hidden
*/
IgxGridComponent.prototype._applyGrouping = function () {
this._gridAPI.sort_multiple(this._groupingExpressions);
};
/**
* @hidden
*/
IgxGridComponent.prototype.isColumnGrouped = function (fieldName) {
return this.groupingExpressions.find(function (exp) { return exp.fieldName === fieldName; }) ? true : false;
};
/**
* @hidden
*/
IgxGridComponent.prototype.getContext = function (rowData, rowIndex) {
if (this.isDetailRecord(rowData)) {
var cachedData = this.childDetailTemplates.get(rowData.detailsData);
var rowID = this.primaryKey ? rowData.detailsData[this.primaryKey] : this.data.indexOf(rowData.detailsData);
if (cachedData) {
var view = cachedData.view;
var tmlpOutlet = cachedData.owner;
return {
$implicit: rowData.detailsData,
moveView: view,
owner: tmlpOutlet,
index: this.dataView.indexOf(rowData),
templateID: 'detailRow-' + rowID
};
}
else {
// child rows contain unique grids, hence should have unique templates
return {
$implicit: rowData.detailsData,
templateID: 'detailRow-' + rowID,
index: this.dataView.indexOf(rowData)
};
}
}
return {
$implicit: rowData,
index: rowIndex,
templateID: this.isGroupByRecord(rowData) ? 'groupRow' : this.isSummaryRow(rowData) ? 'summaryRow' : 'dataRow'
};
};
/**
* @hidden
*/
IgxGridComponent.prototype.viewCreatedHandler = function (args) {
if (args.context.templateID.indexOf('detailRow') !== -1) {
this.childDetailTemplates.set(args.context.$implicit, args);
}
};
/**
* @hidden
*/
IgxGridComponent.prototype.viewMovedHandler = function (args) {
if (args.context.templateID.indexOf('detailRow') !== -1) {
// view was moved, update owner in cache
var key = args.context.$implicit;
var cachedData = this.childDetailTemplates.get(key);
cachedData.owner = args.owner;
}
};
Object.defineProperty(IgxGridComponent.prototype, "template", {
/**
* @hidden
*/
get: function () {
if (this.filteredData && this.filteredData.length === 0) {
return this.emptyGridTemplate ? this.emptyGridTemplate : this.emptyFilteredGridTemplate;
}
if (this.isLoading && (!this.data || this.dataLength === 0)) {
return this.loadingGridTemplate ? this.loadingGridTemplate : this.loadingGridDefaultTemplate;
}
if (this.dataLength === 0) {
return this.emptyGridTemplate ? this.emptyGridTemplate : this.emptyGridDefaultTemplate;
}
},
enumerable: true,
configurable: true
});
/**
* @hidden
*/
IgxGridComponent.prototype.onChipRemoved = function (event) {
this.clearGrouping(event.owner.id);
};
/**
* @hidden
*/
IgxGridComponent.prototype.chipsOrderChanged = function (event) {
var newGrouping = [];
var _loop_1 = function (i) {
var expr = this_1.groupingExpressions.filter(function (item) {
return item.fieldName === event.chipsArray[i].id;
})[0];
if (!this_1.getColumnByName(expr.fieldName).groupable) {
return { value: void 0 };
}
newGrouping.push(expr);
};
var this_1 = this;
for (var i = 0; i < event.chipsArray.length; i++) {
var state_1 = _loop_1(i);
if (typeof state_1 === "object")
return state_1.value;
}
this.groupingExpansionState = [];
this.chipsGoupingExpressions = newGrouping;
if (event.originalEvent instanceof KeyboardEvent) {
// When reordered using keyboard navigation, we don't have `onMoveEnd` event.
this.groupingExpressions = this.chipsGoupingExpressions;
}
this.notifyChanges();
};
/**
* @hidden
*/
IgxGridComponent.prototype.chipsMovingEnded = function () {
this.groupingExpressions = this.chipsGoupingExpressions;
this.notifyChanges();
};
/**
* @hidden
*/
IgxGridComponent.prototype.onChipClicked = function (event) {
var sortingExpr = this.sortingExpressions;
var columnExpr = sortingExpr.find(function (expr) { return expr.fieldName === event.owner.id; });
columnExpr.dir = 3 - columnExpr.dir;
this.sort(columnExpr);
this.notifyChanges();
};
/**
* @hidden
*/
IgxGridComponent.prototype.onChipKeyDown = function (event) {
if (event.originalEvent.key === ' ' || event.originalEvent.key === 'Spacebar' || event.originalEvent.key === 'Enter') {
var sortingExpr = this.sortingExpressions;
var columnExpr = sortingExpr.find(function (expr) { return expr.fieldName === event.owner.id; });
columnExpr.dir = 3 - columnExpr.dir;
this.sort(columnExpr);
this.notifyChanges();
}
};
Object.defineProperty(IgxGridComponent.prototype, "defaultTargetBodyHeight", {
/**
* @hidden
*/
get: function () {
var allItems = this.totalItemCount || this.dataLength;
return this.renderedRowHeight * Math.min(this._defaultTargetRecordNumber, this.paging ? Math.min(allItems, this.perPage) : allItems);
},
enumerable: true,
configurable: true
});
/**
* @hidden
*/
IgxGridComponent.prototype.getGroupAreaHeight = function () {
return this.groupArea ? this.groupArea.nativeElement.offsetHeight : 0;
};
/**
* @hidden
* Gets the combined width of the columns that are specific to the enabled grid features. They are fixed.
* TODO: Remove for Angular 8. Calling parent class getter using super is not supported for now.
*/
IgxGridComponent.prototype.getFeatureColumnsWidth = function () {
var width = _super.prototype.getFeatureColumnsWidth.call(this);
if (this.groupingExpressions.length && this.headerGroupContainer) {
width += this.headerGroupContainer.nativeElement.offsetWidth;
}
return width;
};
/**
* @hidden
*/
IgxGridComponent.prototype.scrollTo = function (row, column) {
if (this.groupingExpressions && this.groupingExpressions.length
&& typeof (row) !== 'number') {
var rowIndex = this.groupingResult.indexOf(row);
var groupByRecord = this.groupingMetadata[rowIndex];
if (groupByRecord) {
this._fullyExpandGroup(groupByRecord);
}
}
_super.prototype.scrollTo.call(this, row, column, this.groupingFlatResult);
};
Object.defineProperty(IgxGridComponent.prototype, "dropAreaTemplateResolved", {
/**
* @hidden
*/
get: function () {
if (this.dropAreaTemplate) {
return this.dropAreaTemplate;
}
else {
return this.defaultDropAreaTemplate;
}
},
enumerable: true,
configurable: true
});
/**
* @hidden
*/
IgxGridComponent.prototype.getGroupByChipTitle = function (expression) {
var column = this.getColumnByName(expression.fieldName);
return (column && column.header) || expression.fieldName;
};
Object.defineProperty(IgxGridComponent.prototype, "iconTemplate", {
/**
* @hidden
*/
get: function () {
if (this.groupsExpanded) {
return this.headerExpandIndicatorTemplate || this.defaultExpandedTemplate;
}
else {
return this.headerCollapseIndicatorTemplate || this.defaultCollapsedTemplate;
}
},
enumerable: true,
configurable: true
});
/**
* @hidden
*/
IgxGridComponent.prototype.getColumnGroupable = function (fieldName) {
var column = this.getColumnByName(fieldName);
return column && column.groupable;
};
/**
* @hidden
*/
IgxGridComponent.prototype.ngAfterContentInit = function () {
_super.prototype.ngAfterContentInit.call(this);
if (this.allowFiltering && this.hasColumnLayouts) {
this.filterMode = FilterMode.excelStyleFilter;
}
if (this.groupTemplate) {
this._groupRowTemplate = this.groupTemplate.template;
}
if (this.hideGroupedColumns && this.columnList && this.groupingExpressions) {
this._setGroupColsVisibility(this.hideGroupedColumns);
}
this._setupNavigationService();
};
IgxGridComponent.prototype.ngAfterViewInit = function () {
var _this = this;
_super.prototype.ngAfterViewInit.call(this);
this.verticalScrollContainer.onBeforeViewDestroyed.pipe(takeUntil(this.destroy$)).subscribe(function (view) {
var rowData = view.context.$implicit;
if (_this.isDetailRecord(rowData)) {
var cachedData = _this.childDetailTemplates.get(rowData.detailsData);
if (cachedData) {
var tmlpOutlet = cachedData.owner;
tmlpOutlet._viewContainerRef.detach(0);
}
}
});
};
IgxGridComponent.prototype.ngOnInit = function () {
var _this = this;
_super.prototype.ngOnInit.call(this);
this.onGroupingDone.pipe(takeUntil(this.destroy$)).subscribe(function (args) {
_this.endEdit(true);
_this.summaryService.updateSummaryCache(args);
});
};
IgxGridComponent.prototype.ngDoCheck = function () {
var _this = this;
if (this.groupingDiffer && this.columnList && !this.hasColumnLayouts) {
var changes = this.groupingDiffer.diff(this.groupingExpressions);
if (changes && this.columnList) {
changes.forEachAddedItem(function (rec) {
var col = _this.getColumnByName(rec.item.fieldName);
col.hidden = true;
});
changes.forEachRemovedItem(function (rec) {
var col = _this.getColumnByName(rec.item.fieldName);
col.hidden = false;
});
}
}
_super.prototype.ngDoCheck.call(this);
};
/**
* @inheritdoc
*/
IgxGridComponent.prototype.getSelectedData = function (formatters, headers) {
if (formatters === void 0) { formatters = false; }
if (headers === void 0) { headers = false; }
if (this.groupingExpressions.length) {
var source_1 = [];
var process = function (record) {
if (record.expression || record.summaries) {
source_1.push(null);
return;
}
source_1.push(record);
};
this.dataView.forEach(process);
return this.extractDataFromSelection(source_1, formatters, headers);
}
else {
return _super.prototype.getSelectedData.call(this, formatters, headers);
}
};
IgxGridComponent.prototype._setupNavigationService = function () {
if (this.hasColumnLayouts) {
this.navigation = new IgxGridMRLNavigationService();
this.navigation.grid = this;
}
};
IgxGridComponent.prototype.checkIfNoColumnField = function (expression) {
var e_1, _a;
if (expression instanceof Array) {
try {
for (var expression_1 = __values(expression), expression_1_1 = expression_1.next(); !expression_1_1.done; expression_1_1 = expression_1.next()) {
var singleExpression = expression_1_1.value;
if (!singleExpression.fieldName) {
return true;
}
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (expression_1_1 && !expression_1_1.done && (_a = expression_1.return)) _a.call(expression_1);
}
finally { if (e_1) throw e_1.error; }
}
return false;
}
return !expression.fieldName;
};
var IgxGridComponent_1;
__decorate([
HostBinding('attr.id'),
Input(),
__metadata("design:type", String),
__metadata("design:paramtypes", [String])
], IgxGridComponent.prototype, "id", null);
__decorate([
Input(),
__metadata("design:type", Array),
__metadata("design:paramtypes", [Array])
], IgxGridComponent.prototype, "data", null);
__decorate([
Input(),
__metadata("design:type", Array),
__metadata("design:paramtypes", [Array])
], IgxGridComponent.prototype, "groupingExpressions", null);
__decorate([
Output(),
__metadata("design:type", Object)
], IgxGridComponent.prototype, "groupingExpressionsChange", void 0);
__decorate([
Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], IgxGridComponent.prototype, "groupingExpansionState", null);
__decorate([
Output(),
__metadata("design:type", Object)
], IgxGridComponent.prototype, "groupingExpansionStateChange", void 0);
__decorate([
Input(),
__metadata("design:type", Object)
], IgxGridComponent.prototype, "groupsExpanded", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], IgxGridComponent.prototype, "hideGroupedColumns", null);
__decorate([
Input(),
__metadata("design:type", String),
__metadata("design:paramtypes", [String])
], IgxGridComponent.prototype, "dropAreaMessage", null);
__decorate([
Input(),
__metadata("design:type", TemplateRef)
], IgxGridComponent.prototype, "dropAreaTemplate", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], IgxGridComponent.prototype, "onGroupingDone", void 0);
__decorate([
ContentChild(IgxGroupByRowTemplateDirective, { read: IgxGroupByRowTemplateDirective }),
__metadata("design:type", IgxGroupByRowTemplateDirective)
], IgxGridComponent.prototype, "groupTemplate", void 0);
__decorate([
ContentChild(IgxGridDetailTemplateDirective, { read: IgxGridDetailTemplateDirective, static: false }),
__metadata("design:type", IgxGridDetailTemplateDirective)
], IgxGridComponent.prototype, "gridDetailsTemplate", void 0);
__decorate([
ViewChildren(IgxGridGroupByRowComponent, { read: IgxGridGroupByRowComponent }),
__metadata("design:type", QueryList)
], IgxGridComponent.prototype, "_groupsRowList", void 0);
__decorate([
ViewChild('defaultDropArea', { read: TemplateRef, static: true }),
__metadata("design:type", TemplateRef)
], IgxGridComponent.prototype, "defaultDropAreaTemplate", void 0);
__decorate([
ViewChild('groupArea'),
__metadata("design:type", ElementRef)
], IgxGridComponent.prototype, "groupArea", void 0);
__decorate([
ViewChild('record_template', { read: TemplateRef, static: true }),
__metadata("design:type", TemplateRef)
], IgxGridComponent.prototype, "recordTemplate", void 0);
__decorate([
ViewChild('detail_template_container', { read: TemplateRef, static: true }),
__metadata("design:type", TemplateRef)
], IgxGridComponent.prototype, "detailTemplateContainer", void 0);
__decorate([
ContentChild(IgxGridDetailTemplateDirective, { read: TemplateRef, static: false }),
__metadata("design:type", TemplateRef)
], IgxGridComponent.prototype, "detailTemplate", void 0);
__decorate([
ViewChild('group_template', { read: TemplateRef, static: true }),
__metadata("design:type", TemplateRef)
], IgxG