@syncfusion/ej2-grids
Version:
Feature-rich JavaScript datagrid (datatable) control with built-in support for editing, filtering, grouping, paging, sorting, and exporting to Excel.
1,060 lines • 71.3 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { classList, addClass, removeClass, isNullOrUndefined, Browser, updateCSSText, remove } from '@syncfusion/ej2-base';
import { Query, DataManager } from '@syncfusion/ej2-data';
import { EventHandler, closest } from '@syncfusion/ej2-base';
import * as events from '../base/constant';
import { Dialog, calculateRelativeBasedPosition } from '@syncfusion/ej2-popups';
import { createCboxWithWrap, toogleCheckbox, parentsUntil, removeAddCboxClasses, setChecked, resetDialogAppend, Global, appendChildren, getListHeight, infiniteRemoveElements, infiniteAppendElements, clearReactVueTemplates, getObject } from '../base/util';
import { ResponsiveDialogAction } from '../base/enum';
import { createCheckBox } from '@syncfusion/ej2-buttons';
import { SearchBox } from '../services/focus-strategy';
import * as literals from '../base/string-literals';
/**
* The `ColumnChooser` module is used to show or hide columns dynamically.
*/
var ColumnChooser = /** @class */ (function () {
/**
* Constructor for the Grid ColumnChooser module
*
* @param {IGrid} parent - specifies the IGrid
* @param {ServiceLocator} serviceLocator - specifies the serviceLocator
* @hidden
*/
function ColumnChooser(parent, serviceLocator) {
this.filterColumns = [];
this.showColumn = [];
this.hideColumn = [];
this.changedColumns = [];
this.unchangedColumns = [];
this.infiniteLoadedElement = [];
this.isDlgOpen = false;
this.isColumnChooserOpen = false;
this.initialOpenDlg = true;
this.stateChangeColumns = [];
this.changedStateColumns = [];
this.isInitialOpen = false;
this.isCustomizeOpenCC = false;
this.searchOperator = 'startswith';
this.sortDirection = 'None';
this.selectedColumnModels = [];
this.selectedColumns = [];
this.itemsCount = 50;
this.infiniteSkipCount = 0;
this.infiniteColumns = [];
this.infiniteInitialLoad = false;
this.prevInfiniteScrollDirection = '';
this.prevShowedCols = [];
this.hideDialogFunction = this.hideDialog.bind(this);
this.infiniteRenderMode = false;
this.parent = parent;
this.serviceLocator = serviceLocator;
this.infiniteRenderMode = this.parent.enableColumnVirtualization ? true : false;
this.addEventListener();
this.cBoxTrue = createCheckBox(this.parent.createElement, false, { checked: true, label: ' ' });
this.cBoxFalse = createCheckBox(this.parent.createElement, false, { checked: false, label: ' ' });
this.cBoxTrue.insertBefore(this.parent.createElement('input', {
className: 'e-chk-hidden e-cc e-cc-chbox', attrs: { type: 'checkbox' }
}), this.cBoxTrue.firstChild);
this.cBoxFalse.insertBefore(this.parent.createElement('input', {
className: 'e-chk-hidden e-cc e-cc-chbox', attrs: { 'type': 'checkbox' }
}), this.cBoxFalse.firstChild);
this.cBoxFalse.querySelector('.e-frame').classList.add('e-uncheck');
if (this.parent.enableRtl) {
addClass([this.cBoxTrue, this.cBoxFalse], ['e-rtl']);
}
if (this.parent.cssClass) {
if (this.parent.cssClass.indexOf(' ') !== -1) {
addClass([this.cBoxTrue, this.cBoxFalse], this.parent.cssClass.split(' '));
}
else {
addClass([this.cBoxTrue, this.cBoxFalse], [this.parent.cssClass]);
}
}
if (this.parent.enableAdaptiveUI) {
this.setFullScreenDialog();
}
}
ColumnChooser.prototype.destroy = function () {
var _this = this;
var gridElement = this.parent.element;
if (!gridElement.querySelector('.' + literals.gridContent) && (!gridElement.querySelector('.' + literals.gridHeader)) || !gridElement) {
return;
}
this.removeEventListener();
this.unWireEvents();
this.infiniteLoadedElement = null;
this.infiniteDiv = null;
if (!isNullOrUndefined(this.dlgObj) && this.dlgObj.element && !this.dlgObj.isDestroyed) {
if (this.parent.isReact && this.parent.columnChooserSettings.template) {
if (!Global.timer) {
Global.timer = (setTimeout(function () {
if (!isNullOrUndefined(_this.dlgObj) && _this.dlgObj.element && !_this.dlgObj.isDestroyed) {
_this.dlgObj.destroy();
}
}, 0));
}
else {
clearTimeout(Global.timer);
Global.timer = null;
}
}
else {
this.dlgObj.destroy();
}
var gridPopup = document.getElementById(this.parent.element.id + '_e-popup');
if (!isNullOrUndefined(gridPopup)) {
remove(gridPopup);
gridPopup = null;
}
}
};
ColumnChooser.prototype.setFullScreenDialog = function () {
if (this.serviceLocator) {
this.serviceLocator.registerAdaptiveService(this, this.parent.enableAdaptiveUI, ResponsiveDialogAction.isColumnChooser);
}
if (this.parent.enableAdaptiveUI) {
this.parent.on(events.renderResponsiveColumnChooserDiv, this.renderResponsiveColumnChooserDiv, this);
this.parent.on(events.renderResponsiveChangeAction, this.renderResponsiveChangeAction, this);
}
};
ColumnChooser.prototype.rtlUpdate = function () {
if (!isNullOrUndefined(this.innerDiv)) {
if (this.parent.enableRtl) {
addClass([].slice.call(this.innerDiv.getElementsByClassName('e-checkbox-wrapper')), ['e-rtl']);
}
else {
removeClass([].slice.call(this.innerDiv.getElementsByClassName('e-checkbox-wrapper')), ['e-rtl']);
}
}
};
/**
* @returns {void}
* @hidden
*/
ColumnChooser.prototype.addEventListener = function () {
if (this.parent.isDestroyed) {
return;
}
EventHandler.add(document, 'click', this.clickHandler, this);
this.parent.on(events.uiUpdate, this.enableAfterRenderEle, this);
this.parent.on(events.initialEnd, this.render, this);
this.parent.addEventListener(events.dataBound, this.hideDialogFunction);
this.parent.on(events.destroy, this.destroy, this);
this.parent.on(events.rtlUpdated, this.rtlUpdate, this);
this.parent.on(events.resetColumns, this.onResetColumns, this);
this.parent.on(events.setFullScreenDialog, this.setFullScreenDialog, this);
if (this.parent.enableAdaptiveUI) {
this.parent.on(events.renderResponsiveChangeAction, this.renderResponsiveChangeAction, this);
}
if (this.infiniteRenderMode || this.parent.enableAdaptiveUI) {
this.parent.on(events.renderResponsiveColumnChooserDiv, this.renderResponsiveColumnChooserDiv, this);
}
};
/**
* @returns {void}
* @hidden
*/
ColumnChooser.prototype.removeEventListener = function () {
if (this.parent.isDestroyed) {
return;
}
EventHandler.remove(document, 'click', this.clickHandler);
this.parent.off(events.initialEnd, this.render);
this.parent.off(events.destroy, this.destroy);
this.parent.off(events.uiUpdate, this.enableAfterRenderEle);
this.parent.off(events.rtlUpdated, this.rtlUpdate);
this.parent.off(events.resetColumns, this.onResetColumns);
this.parent.removeEventListener(events.dataBound, this.hideDialogFunction);
this.parent.off(events.setFullScreenDialog, this.setFullScreenDialog);
if (this.infiniteDiv) {
EventHandler.remove(this.infiniteDiv, 'scroll', this.infiniteScrollHandler);
EventHandler.remove(this.infiniteDiv, 'mouseup', this.infiniteScrollMouseKeyUpHandler);
EventHandler.remove(this.infiniteDiv, 'mousedown', this.infiniteScrollMouseKeyDownHandler);
}
if (this.parent.enableAdaptiveUI) {
this.parent.off(events.setFullScreenDialog, this.setFullScreenDialog);
this.parent.off(events.renderResponsiveChangeAction, this.renderResponsiveChangeAction);
}
if (this.infiniteRenderMode || this.parent.enableAdaptiveUI) {
this.parent.off(events.renderResponsiveColumnChooserDiv, this.renderResponsiveColumnChooserDiv);
}
};
ColumnChooser.prototype.render = function () {
this.l10n = this.serviceLocator.getService('localization');
if (!this.parent.enableAdaptiveUI) {
this.renderDlgContent();
}
this.getShowHideService = this.serviceLocator.getService('showHideService');
};
ColumnChooser.prototype.clickHandler = function (e) {
var targetElement = e.target;
if (!this.isCustomizeOpenCC) {
if (!isNullOrUndefined(closest(targetElement, '.e-cc-toolbar')) || !isNullOrUndefined(closest(targetElement, '.e-cc'))) {
if (targetElement.classList.contains('e-columnchooser-btn') || targetElement.classList.contains('e-cc-toolbar')) {
if ((this.initialOpenDlg && this.dlgObj.visible) || !this.isDlgOpen) {
this.isDlgOpen = true;
return;
}
}
else if (targetElement.classList.contains('e-cc-cancel')) {
targetElement.parentElement.querySelector('.e-ccsearch').value = '';
this.columnChooserSearch('', false);
this.removeCancelIcon();
this.refreshCheckboxButton();
}
}
else {
if (!isNullOrUndefined(this.dlgObj) && this.dlgObj.visible && !targetElement.classList.contains('e-toolbar-items')) {
this.dlgObj.hide();
this.clearActions();
this.refreshCheckboxState();
// this.unWireEvents();
this.isDlgOpen = false;
}
}
if (this.parent.detailTemplate || this.parent.childGrid) {
this.targetdlg = e.target;
}
}
if (this.isCustomizeOpenCC && e.target.classList.contains('e-cc-cancel')) {
this.refreshCheckboxState();
}
if (!this.parent.enableAdaptiveUI) {
this.rtlUpdate();
}
else {
if (this.parent.enableRtl) {
addClass([this.cBoxTrue, this.cBoxFalse], ['e-rtl']);
}
}
};
ColumnChooser.prototype.hideDialog = function () {
if (!isNullOrUndefined(this.dlgObj) && this.dlgObj.visible) {
if (this.parent.enableAdaptiveUI) {
this.responsiveDialogRenderer.hideResponsiveColumnChooser();
}
else {
this.dlgObj.hide();
// this.unWireEvents();
this.isDlgOpen = false;
}
}
};
/**
* To render columnChooser when showColumnChooser enabled.
*
* @param {number} x - specifies the position x
* @param {number} y - specifies the position y
* @param {Element} target - specifies the target
* @returns {void}
* @hidden
*/
ColumnChooser.prototype.renderColumnChooser = function (x, y, target) {
if (!this.dlgObj.visible && (this.parent.detailTemplate || this.parent.childGrid)) {
this.hideOpenedDialog();
}
if (!this.dlgObj.visible) {
var args = this.beforeOpenColumnChooserEvent();
if (args.cancel) {
return;
}
if (!this.infiniteRenderMode && this.selectedColumns.length && this.sortDirection === 'None' &&
!this.parent.columnChooserSettings.template) {
this.setOrderedColumns();
}
args.columns = null;
if (target) {
this.targetdlg = target;
}
if (this.infiniteRenderMode) {
this.dlgObj.show();
}
this.refreshCheckboxState();
this.dlgObj.dataBind();
this.dlgObj.element.style.maxHeight = '430px';
var elementVisible = this.dlgObj.element.style.display;
if (!this.parent.columnChooserSettings.enableSearching) {
var contentElement = this.dlgObj.element.querySelector('.e-dlg-content');
contentElement.style.margin = '0px';
}
this.dlgObj.element.style.display = 'block';
var isSticky = this.parent.getHeaderContent().classList.contains('e-sticky');
var toolbarItem = closest(target, '.e-toolbar-item');
var newpos = void 0;
if (document.getElementById(this.parent.element.id + '_e-popup') && document.getElementById(this.parent.element.id + '_e-popup').querySelector('.e-ccdlg')) {
this.parent.element.appendChild(this.dlgObj.element);
}
if (isSticky) {
newpos = toolbarItem.getBoundingClientRect();
this.dlgObj.element.classList.add('e-sticky');
}
else {
this.dlgObj.element.classList.remove('e-sticky');
newpos = calculateRelativeBasedPosition(toolbarItem, this.dlgObj.element);
}
this.dlgObj.element.style.display = elementVisible;
this.dlgObj.element.style.top = newpos.top + closest(target, '.e-cc-toolbar').getBoundingClientRect().height + 'px';
var dlgWidth = 250;
if (!isNullOrUndefined(closest(target, '.e-bigger'))) {
this.dlgObj.width = 258;
}
if (Browser.isDevice) {
this.dlgObj.position = { X: 'center', Y: 'center' };
this.dlgObj.refreshPosition();
this.dlgObj.open = this.mOpenDlg.bind(this);
}
else {
if (this.parent.enableRtl) {
this.dlgObj.element.style.left = target.offsetLeft + 'px';
}
else {
this.dlgObj.element.style.left = ((newpos.left - dlgWidth) + closest(target, '.e-cc-toolbar').clientWidth) + 2 + 'px';
}
}
this.removeCancelIcon();
if (!this.infiniteRenderMode) {
this.dlgObj.show();
}
if (this.parent.getContent().firstElementChild.offsetHeight < this.dlgObj.element.offsetHeight &&
!this.parent.element.classList.contains('e-drillthrough-grid')) {
resetDialogAppend(this.parent, this.dlgObj);
if (this.dlgObj.element.querySelector('.e-ccsearch')) {
this.dlgObj.element.querySelector('.e-ccsearch').select();
}
}
this.parent.notify(events.columnChooserOpened, { dialog: this.dlgObj });
}
else {
// this.unWireEvents();
this.hideDialog();
this.addcancelIcon();
this.clearActions();
this.refreshCheckboxState();
}
this.rtlUpdate();
};
/**
* Column chooser can be displayed on screen by given position(X and Y axis).
*
* @param {number} X - Defines the X axis.
* @param {number} Y - Defines the Y axis.
* @return {void}
*/
ColumnChooser.prototype.openColumnChooser = function (X, Y) {
this.isCustomizeOpenCC = true;
if (this.parent.enableAdaptiveUI) {
if (!this.isColumnChooserOpen) {
this.parent.showResponsiveCustomColumnChooser();
return;
}
this.isColumnChooserOpen = false;
this.renderDlgContent();
}
if (this.dlgObj.visible) {
this.hideDialog();
return;
}
var args = this.beforeOpenColumnChooserEvent();
if (args.cancel) {
return;
}
if (!this.infiniteRenderMode && this.selectedColumns.length && this.sortDirection === 'None' &&
!this.parent.columnChooserSettings.template) {
this.setOrderedColumns();
}
args.columns = null;
if (this.infiniteRenderMode) {
this.dlgObj.show();
}
if (!this.isInitialOpen) {
this.dlgObj.content = this.renderChooserList();
if (!this.parent.columnChooserSettings.template) {
this.updateIntermediateBtn();
}
}
else {
this.refreshCheckboxState();
}
this.dlgObj.dataBind();
if (this.infiniteRenderMode) {
this.refreshCheckboxState();
}
this.dlgObj.position = { X: 'center', Y: 'center' };
if (isNullOrUndefined(X)) {
if (this.parent.enableAdaptiveUI) {
this.dlgObj.position = { X: '', Y: '' };
}
this.dlgObj.refreshPosition();
}
else {
this.dlgObj.element.style.top = '';
this.dlgObj.element.style.left = '';
this.dlgObj.element.style.top = Y + 'px';
this.dlgObj.element.style.left = X + 'px';
}
if (!this.parent.columnChooserSettings.enableSearching) {
var contentElement = this.dlgObj.element.querySelector('.e-dlg-content');
contentElement.style.margin = '0px';
}
this.dlgObj.beforeOpen = this.customDialogOpen.bind(this);
if (!this.infiniteRenderMode) {
this.dlgObj.show();
}
if (this.parent.getContent().firstElementChild.offsetHeight < this.dlgObj.element.offsetHeight &&
!this.parent.element.classList.contains('e-drillthrough-grid')) {
resetDialogAppend(this.parent, this.dlgObj);
}
this.isInitialOpen = true;
this.dlgObj.beforeClose = this.customDialogClose.bind(this);
};
ColumnChooser.prototype.enableAfterRenderEle = function (e) {
if (e.module === this.getModuleName() && e.enable) {
this.render();
}
};
ColumnChooser.prototype.keyUpHandler = function (e) {
if (e.key === 'Escape') {
this.resetColumnState();
}
if (e && e.target && !isNullOrUndefined(closest(e.target, '.e-grid-popup'))) {
this.parent.trigger('keyPressed', e);
}
this.setFocus(parentsUntil(e.target, 'e-cclist'));
};
ColumnChooser.prototype.setFocus = function (elem) {
var prevElem = this.dlgDiv.querySelector('.e-colfocus');
if (prevElem) {
prevElem.classList.remove('e-colfocus');
}
if (elem) {
elem.classList.add('e-colfocus');
}
};
ColumnChooser.prototype.customDialogOpen = function () {
var searchElement = this.dlgObj.content.querySelector('input.e-ccsearch');
EventHandler.add(searchElement, 'keyup', this.columnChooserManualSearch, this);
};
ColumnChooser.prototype.customDialogClose = function () {
var searchElement = this.dlgObj.content.querySelector('input.e-ccsearch');
EventHandler.remove(searchElement, 'keyup', this.columnChooserManualSearch);
};
ColumnChooser.prototype.getColumns = function () {
var columns = (this.infiniteRenderMode ? this.infiniteColumns : this.parent.getColumns()).filter(function (column) { return (column.type !== 'checkbox'
&& column.showInColumnChooser === true) || (column.type === 'checkbox' && column.field !== undefined); });
return columns;
};
ColumnChooser.prototype.setOrderedColumns = function () {
this.selectedColumnModels = [];
for (var i = 0; i < this.selectedColumns.length; i++) {
var column = this.parent.getColumnByField(this.selectedColumns[parseInt(i.toString(), 10)]);
if (column.showInColumnChooser) {
this.selectedColumnModels.push(column);
}
}
};
ColumnChooser.prototype.renderDlgContent = function () {
var isAdaptive = this.parent.enableAdaptiveUI;
this.dlgDiv = this.parent.createElement('div', { className: 'e-ccdlg e-cc', id: this.parent.element.id + '_ccdlg' });
if (!isAdaptive) {
this.parent.element.appendChild(this.dlgDiv);
}
this.dlgObj = new Dialog({
header: this.parent.enableAdaptiveUI ? null : this.renderHeader(),
showCloseIcon: false,
closeOnEscape: false,
locale: this.parent.locale,
visible: false,
enableRtl: this.parent.enableRtl,
target: document.getElementById(this.parent.element.id),
content: this.renderChooserList(),
width: 250,
cssClass: this.parent.cssClass ? 'e-cc' + ' ' + this.parent.cssClass : 'e-cc',
animationSettings: { effect: 'None' },
footerTemplate: this.parent.enableAdaptiveUI ? null : this.renderFooter()
});
if (!isAdaptive && (this.infiniteRenderMode || !this.parent.columnChooserSettings.footerTemplate)) {
this.dlgObj.buttons = [{
click: this.confirmDlgBtnClick.bind(this),
buttonModel: {
content: this.l10n.getConstant('OKButton'), isPrimary: true,
cssClass: this.parent.cssClass ? 'e-cc e-cc_okbtn' + ' ' + this.parent.cssClass : 'e-cc e-cc_okbtn'
}
},
{
click: this.clearBtnClick.bind(this),
buttonModel: {
cssClass: this.parent.cssClass ?
'e-flat e-cc e-cc-cnbtn' + ' ' + this.parent.cssClass : 'e-flat e-cc e-cc-cnbtn',
content: this.l10n.getConstant('CancelButton')
}
}];
}
var isStringTemplate = 'isStringTemplate';
this.dlgObj["" + isStringTemplate] = true;
this.dlgObj.appendTo(this.dlgDiv);
if (isAdaptive) {
var responsiveCnt = document.querySelector('.e-responsive-dialog > .e-dlg-content > .e-mainfilterdiv');
if (responsiveCnt) {
responsiveCnt.appendChild(this.dlgDiv);
}
this.dlgObj.open = this.mOpenDlg.bind(this);
this.dlgObj.target = document.querySelector('.e-rescolumnchooser > .e-dlg-content > .e-mainfilterdiv');
}
this.wireEvents();
};
/**
* To render the header template for the column chooser.
* @returns {HTMLElement | string} This method return HTMLElement or string.
* @hidden
*/
ColumnChooser.prototype.renderHeader = function () {
var gridInstance = this.parent;
if (gridInstance.columnChooserSettings.headerTemplate && !this.infiniteRenderMode) {
var templateDiv = this.parent.createElement('div', { className: 'e-columnChooserHeaderTemplate' });
var templateID = this.parent.element.id + 'columnChooserHeaderTemplate';
if (this.parent.isReact) {
this.parent.getColumnChooserHeaderTemplate()(null, this.parent, 'columnChooserHeaderTemplate', templateID, null, null, templateDiv);
this.parent.renderTemplates();
}
else {
appendChildren(templateDiv, this.parent.getColumnChooserHeaderTemplate()(null, this.parent, 'columnChooserHeaderTemplate', templateID));
}
return templateDiv;
}
return this.l10n.getConstant('ChooseColumns');
};
/**
* To render the footer template for the column chooser.
* @returns {HTMLElement | string} This method return HTMLElement or string.
*/
ColumnChooser.prototype.renderFooter = function () {
var gridInstance = this.parent;
if (gridInstance.columnChooserSettings.footerTemplate && !this.infiniteRenderMode) {
var templateDiv = this.parent.createElement('div', { className: 'e-columnChooserFooterTemplate' });
var templateID = this.parent.element.id + 'columnChooserFooterTemplate';
if (this.parent.isReact) {
this.parent.getColumnChooserFooterTemplate()(null, this.parent, 'columnChooserFooterTemplate', templateID, null, null, templateDiv);
this.parent.renderTemplates();
}
else {
appendChildren(templateDiv, this.parent.getColumnChooserFooterTemplate()(null, this.parent, 'columnChooserFooterTemplate', templateID));
}
return templateDiv;
}
return null;
};
ColumnChooser.prototype.renderChooserList = function () {
this.mainDiv = this.parent.createElement('div', { className: 'e-main-div e-cc' });
var searchDiv = this.parent.createElement('div', { className: 'e-cc-searchdiv e-cc e-input-group' });
var ccsearchele = this.parent.createElement('input', {
className: 'e-ccsearch e-cc e-input',
attrs: { placeholder: this.l10n.getConstant('Search'), cssClass: this.parent.cssClass }
});
var ccsearchicon = this.parent.createElement('span', {
className: 'e-ccsearch-icon e-icons e-cc e-input-group-icon',
attrs: { title: this.l10n.getConstant('Search') }
});
var conDiv = this.parent.createElement('div', { className: 'e-cc-contentdiv' });
this.innerDiv = this.parent.createElement('div', { className: 'e-innerdiv e-cc' });
searchDiv.appendChild(ccsearchele);
searchDiv.appendChild(ccsearchicon);
this.searchBoxObj = new SearchBox(ccsearchele, this.serviceLocator);
var columns = this.getColumns();
var showColumns = [];
var hideColumns = [];
columns.forEach(function (column) {
if (column.visible) {
showColumns.push(column.headerText);
}
else {
hideColumns.push(column.headerText);
}
});
if (this.infiniteRenderMode && !this.isInitialOpen) {
columns = this.parent.columns;
for (var i = 0; i < columns.length; i++) {
if (columns[parseInt(i.toString(), 10)].showInColumnChooser) {
this.infiniteColumns.push(columns[parseInt(i.toString(), 10)]);
}
}
}
if (this.parent.columnChooserSettings.template && !this.infiniteRenderMode) {
var templateDiv = this.parent.createElement('div', { className: 'e-columnChooserTemplate' });
templateDiv.style.cssText = this.parent.enableAdaptiveUI ?
'height: 90%; min-height: 160px; overflow-y: auto;' : 'height: 196px; overflow-y: auto;';
var TemplateID = this.parent.element.id + 'columnChooserTemplate';
var argsData = { columns: columns, hideColumns: hideColumns, showColumns: showColumns };
if (this.parent.isReact) {
this.parent.getColumnChooserTemplate()(argsData, this.parent, 'columnChooserTemplate', TemplateID, null, null, templateDiv);
this.parent.renderTemplates();
}
else {
appendChildren(templateDiv, this.parent.getColumnChooserTemplate()(argsData, this.parent, 'columnChooserTemplate', TemplateID, null, null, null, this.parent.root));
}
if (this.parent.columnChooserSettings.renderCustomColumnChooser) {
if (typeof this.parent.columnChooserSettings.renderCustomColumnChooser === 'function') {
this.parent.columnChooserSettings.renderCustomColumnChooser(templateDiv, columns);
}
else if (typeof this.parent.columnChooserSettings.renderCustomColumnChooser === 'string') {
this.parent.columnChooserSettings.renderCustomColumnChooser =
getObject(this.parent.columnChooserSettings.renderCustomColumnChooser, window);
this.parent.columnChooserSettings.renderCustomColumnChooser(templateDiv, columns);
}
}
this.mainDiv.appendChild(searchDiv);
this.mainDiv.appendChild(templateDiv);
}
else {
var innerDivContent = this.refreshCheckboxList(columns);
this.innerDiv.appendChild(innerDivContent);
conDiv.appendChild(this.innerDiv);
if (this.parent.enableAdaptiveUI) {
var searchBoxDiv = this.parent.createElement('div', { className: 'e-cc-searchBox' });
searchBoxDiv.appendChild(searchDiv);
this.mainDiv.appendChild(searchBoxDiv);
}
else {
this.mainDiv.appendChild(searchDiv);
}
this.mainDiv.appendChild(conDiv);
}
if (!this.parent.columnChooserSettings.enableSearching) {
searchDiv.style.display = 'none';
}
return this.mainDiv;
};
ColumnChooser.prototype.confirmDlgBtnClick = function (args) {
var onActionBeginArgs = {
requestType: 'columnVisibilityUpdate',
columns: this.getColumns(),
cancel: false
};
this.parent.trigger(events.actionBegin, onActionBeginArgs);
if (onActionBeginArgs.cancel) {
return;
}
this.stateChangeColumns = [];
this.changedStateColumns = [];
var columns = this.infiniteRenderMode ? this.infiniteColumns : this.parent.getColumns();
this.changedColumns = (this.changedColumns.length > 0) ? this.changedColumns : this.unchangedColumns;
this.changedColumnState(this.changedColumns);
var uncheckedLength = this.infiniteRenderMode ? this.infiniteLoadedElement.filter(function (arr) { return arr.querySelector('.e-uncheck'); }).length : this.ulElement &&
this.ulElement.querySelector('.e-uncheck') && this.ulElement.querySelectorAll('.e-uncheck:not(.e-selectall)').length;
if (!isNullOrUndefined(args)) {
if (uncheckedLength < columns.length) {
this.changeColumnVisibility({ visibleColumns: this.showColumn, hiddenColumns: this.hideColumn }, 'uid');
if (this.parent.getCurrentViewRecords().length === 0) {
var emptyRowCell = this.parent.element.querySelector('.e-emptyrow').querySelector('td');
emptyRowCell.setAttribute('colSpan', this.parent.getVisibleColumns().length.toString());
}
}
if (this.parent.enableAdaptiveUI && this.parent.scrollModule) {
this.parent.scrollModule.refresh();
}
if (this.parent.editSettings.showAddNewRow) {
this.parent.notify(events.showAddNewRowFocus, {});
}
}
var onActionCompleteArgs = {
requestType: 'columnVisibilityUpdate',
columns: this.getColumns(),
cancel: false
};
this.parent.trigger(events.actionComplete, onActionCompleteArgs);
};
/**
* Toggles the visibility of specified columns in the grid.
* @param {Object} columns - An object specifying the columns to show or hide.
* @param {string[]} columns.visibleColumns - An array of column identifiers specifying the columns to show.
* @param {string[]} columns.hiddenColumns - An array of column identifiers specifying the columns to hide.
* @param {string} columnKey - Defines the column key as a UID, field name, or header text.
* @returns {void}
* The 'columns' object contains the properties 'visibleColumns' and 'hiddenColumns' as arrays of column identifiers.
*/
ColumnChooser.prototype.changeColumnVisibility = function (columns, columnKey) {
columnKey = columnKey ? columnKey : 'headerText';
if (columnKey !== 'uid') {
if (columns.visibleColumns || columns.hiddenColumns) {
this.stateChangeColumns = [];
this.changedStateColumns = [];
var columnChooserColumns = this.getColumns();
columns.hiddenColumns = columnChooserColumns.filter(function (column) {
return columns.hiddenColumns.indexOf(column[columnKey]) !== -1;
}).map(function (column) { return column.uid; });
columns.visibleColumns = columnChooserColumns.filter(function (column) {
return columns.visibleColumns.indexOf(column[columnKey]) !== -1;
}).map(function (column) { return column.uid; });
}
}
if (columns.hiddenColumns.length) {
this.columnStateChange(columns.hiddenColumns, false);
}
if (columns.visibleColumns.length) {
this.columnStateChange(columns.visibleColumns, true);
}
this.getShowHideService.setVisible(this.stateChangeColumns, this.changedStateColumns);
this.clearActions();
this.parent.notify(events.tooltipDestroy, { module: 'edit' });
};
ColumnChooser.prototype.onResetColumns = function (e) {
if (e.requestType === 'columnstate') {
this.resetColumnState();
return;
}
};
ColumnChooser.prototype.renderResponsiveColumnChooserDiv = function (args) {
if (args.action === 'open') {
this.isColumnChooserOpen = true;
this.openColumnChooser();
}
else if (args.action === 'clear') {
this.clearBtnClick();
}
else if (args.action === 'confirm') {
this.confirmDlgBtnClick(true);
}
};
ColumnChooser.prototype.resetColumnState = function () {
this.showColumn = [];
this.hideColumn = [];
this.changedColumns = [];
this.filterColumns = [];
this.searchValue = '';
this.selectedColumnModels = [];
this.selectedColumns = [];
this.sortDirection = '';
if (this.infiniteRenderMode) {
var focusListElement = this.dlgDiv.querySelector('.e-cclist.e-cc-selectall.e-colfocus');
if (focusListElement) {
focusListElement.classList.remove('e-colfocus');
}
}
this.hideDialog();
};
ColumnChooser.prototype.changedColumnState = function (changedColumns) {
for (var index = 0; index < changedColumns.length; index++) {
var colUid = changedColumns[parseInt(index.toString(), 10)];
var currentColumn = this.parent.getColumnByUid(colUid, this.infiniteRenderMode);
this.changedStateColumns.push(currentColumn);
}
};
ColumnChooser.prototype.columnStateChange = function (stateColumns, state) {
for (var index = 0; index < stateColumns.length; index++) {
var colUid = stateColumns[parseInt(index.toString(), 10)];
var currentColumn = this.parent.getColumnByUid(colUid, this.infiniteRenderMode);
if (currentColumn) {
if (currentColumn.type !== 'checkbox') {
currentColumn.visible = state;
}
this.stateChangeColumns.push(currentColumn);
}
}
};
ColumnChooser.prototype.clearActions = function () {
this.resetColumnState();
this.addcancelIcon();
};
ColumnChooser.prototype.clearBtnClick = function () {
var onActionBeginArgs = {
requestType: 'columnChooserClose',
cancel: false
};
this.parent.trigger(events.actionBegin, onActionBeginArgs);
if (onActionBeginArgs.cancel) {
return;
}
this.clearActions();
this.parent.notify(events.columnChooserCancelBtnClick, { dialog: this.dlgObj });
var onActionCompleteArgs = {
requestType: 'columnChooserClose',
cancel: false
};
this.parent.trigger(events.actionComplete, onActionCompleteArgs);
};
ColumnChooser.prototype.checkstatecolumn = function (isChecked, coluid, selectAll) {
if (selectAll === void 0) { selectAll = false; }
var currentColumn = this.parent.getColumnByUid(coluid, this.infiniteRenderMode);
if (isChecked) {
if (this.hideColumn.indexOf(coluid) !== -1) {
this.hideColumn.splice(this.hideColumn.indexOf(coluid), 1);
}
if (this.showColumn.indexOf(coluid) === -1 && !(currentColumn && currentColumn.visible)) {
this.showColumn.push(coluid);
}
}
else {
if (this.showColumn.indexOf(coluid) !== -1) {
this.showColumn.splice(this.showColumn.indexOf(coluid), 1);
}
if (this.hideColumn.indexOf(coluid) === -1 && (currentColumn && currentColumn.visible)) {
this.hideColumn.push(coluid);
}
}
if (selectAll) {
if (!isChecked) {
this.changedColumns.push(coluid);
}
else {
this.unchangedColumns.push(coluid);
}
}
else if (this.changedColumns.indexOf(coluid) !== -1) {
this.changedColumns.splice(this.changedColumns.indexOf(coluid), 1);
}
else {
this.changedColumns.push(coluid);
}
};
ColumnChooser.prototype.columnChooserSearch = function (searchVal, check) {
if (check) {
var onActionBeginArgs = {
requestType: 'columnChooserSearch',
columns: this.getColumns(),
cancel: false
};
this.parent.trigger(events.actionBegin, onActionBeginArgs);
if (onActionBeginArgs.cancel) {
return;
}
}
var clearSearch = false;
var okButton;
var buttonEle = this.dlgDiv.querySelector('.e-footer-content');
var selectedCheckbox = this.ulElement && this.ulElement.querySelector('.e-check') &&
this.ulElement.querySelectorAll('.e-check:not(.e-selectall)').length;
if (this.infiniteRenderMode) {
selectedCheckbox = this.infiniteLoadedElement.filter(function (arr) { return arr.querySelector('.e-check'); }).length;
}
this.isInitialOpen = true;
if (buttonEle && buttonEle.querySelector('.e-btn')) {
okButton = buttonEle.querySelector('.e-btn').ej2_instances[0];
}
if (searchVal === '') {
this.removeCancelIcon();
this.filterColumns = this.selectedColumnModels.length ? this.selectedColumnModels : this.getColumns();
clearSearch = true;
}
else {
var filterColumns = this.selectedColumnModels.length ? this.selectedColumnModels : this.getColumns();
this.filterColumns = new DataManager(filterColumns).executeLocal(new Query()
.where('headerText', this.searchOperator, searchVal, true, this.parent.columnChooserSettings.ignoreAccent));
}
if (this.selectedColumnModels.length === 0 && this.sortDirection !== 'None' && !this.parent.columnChooserSettings.template) {
this.filterColumns = this.sortColumnChooser(this.filterColumns, this.sortDirection);
}
if (this.infiniteRenderMode) {
this.updateIfiniteSelectAll();
}
if (this.parent.columnChooserSettings.template && !this.infiniteRenderMode) {
var TemplateElement = void 0;
var isReactCompiler = this.parent.isReact;
if (isReactCompiler) {
clearReactVueTemplates(this.parent, ['columnChooserTemplate']);
TemplateElement = this.mainDiv.querySelector('.e-columnChooserTemplate');
}
else {
this.mainDiv.querySelector('.e-columnChooserTemplate').remove();
TemplateElement = this.parent.createElement('div', { className: 'e-columnChooserTemplate' });
TemplateElement.style.cssText = this.parent.enableAdaptiveUI ?
'height: 90%; min-height: 160px; overflow-y: auto;' : 'height: 196px; overflow-y: auto;';
}
var TemplateID = this.parent.element.id + 'columnChooserTemplate';
var chooserColumns = this.filterColumns;
var searchedValue = searchVal;
var showColumns_1 = [];
var hideColumns_1 = [];
chooserColumns.forEach(function (column) {
if (column.visible) {
showColumns_1.push(column.headerText);
}
else {
hideColumns_1.push(column.headerText);
}
});
var argsData = {
columns: chooserColumns,
hideColumns: hideColumns_1,
showColumns: showColumns_1,
searchValue: searchedValue
};
if (isReactCompiler) {
this.parent.getColumnChooserTemplate()(argsData, this.parent, 'columnChooserTemplate', TemplateID, null, null, TemplateElement);
this.parent.renderTemplates();
}
else {
appendChildren(TemplateElement, this.parent.getColumnChooserTemplate()(argsData, this.parent, 'columnChooserTemplate', TemplateID, null, null, null, this.parent.root));
}
if (this.parent.columnChooserSettings.renderCustomColumnChooser) {
if (typeof this.parent.columnChooserSettings.renderCustomColumnChooser === 'function') {
this.parent.columnChooserSettings.renderCustomColumnChooser(TemplateElement, this.filterColumns);
}
else if (typeof this.parent.columnChooserSettings.renderCustomColumnChooser === 'string') {
this.parent.columnChooserSettings.renderCustomColumnChooser =
getObject(this.parent.columnChooserSettings.renderCustomColumnChooser, window);
this.parent.columnChooserSettings.renderCustomColumnChooser(TemplateElement, this.filterColumns);
}
}
this.mainDiv.appendChild(TemplateElement);
}
else if (this.filterColumns.length) {
this.innerDiv.innerHTML = ' ';
this.innerDiv.classList.remove('e-ccnmdiv');
this.infiniteInitialLoad = true;
this.infiniteLoadedElement = [];
this.innerDiv.appendChild(this.refreshCheckboxList(this.filterColumns));
if (this.infiniteRenderMode) {
this.mainDiv.querySelector('.e-ccheck .e-selectall').parentElement.classList.remove('e-checkbox-disabled');
this.updateIntermediateBtn();
}
if (!clearSearch) {
this.addcancelIcon();
this.refreshCheckboxButton();
}
else {
if (okButton && selectedCheckbox) {
okButton.disabled = false;
}
if (selectedCheckbox && this.parent.enableAdaptiveUI && this.responsiveDialogRenderer) {
this.parent.notify(events.refreshCustomFilterOkBtn, { disabled: false });
}
}
}
else {
var nMatchele = this.parent.createElement('span', { className: 'e-cc e-nmatch' });
nMatchele.innerHTML = this.l10n.getConstant('Matchs');
this.innerDiv.innerHTML = ' ';
if (this.infiniteRenderMode) {
removeClass([this.mainDiv.querySelector('.e-frame.e-selectall')], ['e-check', 'e-stop', 'e-uncheck']);
this.mainDiv.querySelector('.e-ccheck .e-selectall').parentElement.classList.add('e-checkbox-disabled');
}
this.innerDiv.appendChild(nMatchele);
this.innerDiv.classList.add('e-ccnmdiv');
if (okButton) {
okButton.disabled = true;
}
if (this.parent.enableAdaptiveUI && this.responsiveDialogRenderer) {
this.parent.notify(events.refreshCustomFilterOkBtn, { disabled: true });
}
}
this.flag = true;
this.stopTimer();
if (check) {
var onActionCompleteArgs = {
requestType: 'columnChooserSearch',
columns: this.getColumns(),
cancel: false
};
this.parent.trigger(events.actionComplete, onActionCompleteArgs);
}
};
ColumnChooser.prototype.sortColumnChooser = function (columns, order) {
if (order === 'Ascending') {
return columns.slice().sort(function (reference, comparer) {
return reference.field.toLowerCase() < comparer.field.toLowerCase() ? -1 : 1;
});
}
else if (order === 'Descending') {
return columns.slice().sort(function (reference, comparer) {
return reference.field.toLowerCase() > comparer.field.toLowerCase() ? -1 : 1;
});
}
else {
return columns;
}
};
ColumnChooser.prototype.updateIfiniteSelectAll = function () {
this.changedColumns = [];
this.hideColumn = [];
this.showColumn = [];
var unCheckItem = this.infiniteLoadedElement.filter(function (arr) { return arr.querySelector('.e-uncheck'); });
for (var i = 0; i < unCheckItem.length; i++) {
this.checkState(unCheckItem[parseInt(i.toString(), 10)].querySelector('.e-frame'), true);
}
};
ColumnChooser.prototype.wireEvents = function () {
EventHandler.add(this.dlgObj.element, 'click', this.checkBoxClickHandler, this);
EventHandler.add(this.searchBoxObj.searchBox, 'keyup', this.columnChooserManualSearch, this);
EventHandler.add(this.dlgObj.element, 'keyup', this.keyUpHandler, this);
this.searchBoxObj.wireEvent();
};
ColumnChooser.prototype.unWireEvents = function () {
if (this.parent.isDestroyed) {
return;
}
if (this.dlgObj && this.dlgObj.element) {
EventHandler.remove(this.dlgObj.element, 'click', this.checkBoxClickHandler);
EventHandler.remove(this.dlgObj.element, 'keyup', this.keyUpHandler);
}
if (this.searchBoxObj) {
EventHandler.remove(this.searchBoxObj.searchBox, 'keyup', this.columnChooserManualSearch);
this.searchBoxObj.unWireEvent();
}
};
ColumnChooser.prototype.checkBoxClickHandler = function (e) {
if (this.parent.columnChooserSettings.template && !this.infiniteRenderMode) {
return;
}
var checkstate;
var selectAllElement = parentsUntil(e.target, 'e-checkbox-wrapper');
var columns = this.infiniteRenderMode ? this.infiniteColumns : this.parent.getColumns();
if (selectAllElement) {
var selectAll = selectAllElement.querySelector('.e-selectall');
if (selectAll) {
this.updateSelectAll(!selectAllElement.querySelector('.e-check'));
}
else {
toogleCheckbox(selectAllElement.parentElement);
}
selectAllElement.querySelector('.e-chk-hidden').focus();
if (selectAllElement.querySelector('.e-check')) {
checkstate = true;
}
else if (selectAllElement.querySelector('.e-uncheck')) {
checkstate = false;
}
if (!this.infiniteRenderMode) {
this.updateIntermediateBtn();
}
var columnUid = parentsUntil(selectAllElement, 'e-ccheck').getAttribute('data-uid');
var column = (this.searchValue && this.searchValue.length) || this.selectedColumnModels.length ?
this.filterColumns : columns;
if (columnUid === this.parent.element.id + '-selectAll') {
this.changedColumns = [];
this.unchangedColumns = [];
for (var i = 0; i < column.length; i++) {
if (column[parseInt(i.toString(), 10)].showInColumnChooser) {
this.checkstatecolumn(checkstate, column[parseInt(i.toString(), 10)].uid, true);
}
}
}
else {
this.checkstatecolumn(checkstate, columnUid);
}
var isSelectAll = this.infiniteRenderMode && selectAllElement.querySelector('.e-selectall') &&
selectAllElement.querySelector('.e-uncheck') ? true : false;
if (!this.parent.columnChooserSettings.footerTemplate) {
this.refreshCheckboxButton(isSelectAll);
}
this.setFocus(parentsUntil(e.target, 'e-cclist'));
if (this.infiniteRenderMode) {
this.updateIntermediateBtn();
}
}
};
ColumnChooser.prototype.updateIntermediateBtn = function () {
var count = this.infiniteRenderMode ? this.infiniteLoadedElement.length : this.ulElement.children.length - 1;
var className = [];
var hideColumnsCount = 0;
var showColumnsCount = 0;
((this.searchValue && this.searchValue.length) || this.sortDirection !== 'None' ?
this.fil