@syncfusion/ej2-treegrid
Version:
Essential JS 2 TreeGrid Component
1,064 lines • 223 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { Component, addClass, createElement, EventHandler, isNullOrUndefined, extend, merge, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
import { removeClass, Complex, Collection, getValue } from '@syncfusion/ej2-base';
import { Event, Property, NotifyPropertyChanges, setValue, KeyboardEvents, L10n } from '@syncfusion/ej2-base';
import { Column } from '../models/column';
import { getNumberFormat } from '@syncfusion/ej2-grids';
import { Freeze as FreezeColumn } from '@syncfusion/ej2-grids';
import { RowDropSettings, getUid, parentsUntil } from '@syncfusion/ej2-grids';
import { LoadingIndicator } from '../models/loading-indicator';
import { FilterSettings } from '../models/filter-settings';
import { TextWrapSettings } from '../models/textwrap-settings';
import { Logger as TreeLogger } from '../actions/logger';
import { TreeClipboard } from '../actions/clipboard';
import { Selection as TreeGridSelection } from '../actions/selection';
import { Print } from '../actions/print';
import * as events from '../base/constant';
import { SearchSettings } from '../models/search-settings';
import { SelectionSettings } from '../models/selection-settings';
import { getActualProperties, getObject } from '@syncfusion/ej2-grids';
import { DataManager, RemoteSaveAdaptor, Query, JsonAdaptor, Deferred, UrlAdaptor } from '@syncfusion/ej2-data';
import { createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
import { isRemoteData, isOffline, extendArray, isCountRequired, findChildrenRecords } from '../utils';
import { Grid, Logger } from '@syncfusion/ej2-grids';
import { Render } from '../renderer/render';
import { DataManipulation } from './data';
import { iterateArrayOrObject } from '@syncfusion/ej2-grids';
import { ToolbarItem, ContextMenuItems } from '../enum';
import { PageSettings } from '../models/page-settings';
import { AggregateRow } from '../models/summary';
import { EditSettings } from '../models/edit-settings';
import { SortSettings } from '../models/sort-settings';
import { isHidden, getExpandStatus } from '../utils';
import { editAction } from '../actions/crud-actions';
import { InfiniteScrollSettings } from '../models/infinite-scroll-settings';
import * as literals from '../base/constant';
/**
* Represents the TreeGrid component.
* ```html
* <div id='treegrid'></div>
* <script>
* var treegridObj = new TreeGrid({ allowPaging: true });
* treegridObj.appendTo('#treegrid');
* </script>
* ```
*/
var TreeGrid = /** @class */ (function (_super) {
__extends(TreeGrid, _super);
function TreeGrid(options, element) {
var _this = _super.call(this, options, element) || this;
_this.dataResults = {};
_this.uniqueIDCollection = {};
_this.uniqueIDFilterCollection = {};
_this.changedRecords = 'changedRecords';
_this.deletedRecords = 'deletedRecords';
_this.addedRecords = 'addedRecords';
_this.indentOutdentAction = 'indentOutdentAction';
_this.isFromChartSide = false;
_this.modifiedRecords = [];
_this.stackedHeader = false;
_this.freezeColumnRefresh = true;
_this.objectEqualityChecker = function (old, current) {
if (old) {
var keys = Object.keys(old);
var isEqual = true;
var excludeKeys = ['Children', 'childRecords', 'taskData', 'uniqueID', 'parentItem', 'parentUniqueID', 'index'];
for (var i = 0; i < keys.length; i++) {
if (old[keys[parseInt(i.toString(), 10)]] !== current[keys[parseInt(i.toString(), 10)]] &&
excludeKeys.indexOf(keys[parseInt(i.toString(), 10)]) === -1) {
var isDate = old[keys[parseInt(i.toString(), 10)]] instanceof Date &&
current[keys[parseInt(i.toString(), 10)]] instanceof Date;
if (!isDate || (old[keys[parseInt(i.toString(), 10)]].getTime() !==
current[keys[parseInt(i.toString(), 10)]].getTime())) {
isEqual = false;
break;
}
}
}
return isEqual;
}
else {
return false;
}
};
TreeGrid_1.Inject(TreeGridSelection, TreeLogger);
setValue('mergePersistData', _this.mergePersistTreeGridData, _this);
var logger = 'Logger';
if (!isNullOrUndefined(_this.injectedModules["" + logger])) {
Grid.Inject(Logger);
}
var freezeModulePresent = _this.injectedModules.filter(function (e) {
if (e.prototype.getModuleName() === 'freeze') {
Grid.Inject(FreezeColumn);
}
});
_this.grid = new Grid();
return _this;
}
TreeGrid_1 = TreeGrid;
/**
* Exports the TreeGrid data to an Excel file (.xlsx).
*
* @param {ExcelExportProperties | TreeGridExcelExportProperties} excelExportProperties - The properties used to configure the Excel export.
* @param {boolean} isMultipleExport - Indicates whether multiple exporting is enabled.
* @param {workbook} workbook - The workbook instance used for multiple exports.
* @param {boolean} isBlob - If set to true, the result will be returned as blob data.
* @returns {Promise<any>} - Returns a promise that resolves with the result of the export action.
*/
/* eslint-disable */
TreeGrid.prototype.excelExport = function (excelExportProperties, isMultipleExport, workbook, isBlob) {
/* eslint-enable */
return this.excelExportModule.Map(excelExportProperties, isMultipleExport, workbook, isBlob, false);
};
/**
* Exports the TreeGrid data to a CSV file.
*
* @param {ExcelExportProperties} excelExportProperties - The properties used to configure the CSV export.
* @param {boolean} isMultipleExport - Indicates whether multiple exporting is enabled.
* @param {workbook} workbook - The workbook instance used for multiple exports.
* @param {boolean} isBlob - If set to true, the result will be returned as blob data.
* @returns {Promise<any>} - Returns a promise that resolves with the result of the export action.
*/
/* eslint-disable */
TreeGrid.prototype.csvExport = function (excelExportProperties, isMultipleExport, workbook, isBlob) {
/* eslint-enable */
return this.excelExportModule.Map(excelExportProperties, isMultipleExport, workbook, isBlob, true);
};
/**
* Exports the TreeGrid data to a PDF document.
*
* @param {PdfExportProperties | TreeGridPdfExportProperties} pdfExportProperties - The properties used to configure the PDF export.
* @param {boolean} isMultipleExport - Indicates whether multiple exporting is enabled.
* @param {Object} pdfDoc - The PDF document instance used for multiple exports.
* @param {boolean} isBlob - If set to true, the result will be returned as blob data.
* @returns {Promise<any>} - Returns a promise that resolves with the result of the export action.
*/
TreeGrid.prototype.pdfExport = function (pdfExportProperties, isMultipleExport, pdfDoc, isBlob) {
return this.pdfExportModule.Map(pdfExportProperties, isMultipleExport, pdfDoc, isBlob);
};
/**
* Sends a POST request to export the TreeGrid to an Excel file on the server side.
*
* @param {string} url - The URL for the server-side Excel export action.
* @returns {void}
*/
TreeGrid.prototype.serverExcelExport = function (url) {
this.isExcel = true;
this.exportTreeGrid(url);
};
/**
* Sends a POST request to export the TreeGrid to a PDF document on the server side.
*
* @param {string} url - The URL for the server-side PDF export action.
* @returns {void}
*/
TreeGrid.prototype.serverPdfExport = function (url) {
this.isExcel = false;
this.exportTreeGrid(url);
};
/**
* Sends a POST request to export the TreeGrid to a CSV file on the server side.
*
* @param {string} url - The URL for the server-side CSV export action.
* @returns {void}
*/
TreeGrid.prototype.serverCsvExport = function (url) {
this.isExcel = true;
this.exportTreeGrid(url);
};
/**
* Exports the TreeGrid data to the specified URL using a POST request.
*
* @param {string} url - Defines exporting url
* @returns {void}
*/
TreeGrid.prototype.exportTreeGrid = function (url) {
// eslint-disable-next-line @typescript-eslint/no-this-alias
var treegrid = this;
var query = treegrid.grid.getDataModule().generateQuery(true);
var state = new UrlAdaptor().processQuery(new DataManager({ url: '' }), query);
var queries = JSON.parse(state.data);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var treeGridModel = JSON.parse(this.addOnPersist(['allowPaging', 'pageSettings', 'sortSettings', 'allowPdfExport', 'allowExcelExport', 'aggregates',
'filterSettings', 'columns', 'locale', 'searchSettings', 'idMapping', 'parentIdMapping', 'childMapping', 'treeColumnIndex']));
var include = ['field', 'headerText', 'type', 'format', 'visible',
'template', 'index', 'width', 'textAlign', 'headerTextAlign', 'columns'];
treeGridModel.filterSettings.columns = queries.where;
treeGridModel.searchSettings.fields = queries.search && queries.search[0]['fields'] || [];
treeGridModel.sortSettings.columns = queries.sorted;
treeGridModel.columns = this.setHeaderText(treeGridModel.columns, include);
var form = this.createElement('form', { id: 'ExportForm' });
form.style.display = 'none';
var treeGridInput = this.createElement('input', { id: 'treeGridInput', attrs: { name: 'treeGridModel' } });
treeGridInput.value = JSON.stringify(treeGridModel);
form.method = 'POST';
form.action = url;
form.appendChild(treeGridInput);
document.body.appendChild(form);
form.submit();
form.remove();
};
/**
* Sets the header text and other properties for an array of columns based on specified criteria.
*
* @param {Column[]} columns - Defines array of columns
* @param {string[]} include - Defines array of sting
* @returns {Column[]} returns array of columns
*/
TreeGrid.prototype.setHeaderText = function (columns, include) {
for (var i = 0; i < columns.length; i++) {
var column = this.getColumnByUid(columns[parseInt(i.toString(), 10)].uid);
if (this.stackedHeader && isNullOrUndefined(column)) {
column = !isNullOrUndefined(columns[parseInt(i.toString(), 10)].field) ?
this.getColumnByField(columns[parseInt(i.toString(), 10)].field) : columns[parseInt(i.toString(), 10)];
}
columns[parseInt(i.toString(), 10)].headerText = column.headerText;
if (!isNullOrUndefined(column.template)) {
columns[parseInt(i.toString(), 10)].template = 'true';
}
if (columns[parseInt(i.toString(), 10)].format) {
columns[parseInt(i.toString(), 10)].format = getNumberFormat(this.getFormat(column.format), column.type, false, this.currencyCode);
if (!this.isExcel && (column.type === 'datetime' || column.type === 'date')) {
columns[parseInt(i.toString(), 10)].format = columns[parseInt(i.toString(), 10)].format.toString().replace('AM/PM', 'tt');
}
columns[parseInt(i.toString(), 10)].type = column.type;
}
if (columns[parseInt(i.toString(), 10)].columns) {
this.setHeaderText(columns[parseInt(i.toString(), 10)].columns, include);
}
var keys = Object.keys(columns[parseInt(i.toString(), 10)]);
for (var j = 0; j < keys.length; j++) {
if (include.indexOf(keys[parseInt(j.toString(), 10)]) < 0) {
delete columns[parseInt(i.toString(), 10)][keys[parseInt(j.toString(), 10)]];
}
}
}
return columns;
};
/**
* Retrieves the appropriate format string from the given format options.
*
* @param {string | NumberFormatOptions | DateFormatOptions} format - The format options to retrieve the format string from.
* @returns {string} The format string extracted from the provided format options.
*/
TreeGrid.prototype.getFormat = function (format) {
return typeof (format) === 'object' ? !isNullOrUndefined(format.format) ?
format.format : format.skeleton : format;
};
/**
* For internal use only - Get the module name.
*
* @private
* @returns {string} Returns TreeGrid module name
*/
TreeGrid.prototype.getModuleName = function () {
return 'treegrid';
};
/**
* For internal use only - Initialize the event handler;
*
* @private
* @returns {void}
*/
TreeGrid.prototype.preRender = function () {
this.TreeGridLocale();
this.initProperties();
this.defaultLocale = {
Above: 'Above',
Below: 'Below',
Child: 'Child',
AddRow: 'Add Row',
ExpandAll: 'Expand All',
CollapseAll: 'Collapse All',
RowIndent: 'Indent',
RowOutdent: 'Outdent'
};
this.l10n = new L10n('treegrid', this.defaultLocale, this.locale);
if (this.isSelfReference && isNullOrUndefined(this.childMapping)) {
this.childMapping = 'Children';
}
};
/**
* Sorts a column with the specified options.
*
* @param {string} columnName - The name of the column to be sorted.
* @param {SortDirection} direction - The direction of the sorting operation.
* @param {boolean} isMultiSort - Specifies whether previous sorted columns should be maintained during sorting.
* @returns {void}
*/
TreeGrid.prototype.sortByColumn = function (columnName, direction, isMultiSort) {
if (this.sortModule) {
this.sortModule.sortColumn(columnName, direction, isMultiSort);
}
};
/**
* Clears all the sorted columns in the TreeGrid.
*
* @returns {void}
*/
TreeGrid.prototype.clearSorting = function () {
if (this.sortModule) {
this.sortModule.clearSorting();
}
};
/**
* Removes the sorted state from a column specified by the field name.
*
* @param {string} field - The field name of the column from which the sort state should be removed.
* @returns {void}
* @hidden
*/
TreeGrid.prototype.removeSortColumn = function (field) {
if (this.sortModule) {
this.sortModule.removeSortColumn(field);
}
};
/**
* Searches for TreeGrid records using a specified search string.
* Customize the search behavior through the [searchSettings](./#searchsettings/).
*
* @param {string} searchString - The string used as the search key.
* @returns {void}
*/
TreeGrid.prototype.search = function (searchString) {
this.grid.search(searchString);
};
/**
* Adjusts column widths to fit their content, ensuring content is displayed without wrapping or truncation.
* - Hidden columns are ignored by this method.
* - Use the `autoFitColumns` method during the `dataBound` event for initial rendering.
*
* @param {string | string[]} fieldNames - The name(s) of the column(s) to be auto-fitted.
* @returns {void}
*/
TreeGrid.prototype.autoFitColumns = function (fieldNames) {
this.resizeModule.autoFitColumns(fieldNames);
this.updateColumnModel();
};
/**
* Reorders TreeGrid columns by specifying their field names.
*
* @param {string | string[]} fromFName - The field name(s) of the column(s) to be moved.
* @param {string} toFName - The destination field name to place the moved columns.
* @returns {void}
*/
TreeGrid.prototype.reorderColumns = function (fromFName, toFName) {
this.grid.reorderColumns(fromFName, toFName);
};
TreeGrid.prototype.TreeGridLocale = function () {
if (!isNullOrUndefined(this.locale)) {
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
var locale = L10n.locale;
var localeObject = {};
setValue(this.locale, {}, localeObject);
var gridLocale = void 0;
gridLocale = {};
gridLocale = getObject(this.locale, locale);
var treeGridLocale = void 0;
treeGridLocale = {};
treeGridLocale = getObject(this.getModuleName(), gridLocale);
setValue('grid', treeGridLocale, getObject(this.locale, localeObject));
L10n.load(localeObject);
}
};
/**
* Prints all the pages of the TreeGrid and hides the pager by default.
* Customize print options using the [printMode](./#printmode).
*
* @returns {void}
*/
TreeGrid.prototype.print = function () {
this.printModule.print();
};
TreeGrid.prototype.treeGridkeyActionHandler = function (e) {
if (this.allowKeyboard) {
var target = void 0;
var parentTarget = void 0;
var column = void 0;
var row = void 0;
var summaryElement = void 0;
switch (e.action) {
case 'ctrlDownArrow':
this.expandAll();
break;
case 'ctrlUpArrow':
this.collapseAll();
break;
case 'ctrlShiftUpArrow':
target = e.target;
column = target.closest('.e-rowcell');
if (!isNullOrUndefined(column)) {
row = column.closest('tr');
if (!isNullOrUndefined(row) && !(isNullOrUndefined(row.getElementsByClassName('e-treegridexpand')[0]))) {
this.expandCollapseRequest(row.querySelector('.e-treegridexpand'));
}
}
break;
case 'ctrlShiftDownArrow':
target = e.target;
column = target.closest('.e-rowcell');
if (!isNullOrUndefined(column)) {
row = column.closest('tr');
if (!isNullOrUndefined(row) && !(isNullOrUndefined(row.getElementsByClassName('e-treegridcollapse')[0]))) {
this.expandCollapseRequest(row.querySelector('.e-treegridcollapse'));
}
}
break;
case 'downArrow':
if (!this.enableVirtualization && isNullOrUndefined(this.rowTemplate)) {
target = e.target;
if (!isNullOrUndefined(target.querySelectorAll('.e-rowcell'))) {
target = parentsUntil(target, 'e-rowcell');
}
if (!isNullOrUndefined(target)) {
parentTarget = target.parentElement;
if (!isNullOrUndefined(parentTarget)) {
var cellIndex = parentTarget.cellIndex;
if (cellIndex && this.grid.getColumnByIndex(cellIndex).editType === 'dropdownedit' && isNullOrUndefined(this.grid.getColumnByIndex(cellIndex).edit['obj'])) {
parentTarget = target;
}
summaryElement = this.findnextRowElement(parentTarget);
if (summaryElement !== null) {
var cellIndex_1 = target.cellIndex;
var row_1 = summaryElement.children[parseInt(cellIndex_1.toString(), 10)];
if (!isNullOrUndefined(row_1) && !this.grid.isEdit) {
var focusedCells = this.grid.getContent().querySelectorAll('.e-rowcell.e-focused, .e-rowcell.e-focus');
focusedCells.forEach(function (cell) {
removeClass([cell], ['e-focused', 'e-focus']);
});
addClass([row_1], ['e-focused', 'e-focus']);
}
}
else {
this.clearSelection();
}
}
}
}
break;
case 'upArrow':
if (!this.enableVirtualization && isNullOrUndefined(this.rowTemplate)) {
target = e.target;
if (!isNullOrUndefined(target.querySelectorAll('.e-rowcell'))) {
target = parentsUntil(target, 'e-rowcell');
}
if (!isNullOrUndefined(target)) {
parentTarget = target.parentElement;
if (!isNullOrUndefined(parentTarget)) {
var cellIndex = parentTarget.cellIndex;
if (cellIndex && this.grid.getColumnByIndex(cellIndex).editType === 'dropdownedit' && isNullOrUndefined(this.grid.getColumnByIndex(cellIndex).edit['obj'])) {
parentTarget = target;
}
summaryElement = this.findPreviousRowElement(parentTarget);
if (summaryElement !== null) {
var cellIndex_2 = target.cellIndex;
if (!isNullOrUndefined(cellIndex_2)) {
var row_2 = summaryElement.children[parseInt(cellIndex_2.toString(), 10)];
if (!isNullOrUndefined(row_2) && !this.grid.isEdit) {
var focusedCells = this.grid.getContent().querySelectorAll('.e-rowcell.e-focused, .e-rowcell.e-focus');
focusedCells.forEach(function (cell) {
removeClass([cell], ['e-focused', 'e-focus']);
});
addClass([row_2], ['e-focused', 'e-focus']);
}
}
}
else {
this.clearSelection();
}
}
}
}
}
}
};
// Get Proper Row Element from the summary
TreeGrid.prototype.findnextRowElement = function (summaryRowElement) {
var rowElement = summaryRowElement.nextElementSibling;
if (rowElement !== null && (rowElement.className.indexOf('e-summaryrow') !== -1 ||
rowElement.classList.contains('e-childrow-hidden'))) {
rowElement = this.findnextRowElement(rowElement);
}
return rowElement;
};
// Get Proper Row Element from the summary
TreeGrid.prototype.findPreviousRowElement = function (summaryRowElement) {
var rowElement = summaryRowElement.previousElementSibling;
if (rowElement !== null && (rowElement.className.indexOf('e-summaryrow') !== -1 ||
rowElement.classList.contains('e-childrow-hidden'))) {
rowElement = this.findPreviousRowElement(rowElement);
}
return rowElement;
};
TreeGrid.prototype.initProperties = function () {
this.defaultLocale = {};
this.flatData = [];
this.infiniteScrollData = [];
this.remoteCollapsedData = [];
this.remoteExpandedData = [];
this.parentData = [];
this.columnModel = [];
this.isExpandAll = false;
this.isCollapseAll = false;
this.freezeColumnRefresh = true;
this.keyConfigs = {
ctrlDownArrow: 'ctrl+downarrow',
ctrlUpArrow: 'ctrl+uparrow',
ctrlShiftUpArrow: 'ctrl+shift+uparrow',
ctrlShiftDownArrow: 'ctrl+shift+downarrow',
downArrow: 'downArrow',
upArrow: 'upArrow'
};
this.isLocalData = (!(this.dataSource instanceof DataManager) || this.dataSource.dataSource.offline
|| (!isNullOrUndefined(this.dataSource.ready)) || this.dataSource.adaptor instanceof RemoteSaveAdaptor);
this.isSelfReference = !isNullOrUndefined(this.parentIdMapping);
};
/**
* Attaches event handlers to the necessary elements during the component's initialization.
*
* @hidden
* @returns {void}
*/
TreeGrid.prototype.wireEvents = function () {
EventHandler.add(this.grid.element, 'click', this.mouseClickHandler, this);
EventHandler.add(this.element, 'touchend', this.mouseClickHandler, this);
this.keyboardModule = new KeyboardEvents(this.element, {
keyAction: this.treeGridkeyActionHandler.bind(this),
keyConfigs: this.keyConfigs,
eventName: 'keydown'
});
if (this.allowKeyboard) {
this.element.tabIndex = this.element.tabIndex === -1 ? 0 : this.element.tabIndex;
}
};
/**
* Provides a list of the modules that are required for rendering the TreeGrid component.
*
* This method is essential for ensuring that all dependent modules are loaded and available
* during the component's lifecycle, enabling full functionality.
*
* @returns {ModuleDeclaration[]} - Returns an array of the required TreeGrid module declarations.
* @hidden
*/
TreeGrid.prototype.requiredModules = function () {
var modules = [];
var splitFrozenCount = 'splitFrozenCount';
var mergedColumns = 'mergedColumns';
if (this["" + mergedColumns]) {
this.grid["" + mergedColumns] = this["" + mergedColumns];
}
if (isNullOrUndefined(this['changedProperties'].columns)) {
this.grid["" + splitFrozenCount](this.getColumns());
}
if (this.isDestroyed) {
return modules;
}
modules.push({
member: 'filter', args: [this, this.filterSettings],
name: 'Filter'
});
if (!isNullOrUndefined(this.toolbar)) {
modules.push({
member: 'toolbar',
args: [this],
name: 'Toolbar'
});
}
if (this.contextMenuItems) {
modules.push({
member: 'contextMenu',
args: [this],
name: 'ContextMenu'
});
}
if (this.allowPaging) {
modules.push({
member: 'pager',
args: [this, this.pageSettings],
name: 'Page'
});
}
if (this.allowReordering) {
modules.push({
member: 'reorder',
args: [this],
name: 'Reorder'
});
}
if (this.allowSorting) {
modules.push({
member: 'sort',
args: [this],
name: 'Sort'
});
}
if (this.aggregates.length > 0) {
modules.push({
member: 'summary', args: [this],
name: 'Aggregate'
});
}
if (this.resizeCheck()) {
modules.push({
member: 'resize', args: [this],
name: 'Resize'
});
}
if (this.allowExcelExport) {
modules.push({
member: 'ExcelExport', args: [this],
name: 'ExcelExport'
});
}
var freezePresent = this.injectedModules.filter(function (e) {
return e.prototype.getModuleName() === 'freeze';
});
var hasFreezeProp = Array.isArray(this.columns) &&
this.columns.some(function (col) { return !!col.freeze; });
if ((this.frozenColumns || this.frozenRows || this.getFrozenColumns() ||
hasFreezeProp) && freezePresent.length > 0) {
modules.push({
member: 'freeze', args: [this],
name: 'Freeze'
});
}
if (this.detailTemplate) {
modules.push({
member: 'detailRow', args: [this],
name: 'DetailRow'
});
}
if (this.allowPdfExport) {
modules.push({
member: 'PdfExport', args: [this],
name: 'PdfExport'
});
}
if (this.showColumnMenu) {
modules.push({
member: 'columnMenu', args: [this],
name: 'ColumnMenu'
});
}
if (this.showColumnChooser) {
modules.push({
member: 'ColumnChooser', args: [this],
name: 'ColumnChooser'
});
}
this.extendRequiredModules(modules);
return modules;
};
TreeGrid.prototype.resizeCheck = function () {
var columnMenu = this.showColumnMenu && (!this.columnMenuItems || this.columnMenuItems
.filter(function (c) { return c === 'AutoFit' || c === 'AutoFitAll'; }).length) ? true : false;
var contextMenu = this.contextMenuItems && this.contextMenuItems
.filter(function (c) { return c === 'AutoFit' || c === 'AutoFitAll'; }).length ? true : false;
return this.allowResizing || columnMenu || contextMenu;
};
TreeGrid.prototype.extendRequiredModules = function (modules) {
var IsRowDDInjected = this.injectedModules.filter(function (e) {
return e.prototype.getModuleName() === 'rowDragAndDrop';
});
if (this.allowRowDragAndDrop || IsRowDDInjected.length) {
if ((!isNullOrUndefined(this.toolbar) && (this.toolbar['includes']('Indent') ||
this.toolbar['includes']('Outdent')))) {
this.isIndentEnabled = true;
}
modules.push({
member: 'rowDragAndDrop',
args: [this],
name: 'RowDD'
});
}
if (this.editSettings.allowAdding || this.editSettings.allowDeleting || this.editSettings.allowEditing) {
modules.push({
member: 'edit',
args: [this],
name: 'Edit'
});
}
if (!isNullOrUndefined(this.columns) && this.isCommandColumn(this.columns)) {
modules.push({
member: 'commandColumn',
args: [this],
name: 'CommandColumn'
});
}
if (this.allowSelection) {
modules.push({
member: 'selection',
args: [this],
name: 'Selection'
});
}
if (this.enableVirtualization) {
modules.push({
member: 'virtualScroll',
args: [this],
name: 'VirtualScroll'
});
}
if (this.enableInfiniteScrolling) {
modules.push({
member: 'infiniteScroll',
args: [this],
name: 'InfiniteScroll'
});
}
modules.push({
member: 'logger',
args: [this.grid]
});
};
TreeGrid.prototype.isCommandColumn = function (columns) {
var _this = this;
return columns.some(function (col) {
if (col.columns) {
return _this.isCommandColumn(col.columns);
}
return !!(col.commands || col.commandsTemplate);
});
};
/**
* Unbinding events from the element while component destroy.
*
* @hidden
* @returns {void}
*/
TreeGrid.prototype.unwireEvents = function () {
if (this.grid && this.grid.element) {
EventHandler.remove(this.grid.element, 'click', this.mouseClickHandler);
}
if (this.element) {
EventHandler.remove(this.element, 'touchend', this.mouseClickHandler);
if (this.keyboardModule) {
this.keyboardModule.destroy();
this.keyboardModule = null;
}
if (this.allowKeyboard) {
this.element.removeAttribute('tabIndex');
}
}
};
/**
* Logs tree grid error message on console
*
* @param {string | string[]} types - Tree Grid error type
* @param {object} args - Error details
* @hidden
* @private
* @returns {void}
*/
TreeGrid.prototype.log = function (types, args) {
if (this.loggerModule) {
this.loggerModule.treeLog(types, args, this);
}
};
/**
* For internal use only - To Initialize the component rendering.
*
* @private
* @returns {void}
*/
TreeGrid.prototype.render = function () {
var _this = this;
if (this.isReact) {
this.grid.isReact = true;
this.grid.portals = [];
}
if (this.isVue) {
this.grid.isVue = true;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.grid.vueInstance = this.vueInstance;
}
createSpinner({ target: this.element }, this.createElement);
this.log(['mapping_fields_missing']);
this.renderModule = new Render(this);
this.dataModule = new DataManipulation(this);
this.printModule = new Print(this);
this.trigger(events.load);
this.autoGenerateColumns();
this.initialRender = true;
if (!isNullOrUndefined(this.dataSource)) {
this.convertTreeData(this.dataSource);
}
this.loadGrid();
if (this.element.classList.contains('e-treegrid') && this.rowDropSettings.targetID) {
this.grid.rowDropSettings.targetID += '_gridcontrol';
}
this.addListener();
var gridContainer = createElement('div', { id: this.element.id + '_gridcontrol', className: 'e-treelistgrid' });
addClass([this.element], 'e-treegrid');
if (!isNullOrUndefined(this.height) && typeof (this.height) === 'string' && this.height.indexOf('%') !== -1) {
this.element.style.height = this.height;
}
if (!isNullOrUndefined(this.width) && typeof (this.width) === 'string' && this.width.indexOf('%') !== -1) {
this.element.style.width = this.width;
}
this.element.appendChild(gridContainer);
var gridRequiredModules = this.grid.requiredModules;
this.grid.requiredModules = function () {
var modules = [];
modules = gridRequiredModules.apply(this);
for (var i = 0; i < modules.length; i++) {
if (modules[parseInt(i.toString(), 10)].member === 'virtualscroll') {
modules[parseInt(i.toString(), 10)].member = 'treeVirtualScroll';
}
}
return modules;
};
var root = 'root';
this.grid["" + root] = this["" + root] ? this["" + root] : this;
this.grid.appendTo(gridContainer);
this.actionFailureHandler();
var gridContent = this.element.getElementsByClassName('e-gridcontent')[0].childNodes[0];
gridContent.setAttribute('tabindex', '0');
var contentTable = this.element.getElementsByClassName('e-content')[0].querySelector('.e-table');
if (!isNullOrUndefined(contentTable)) {
contentTable.setAttribute('role', 'treegrid');
}
if (this.isIndentEnabled) {
this.refreshToolbarItems();
}
this.wireEvents();
this.renderComplete();
var destroyTemplate = 'destroyTemplate';
var destroyTemplateFn = this.grid["" + destroyTemplate];
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.grid["" + destroyTemplate] = function (args, index, callback) {
destroyTemplateFn.apply(_this.grid);
var portals = 'portals';
if (!(_this.isReact && isNullOrUndefined(_this["" + portals]))) {
_this.clearTemplate(args, index, callback);
}
else if (!isNullOrUndefined(callback)) {
callback();
}
};
};
TreeGrid.prototype.actionFailureHandler = function () {
var _this = this;
var failureCases = [];
var primaryKeyFieldNames = this.getPrimaryKeyFieldNames();
var RecordsCount = this.flatData.length;
if ((this.editSettings.allowAdding || this.editSettings.allowDeleting || this.editSettings.allowEditing)
&& primaryKeyFieldNames.length === 0 && RecordsCount !== 0) {
failureCases.push('For the CRUD actions, it is necessary to enable Primary Key field for the unique data column.');
}
if (this.allowRowDragAndDrop && primaryKeyFieldNames.length === 0 && RecordsCount !== 0) {
failureCases.push('For the Row Drag and Drop actions, it is necessary to enable Primary Key field for the unique data column.');
}
if (this.allowPaging && this.enableVirtualization) {
failureCases.push('Paging is not allowed in virtualization case.');
}
if (RecordsCount === 0 && this.columns.length === 0) {
failureCases.push('Either of the Data source or columns should be given.');
}
if (this.frozenColumns > 0 && this.columnModel.filter(function (col) { return col.isFrozen; })) {
failureCases.push('Use only one attribute for Frozen either IsFrozen or FrozenColumns.');
}
if (this.enableVirtualization && !isNullOrUndefined(this.detailTemplate)) {
failureCases.push('Virtual scrolling is not compatible with the detail template');
}
if ((this.frozenColumns > 0 || this.frozenRows > 0 || this.columnModel.filter(function (col) { return col.isFrozen; }))
&& (!isNullOrUndefined(this.detailTemplate) || !isNullOrUndefined(this.rowTemplate))) {
failureCases.push('Frozen rows and columns are not supported with the Detail template and row template.');
}
if ((this.frozenColumns > 0 || this.columnModel.filter(function (col) { return col.isFrozen; }).length > 0 || this.frozenRows > 0) && this.editSettings.mode === 'Cell') {
failureCases.push('Frozen rows and columns are not supported with cell editing.');
}
if (this.allowSelection && !isNullOrUndefined(this.rowTemplate)) {
failureCases.push('Selection is not supported in RowTemplate');
}
if (this.treeColumnIndex >= this.columns.length) {
failureCases.push('TreeColumnIndex value should not exceed the total column count.');
}
if (this.enableVirtualization &&
(this.columnModel.some(function (col) { return /%$/.test(col.width); }) ||
/%$/.test(this.height.toString()))) {
failureCases.push('column width and height should be in pixels');
}
if ((this.childMapping !== 'Children') && !isNullOrUndefined(this.idMapping)) {
failureCases.push('Both IdMapping and ChildMapping should not be used together for tree grid rendering.');
}
if ((!isNullOrUndefined(this.idMapping) && (isNullOrUndefined(this.parentIdMapping))) ||
((isNullOrUndefined(this.idMapping) && (!isNullOrUndefined(this.parentIdMapping))))) {
failureCases.push('IdMapping and ParentIdMapping properties should be defined and vice versa.');
}
var checkboxColumn = this.columnModel.filter(function (col) { return col.showCheckbox; });
var treeColumn = this.columns[this.treeColumnIndex];
if (checkboxColumn.length !== 0) {
if (checkboxColumn !== treeColumn) {
failureCases.push('ShowCheckbox column should not be defined other than the tree column.');
}
if (checkboxColumn.length > 1) {
failureCases.push('Only one column can have the ShowCheckbox option enabled.');
}
}
var alignColumn;
if (this.treeColumnIndex !== null && this.treeColumnIndex !== -1) {
alignColumn = this.columnModel.filter(function (col) { return col.textAlign === 'Right' && col.field === _this.columnModel[_this.treeColumnIndex].field; });
if (alignColumn.length !== 0) {
failureCases.push('TextAlign right for the tree column is not applicable.');
}
}
if (failureCases.length > 0) {
var failureEventArgs_1 = {
error: {}
};
failureCases.forEach(function (failureCase, index) {
failureEventArgs_1.error[parseInt(index.toString(), 10)] = failureCase;
});
this.trigger(events.actionFailure, failureEventArgs_1);
}
};
TreeGrid.prototype.refreshToolbarItems = function () {
var toolbarElement = this.toolbarModule.getToolbar();
var indentID = this.element.id + '_gridcontrol_indent';
var outdentID = this.element.id + '_gridcontrol_outdent';
var indentElement = toolbarElement.querySelector('#' + indentID).parentElement;
var outdentElement = toolbarElement.querySelector('#' + outdentID).parentElement;
indentElement.classList.add('e-hidden');
outdentElement.classList.add('e-hidden');
};
TreeGrid.prototype.afterGridRender = function () {
if (!isNullOrUndefined(this.grid.clipboardModule)) {
this.grid.clipboardModule.destroy();
}
this.clipboardModule = this.grid.clipboardModule = new TreeClipboard(this, this.grid.serviceLocator);
};
TreeGrid.prototype.convertTreeData = function (data) {
if (isCountRequired(this)) {
data = getValue('result', data);
}
if (data instanceof Array && data.length > 0 && Object.prototype.hasOwnProperty.call(data[0], 'level')) {
this.flatData = data;
var _loop_1 = function (i, len) {
var rowData = this_1.flatData[parseInt(i.toString(), 10)];
setValue('uniqueIDCollection.' + rowData['uniqueID'], rowData, this_1);
if (rowData.level === 0 && !this_1.parentData.some(function (record) {
return record.uniqueID === rowData.uniqueID;
})) {
this_1.parentData.push(rowData);
}
};
var this_1 = this;
for (var i = 0, len = this.flatData.length; i < len; i++) {
_loop_1(i, len);
}
}
else {
if (isCountRequired(this)) {
var griddata = getValue('result', this.dataSource);
this.dataModule.convertToFlatData(griddata);
}
else {
this.dataModule.convertToFlatData(data);
}
}
};
// private getGridData(): Object {
// if (isRemoteData(this)) {
// return this.dataSource;
// } else if (this.isLocalData && this.dataSource instanceof DataManager) {
// this.dataSource.dataSource.json = this.flatData;
// return this.dataSource;
// }
// return this.flatData;
// }
TreeGrid.prototype.bindGridProperties = function () {
this.bindedDataSource();
this.grid.enableRtl = this.enableRtl;
this.grid.allowKeyboard = this.allowKeyboard;
this.grid.columns = this.getGridColumns(this.columns);
this.grid.allowExcelExport = this.allowExcelExport;
this.grid.allowPdfExport = this.allowPdfExport;
this.grid.query = this.query;
this.grid.columnQueryMode = this.columnQueryMode;
this.grid.allowPaging = this.allowPaging;
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
this.grid.pageSettings = getActualProperties(this.pageSettings);
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
this.grid.pagerTemplate = this.pagerTemplate;
this.grid.showColumnMenu = this.showColumnMenu;
this.grid.allowSorting = this.allowSorting;
this.grid.allowMultiSorting = this.allowMultiSorting;
this.grid.allowFiltering = this.allowFiltering;
this.grid.enableVirtualization = this.enableVirtualization;
this.grid.enableColumnVirtualization = this.enableColumnVirtualization;
this.grid.enableInfiniteScrolling = this.enableInfiniteScrolling;
this.grid.infiniteScrollSettings = this.infiniteScrollSettings;
this.grid.enableVirtualMaskRow = this.enableVirtualMaskRow;
this.grid.loadingIndicator = this.loadingIndicator;
this.grid.width = this.width;
this.grid.height = this.height;
this.grid.enableAltRow = this.enableAltRow;
this.grid.allowReordering = this.allowReordering;
this.grid.allowTextWrap = this.allowTextWrap;
this.grid.allowResizing = this.allowResizing;
this.grid.enableHover = this.enableHover;
this.grid.enableAutoFill = this.enableAutoFill;
this.grid.enableAdaptiveUI = this.enableAdaptiveUI;
this.grid.enableImmutableMode = this.enableImmutableMode;
this.grid.allowRowDragAndDrop = this.allowRowDragAndDrop;
this.grid.rowDropSettings = getActualProperties(this.rowDropSettings);
this.grid.rowHeight = this.rowHeight;
this.grid.gridLines = this.gridLines;
this.grid.allowSelection = this.allowSelection;
this.grid.toolbar = getActualProperties(this.getGridToolbar());
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
this.grid.toolbarTemplate = this.toolbarTemplate;
this.grid.showColumnChooser = this.showColumnChooser;
this.grid.filterSettings = getActualProperties(this.filterSettings);
this.grid.selectionSettings = getActualProperties(this.selectionSettings);
this.grid.sortSettings = getActualProperties(this.sortSettings);
this.grid.searchSettings = getActualProperties(this.searchSettings);
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
this.grid.aggregates = getActualProperties(this.aggregates);
this.grid.textWrapSettings = getActualProperties(this.textWrapSettings);
this.grid.printMode = getActualProperties(this.printMode);
this.grid.locale = getActualProperties(this.locale);
this.grid.selectedRowIndex = this.selectedRowIndex;
this.grid.contextMenuItems = getActualProperties(this.getContextMenu());
this.grid.columnMenuItems = getActualProperties(this.columnMenuItems);
this.grid.editSettings = this.getGridEditSettings();
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
this.grid.rowTemplate = getActualProperties(this.rowTemplate);
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
this.grid.detailTemplate = getActualProperties(this.detailTemplate);
this.grid.frozenRows = this.frozenRows;
this.grid.frozenColumns = this.frozenColumns;
this.grid.clipMode = getActualProperties(this.clipMode);
var templateInstance = 'templateDotnetInstance';
this.grid["" + templateInstance] = this["" + templateInstance];
var isJsComponent = 'isJsComponent';
this.grid["" + isJsComponent] = true;
var enableHtmlSanitizer = 'enableHtmlSanitizer';
this.grid["" + enableHtmlSanitizer] = this.enableHtmlSanitizer;
this.grid.enableStickyHeader = this.enableStickyHeader;
var isTreeGrid = 'isTreeGrid';
this.grid["" + isTreeGrid] = true;
};
TreeGrid.prototype.triggerEvents = function (args) {
this.trigger(getObject('name', args), args);
};
TreeGrid.prototype.IsExpandCollapseClicked = function