@syncfusion/ej2-treegrid
Version:
Essential JS 2 TreeGrid Component
522 lines (521 loc) • 26.8 kB
JavaScript
import { isNullOrUndefined, removeClass } from '@syncfusion/ej2-base';
import { createCheckBox } from '@syncfusion/ej2-buttons';
import { parentsUntil, getObject } from '@syncfusion/ej2-grids';
import * as events from '../base/constant';
import { getParentData, isRemoteData, isCheckboxcolumn, findChildrenRecords } from '../utils';
/**
* TreeGrid Selection module
*
* @hidden
*/
var Selection = /** @class */ (function () {
/**
* Constructor for Selection module
*
* @param {TreeGrid} parent - Tree Grid instance
*/
function Selection(parent) {
this.parent = parent;
this.selectedItems = [];
this.selectedIndexes = [];
this.filteredList = [];
this.searchingRecords = [];
this.addEventListener();
}
/**
* For internal use only - Get the module name.
*
* @private
* @returns {string} Returns Selection module name
*/
Selection.prototype.getModuleName = function () {
return 'selection';
};
Selection.prototype.addEventListener = function () {
this.parent.on('dataBoundArg', this.headerCheckbox, this);
this.parent.on('columnCheckbox', this.columnCheckbox, this);
this.parent.on('updateGridActions', this.updateGridActions, this);
this.parent.grid.on('colgroup-refresh', this.headerCheckbox, this);
this.parent.on('checkboxSelection', this.checkboxSelection, this);
};
Selection.prototype.removeEventListener = function () {
if (this.parent.isDestroyed) {
return;
}
this.parent.off('dataBoundArg', this.headerCheckbox);
this.parent.off('columnCheckbox', this.columnCheckbox);
this.parent.grid.off('colgroup-refresh', this.headerCheckbox);
this.parent.off('checkboxSelection', this.checkboxSelection);
this.parent.off('updateGridActions', this.updateGridActions);
};
/**
* To destroy the Selection
*
* @returns {void}
* @hidden
*/
Selection.prototype.destroy = function () {
this.removeEventListener();
};
Selection.prototype.checkboxSelection = function (args) {
var _a;
var target = getObject('target', args);
var checkWrap = parentsUntil(target, 'e-checkbox-wrapper');
var checkBox;
if (checkWrap && checkWrap.querySelectorAll('.e-treecheckselect').length > 0) {
checkBox = checkWrap.querySelector('input[type="checkbox"]');
var rowIndex = [];
rowIndex.push(target.closest('tr').rowIndex);
this.selectCheckboxes(rowIndex);
this.triggerChkChangeEvent(checkBox, checkBox.nextElementSibling.classList.contains('e-check'), target.closest('tr'));
}
else if (checkWrap && checkWrap.querySelectorAll('.e-treeselectall').length > 0 && this.parent.autoCheckHierarchy) {
var checkBoxvalue = !checkWrap.querySelector('.e-frame').classList.contains('e-check')
&& !checkWrap.querySelector('.e-frame').classList.contains('e-stop');
this.headerSelection(checkBoxvalue);
checkBox = checkWrap.querySelector('input[type="checkbox"]');
this.triggerChkChangeEvent(checkBox, checkBoxvalue, target.closest('tr'));
}
if (!isNullOrUndefined(this.parent['parentQuery']) && this.parent.selectionSettings.persistSelection
&& this.parent['columnModel'].filter(function (col) { return col.type === 'checkbox'; }).length > 0
&& isRemoteData(this.parent)) {
if (this.parent['parentQuery'].length > 0) {
(_a = this.parent.query.queries).push.apply(_a, this.parent['parentQuery']);
this.parent['parentQuery'] = [];
}
}
};
Selection.prototype.triggerChkChangeEvent = function (checkBox, checkState, rowElement) {
var data = this.parent.getCurrentViewRecords()[rowElement.rowIndex];
var args = { checked: checkState, target: checkBox, rowElement: rowElement,
rowData: checkBox.classList.contains('e-treeselectall')
? this.parent.getCheckedRecords() : data };
this.parent.trigger(events.checkboxChange, args);
};
Selection.prototype.getCheckboxcolumnIndex = function () {
var mappingUid;
var columnIndex;
var stackedHeader = 'stackedHeader';
var columnModel = 'columnModel';
var columns = this.parent["" + stackedHeader] ? this.parent["" + columnModel] : (this.parent.columns);
for (var col = 0; col < columns.length; col++) {
if (columns[parseInt(col.toString(), 10)].showCheckbox) {
mappingUid = columns[parseInt(col.toString(), 10)].uid;
}
}
var headerCelllength = this.parent.getHeaderContent().querySelectorAll('.e-headercelldiv').length;
for (var j = 0; j < headerCelllength; j++) {
var headercell = this.parent.getHeaderContent().querySelectorAll('.e-headercelldiv')[parseInt(j.toString(), 10)];
if (headercell.getAttribute('e-mappinguid') === mappingUid) {
columnIndex = j;
}
}
return columnIndex;
};
Selection.prototype.headerCheckbox = function () {
this.columnIndex = this.getCheckboxcolumnIndex();
if (this.columnIndex > -1 && this.parent.getHeaderContent().querySelectorAll('.e-treeselectall').length === 0) {
var headerElement = this.parent.getHeaderContent().querySelectorAll('.e-headercelldiv')[this.columnIndex];
var value = false;
var rowChkBox = this.parent.createElement('input', { className: 'e-treeselectall', attrs: { 'type': 'checkbox' } });
var checkWrap = createCheckBox(this.parent.createElement, false, { checked: value, label: ' ' });
checkWrap.classList.add('e-hierarchycheckbox');
checkWrap.insertBefore(rowChkBox.cloneNode(), checkWrap.firstChild);
if (!isNullOrUndefined(headerElement)) {
headerElement.insertBefore(checkWrap, headerElement.firstChild);
}
if (this.parent.autoCheckHierarchy) {
this.headerSelection();
}
}
else if (this.columnIndex > -1 && this.parent.getHeaderContent().querySelectorAll('.e-treeselectall').length > 0) {
var checkWrap = this.parent.getHeaderContent().querySelectorAll('.e-checkbox-wrapper')[0];
var checkBoxvalue = checkWrap.querySelector('.e-frame').classList.contains('e-check');
if (this.parent.autoCheckHierarchy && checkBoxvalue) {
this.headerSelection(checkBoxvalue);
}
}
};
Selection.prototype.renderColumnCheckbox = function (args) {
var rowChkBox = this.parent.createElement('input', { className: 'e-treecheckselect', attrs: { 'type': 'checkbox', 'aria-label': 'checkbox' } });
var data = args.data;
args.cell.classList.add('e-treegridcheckbox');
args.cell.setAttribute('aria-label', 'checkbox');
var value = (isNullOrUndefined(data.checkboxState) || data.checkboxState === 'uncheck') ? false : true;
var checkWrap = createCheckBox(this.parent.createElement, false, { checked: value, label: ' ' });
checkWrap.classList.add('e-hierarchycheckbox');
if (this.parent.allowTextWrap) {
checkWrap.querySelector('.e-frame').style.width = '18px';
}
if (data.checkboxState === 'indeterminate') {
var checkbox = checkWrap.querySelectorAll('.e-frame')[0];
removeClass([checkbox], ['e-check', 'e-stop', 'e-uncheck']);
checkWrap.querySelector('.e-frame').classList.add('e-stop');
}
checkWrap.insertBefore(rowChkBox.cloneNode(), checkWrap.firstChild);
return checkWrap;
};
Selection.prototype.columnCheckbox = function (container) {
var checkWrap = this.renderColumnCheckbox(container);
var containerELe = container.cell.querySelector('.e-treecolumn-container');
if (!isNullOrUndefined(containerELe)) {
if (!container.cell.querySelector('.e-hierarchycheckbox')) {
containerELe.insertBefore(checkWrap, containerELe.querySelectorAll('.e-treecell')[0]);
}
}
else {
var spanEle = this.parent.createElement('span', { className: 'e-treecheckbox' });
var data = container.cell.innerHTML;
container.cell.innerHTML = '';
spanEle.innerHTML = data;
var divEle = this.parent.createElement('div', { className: 'e-treecheckbox-container' });
divEle.appendChild(checkWrap);
divEle.appendChild(spanEle);
container.cell.appendChild(divEle);
}
};
Selection.prototype.selectCheckboxes = function (rowIndexes) {
if (isNullOrUndefined(rowIndexes)) {
var error = 'The provided value for the rowIndexes is undefined. Please ensure the rowIndexes contains number.';
this.parent.trigger(events.actionFailure, { error: error });
}
for (var i = 0; i < rowIndexes.length; i++) {
var record = this.parent.getCurrentViewRecords()[rowIndexes[parseInt(i.toString(), 10)]];
var flatRecord = getParentData(this.parent, record.uniqueID);
record = flatRecord;
var checkboxState = (record.checkboxState === 'uncheck') ? 'check' : 'uncheck';
record.checkboxState = checkboxState;
var keys = Object.keys(record);
for (var j = 0; j < keys.length; j++) {
if (Object.prototype.hasOwnProperty.call(flatRecord, keys[parseInt(j.toString(), 10)])) {
flatRecord[keys[parseInt(j.toString(), 10)]] = record[keys[parseInt(j.toString(), 10)]];
}
}
this.traverSelection(record, checkboxState, false);
if (this.parent.autoCheckHierarchy) {
this.headerSelection();
}
}
};
Selection.prototype.traverSelection = function (record, checkboxState, ischildItem) {
var length = 0;
this.updateSelectedItems(record, checkboxState);
if (!ischildItem && record.parentItem && this.parent.autoCheckHierarchy) {
this.updateParentSelection(record.parentItem);
}
if (record.childRecords && this.parent.autoCheckHierarchy) {
var childRecords = record.childRecords;
if (!isNullOrUndefined(this.parent.filterModule) &&
this.parent.filterModule.filteredResult.length > 0 && this.parent.autoCheckHierarchy) {
childRecords = this.getFilteredChildRecords(childRecords);
}
length = childRecords.length;
for (var count = 0; count < length; count++) {
if (!childRecords[parseInt(count.toString(), 10)].isSummaryRow) {
if (childRecords[parseInt(count.toString(), 10)].hasChildRecords) {
this.traverSelection(childRecords[parseInt(count.toString(), 10)], checkboxState, true);
}
else {
this.updateSelectedItems(childRecords[parseInt(count.toString(), 10)], checkboxState);
}
}
}
}
};
Selection.prototype.getFilteredChildRecords = function (childRecords) {
var _this = this;
var filteredChildRecords = childRecords.filter(function (e) {
return _this.parent.filterModule.filteredResult.indexOf(e) > -1;
});
return filteredChildRecords;
};
Selection.prototype.updateParentSelection = function (parentRecord) {
var length = 0;
var childRecords = [];
var record = getParentData(this.parent, parentRecord.uniqueID);
if (record && record.childRecords) {
childRecords = record.childRecords;
}
if (!isNullOrUndefined(this.parent.filterModule) &&
this.parent.filterModule.filteredResult.length > 0 && this.parent.autoCheckHierarchy) {
childRecords = this.getFilteredChildRecords(childRecords);
}
length = childRecords && childRecords.length;
var indeter = 0;
var checkChildRecords = 0;
if (!isNullOrUndefined(record)) {
for (var i = 0; i < childRecords.length; i++) {
var currentRecord = getParentData(this.parent, childRecords[parseInt(i.toString(), 10)].uniqueID);
var checkBoxRecord = currentRecord;
if (!isNullOrUndefined(checkBoxRecord)) {
if (checkBoxRecord.checkboxState === 'indeterminate') {
indeter++;
}
else if (checkBoxRecord.checkboxState === 'check') {
checkChildRecords++;
}
}
}
if (indeter > 0 || (checkChildRecords > 0 && checkChildRecords !== length)) {
record.checkboxState = 'indeterminate';
}
else if (checkChildRecords === 0 && (!record.hasFilteredChildRecords || isNullOrUndefined(record.hasFilteredChildRecords)) && !isNullOrUndefined(this.parent['dataResults']['actionArgs']) &&
(this.parent['dataResults']['actionArgs'].requestType === 'searching' || this.parent['dataResults']['actionArgs'].requestType === 'filtering') && record.checkboxState === 'check') {
record.checkboxState = 'check';
}
else if ((checkChildRecords === 0 && indeter === 0) || (checkChildRecords === 0 && record.hasFilteredChildRecords && !isNullOrUndefined(this.parent['dataResults']['actionArgs']) &&
(this.parent['dataResults']['actionArgs'].requestType === 'searching' || this.parent['dataResults']['actionArgs'].requestType === 'filtering') && record.checkboxState === 'check')) {
record.checkboxState = 'uncheck';
}
else {
record.checkboxState = 'check';
}
this.updateSelectedItems(record, record.checkboxState);
if (record.parentItem) {
this.updateParentSelection(record.parentItem);
}
}
};
Selection.prototype.headerSelection = function (checkAll) {
var _this = this;
var index = -1;
var length = 0;
//This property used to maintain the check state of the currentview data after clear filtering
var multiFilterCheckState = false;
if (!isNullOrUndefined(this.parent.filterModule) && this.parent.filterModule.filteredResult.length > 0) {
var filterResult = this.parent.filterModule.filteredResult;
if (this.filteredList.length === 0) {
this.filteredList = filterResult;
}
if (this.parent.grid.searchSettings.key.length) {
this.searchingRecords = filterResult;
}
else {
if (this.filteredList !== filterResult) {
this.filteredList = filterResult;
multiFilterCheckState = true;
}
else {
multiFilterCheckState = false;
}
}
}
if (this.filteredList.length > 0) {
if (!this.parent.filterSettings.columns.length && this.filteredList.length && !this.parent.grid.searchSettings.key.length) {
this.filteredList = [];
}
if (this.searchingRecords.length && !isNullOrUndefined(checkAll)) {
this.filteredList = this.searchingRecords;
}
}
var data;
if (!(isNullOrUndefined(this.parent.filterModule)) &&
this.parent.filterModule.filteredResult.length === 0 && this.parent.getCurrentViewRecords().length === 0 &&
this.parent.filterSettings.columns.length > 0) {
data = this.filteredList;
}
else {
data = (!isNullOrUndefined(this.parent.filterModule) &&
(this.filteredList.length > 0)) ? this.filteredList : this.parent.flatData;
}
data = isRemoteData(this.parent) ? this.parent.getCurrentViewRecords() : data;
if (!isNullOrUndefined(checkAll)) {
for (var i = 0; i < data.length; i++) {
if (checkAll) {
if (data[parseInt(i.toString(), 10)].checkboxState === 'check') {
continue;
}
if (multiFilterCheckState) {
continue;
}
data[parseInt(i.toString(), 10)].checkboxState = 'check';
this.updateSelectedItems(data[parseInt(i.toString(), 10)], data[parseInt(i.toString(), 10)].checkboxState);
}
else {
index = this.selectedItems.indexOf(data[parseInt(i.toString(), 10)]);
if (index > -1) {
data[parseInt(i.toString(), 10)].checkboxState = 'uncheck';
this.updateSelectedItems(data[parseInt(i.toString(), 10)], data[parseInt(i.toString(), 10)].checkboxState);
if (this.parent.autoCheckHierarchy) {
this.updateParentSelection(data[parseInt(i.toString(), 10)]);
}
}
}
}
}
if (checkAll === false && this.parent.enableVirtualization) {
this.selectedItems = [];
this.selectedIndexes = [];
data.filter(function (rec) {
rec.checkboxState = 'uncheck';
_this.updateSelectedItems(rec, rec.checkboxState);
});
}
length = this.selectedItems.length;
var checkbox = this.parent.getHeaderContent().querySelectorAll('.e-frame')[0];
if (length > 0 && data.length > 0) {
if (length !== data.length && !checkAll) {
removeClass([checkbox], ['e-check']);
checkbox.classList.add('e-stop');
}
else {
removeClass([checkbox], ['e-stop']);
checkbox.classList.add('e-check');
}
}
else {
removeClass([checkbox], ['e-check', 'e-stop']);
}
};
Selection.prototype.updateSelectedItems = function (currentRecord, checkState) {
var record = this.parent.grid.currentViewData.filter(function (e) {
return e.uniqueID === currentRecord.uniqueID;
});
var checkedRecord;
var recordIndex = this.parent.grid.currentViewData.indexOf(record[0]);
var checkboxRecord = getParentData(this.parent, currentRecord.uniqueID);
var tr = this.parent.getRows()[parseInt(recordIndex.toString(), 10)];
var checkbox;
if (recordIndex > -1) {
var movableTr = void 0;
if (this.parent.frozenRows || this.parent.getFrozenColumns()) {
movableTr = this.parent.getDataRows()[parseInt(recordIndex.toString(), 10)];
}
checkbox = tr.querySelectorAll('.e-hierarchycheckbox .e-frame')[0] ? tr.querySelectorAll('.e-hierarchycheckbox .e-frame')[0]
: movableTr.querySelectorAll('.e-hierarchycheckbox .e-frame')[0];
if (!isNullOrUndefined(checkbox)) {
removeClass([checkbox], ['e-check', 'e-stop', 'e-uncheck']);
}
}
checkedRecord = checkboxRecord;
if (isNullOrUndefined(checkedRecord)) {
checkedRecord = currentRecord;
}
checkedRecord.checkboxState = checkState;
if (checkState === 'check' && isNullOrUndefined(currentRecord.isSummaryRow)) {
if (recordIndex !== -1 && this.selectedIndexes.indexOf(recordIndex) === -1) {
this.selectedIndexes.push(recordIndex);
}
if (this.selectedItems.indexOf(checkedRecord) === -1 && (recordIndex !== -1 &&
(!isNullOrUndefined(this.parent.filterModule) && this.parent.filterModule.filteredResult.length > 0))) {
this.selectedItems.push(checkedRecord);
}
if (this.selectedItems.indexOf(checkedRecord) === -1 && (this.parent.enableVirtualization || this.parent.allowPaging) && ((!isNullOrUndefined(this.parent.filterModule) && this.parent.filterModule.filteredResult.length > 0))) {
this.selectedItems.push(checkedRecord);
}
if (this.selectedItems.indexOf(checkedRecord) === -1 && (!isNullOrUndefined(this.parent.filterModule) &&
this.parent.filterModule.filteredResult.length === 0)) {
this.selectedItems.push(checkedRecord);
}
if (this.selectedItems.indexOf(checkedRecord) === -1 && isNullOrUndefined(this.parent.filterModule)) {
this.selectedItems.push(checkedRecord);
}
}
else if ((checkState === 'uncheck' || checkState === 'indeterminate') && isNullOrUndefined(currentRecord.isSummaryRow)) {
var index = this.selectedItems.indexOf(checkedRecord);
if (index !== -1) {
this.selectedItems.splice(index, 1);
}
if (this.selectedIndexes.indexOf(recordIndex) !== -1) {
var checkedIndex = this.selectedIndexes.indexOf(recordIndex);
this.selectedIndexes.splice(checkedIndex, 1);
}
}
var checkBoxclass = checkState === 'indeterminate' ? 'e-stop' : 'e-' + checkState;
if (recordIndex > -1) {
if (!isNullOrUndefined(checkbox)) {
checkbox.classList.add(checkBoxclass);
tr.querySelector('.e-treecheckselect').setAttribute('aria-checked', checkState === 'check' ? 'true' : checkState === 'uncheck' ? 'false' : 'mixed');
}
}
};
Selection.prototype.updateGridActions = function (args) {
var _this = this;
var requestType = args.requestType;
var childData;
var childLength;
if (isCheckboxcolumn(this.parent)) {
if (this.parent.autoCheckHierarchy) {
if ((requestType === 'sorting' || requestType === 'paging')) {
var rows = this.parent.grid.getRows();
childData = this.parent.getCurrentViewRecords();
childLength = childData.length;
this.selectedIndexes = [];
for (var i = 0; i < childLength; i++) {
if (!rows[parseInt(i.toString(), 10)].classList.contains('e-summaryrow')) {
this.updateSelectedItems(childData[parseInt(i.toString(), 10)], childData[parseInt(i.toString(), 10)].checkboxState);
}
}
}
else if (requestType === 'delete' || args.action === 'add') {
var updatedData = [];
if (requestType === 'delete') {
updatedData = args.data;
}
else {
updatedData.push(args.data);
}
for (var i = 0; i < updatedData.length; i++) {
if (requestType === 'delete') {
var index = this.parent.flatData.indexOf(updatedData[parseInt(i.toString(), 10)]);
var checkedIndex = this.selectedIndexes.indexOf(index);
this.selectedIndexes.splice(checkedIndex, 1);
this.updateSelectedItems(updatedData[parseInt(i.toString(), 10)], 'uncheck');
}
if (!isNullOrUndefined(updatedData[parseInt(i.toString(), 10)].parentItem)) {
this.updateParentSelection(updatedData[parseInt(i.toString(), 10)].parentItem);
}
}
}
else if (args.requestType === 'add' && this.parent.autoCheckHierarchy) {
args.data.checkboxState = 'uncheck';
}
else if (requestType === 'filtering' || requestType === 'searching' || requestType === 'refresh'
&& !isRemoteData(this.parent)) {
this.selectedItems = [];
this.selectedIndexes = [];
childData = (!isNullOrUndefined(this.parent.filterModule) && this.parent.filterModule.filteredResult.length > 0) ?
this.parent.filterModule.filteredResult : this.parent.flatData;
childData.forEach(function (record) {
if (_this.parent.enableVirtualization) {
if (record.hasChildRecords && record.childRecords.length > 0) {
_this.updateParentSelection(record);
}
else {
_this.updateSelectedItems(record, record.checkboxState);
}
var child = findChildrenRecords(record);
child = _this.getFilteredChildRecords(child);
for (var i = 0; i < child.length; i++) {
if (child[parseInt(i.toString(), 10)].hasChildRecords) {
_this.updateParentSelection(child[parseInt(i.toString(), 10)]);
}
else if (!(child[parseInt(i.toString(), 10)].hasChildRecords) &&
!isNullOrUndefined(child[parseInt(i.toString(), 10)])) {
_this.updateSelectedItems(child[parseInt(i.toString(), 10)], child[parseInt(i.toString(), 10)].checkboxState);
}
}
}
else {
if (record.hasChildRecords) {
_this.updateParentSelection(record);
}
else {
_this.updateSelectedItems(record, record.checkboxState);
}
}
});
this.headerSelection();
}
}
}
};
Selection.prototype.getCheckedrecords = function () {
return this.selectedItems;
};
Selection.prototype.getCheckedRowIndexes = function () {
return this.selectedIndexes;
};
return Selection;
}());
export { Selection };