@syncfusion/ej2-grids
Version:
Feature-rich JavaScript datagrid (datatable) control with built-in support for editing, filtering, grouping, paging, sorting, and exporting to Excel.
999 lines • 96.6 kB
JavaScript
import { Draggable, Droppable, EventHandler } from '@syncfusion/ej2-base';
import { createElement, closest, remove, classList, addClass, removeClass } from '@syncfusion/ej2-base';
import { isNullOrUndefined, extend, updateCSSText } from '@syncfusion/ej2-base';
import { parentsUntil, isActionPrevent, isGroupAdaptive, updatecloneRow, getComplexFieldID, getParsedFieldID, isComplexField, findCellIndex, resetRowIndex } from '../base/util';
import { resetCachedRowIndex, groupReorderRowObject } from '../base/util';
import { generateExpandPredicates, getPredicates, capitalizeFirstLetter } from '../base/util';
import * as events from '../base/constant';
import { AriaService } from '../services/aria-service';
import { GroupModelGenerator } from '../services/group-model-generator';
import { DataUtil, Predicate } from '@syncfusion/ej2-data';
import * as literals from '../base/string-literals';
import { RowRenderer } from '../renderer/row-renderer';
// eslint-disable-next-line valid-jsdoc, jsdoc/require-param, jsdoc/require-returns
/**
*
* The `Group` module is used to handle group action.
*/
var Group = /** @class */ (function () {
/**
* Constructor for Grid group module
*
* @param {IGrid} parent - specifies the IGrid
* @param {GroupSettingsModel} groupSettings - specifies the GroupSettingsModel
* @param {string[]} sortedColumns - specifies the sortedColumns
* @param {ServiceLocator} serviceLocator - specifies the serviceLocator
* @hidden
*/
function Group(parent, groupSettings, sortedColumns, serviceLocator) {
var _this = this;
//Internal variables
this.sortRequired = true;
/** @hidden */
this.groupSortFocus = false;
/** @hidden */
this.groupTextFocus = false;
/** @hidden */
this.groupCancelFocus = false;
/** @hidden */
this.preventFocusOnGroup = false;
this.isAppliedGroup = false;
this.isAppliedUnGroup = false;
this.isAppliedCaptionRowBorder = false;
this.reorderingColumns = [];
this.visualElement = createElement('div', {
className: 'e-cloneproperties e-dragclone e-gdclone',
attrs: { action: 'grouping' }
});
this.helper = function (e) {
var gObj = _this.parent;
var target = e.sender.target;
var element = target.classList.contains('e-groupheadercell') ? target :
parentsUntil(target, 'e-groupheadercell');
if (!element || (!target.classList.contains('e-drag') && _this.groupSettings.allowReordering)) {
return false;
}
_this.column = gObj.getColumnByField(element.firstElementChild.getAttribute('ej-mappingname'));
_this.visualElement.textContent = element.textContent;
updateCSSText(_this.visualElement, "width: " + (element.offsetWidth + 2) + "px;\n height: " + (element.offsetHeight + 2) + "px; line-height: 23px;");
_this.visualElement.setAttribute('e-mappinguid', _this.column.uid);
gObj.element.appendChild(_this.visualElement);
return _this.visualElement;
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
this.dragStart = function (e) {
_this.parent.element.classList.add('e-ungroupdrag');
};
this.drag = function (e) {
if (_this.groupSettings.allowReordering) {
_this.animateDropper(e);
}
var target = e.target;
var cloneElement = _this.parent.element.querySelector('.e-cloneproperties');
_this.parent.trigger(events.columnDrag, { target: target, draggableType: 'headercell', column: _this.column });
if (!_this.groupSettings.allowReordering) {
classList(cloneElement, ['e-defaultcur'], ['e-notallowedcur']);
if (!(parentsUntil(target, literals.gridContent) || parentsUntil(target, 'e-headercell'))) {
classList(cloneElement, ['e-notallowedcur'], ['e-defaultcur']);
}
}
};
this.dragStop = function (e) {
_this.parent.element.classList.remove('e-ungroupdrag');
var preventDrop = !(parentsUntil(e.target, literals.gridContent) || parentsUntil(e.target, 'e-gridheader'));
if (_this.groupSettings.allowReordering && preventDrop) {
remove(e.helper);
if (parentsUntil(e.target, 'e-groupdroparea')) {
_this.rearrangeGroup();
}
else if (!(parentsUntil(e.target, 'e-grid'))) {
var field = _this.parent.getColumnByUid(e.helper.getAttribute('e-mappinguid')).field;
if (_this.groupSettings.columns.indexOf(field) !== -1) {
_this.ungroupColumn(field);
}
}
return;
}
else if (preventDrop) {
remove(e.helper);
return;
}
};
this.animateDropper = function (e) {
var uid = _this.parent.element.querySelector('.e-cloneproperties').getAttribute('e-mappinguid');
var dragField = _this.parent.getColumnByUid(uid).field;
var parent = parentsUntil(e.target, 'e-groupdroparea');
var dropTarget = parentsUntil(e.target, 'e-group-animator');
var grouped = [].slice.call(_this.element.getElementsByClassName('e-groupheadercell'))
.map(function (e) { return e.querySelector('div').getAttribute('ej-mappingname'); });
var cols = JSON.parse(JSON.stringify(grouped));
if (dropTarget || parent) {
if (dropTarget) {
var dropField = dropTarget.querySelector('div[ej-mappingname]').getAttribute('ej-mappingname');
var dropIndex = +(dropTarget.getAttribute('index'));
if (dropField !== dragField) {
var dragIndex = cols.indexOf(dragField);
if (dragIndex !== -1) {
cols.splice(dragIndex, 1);
}
var flag = dropIndex !== -1 && dragIndex === dropIndex;
cols.splice(dropIndex + (flag ? 1 : 0), 0, dragField);
}
}
else if (parent && cols.indexOf(dragField) === -1) {
cols.push(dragField);
}
_this.element.innerHTML = '';
if (cols.length && !_this.element.classList.contains('e-grouped')) {
_this.element.classList.add('e-grouped');
}
_this.reorderingColumns = cols;
for (var c = 0; c < cols.length; c++) {
_this.addColToGroupDrop(cols[parseInt(c.toString(), 10)]);
}
}
else {
_this.addLabel();
_this.removeColFromGroupDrop(dragField);
}
};
this.drop = function (e) {
var gObj = _this.parent;
var column = gObj.getColumnByUid(e.droppedElement.getAttribute('e-mappinguid'));
_this.element.classList.remove('e-hover');
remove(e.droppedElement);
_this.aria.setDropTarget(_this.parent.element.querySelector('.e-groupdroparea'), false);
_this.aria.setGrabbed(_this.parent.getHeaderTable().querySelector('[aria-grabbed=true]'), false);
if (isNullOrUndefined(column) || column.allowGrouping === false ||
parentsUntil(gObj.getColumnHeaderByUid(column.uid), 'e-grid').getAttribute('id') !==
gObj.element.getAttribute('id')) {
_this.parent.log('action_disabled_column', { moduleName: _this.getModuleName(), columnName: column ? column.headerText : undefined });
return;
}
_this.groupColumn(column.field);
};
this.contentRefresh = true;
this.aria = new AriaService();
this.parent = parent;
this.groupSettings = groupSettings;
this.serviceLocator = serviceLocator;
this.sortedColumns = sortedColumns;
this.focus = serviceLocator.getService('focus');
this.addEventListener();
this.groupGenerator = new GroupModelGenerator(this.parent);
}
Group.prototype.addLabel = function () {
if (!this.element.getElementsByClassName('e-group-animator').length) {
var dragLabel = this.l10n.getConstant('GroupDropArea');
this.element.innerHTML = dragLabel;
this.element.classList.remove('e-grouped');
}
};
Group.prototype.rearrangeGroup = function () {
this.sortRequired = false;
this.updateModel();
};
Group.prototype.columnDrag = function (e) {
if (this.groupSettings.allowReordering && e.column.allowGrouping) {
this.animateDropper(e);
}
var cloneElement = this.parent.element.querySelector('.e-cloneproperties');
if (!this.parent.allowReordering) {
classList(cloneElement, ['e-defaultcur'], ['e-notallowedcur']);
}
if (!(e.column.allowGrouping && (parentsUntil(e.target, 'e-groupdroparea') ||
(parentsUntil(e.target, 'e-headercell') &&
parentsUntil(e.target, 'e-headercell').isEqualNode(this.parent.getColumnHeaderByField(e.column.field))))) &&
!(this.parent.allowReordering && parentsUntil(e.target, 'e-headercell'))) {
classList(cloneElement, ['e-notallowedcur'], ['e-defaultcur']);
}
if (e.target.classList.contains('e-groupdroparea')) {
this.element.classList.add('e-hover');
}
else {
this.element.classList.remove('e-hover');
}
};
Group.prototype.columnDragStart = function (e) {
if (e.target.classList.contains('e-stackedheadercell')) {
return;
}
var dropArea = this.parent.element.querySelector('.e-groupdroparea');
this.aria.setDropTarget(dropArea, e.column.allowGrouping);
var element = e.target.classList.contains('e-headercell') ? e.target : parentsUntil(e.target, 'e-headercell');
this.aria.setGrabbed(element, true, !e.column.allowGrouping);
};
Group.prototype.columnDrop = function (e) {
var gObj = this.parent;
if (e.droppedElement.getAttribute('action') === 'grouping') {
var column = gObj.getColumnByUid(e.droppedElement.getAttribute('e-mappinguid'));
if (isNullOrUndefined(column) || column.allowGrouping === false ||
parentsUntil(gObj.getColumnHeaderByUid(column.uid), 'e-grid').getAttribute('id') !==
gObj.element.getAttribute('id')) {
return;
}
this.ungroupColumn(column.field);
}
};
/**
* @returns {void}
* @hidden
*/
Group.prototype.addEventListener = function () {
if (this.parent.isDestroyed) {
return;
}
this.parent.on(events.uiUpdate, this.enableAfterRender, this);
this.parent.on(events.groupComplete, this.onActionComplete, this);
this.parent.on(events.ungroupComplete, this.onActionComplete, this);
this.parent.on(events.inBoundModelChanged, this.onPropertyChanged, this);
this.parent.on(events.click, this.clickHandler, this);
this.parent.on(events.columnDrag, this.columnDrag, this);
this.parent.on(events.columnDragStart, this.columnDragStart, this);
this.parent.on(events.headerDrop, this.columnDrop, this);
this.parent.on(events.columnDrop, this.columnDrop, this);
this.parent.on(events.headerRefreshed, this.refreshSortIcons, this);
this.parent.on(events.sortComplete, this.refreshSortIcons, this);
this.parent.on(events.keyPressed, this.keyPressHandler, this);
this.parent.on(events.contentReady, this.initialEnd, this);
this.parent.on(events.onEmpty, this.initialEnd, this);
this.parent.on(events.initialEnd, this.render, this);
this.parent.on(events.groupAggregates, this.onGroupAggregates, this);
this.parent.on(events.destroy, this.destroy, this);
this.parent.on('group-expand-collapse', this.updateExpand, this);
this.parent.on('persist-data-changed', this.initialEnd, this);
};
/**
* @returns {void}
* @hidden
*/
Group.prototype.removeEventListener = function () {
if (this.parent.isDestroyed) {
return;
}
this.parent.off(events.initialEnd, this.render);
this.parent.off(events.uiUpdate, this.enableAfterRender);
this.parent.off(events.groupComplete, this.onActionComplete);
this.parent.off(events.ungroupComplete, this.onActionComplete);
this.parent.off(events.inBoundModelChanged, this.onPropertyChanged);
this.parent.off(events.click, this.clickHandler);
this.parent.off(events.columnDrag, this.columnDrag);
this.parent.off(events.columnDragStart, this.columnDragStart);
this.parent.off(events.columnDrop, this.columnDrop);
this.parent.off(events.headerDrop, this.columnDrop);
this.parent.off(events.headerRefreshed, this.refreshSortIcons);
this.parent.off(events.sortComplete, this.refreshSortIcons);
this.parent.off(events.keyPressed, this.keyPressHandler);
this.parent.off(events.groupAggregates, this.onGroupAggregates);
this.parent.off(events.destroy, this.destroy);
this.parent.off('group-expand-collapse', this.updateExpand);
};
Group.prototype.initialEnd = function () {
var gObj = this.parent;
this.parent.off(events.contentReady, this.initialEnd);
this.parent.off(events.onEmpty, this.initialEnd);
if (this.parent.getColumns().length && this.groupSettings.columns.length) {
this.contentRefresh = false;
for (var _i = 0, _a = gObj.groupSettings.columns; _i < _a.length; _i++) {
var col = _a[_i];
this.groupColumn(col);
}
this.contentRefresh = true;
}
};
Group.prototype.keyPressHandler = function (e) {
var gObj = this.parent;
if (e.target && parentsUntil(e.target, 'e-groupheadercell') && (e.action === 'tab' || e.action === 'shiftTab')) {
var focusableGroupedItems = this.getFocusableGroupedItems();
if ((e.action === 'tab' && e.target === focusableGroupedItems[focusableGroupedItems.length - 1])
|| (e.action === 'shiftTab' && e.target === focusableGroupedItems[0])) {
return;
}
for (var i = 0; i < focusableGroupedItems.length; i++) {
if (e.target === focusableGroupedItems[parseInt(i.toString(), 10)]) {
e.preventDefault();
var index = e.action === 'tab' ? i + 1 : i - 1;
focusableGroupedItems[parseInt(index.toString(), 10)].focus();
return;
}
}
}
var isMacLike = /(Mac)/i.test(navigator.platform);
if (isMacLike && e.metaKey) {
if (e.action === 'downArrow') {
e.action = 'ctrlDownArrow';
}
else if (e.action === 'upArrow') {
e.action = 'ctrlUpArrow';
}
}
if ((e.action !== 'ctrlSpace' && (!this.groupSettings.columns.length ||
['altDownArrow', 'altUpArrow', 'ctrlDownArrow', 'ctrlUpArrow', 'enter'].indexOf(e.action) === -1))
|| (this.parent.groupSettings.enableLazyLoading && this.groupSettings.columns.length
&& (e.action === 'ctrlUpArrow' || e.action === 'ctrlDownArrow'))) {
return;
}
switch (e.action) {
case 'altDownArrow':
case 'altUpArrow':
// eslint-disable-next-line no-case-declarations
var selected = gObj.allowSelection ? gObj.getSelectedRowIndexes() : [];
if (selected.length) {
e.preventDefault();
var rows = gObj.getContentTable().querySelector(literals.tbody).children;
var dataRow = gObj.getDataRows()[selected[selected.length - 1]];
var grpRow = void 0;
for (var i = dataRow.rowIndex; i >= 0; i--) {
if (!rows[parseInt(i.toString(), 10)].classList.contains(literals.row) && !rows[parseInt(i.toString(), 10)].classList.contains('e-detailrow')) {
grpRow = rows[parseInt(i.toString(), 10)];
break;
}
}
this.expandCollapseRows(grpRow.querySelector(e.action === 'altUpArrow' ?
'.e-recordplusexpand' : '.e-recordpluscollapse'));
}
break;
case 'ctrlDownArrow':
e.preventDefault();
this.expandAll();
break;
case 'ctrlUpArrow':
e.preventDefault();
this.collapseAll();
break;
case 'enter':
if (e.target.classList.contains('e-groupsort')) {
this.groupSortFocus = true;
e.preventDefault();
this.applySortFromTarget(e.target);
break;
}
else if (e.target.classList.contains('e-ungroupbutton')) {
this.groupCancelFocus = true;
e.preventDefault();
this.unGroupFromTarget(e.target);
break;
}
if (this.parent.isEdit || (closest(e.target, '#' + this.parent.element.id + '_searchbar') !== null) ||
parentsUntil(e.target, 'e-pager') || parentsUntil(e.target, 'e-toolbar')) {
return;
}
// eslint-disable-next-line no-case-declarations
var element = this.focus.getFocusedElement();
if (element && (element.classList.contains('e-icon-grightarrow') || element.classList.contains('e-icon-gdownarrow'))) {
element = element.parentElement;
}
// eslint-disable-next-line no-case-declarations
var row = element && element.parentElement ? element.parentElement.querySelector('[class^="e-record"]') : null;
if (!row) {
break;
}
if (element.children.length && (element.children[0].classList.contains('e-icon-grightarrow') ||
element.children[0].classList.contains('e-icon-gdownarrow'))) {
e.preventDefault();
this.expandCollapseRows(row);
}
break;
case 'ctrlSpace':
// eslint-disable-next-line no-case-declarations
var elem = gObj.focusModule.currentInfo.element;
if (elem && elem.classList.contains('e-headercell')) {
e.preventDefault();
var column = gObj.getColumnByUid(elem.firstElementChild.getAttribute('e-mappinguid'));
if (column.field && gObj.groupSettings.columns.indexOf(column.field) < 0) {
this.groupColumn(column.field);
}
else {
this.ungroupColumn(column.field);
}
}
break;
}
};
/**
* @returns {Element[]} - Return the focusable grouping items
* @hidden */
Group.prototype.getFocusableGroupedItems = function () {
var focusableGroupedItems = [];
if (this.groupSettings.columns.length) {
var focusableGroupedHeaderItems = this.element.querySelectorAll('.e-groupheadercell');
for (var i = 0; i < focusableGroupedHeaderItems.length; i++) {
focusableGroupedItems.push(focusableGroupedHeaderItems[parseInt(i.toString(), 10)].querySelector('.e-grouptext'));
focusableGroupedItems.push(focusableGroupedHeaderItems[parseInt(i.toString(), 10)].querySelector('.e-groupsort'));
focusableGroupedItems.push(focusableGroupedHeaderItems[parseInt(i.toString(), 10)].querySelector('.e-ungroupbutton'));
}
}
return focusableGroupedItems;
};
Group.prototype.wireEvent = function () {
EventHandler.add(this.element, 'focusin', this.onFocusIn, this);
EventHandler.add(this.element, 'focusout', this.onFocusOut, this);
EventHandler.add(this.parent.element, 'auxclick', this.auxilaryclickHandler, this);
};
Group.prototype.unWireEvent = function () {
EventHandler.remove(this.element, 'focusin', this.onFocusIn);
EventHandler.remove(this.element, 'focusout', this.onFocusOut);
EventHandler.remove(this.parent.element, 'auxclick', this.auxilaryclickHandler);
};
Group.prototype.onFocusIn = function (e) {
if (this.parent.focusModule.currentInfo && this.parent.focusModule.currentInfo.element) {
removeClass([this.parent.focusModule.currentInfo.element, this.parent.focusModule.currentInfo.elementToFocus], ['e-focused', 'e-focus']);
this.parent.focusModule.currentInfo.element.tabIndex = -1;
}
this.addOrRemoveFocus(e);
};
Group.prototype.onFocusOut = function (e) {
this.addOrRemoveFocus(e);
};
Group.prototype.addOrRemoveFocus = function (e) {
if (e.target.classList.contains('e-groupdroparea') || e.target.classList.contains('e-grouptext')
|| e.target.classList.contains('e-groupsort')
|| e.target.classList.contains('e-ungroupbutton')) {
var target = e.target.classList.contains('e-grouptext') ?
e.target.parentElement.parentElement : e.target;
if (e.type === 'focusin') {
this.parent.focusModule.currentInfo.element = e.target;
this.parent.focusModule.currentInfo.elementToFocus = e.target;
addClass([target], ['e-focused', 'e-focus']);
e.target.tabIndex = 0;
}
else {
removeClass([target], ['e-focused', 'e-focus']);
e.target.tabIndex = -1;
}
}
};
Group.prototype.clickHandler = function (e) {
if (e.target.classList.contains('e-grouptext')) {
this.groupTextFocus = true;
}
if (e.target.classList.contains('e-groupsort')) {
this.groupSortFocus = true;
}
if (e.target.classList.contains('e-ungroupbutton')) {
this.groupCancelFocus = true;
}
if (e.target.classList.contains('e-icon-grightarrow') || e.target.classList.contains('e-icon-gdownarrow')) {
e.preventDefault();
}
var trgtEle = parentsUntil(e.target, 'e-recordplusexpand') ||
parentsUntil(e.target, 'e-recordpluscollapse');
if (trgtEle && (trgtEle.children[0].classList.contains('e-icon-gdownarrow') || trgtEle.children[0].classList.contains('e-icon-grightarrow'))) {
this.expandCollapseRows(e.target);
}
this.applySortFromTarget(e.target);
this.unGroupFromTarget(e.target);
this.toogleGroupFromHeader(e.target);
};
Group.prototype.auxilaryclickHandler = function (e) {
if (e.target.classList.contains('e-icon-grightarrow') || e.target.classList.contains('e-icon-gdownarrow')
&& (e.button === 1)) {
e.preventDefault();
}
};
Group.prototype.unGroupFromTarget = function (target) {
if (target.classList.contains('e-ungroupbutton')) {
this.ungroupColumn(target.parentElement.getAttribute('ej-mappingname'));
}
};
Group.prototype.toogleGroupFromHeader = function (target) {
if (this.groupSettings.showToggleButton) {
if (target.classList.contains('e-grptogglebtn')) {
if (target.classList.contains('e-toggleungroup')) {
this.ungroupColumn(this.parent.getColumnByUid(target.parentElement.getAttribute('e-mappinguid')).field);
}
else {
this.groupColumn(this.parent.getColumnByUid(target.parentElement.getAttribute('e-mappinguid')).field);
}
}
else {
if (target.classList.contains('e-toggleungroup')) {
this.ungroupColumn(target.parentElement.getAttribute('ej-mappingname'));
}
}
}
};
Group.prototype.applySortFromTarget = function (target) {
var gObj = this.parent;
var gHeader = closest(target, '.e-groupheadercell');
if (gObj.allowSorting && gHeader && !target.classList.contains('e-ungroupbutton') &&
!target.classList.contains('e-toggleungroup')) {
var field = gHeader.firstElementChild.getAttribute('ej-mappingname');
if (gObj.getColumnHeaderByField(field).getElementsByClassName('e-ascending').length) {
gObj.sortColumn(field, 'Descending', true);
}
else {
gObj.sortColumn(field, 'Ascending', true);
}
}
};
/**
* Expands or collapses grouped rows by target element.
*
* @param {Element} target - Defines the target element of the grouped row.
* @returns {void}
*/
Group.prototype.expandCollapseRows = function (target) {
var trgt = parentsUntil(target, 'e-recordplusexpand') ||
parentsUntil(target, 'e-recordpluscollapse');
if (trgt) {
var rowNodes = [].slice.call(this.parent.getContentTable().querySelector(literals.tbody).children);
if (this.parent.editSettings.showAddNewRow) {
if (rowNodes[0].classList.contains('e-addedrow')) {
rowNodes.shift();
}
else if (rowNodes[rowNodes.length - 1].classList.contains('e-addedrow')) {
rowNodes.pop();
}
}
var isHide = void 0;
var dataManager = void 0;
var query = void 0;
var gObj = this.parent;
var indent = trgt.parentElement.getElementsByClassName('e-indentcell').length;
var uid = trgt.parentElement.getAttribute('data-uid');
var captionRow = gObj.getRowObjectFromUID(uid);
var expand = false;
if (trgt.classList.contains('e-recordpluscollapse')) {
addClass([trgt], 'e-recordplusexpand');
removeClass([trgt], 'e-recordpluscollapse');
trgt.firstElementChild.className = 'e-icons e-gdiagonaldown e-icon-gdownarrow';
trgt.firstElementChild.setAttribute('title', this.l10n.getConstant('Expanded'));
expand = true;
captionRow.isExpand = true;
if (isGroupAdaptive(gObj)) {
this.updateVirtualRows(gObj, target, expand, query, dataManager);
}
if (this.parent.groupSettings.enableLazyLoading) {
if ((this.parent.filterSettings.columns.length || this.parent.sortSettings.columns.length ||
this.parent.searchSettings.key.length) && this.parent.getContent().firstElementChild.scrollTop === 0) {
this.parent.contentModule.isTop = true;
}
(this.parent.enableVirtualization ? this.parent.lazyLoadRender :
this.parent.contentModule).captionExpand(trgt.parentElement);
}
}
else {
isHide = true;
captionRow.isExpand = false;
removeClass([trgt], 'e-recordplusexpand');
addClass([trgt], 'e-recordpluscollapse');
trgt.firstElementChild.className = 'e-icons e-gnextforward e-icon-grightarrow';
trgt.firstElementChild.setAttribute('title', this.l10n.getConstant('Collapsed'));
if (isGroupAdaptive(gObj)) {
this.updateVirtualRows(gObj, target, !isHide, query, dataManager);
}
if (this.parent.groupSettings.enableLazyLoading) {
(this.parent.enableVirtualization ? this.parent.lazyLoadRender :
this.parent.contentModule).captionCollapse(trgt.parentElement);
}
}
this.aria.setExpand(trgt, expand);
if (!isGroupAdaptive(gObj) && !this.parent.groupSettings.enableLazyLoading) {
var rowObjs = gObj.getRowsObject();
var startIdx = rowObjs.indexOf(captionRow);
var rowsState = {};
var cacheStartIdx = gObj.enableInfiniteScrolling && gObj.infiniteScrollSettings &&
gObj.infiniteScrollSettings.enableCache && rowObjs.length !== rowNodes.length ?
Array.from(rowNodes).indexOf(trgt.parentElement) : undefined;
for (var i = startIdx; i < rowObjs.length; i++) {
if (i > startIdx && rowObjs[parseInt(i.toString(), 10)].indent === indent) {
break;
}
if (rowObjs[parseInt(i.toString(), 10)].isDetailRow) {
var visible = rowObjs[i - 1].isExpand && rowObjs[i - 1].visible;
if (cacheStartIdx && cacheStartIdx > 0 && cacheStartIdx < rowNodes.length) {
rowNodes[parseInt(cacheStartIdx.toString(), 10)].style.display = visible ? '' : 'none';
}
else if (isNullOrUndefined(cacheStartIdx)) {
rowNodes[parseInt(i.toString(), 10)].style.display = visible ? '' : 'none';
}
}
else if (rowsState[rowObjs[parseInt(i.toString(), 10)].parentUid] === false) {
rowObjs[parseInt(i.toString(), 10)].visible = false;
if (cacheStartIdx && cacheStartIdx > 0 && cacheStartIdx < rowNodes.length) {
rowNodes[parseInt(cacheStartIdx.toString(), 10)].style.display = 'none';
}
else if (isNullOrUndefined(cacheStartIdx)) {
rowNodes[parseInt(i.toString(), 10)].style.display = 'none';
}
}
else {
if (!(rowObjs[parseInt(i.toString(), 10)].isDataRow || rowObjs[parseInt(i.toString(), 10)].isCaptionRow
|| rowObjs[parseInt(i.toString(), 10)].isDetailRow || rowObjs[parseInt(i.toString(), 10)].isAggregateRow)) {
var visible = rowObjs[parseInt(i.toString(), 10)].cells
.some(function (cell) { return cell.isDataCell && cell.visible; });
if (visible === rowObjs[parseInt(i.toString(), 10)].visible) {
continue;
}
}
rowObjs[parseInt(i.toString(), 10)].visible = true;
if (cacheStartIdx && cacheStartIdx > 0 && cacheStartIdx < rowNodes.length) {
rowNodes[parseInt(cacheStartIdx.toString(), 10)].style.display = '';
rowNodes[parseInt(cacheStartIdx.toString(), 10)].classList.remove('e-hide');
}
else if (isNullOrUndefined(cacheStartIdx)) {
rowNodes[parseInt(i.toString(), 10)].style.display = '';
rowNodes[parseInt(i.toString(), 10)].classList.remove('e-hide');
}
}
if (rowObjs[parseInt(i.toString(), 10)].isCaptionRow) {
rowsState[rowObjs[parseInt(i.toString(), 10)].uid] = rowObjs[parseInt(i.toString(), 10)].isExpand
&& rowObjs[parseInt(i.toString(), 10)].visible;
}
if (!isNullOrUndefined(cacheStartIdx)) {
cacheStartIdx++;
}
}
this.lastCaptionRowBorder();
this.parent.notify(events.refreshExpandandCollapse, { rows: this.parent.getRowsObject() });
}
if (!this.parent.enableInfiniteScrolling || !this.parent.groupSettings.enableLazyLoading) {
this.parent.notify(events.captionActionComplete, { isCollapse: isHide, parentUid: uid });
}
}
};
/**
* The function is used to set border in last row
*
* @returns { void }
* @hidden
*/
Group.prototype.lastCaptionRowBorder = function () {
var table = this.parent.getContentTable();
var clientHeight = this.parent.getContent().clientHeight;
if ((!this.parent.enableVirtualization && !this.parent.enableInfiniteScrolling) ||
this.parent.groupSettings.enableLazyLoading) {
if (table.scrollHeight < clientHeight || this.isAppliedCaptionRowBorder) {
if (this.isAppliedCaptionRowBorder || table.querySelector('.e-lastrowcell')) {
var borderCells = table.querySelectorAll('.e-lastrowcell');
for (var i = 0, len = borderCells.length; i < len; i++) {
removeClass([borderCells[parseInt(i.toString(), 10)]], 'e-lastrowcell');
}
this.isAppliedCaptionRowBorder = false;
}
var rowNodes = this.parent.getContentTable().querySelector(literals.tbody).children;
var lastRow = rowNodes[rowNodes.length - 1];
if (lastRow.style.display !== 'none' && !lastRow.classList.contains('e-groupcaptionrow')) {
if (table.scrollHeight < clientHeight) {
addClass(table.querySelectorAll('tr:last-child td'), 'e-lastrowcell');
this.isAppliedCaptionRowBorder = true;
}
}
else {
for (var i = rowNodes.length - 1, len = 0; i > len; i--) {
if (rowNodes[parseInt(i.toString(), 10)].style.display !== 'none'
&& rowNodes[parseInt(i.toString(), 10)].classList.contains('e-groupcaptionrow')) {
if (rowNodes[parseInt(i.toString(), 10)].querySelector('.e-recordpluscollapse')) {
addClass(rowNodes[parseInt(i.toString(), 10)].childNodes, 'e-lastrowcell');
this.isAppliedCaptionRowBorder = true;
break;
}
}
}
}
}
}
};
Group.prototype.updateVirtualRows = function (gObj, target, isExpand, query, dataManager) {
var rObj = gObj.getRowObjectFromUID(target.closest('tr').getAttribute('data-uid'));
rObj.isExpand = isExpand;
updatecloneRow(gObj);
this.parent.notify(events.refreshVirtualMaxPage, {});
query = gObj.getDataModule().generateQuery(false);
var args = { requestType: 'virtualscroll', rowObject: rObj };
if (gObj.contentModule) {
args.virtualInfo = gObj.contentModule.prevInfo;
}
dataManager = gObj.getDataModule().getData(args, query.requiresCount());
dataManager.then(function (e) { return gObj.renderModule.dataManagerSuccess(e, args); });
};
Group.prototype.expandCollapse = function (isExpand) {
if (!this.parent.groupSettings.columns.length) {
return;
}
if (!isExpand) {
this.parent.notify(events.initialCollapse, isExpand);
}
var rowNodes = this.parent.getContentTable().querySelector(literals.tbody).children;
var rowObjs = this.parent.getRowsObject();
var row;
for (var i = 0, len = rowNodes.length; i < len; i++) {
if (rowNodes[parseInt(i.toString(), 10)].querySelectorAll('.e-recordplusexpand, .e-recordpluscollapse').length) {
row = rowNodes[parseInt(i.toString(), 10)].querySelector(isExpand ? '.e-recordpluscollapse' : '.e-recordplusexpand');
if (row) {
if (isExpand) {
row.className = 'e-recordplusexpand';
row.firstElementChild.className = 'e-icons e-gdiagonaldown e-icon-gdownarrow';
row.setAttribute('aria-expanded', 'true');
row.firstElementChild.setAttribute('title', this.l10n.getConstant('Expanded'));
}
else {
row.className = 'e-recordpluscollapse';
row.firstElementChild.className = 'e-icons e-gnextforward e-icon-grightarrow';
row.setAttribute('aria-expanded', 'false');
row.firstElementChild.setAttribute('title', this.l10n.getConstant('Collapsed'));
}
}
if (!(rowNodes[parseInt(i.toString(), 10)].firstElementChild.classList.contains('e-recordplusexpand') ||
rowNodes[parseInt(i.toString(), 10)].firstElementChild.classList.contains('e-recordpluscollapse'))) {
rowNodes[parseInt(i.toString(), 10)].style.display = isExpand ? '' : 'none';
}
}
else {
rowNodes[parseInt(i.toString(), 10)].style.display = isExpand ? '' : 'none';
}
if (rowObjs[parseInt(i.toString(), 10)].isCaptionRow) {
rowObjs[parseInt(i.toString(), 10)].isExpand = isExpand ? true : false;
}
}
this.parent.updateVisibleExpandCollapseRows();
this.lastCaptionRowBorder();
this.parent.notify(events.refreshExpandandCollapse, { rows: this.parent.getRowsObject() });
};
/**
* Expands all the grouped rows of the Grid.
*
* @returns {void}
*/
Group.prototype.expandAll = function () {
this.expandCollapse(true);
};
/**
* Collapses all the grouped rows of the Grid.
*
* @returns {void}
*/
Group.prototype.collapseAll = function () {
this.expandCollapse(false);
};
/**
* The function is used to render grouping
*
* @returns {void}
* @hidden
*/
Group.prototype.render = function () {
this.l10n = this.serviceLocator.getService('localization');
this.renderGroupDropArea();
this.initDragAndDrop();
this.refreshToggleBtn();
this.wireEvent();
};
Group.prototype.renderGroupDropArea = function () {
var groupElem = this.parent.element.querySelector('.e-groupdroparea');
if (groupElem) {
remove(groupElem);
}
this.element = this.parent.createElement('div', { className: 'e-groupdroparea', attrs: { 'tabindex': '-1' } });
if (this.groupSettings.allowReordering) {
this.element.classList.add('e-group-animate');
}
this.updateGroupDropArea();
this.parent.element.insertBefore(this.element, this.parent.element.firstChild);
if (!this.groupSettings.showDropArea || this.parent.rowRenderingMode === 'Vertical') {
this.element.style.display = 'none';
}
};
Group.prototype.updateGroupDropArea = function (clear) {
if (this.groupSettings.showDropArea && !this.groupSettings.columns.length) {
var dragLabel = this.l10n.getConstant('GroupDropArea');
this.element.innerHTML = dragLabel;
this.element.classList.remove('e-grouped');
}
else {
if ((this.element.innerHTML === this.l10n.getConstant('GroupDropArea') && (this.groupSettings.columns.length === 1
|| !this.isAppliedGroup && !this.isAppliedUnGroup)) || clear) {
this.element.innerHTML = '';
}
this.element.classList.add('e-grouped');
}
};
Group.prototype.initDragAndDrop = function () {
this.initializeGHeaderDrop();
this.initializeGHeaderDrag();
};
Group.prototype.initializeGHeaderDrag = function () {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
var drag = new Draggable(this.element, {
dragTarget: this.groupSettings.allowReordering ? '.e-drag' : '.e-groupheadercell',
distance: this.groupSettings.allowReordering ? -10 : 5,
helper: this.helper,
dragStart: this.dragStart,
drag: this.drag,
dragStop: this.dragStop
});
};
Group.prototype.initializeGHeaderDrop = function () {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
var drop = new Droppable(this.element, {
accept: '.e-dragclone',
drop: this.drop
});
};
/**
* Groups a column by column name.
*
* @param {string} columnName - Defines the column name to group.
* @returns {void}
*/
Group.prototype.groupColumn = function (columnName) {
var gObj = this.parent;
var column = gObj.getColumnByField(columnName);
if (isNullOrUndefined(column) || column.allowGrouping === false ||
(this.contentRefresh && this.groupSettings.columns.indexOf(columnName) > -1)) {
this.parent.log('action_disabled_column', { moduleName: this.getModuleName(), columnName: column.headerText });
return;
}
if (isActionPrevent(gObj)) {
gObj.notify(events.preventBatch, { instance: this, handler: this.groupColumn, arg1: columnName });
return;
}
column.visible = gObj.groupSettings.showGroupedColumn;
this.colName = columnName;
this.isAppliedGroup = true;
if (this.contentRefresh) {
this.updateModel();
}
else {
this.addColToGroupDrop(columnName);
}
this.updateGroupDropArea();
this.isAppliedGroup = false;
};
/**
* Ungroups a column by column name.
*
* @param {string} columnName - Defines the column name to ungroup.
* @returns {void}
*/
Group.prototype.ungroupColumn = function (columnName) {
var gObj = this.parent;
var column = this.parent.enableColumnVirtualization ?
this.parent.columns.filter(function (c) { return c.field === columnName; })[0] : gObj.getColumnByField(columnName);
if (isNullOrUndefined(column) || column.allowGrouping === false || this.groupSettings.columns.indexOf(columnName) < 0) {
return;
}
if (isActionPrevent(gObj)) {
gObj.notify(events.preventBatch, { instance: this, handler: this.ungroupColumn, arg1: columnName });
return;
}
column.visible = true;
this.colName = column.field;
var columns = JSON.parse(JSON.stringify(this.groupSettings.columns));
columns.splice(columns.indexOf(this.colName), 1);
if (this.sortedColumns.indexOf(columnName) < 0) {
for (var i = 0, len = gObj.sortSettings.columns.length; i < len; i++) {
if (columnName === gObj.sortSettings.columns[parseInt(i.toString(), 10)].field) {
gObj.sortSettings.columns.splice(i, 1);
break;
}
}
}
if (this.groupSettings.allowReordering) {
this.reorderingColumns = columns;
}
this.groupSettings.columns = columns;
if (gObj.allowGrouping) {
this.isAppliedUnGroup = true;
this.parent.dataBind();
}
};
/**
* The function used to update groupSettings
*
* @returns {void}
* @hidden
*/
Group.prototype.updateModel = function () {
var columns = JSON.parse(JSON.stringify(this.groupSettings.columns));
columns = this.reorderingColumns.length ? JSON.parse(JSON.stringify(this.reorderingColumns)) : columns;
if (this.sortRequired) {
if (columns.indexOf(this.colName) === -1) {
columns.push(this.colName);
}
this.groupAddSortingQuery(this.colName);
}
this.sortRequired = true;
this.parent.groupSettings.columns = columns;
this.parent.dataBind();
};
/**
* The function used to trigger onActionComplete
*
* @param {NotifyArgs} e - specifies the NotifyArgs
* @returns {void}
* @hidden
*/
Group.prototype.onActionComplete = function (e) {
if (e.requestType === 'grouping') {
this.addColToGroupDrop(this.colName);
}
else {
this.removeColFromGroupDrop(this.colName);
}
if (this.groupSettings.showDropArea && this.parent.height === '100%') {
this.parent.scrollModule.refresh();
}
var args = this.groupSettings.columns.indexOf(this.colName) > -1 ? {
columnName: this.colName, requestType: 'grouping', type: events.actionComplete
} : { requestType: 'ungrouping', type: events.actionComplete };
this.parent.trigger(events.actionComplete, extend(e, args));
this.colName = null;
};
Group.prototype.groupAddSortingQuery = function (colName) {
var i = 0;
while (i < this.parent.sortSettings.columns.length) {
if (this.parent.sortSettings.columns[parseInt(i.toString(), 10)].field === colName) {
break;
}
i++;
}
if (this.parent.sortSettings.columns.length === i) {
this.parent.sortSettings.columns.push({ field: colName, direction: 'Ascending', isFromGroup: true });
}
else if (!this.parent.allowSorting) {
this.parent.sortSettings.columns[parseInt(i.toString(), 10)].direction = 'Ascending';
}
};
Group.prototype.createElement = function (field) {
var gObj = this.parent;
var direction = 'Ascending';
var animator = this.parent.createElement('div', { className: 'e-grid-icon e-group-animator' });
var groupedColumn = this.parent.createElement('div', { className: 'e-grid-icon e-groupheadercell' });
var childDiv = this.parent.createElement('div', { attrs: { 'ej-mappingname': field } });
if (isComplexField(field)) {
childDiv.setAttribute('ej-complexname', getComplexFieldID(field));
}
var column = this.parent.getColumnByField(field);
//Todo headerTemplateID for grouped column, disableHtmlEncode
var headerCell = gObj.getColumnHeaderByUid(column.uid);
// if (!isNullOrUndefined(column.headerTemplate)) {
// if (column.headerTemplate.indexOf('#') !== -1) {
// childDiv.innerHTML = document.querySelector(column.headerTemplate).innerHTML.trim();
// } else {
// childDiv.innerHTML = column.headerTemplate;
// }
// childDiv.firstElementChild.classList.add('e-grouptext');
// } else {
if (this.groupSettings.allowReordering) {
childDiv.appendChild(this.parent.createElement('span', {
className: 'e-drag e-icons e-icon-drag', innerHTML: ' ',
attrs: { title: 'Drag', tabindex: '-1', 'aria-label': this.l10n.getConstant('GroupedDrag') }
}));
}
childDiv.appendChild(this.parent.createElement('span', {
className: 'e-grouptext', innerHTML: column.headerText,
attrs: { tabindex: '-1' }
}));
// }
if (this.groupSettings.showToggleButton) {
childDiv.appendChild(this.parent.createElement('span', {
className: 'e-togglegroupbutton e-icons e-icon-ungroup e-toggleungroup', innerHTML: ' ',
attrs: { tabindex: '-1', 'aria-label': this.l10n.getConstant('UnGroupAria') }
}));
}
if (headerCell.querySelectorAll('.e-ascending,.e-descending').length) {
direction = headerCell.querySelector('.e-ascending') ? 'Ascending' : 'Descending';
}
childDiv.appendChild(this.parent.createElement('span', {
className: 'e-groupsort e-icons ' +
('e-' + direction.toLowerCase() + ' e-icon-' + direction.toLowerCase()), innerHTML: ' ',
attrs: { tabindex: '-1', 'aria-label': this.l10n.getConstant('GroupedSortIcon') + column.headerText, role: 'button' }
}));
var ungroupButton = this.parent.createElement('span', {
className: 'e-ungroupbutton e-icons e-icon-hide', innerHTML: ' ',
attrs: { title: this.l10n.getConstant('UnGroup'),
tabindex: '-1', 'aria-label': this.l10n.getConstant('UnGroupIcon') + column.headerText, role: 'button' }
});
updateCSSText(ungroupButton, this.groupSettings.showUngroupButton ? '' : 'display: none;');
childDiv.appendChild(ungroupButton);
groupedColumn.appendChild(childDiv);
if (this.groupSettings.allowReordering) {
animator.appendChild(groupedColumn);
animator.appendChild(this.createSeparator());
groupedColumn = animator;
}
return groupedColumn;
};
Group.pr