@syncfusion/ej2-grids
Version:
Feature-rich JavaScript datagrid (datatable) control with built-in support for editing, filtering, grouping, paging, sorting, and exporting to Excel.
942 lines • 56.4 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 __());
};
})();
import { EventHandler, remove, Browser } from '@syncfusion/ej2-base';
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { Query, DataManager, Predicate } from '@syncfusion/ej2-data';
import { Dialog } from '@syncfusion/ej2-popups';
import { DropDownList, AutoComplete } from '@syncfusion/ej2-dropdowns';
import { NumericTextBox } from '@syncfusion/ej2-inputs';
import { RadioButton, CheckBox } from '@syncfusion/ej2-buttons';
import { distinctStringValues, isComplexField, getComplexFieldID, getCustomDateFormat, applyBiggerTheme, performComplexDataOperation, registerEventHandlers, removeEventHandlers, clearReactVueTemplates } from '../base/util';
import { DatePicker, DateTimePicker } from '@syncfusion/ej2-calendars';
import { parentsUntil, appendChildren, extend, eventPromise, resetDialogAppend } from '../base/util';
import * as events from '../base/constant';
import { ContextMenu } from '@syncfusion/ej2-navigations';
import { CheckBoxFilterBase } from '../common/checkbox-filter-base';
import * as literals from '../base/string-literals';
/**
* @hidden
* `ExcelFilter` module is used to handle filtering action.
*/
var ExcelFilterBase = /** @class */ (function (_super) {
__extends(ExcelFilterBase, _super);
/**
* Constructor for excel filtering module
*
* @param {IXLFilter} parent - parent details
* @param {Object} customFltrOperators - operator details
* @hidden
*/
function ExcelFilterBase(parent, customFltrOperators) {
var _this = _super.call(this, parent) || this;
_this.childRefs = [];
_this.eventHandlers = {};
_this.isDevice = false;
_this.focusedMenuItem = null;
_this.customFilterOperators = customFltrOperators;
_this.isExcel = true;
return _this;
}
ExcelFilterBase.prototype.getCMenuDS = function (type, operator) {
var options = {
number: ['Equal', 'NotEqual', '', 'LessThan', 'LessThanOrEqual', 'GreaterThan',
'GreaterThanOrEqual', 'Between', '', 'CustomFilter'],
string: ['Equal', 'NotEqual', '', 'StartsWith', 'EndsWith', '', 'Contains', 'NotContains', '', 'CustomFilter']
};
options.date = options.number;
options.datetime = options.number;
options.dateonly = options.number;
var model = [];
for (var i = 0; i < options["" + type].length; i++) {
if (options["" + type][parseInt(i.toString(), 10)].length) {
if (operator) {
model.push({
text: this.getLocalizedLabel(options["" + type][parseInt(i.toString(), 10)]) + '...',
iconCss: 'e-icons e-icon-check ' + (operator === options["" + type][parseInt(i.toString(), 10)].toLowerCase() ? '' : 'e-emptyicon')
});
}
else {
model.push({
text: this.getLocalizedLabel(options["" + type][parseInt(i.toString(), 10)]) + '...'
});
}
}
else {
model.push({ separator: true });
}
}
return model;
};
/**
* To destroy the filter bar.
*
* @returns {void}
* @hidden
*/
ExcelFilterBase.prototype.destroy = function () {
if (this.dlg) {
this.unwireExEvents();
_super.prototype.closeDialog.call(this);
}
if (!this.isDevice && this.menuObj) {
var li = this.menuObj.element.querySelector('li.e-focused');
if (!(li && parentsUntil(li, 'e-excel-menu'))) {
this.destroyCMenu();
}
}
if (this.dlgObj && !this.dlgObj.isDestroyed) {
this.removeDialog();
}
};
ExcelFilterBase.prototype.createMenu = function (type, isFiltered, isCheckIcon, eleOptions) {
var options = { string: 'TextFilter', date: 'DateFilter', dateonly: 'DateFilter', datetime: 'DateTimeFilter', number: 'NumberFilter' };
this.menu = this.parent.createElement('div', { className: 'e-contextmenu-wrapper' });
if (this.parent.enableRtl) {
this.menu.classList.add('e-rtl');
}
else {
this.menu.classList.remove('e-rtl');
}
if (this.parent.cssClass) {
this.menu.classList.add(this.parent.cssClass);
}
var ul = this.parent.createElement('ul');
var icon = isFiltered ? 'e-excl-filter-icon e-filtered' : 'e-excl-filter-icon';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
if (this.parent.allowSorting && this.parent.getModuleName() === 'grid'
&& !this.options.isResponsiveFilter) {
var hdrele = this.parent.getColumnHeaderByUid(eleOptions.uid).getAttribute('aria-sort');
var colIsSort = this.parent.getColumnByField(eleOptions.field).allowSorting;
var isAsc = (!colIsSort || hdrele === 'ascending') ? 'e-disabled e-excel-ascending' : 'e-excel-ascending';
var isDesc = (!colIsSort || hdrele === 'descending') ? 'e-disabled e-excel-descending' : 'e-excel-descending';
var ascName = (type === 'string') ? this.getLocalizedLabel('SortAtoZ') : (type === 'datetime' || type === 'date') ?
this.getLocalizedLabel('SortByOldest') : this.getLocalizedLabel('SortSmallestToLargest');
var descName = (type === 'string') ? this.getLocalizedLabel('SortZtoA') : (type === 'datetime' || type === 'date') ?
this.getLocalizedLabel('SortByNewest') : this.getLocalizedLabel('SortLargestToSmallest');
ul.appendChild(this.createMenuElem(ascName, isAsc, 'e-sortascending'));
ul.appendChild(this.createMenuElem(descName, isDesc, 'e-sortdescending'));
var separator = this.parent.createElement('li', { className: 'e-separator e-menu-item e-excel-separator' });
ul.appendChild(separator);
}
if (!this.options.isResponsiveFilter) {
ul.appendChild(this.createMenuElem(this.getLocalizedLabel('ClearFilter'), isFiltered ? '' : 'e-disabled', icon));
}
if (type !== 'boolean') {
ul.appendChild(this.createMenuElem(this.getLocalizedLabel(options["" + type]), 'e-submenu', isCheckIcon && this.ensureTextFilter() ? 'e-icon-check' : icon + ' e-emptyicon', true));
}
this.menu.appendChild(ul);
this.parent.notify(events.beforeFltrcMenuOpen, { element: this.menu });
this.parent.notify(events.refreshCustomFilterClearBtn, { isFiltered: isFiltered });
};
ExcelFilterBase.prototype.createMenuElem = function (val, className, iconName, isSubMenu) {
var li = this.parent.createElement('li', { className: className + ' e-menu-item' });
li.innerHTML = val;
li.tabIndex = li.classList.contains('e-disabled') ? -1 : 0;
li.insertBefore(this.parent.createElement('span', { className: 'e-menu-icon e-icons ' + iconName, attrs: { 'aria-hidden': 'true' } }), li.firstChild);
if (isSubMenu) {
li.appendChild(this.parent.createElement('span', { className: 'e-icons e-caret' }));
}
return li;
};
ExcelFilterBase.prototype.wireExEvents = function () {
if (!Browser.isDevice) {
EventHandler.add(this.dlg, 'mouseover', this.hoverHandler, this);
}
EventHandler.add(this.dlg, 'click', this.clickExHandler, this);
EventHandler.add(this.dlg, 'keyup', this.keyUp, this);
EventHandler.add(this.dlg, 'keydown', this.keyDown, this);
};
ExcelFilterBase.prototype.unwireExEvents = function () {
if (!Browser.isDevice) {
EventHandler.remove(this.dlg, 'mouseover', this.hoverHandler);
}
EventHandler.remove(this.dlg, 'click', this.clickExHandler);
EventHandler.remove(this.dlg, 'keyup', this.keyUp);
EventHandler.remove(this.dlg, 'keydown', this.keyDown);
};
ExcelFilterBase.prototype.clickExHandler = function (e) {
var options = { string: 'TextFilter', date: 'DateFilter', datetime: 'DateTimeFilter', number: 'NumberFilter' };
var menuItem = parentsUntil(e.target, 'e-menu-item');
if (menuItem) {
if (this.getLocalizedLabel('ClearFilter') === menuItem.innerText.trim()) {
this.clearFilter();
this.closeDialog();
}
else if ((this.options.isResponsiveFilter || Browser.isDevice)
&& this.getLocalizedLabel(options[this.options.type]) === menuItem.innerText.trim()) {
this.hoverHandler(e);
}
}
};
ExcelFilterBase.prototype.focusNextOrPrevElement = function (e, focusableElements, focusClassName) {
var nextIndex = (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) ? focusableElements.indexOf(document.activeElement) - 1
: focusableElements.indexOf(document.activeElement) + 1;
var nextElement = focusableElements[((nextIndex + focusableElements.length) % focusableElements.length)];
// Set focus on the next / previous element
if (nextElement) {
nextElement.focus();
var focusClass = nextElement.classList.contains('e-chk-hidden') ? 'e-chkfocus' : focusClassName;
var target = nextElement.classList.contains('e-chk-hidden') ? parentsUntil(nextElement, 'e-ftrchk') : parentsUntil(nextElement, 'e-menu-item');
this.excelSetFocus(target, focusClass);
}
};
ExcelFilterBase.prototype.keyUp = function (e) {
if ((e.key === 'Tab' && e.shiftKey) || e.key === 'Tab') {
var focusClass = e.target.classList.contains('e-chk-hidden') ? 'e-chkfocus' : 'e-menufocus';
var target = e.target.classList.contains('e-menu-item')
? parentsUntil(e.target, 'e-menu-item') : parentsUntil(e.target, 'e-ftrchk');
this.excelSetFocus(target, focusClass);
}
else if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && !e.altKey) {
e.preventDefault();
var focusableElements = Array.from(this.dlg.querySelectorAll('input, button, [tabindex]:not([tabindex="-1"]), .e-menu-item:not(.e-disabled):not(.e-separator)'));
this.focusNextOrPrevElement(e, focusableElements, 'e-menufocus');
}
else if ((e.key === 'Enter' || e.code === 'ArrowRight') && e.target.classList.contains('e-menu-item')) {
e.preventDefault();
e.target.click();
if (e.target.classList.contains('e-submenu')) {
this.hoverHandler(e);
this.menuObj.element.querySelector('.e-menu-item').focus();
this.excelSetFocus(parentsUntil(this.menuObj.element.querySelector('.e-menu-item'), 'e-menu-item'), 'e-focused');
this.focusedMenuItem = this.menuObj.element.querySelector('.e-menu-item');
}
}
};
ExcelFilterBase.prototype.keyDown = function (e) {
//prevented up and down arrow key press default functionality to prevent the browser scroll when performing keyboard navigation in excel filter element.
if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
e.preventDefault();
}
};
ExcelFilterBase.prototype.excelSetFocus = function (elem, className) {
var prevElem = this.cmenu.querySelector('.' + className);
var menuFocusElem = this.menu.querySelector('.' + className);
if (prevElem) {
prevElem.classList.remove(className);
}
if (menuFocusElem && menuFocusElem.classList.contains('e-menufocus')) {
menuFocusElem.classList.remove(className);
}
if (elem) {
elem.classList.add(className);
}
};
ExcelFilterBase.prototype.destroyCMenu = function () {
this.isCMenuOpen = false;
if (this.menuObj && !this.menuObj.isDestroyed) {
this.menuObj.destroy();
EventHandler.remove(this.menuObj.element, 'keydown', this.contextKeyDownHandler);
remove(this.cmenu);
this.parent.notify(events.renderResponsiveCmenu, { target: null, header: '', isOpen: false, col: this.options.column });
}
};
ExcelFilterBase.prototype.hoverHandler = function (e) {
if (this.options.isResponsiveFilter && e.type === 'mouseover') {
return;
}
var target = e.target.querySelector('.e-contextmenu');
var li = parentsUntil(e.target, 'e-menu-item');
var focused = this.menu.querySelector('.e-focused');
var isSubMenu;
if (focused) {
focused.classList.remove('e-focused');
}
if (li) {
li.classList.add('e-focused');
isSubMenu = li.classList.contains('e-submenu');
}
if (target) {
return;
}
if (!isSubMenu) {
var submenu = this.menu.querySelector('.e-submenu');
if (!isNullOrUndefined(submenu)) {
submenu.classList.remove('e-selected');
}
this.destroyCMenu();
}
var selectedMenu = this.ensureTextFilter();
if (!this.isCMenuOpen && isSubMenu) {
li.classList.add('e-selected');
this.isCMenuOpen = true;
var menuOptions = {
items: this.getCMenuDS(this.options.type, selectedMenu ? selectedMenu.replace(/\s/g, '') : undefined),
select: this.selectHandler.bind(this),
onClose: this.destroyCMenu.bind(this),
enableRtl: this.parent.enableRtl,
animationSettings: { effect: Browser.isDevice ? 'ZoomIn' : 'None' },
beforeClose: this.preventClose.bind(this),
cssClass: this.options.isResponsiveFilter && this.parent.cssClass ?
'e-res-contextmenu-wrapper' + ' ' + this.parent.cssClass : this.options.isResponsiveFilter ?
'e-res-contextmenu-wrapper' : this.parent.cssClass ? this.parent.cssClass : ''
};
this.parent.element.appendChild(this.cmenu);
this.menuObj = new ContextMenu(menuOptions, this.cmenu);
EventHandler.add(this.menuObj.element, 'keydown', this.contextKeyDownHandler, this);
var client = this.menu.querySelector('.e-submenu').getBoundingClientRect();
var pos = { top: 0, left: 0 };
if (this.options.isResponsiveFilter) {
var options = { string: 'TextFilter', date: 'DateFilter', datetime: 'DateTimeFilter', number: 'NumberFilter' };
var content = document.querySelector('.e-responsive-dialog > .e-dlg-header-content');
var height = content.offsetHeight + 4;
this.menuObj.element.style.height = 'calc(100% - ' + height + 'px)';
this.menuObj['open'](height, 0, document.body);
var header = this.getLocalizedLabel(options[this.options.type]);
this.parent.notify(events.renderResponsiveCmenu, {
target: this.menuObj.element.parentElement, header: header, isOpen: true
});
}
else {
if (Browser.isDevice) {
this.isDevice = true;
var contextRect = this.getContextBounds();
pos.top = (window.innerHeight - contextRect.height) / 2;
pos.left = (window.innerWidth - contextRect.width) / 2;
this.closeDialog();
this.isDevice = false;
}
else {
pos.top = Browser.isIE ? window.pageYOffset + client.top : window.scrollY + client.top;
pos.left = this.getCMenuYPosition(this.dlg);
}
this.menuObj['open'](pos.top, pos.left, e.target);
}
applyBiggerTheme(this.parent.element, this.menuObj.element.parentElement);
}
};
ExcelFilterBase.prototype.contextKeyDownHandler = function (e) {
if ((e.key === 'Tab' && e.shiftKey) || e.key === 'Tab') {
e.preventDefault();
var focusableElements = Array.from(this.menuObj.element.querySelectorAll('[tabindex]:not([tabindex="-1"]), .e-menu-item:not(.e-disabled):not(.e-separator)'));
// Focus the next / previous context menu item
this.focusNextOrPrevElement(e, focusableElements, 'e-focused');
}
else if (e.key === 'ArrowLeft' || e.key === 'Escape') {
e.preventDefault();
this.menuObj.close();
this.focusedMenuItem = null;
document.querySelector('.e-submenu.e-menu-item').classList.remove('e-selected');
document.querySelector('.e-submenu.e-menu-item').focus();
}
};
ExcelFilterBase.prototype.ensureTextFilter = function () {
var selectedMenu;
var predicates = this.existingPredicate[this.options.field];
if (predicates && predicates.length === 2) {
if (predicates[0].operator === 'greaterthanorequal' && predicates[1].operator === 'lessthanorequal') {
selectedMenu = 'between';
}
else {
selectedMenu = 'customfilter';
}
}
else {
if (predicates && predicates.length === 1) {
this.optrData = this.customFilterOperators[this.options.type + 'Operator'];
selectedMenu = predicates[0].operator;
}
}
return selectedMenu;
};
ExcelFilterBase.prototype.preventClose = function (args) {
if (this.options && this.options.isResponsiveFilter && args.event) {
var target = args.event.target;
var isFilterBack = target.classList && (target.classList.contains('e-resfilterback')
|| target.classList.contains('e-res-back-btn') || target.classList.contains('e-menu-item'));
args.cancel = !isFilterBack;
}
else {
if (args.event instanceof MouseEvent && args.event.target && args.event.target.classList &&
args.event.target.classList.contains('e-submenu')) {
args.cancel = true;
}
}
};
ExcelFilterBase.prototype.getContextBounds = function () {
this.menuObj.element.style.display = 'block';
return this.menuObj.element.getBoundingClientRect();
};
ExcelFilterBase.prototype.getCMenuYPosition = function (target) {
var contextWidth = this.getContextBounds().width;
var targetPosition = target.getBoundingClientRect();
var leftPos = targetPosition.right + contextWidth - this.parent.element.clientWidth;
var targetBorder = target.offsetWidth - target.clientWidth;
targetBorder = targetBorder ? targetBorder + 1 : 0;
return (leftPos < 1) ? (targetPosition.right + 1 - targetBorder) : (targetPosition.left - contextWidth - 1 + targetBorder);
};
ExcelFilterBase.prototype.openDialog = function (options) {
var _this = this;
this.updateModel(options);
this.getAndSetChkElem(options);
this.showDialog(options);
if (options.cancel) {
return;
}
this.dialogObj.dataBind();
var filterLength = (this.existingPredicate[options.field] && this.existingPredicate[options.field].length) ||
this.options.filteredColumns.filter(function (col) {
return _this.options.field === col.field;
}).length;
this.createMenu(options.type, filterLength > 0, (filterLength === 1 || filterLength === 2), options);
this.dlg.insertBefore(this.menu, this.dlg.firstChild);
this.dlg.classList.add('e-excelfilter');
if (this.parent && !isNullOrUndefined(this.parent.getContent) && this.parent.getContent()
&& this.parent.getContent().firstElementChild
.offsetHeight < this.dlg.offsetHeight && !parentsUntil(this.parent.element, 'e-gantt-dialog')) {
resetDialogAppend(this.parent, this.dialogObj);
}
if (this.parent.enableRtl) {
this.dlg.classList.add('e-rtl');
}
this.dlg.classList.remove('e-checkboxfilter');
this.cmenu = this.parent.createElement('ul', { className: 'e-excel-menu' });
var menuItems = this.dlg.querySelectorAll('.e-menu-item');
menuItems.forEach(function (menuItem) {
if (menuItem.scrollWidth > menuItem.clientWidth) {
menuItem.setAttribute('title', menuItem.textContent);
}
});
if (options.column.showColumnMenu) {
this.parent.notify(events.filterDialogCreated, {});
}
this.wireExEvents();
};
ExcelFilterBase.prototype.closeDialog = function () {
this.destroy();
};
ExcelFilterBase.prototype.selectHandler = function (e) {
if (e.item) {
this.parent.notify(events.filterCmenuSelect, {});
this.menuItem = e.item;
this.closeDialog();
this.renderDialogue(e);
}
};
/**
* @hidden
* @param {MenuEventArgs} e - event args
* @returns {void}
*/
ExcelFilterBase.prototype.renderDialogue = function (e) {
var _this = this;
var target = e ? e.element : undefined;
var column = this.options.field;
var isComplex = !isNullOrUndefined(column) && isComplexField(column);
var complexFieldName = !isNullOrUndefined(column) && getComplexFieldID(column);
var mainDiv = this.parent.createElement('div', {
className: 'e-xlfl-maindiv',
id: isComplex ? complexFieldName + '-xlflmenu' : column + '-xlflmenu'
});
this.dlgDiv = this.parent.createElement('div', {
className: 'e-xlflmenu',
id: isComplex ? complexFieldName + '-xlfldlg' : column + '-xlfldlg'
});
if (this.options.isResponsiveFilter) {
var responsiveCnt = document.querySelector('.e-resfilter > .e-dlg-content > .e-xl-customfilterdiv');
responsiveCnt.appendChild(this.dlgDiv);
}
else {
this.parent.element.appendChild(this.dlgDiv);
}
this.dlgObj = new Dialog({
header: this.getLocalizedLabel('CustomFilter'),
isModal: true,
overlayClick: this.removeDialog.bind(this),
showCloseIcon: true,
locale: this.parent.locale,
closeOnEscape: true,
target: document.body,
// target: this.parent.element,
visible: false,
enableRtl: this.parent.enableRtl,
open: function () {
var rows = [].slice.call(_this.dlgObj.element.querySelectorAll('table.e-xlfl-table tr.e-xlfl-fields'));
for (var i = 0; i < rows.length; i++) {
var valInput = rows[i].children[1].querySelector('.e-control');
var dropDownList = rows[i]
.querySelector('.e-dropdownlist.e-control')['ej2_instances'][0];
if (dropDownList.value === 'isempty' || dropDownList.value === 'isnotempty' ||
dropDownList.value === 'isnull' || dropDownList.value === 'isnotnull') {
valInput['ej2_instances'][0]['enabled'] = false;
}
else if (valInput && !isNullOrUndefined(valInput.getAttribute('disabled'))) {
valInput['ej2_instances'][0]['enabled'] = true;
}
}
var row = _this.dlgObj.element.querySelector('table.e-xlfl-table>tr');
if (_this.options.column.filterTemplate) {
var templateField_1 = isComplexField(_this.options.column.field) ?
getComplexFieldID(_this.options.column.field) : _this.options.column.field;
var isReactCompiler = _this.parent.isReact && typeof (_this.options.column.filterTemplate) !== 'string' &&
!(_this.options.column.filterTemplate.prototype && _this.options.column.filterTemplate.prototype.CSPTemplate);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var isReactChild = _this.parent.parentDetails && _this.parent.parentDetails.parentInstObj &&
// eslint-disable-next-line @typescript-eslint/no-explicit-any
_this.parent.parentDetails.parentInstObj.isReact;
if (isReactCompiler || isReactChild) {
_this.parent.renderTemplates(function () {
row.querySelector('#' + templateField_1 + '-xlfl-frstvalue').focus();
});
}
else {
row.querySelector('#' + templateField_1 + '-xlfl-frstvalue').focus();
}
}
else {
//(row.cells[1].querySelector('input:not([type=hidden])') as HTMLElement).focus();
}
},
close: this.removeDialog.bind(this),
created: this.createdDialog.bind(this, target, column),
buttons: [{
click: this.filterBtnClick.bind(this, column),
buttonModel: {
content: this.getLocalizedLabel('OKButton'), isPrimary: true,
cssClass: this.parent.cssClass ? 'e-xlfl-okbtn' + ' ' + this.parent.cssClass : 'e-xlfl-okbtn'
}
},
{
click: this.removeDialog.bind(this),
buttonModel: { content: this.getLocalizedLabel('CancelButton'),
cssClass: this.parent.cssClass ? 'e-xlfl-cancelbtn' + ' ' + this.parent.cssClass : 'e-xlfl-cancelbtn' }
}],
content: mainDiv,
width: 430,
animationSettings: { effect: 'None' },
cssClass: this.parent.cssClass ? this.parent.cssClass : ''
});
var isStringTemplate = 'isStringTemplate';
this.dlgObj["" + isStringTemplate] = true;
this.renderResponsiveDialog();
this.dlgDiv.setAttribute('aria-label', this.getLocalizedLabel('CustomFilterDialogARIA'));
this.childRefs.unshift(this.dlgObj);
this.dlgObj.appendTo(this.dlgDiv);
};
ExcelFilterBase.prototype.renderResponsiveDialog = function () {
if (this.options.isResponsiveFilter) {
var rowResponsiveDlg = document.querySelector('.e-row-responsive-filter');
if (rowResponsiveDlg) {
rowResponsiveDlg.classList.remove('e-row-responsive-filter');
}
this.dlgObj.buttons = [{}];
this.dlgObj.header = undefined;
this.dlgObj.position = { X: '', Y: '' };
this.dlgObj.target = document.querySelector('.e-resfilter > .e-dlg-content > .e-xl-customfilterdiv');
this.dlgObj.width = '100%';
this.dlgObj.isModal = false;
this.dlgObj.showCloseIcon = false;
}
};
/**
* @hidden
* @returns {void}
*/
ExcelFilterBase.prototype.removeDialog = function () {
this.parent.notify(events.customFilterClose, {});
if ((this.parent.isReact || this.parent.isVue) && this.parent.destroyTemplate !== undefined) {
clearReactVueTemplates(this.parent, ['filterTemplate']);
}
this.removeObjects(this.childRefs);
remove(this.dlgDiv);
this.parent.notify(events.filterDialogClose, {});
};
ExcelFilterBase.prototype.createdDialog = function (target, column) {
this.renderCustomFilter(target, column);
this.dlgObj.element.style.left = '0px';
if (!this.options.isResponsiveFilter) {
this.dlgObj.element.style.top = '0px';
}
else {
var content = document.querySelector('.e-responsive-dialog > .e-dlg-header-content');
var height = content.offsetHeight + 4;
this.dlgObj.element.style.top = height + 'px';
}
if (!this.options.isResponsiveFilter && Browser.isDevice && window.innerWidth < 440) {
this.dlgObj.element.style.width = '90%';
}
this.parent.notify(events.beforeCustomFilterOpen, { column: column, dialog: this.dialogObj });
this.dlgObj.show();
applyBiggerTheme(this.parent.element, this.dlgObj.element.parentElement);
};
ExcelFilterBase.prototype.renderCustomFilter = function (target, column) {
var dlgConetntEle = this.dlgObj.element.querySelector('.e-xlfl-maindiv');
var dlgFields = this.parent.createElement('div', { innerHTML: this.getLocalizedLabel('ShowRowsWhere'), className: 'e-xlfl-dlgfields' });
dlgConetntEle.appendChild(dlgFields);
//column name
var fieldSet = this.parent.createElement('div', { innerHTML: this.options.displayName, className: 'e-xlfl-fieldset' });
dlgConetntEle.appendChild(fieldSet);
this.renderFilterUI(column, dlgConetntEle);
};
/**
* @hidden
* @param {string} col - Defines column details
* @returns {void}
*/
ExcelFilterBase.prototype.filterBtnClick = function (col) {
var isComplex = !isNullOrUndefined(col) && isComplexField(col);
var complexFieldName = !isNullOrUndefined(col) && getComplexFieldID(col);
var colValue = isComplex ? complexFieldName : col;
var fValue = this.dlgDiv.querySelector('#' + colValue + '-xlfl-frstvalue').ej2_instances[0];
var fOperator = this.dlgDiv.querySelector('#' + colValue + '-xlfl-frstoptr').ej2_instances[0];
var sValue = this.dlgDiv.querySelector('#' + colValue + '-xlfl-secndvalue').ej2_instances[0];
var sOperator = this.dlgDiv.querySelector('#' + colValue + '-xlfl-secndoptr').ej2_instances[0];
var checkBoxValue;
if (this.options.type === 'string') {
var checkBox = this.dlgDiv.querySelector('#' + colValue + '-xlflmtcase').ej2_instances[0];
checkBoxValue = checkBox.checked;
}
var predicateSelector = this.dlgDiv.querySelector('#' + colValue + 'e-xlfl-frstpredicate').ej2_instances[0];
var predicate = (predicateSelector.checked ? 'and' : 'or');
this.filterByColumn(this.options.field, fOperator.value, fValue.value, predicate, checkBoxValue, this.options.ignoreAccent, sOperator.value, sValue.value);
this.removeDialog();
};
/**
* @hidden
* Filters grid row by column name with given options.
*
* @param {string} fieldName - Defines the field name of the filter column.
* @param {string} firstOperator - Defines the first operator by how to filter records.
* @param {string | number | Date | boolean} firstValue - Defines the first value which is used to filter records.
* @param {string} predicate - Defines the relationship between one filter query with another by using AND or OR predicate.
* @param {boolean} matchCase - If ignore case set to true, then filter records with exact match or else
* filter records with case insensitive(uppercase and lowercase letters treated as same).
* @param {boolean} ignoreAccent - If ignoreAccent set to true, then ignores the diacritic characters or accents when filtering.
* @param {string} secondOperator - Defines the second operator by how to filter records.
* @param {string | number | Date | boolean} secondValue - Defines the first value which is used to filter records.
* @returns {void}
*/
ExcelFilterBase.prototype.filterByColumn = function (fieldName, firstOperator, firstValue, predicate, matchCase, ignoreAccent, secondOperator, secondValue) {
var col = this.parent.getColumnByField ? this.parent.getColumnByField(fieldName) : this.options.column;
var field = this.isForeignColumn(col) ? col.foreignKeyValue : fieldName;
var fColl = [];
var mPredicate;
var arg = {
instance: this, handler: this.filterByColumn, arg1: fieldName, arg2: firstOperator, arg3: firstValue, arg4: predicate,
arg5: matchCase, arg6: ignoreAccent, arg7: secondOperator, arg8: secondValue, cancel: false
};
this.parent.notify(events.fltrPrevent, arg);
if (arg.cancel) {
return;
}
fColl.push({
field: field,
predicate: predicate,
matchCase: matchCase,
ignoreAccent: ignoreAccent,
operator: firstOperator,
value: arg.arg3,
type: this.options.type
});
mPredicate = new Predicate(field, firstOperator.toLowerCase(), arg.arg3, !matchCase, ignoreAccent);
if (!isNullOrUndefined(secondOperator)) {
fColl.push({
field: field,
predicate: predicate,
matchCase: matchCase,
ignoreAccent: ignoreAccent,
operator: secondOperator,
value: arg.arg8,
type: this.options.type
});
mPredicate = mPredicate["" + predicate](field, secondOperator.toLowerCase(), secondValue, !matchCase, ignoreAccent);
}
var args = {
action: 'filtering', filterCollection: fColl, field: this.options.field,
ejpredicate: mPredicate, actualPredicate: fColl
};
if (this.isForeignColumn(col)) {
this.foreignKeyFilter(args, fColl, mPredicate);
}
else {
this.options.handler(args);
}
};
// eslint-disable-next-line max-len
ExcelFilterBase.prototype.renderOperatorUI = function (column, table, elementID, predicates, isFirst) {
var fieldElement = this.parent.createElement('tr', { className: 'e-xlfl-fields', attrs: { role: 'row' } });
table.appendChild(fieldElement);
var xlfloptr = this.parent.createElement('td', { className: 'e-xlfl-optr' });
fieldElement.appendChild(xlfloptr);
var optrDiv = this.parent.createElement('div', { className: 'e-xlfl-optrdiv' });
var isComplex = !isNullOrUndefined(column) && isComplexField(column);
var complexFieldName = !isNullOrUndefined(column) && getComplexFieldID(column);
var optrInput = this.parent
.createElement('input', { id: isComplex ? complexFieldName + elementID : column + elementID });
optrDiv.appendChild(optrInput);
xlfloptr.appendChild(optrDiv);
var optr = this.options.type + 'Operator';
var dropDatasource = this.customFilterOperators["" + optr];
this.optrData = dropDatasource;
var selectedValue = this.dropSelectedVal(this.options.column, predicates, isFirst);
//Trailing three dots are sliced.
var menuText = '';
if (this.menuItem) {
menuText = this.menuItem.text.slice(0, -3);
if (menuText !== this.getLocalizedLabel('CustomFilter')) {
selectedValue = isFirst ? menuText : undefined;
}
if (menuText === this.getLocalizedLabel('Between')) {
selectedValue = this.getLocalizedLabel(isFirst ? 'GreaterThanOrEqual' : 'LessThanOrEqual');
}
}
var col = this.options.column;
var dropOptr = new DropDownList(extend({
dataSource: dropDatasource,
fields: { text: 'text', value: 'value' },
text: selectedValue,
enableRtl: this.parent.enableRtl,
cssClass: this.parent.cssClass ? this.parent.cssClass : null
}, col.filter.params));
this.childRefs.unshift(dropOptr);
var evt = { 'open': this.dropDownOpen.bind(this), 'change': this.dropDownValueChange.bind(this) };
registerEventHandlers(optrInput.id, [literals.open, literals.change], evt, this);
dropOptr.addEventListener(literals['open'], this.eventHandlers[optrInput.id][literals.open]);
dropOptr.addEventListener(literals.change, this.eventHandlers[optrInput.id][literals.change]);
dropOptr.appendTo(optrInput);
var operator = this.getSelectedValue(selectedValue);
return { fieldElement: fieldElement, operator: operator };
};
ExcelFilterBase.prototype.removeHandlersFromComponent = function (component) {
if (component.element.classList.contains('e-dropdownlist')) {
removeEventHandlers(component, [literals.open, literals.change], this);
}
else if (component.element.classList.contains('e-autocomplete')) {
removeEventHandlers(component, [events.actionComplete, literals.focus], this);
}
};
ExcelFilterBase.prototype.dropDownOpen = function (args) {
args.popup.element.style.zIndex = (this.dialogObj.zIndex + 1).toString();
};
ExcelFilterBase.prototype.dropDownValueChange = function (args) {
if (args.element.id.includes('-xlfl-frstoptr')) {
this.firstOperator = args.value.toString();
}
else {
this.secondOperator = args.value.toString();
}
var valInput = args.element.closest('.e-xlfl-fields').children[1].querySelector('.e-control');
var dropDownList = args.element['ej2_instances'][0];
if (dropDownList.value === 'isempty' || dropDownList.value === 'isnotempty' ||
dropDownList.value === 'isnull' || dropDownList.value === 'isnotnull') {
valInput['ej2_instances'][0]['enabled'] = false;
}
else if (!isNullOrUndefined(valInput.getAttribute('disabled'))) {
valInput['ej2_instances'][0]['enabled'] = true;
}
};
/**
* @hidden
* @returns {FilterUI} returns filter UI
*/
ExcelFilterBase.prototype.getFilterUIInfo = function () {
return { firstOperator: this.firstOperator, secondOperator: this.secondOperator, field: this.options.field };
};
ExcelFilterBase.prototype.getSelectedValue = function (text) {
var selectedField = new DataManager(this.optrData).executeLocal(new Query().where('text', 'equal', text));
return !isNullOrUndefined(selectedField[0]) ? selectedField[0].value : '';
};
ExcelFilterBase.prototype.dropSelectedVal = function (col, predicates, isFirst) {
var operator;
if (predicates && predicates.length > 0) {
operator = predicates.length === 2 ?
(isFirst ? predicates[0].operator : predicates[1].operator) :
(isFirst ? predicates[0].operator : undefined);
}
else if (isFirst && col.type === 'string' && !col.filter.operator) {
operator = 'startswith';
}
else {
operator = isFirst ? col.filter.operator || 'equal' : undefined;
}
return this.getSelectedText(operator);
};
ExcelFilterBase.prototype.getSelectedText = function (operator) {
var selectedField = new DataManager(this.optrData).executeLocal(new Query().where('value', 'equal', operator));
return !isNullOrUndefined(selectedField[0]) ? selectedField[0].text : '';
};
ExcelFilterBase.prototype.renderFilterUI = function (column, dlgConetntEle) {
var predicates = this.existingPredicate["" + column];
var table = this.parent.createElement('table', { className: 'e-xlfl-table', attrs: { role: 'grid' } });
dlgConetntEle.appendChild(table);
var colGroup = this.parent.createElement(literals.colGroup);
colGroup.innerHTML = '<col style="width: 50%"></col><col style="width: 50%"></col>';
table.appendChild(colGroup);
//Renders first dropdown
var optr = this.renderOperatorUI(column, table, '-xlfl-frstoptr', predicates, true);
this.firstOperator = optr.operator;
//Renders first value
this.renderFlValueUI(column, optr, '-xlfl-frstvalue', predicates, true);
var predicate = this.parent.createElement('tr', { className: 'e-xlfl-predicate', attrs: { role: 'row' } });
table.appendChild(predicate);
//Renders first radion button
this.renderRadioButton(column, predicate, predicates);
//Renders second dropdown
optr = this.renderOperatorUI(column, table, '-xlfl-secndoptr', predicates, false);
this.secondOperator = optr.operator;
//Renders second text box
this.renderFlValueUI(column, optr, '-xlfl-secndvalue', predicates, false);
};
ExcelFilterBase.prototype.renderRadioButton = function (column, tr, predicates) {
var td = this.parent.createElement('td', { className: 'e-xlfl-radio', attrs: { 'colSpan': '2' } });
tr.appendChild(td);
var radioDiv = this.parent.createElement('div', { className: 'e-xlfl-radiodiv' });
radioDiv.style.display = 'inline-block';
var isComplex = !isNullOrUndefined(column) && isComplexField(column);
var complexFieldName = !isNullOrUndefined(column) && getComplexFieldID(column);
var frstpredicate = this.parent.createElement('input', { id: isComplex ? complexFieldName + 'e-xlfl-frstpredicate' : column + 'e-xlfl-frstpredicate', attrs: { 'type': 'radio' } });
var secndpredicate = this.parent.createElement('input', { id: isComplex ? complexFieldName + 'e-xlfl-secndpredicate' : column + 'e-xlfl-secndpredicate', attrs: { 'type': 'radio' } });
//appends into div
radioDiv.appendChild(frstpredicate);
radioDiv.appendChild(secndpredicate);
td.appendChild(radioDiv);
if (this.options.type === 'string') {
this.renderMatchCase(column, tr, td, '-xlflmtcase', predicates);
}
// Initialize AND RadioButton component.
var andRadio = new RadioButton({
label: this.getLocalizedLabel('AND'),
name: 'default', checked: true,
enableRtl: this.parent.enableRtl,
cssClass: this.parent.cssClass ? this.parent.cssClass : ''
});
this.childRefs.unshift(andRadio);
// Initialize OR RadioButton component.
var orRadio = new RadioButton({
label: this.getLocalizedLabel('OR'),
name: 'default',
enableRtl: this.parent.enableRtl,
cssClass: this.parent.cssClass ? this.parent.cssClass : ''
});
this.childRefs.unshift(orRadio);
var flValue = predicates && predicates.length === 2 ? predicates[1].predicate : 'and';
if (flValue === 'and') {
andRadio.checked = true;
orRadio.checked = false;
}
else {
orRadio.checked = true;
andRadio.checked = false;
}
// Render initialized RadioButton.
andRadio.appendTo(frstpredicate);
orRadio.appendTo(secndpredicate);
andRadio.element.nextElementSibling.classList.add('e-xlfl-radio-and');
orRadio.element.nextElementSibling.classList.add('e-xlfl-radio-or');
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
ExcelFilterBase.prototype.removeObjects = function (elements) {
for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {
var obj = elements_1[_i];
if (obj && !obj.isDestroyed) {
this.removeHandlersFromComponent(obj);
obj.destroy();
}
}
};
// eslint-disable-next-line max-len
ExcelFilterBase.prototype.renderFlValueUI = function (column, optr, elementId, predicates, isFirst) {
var value = this.parent.createElement('td', { className: 'e-xlfl-value' });
optr.fieldElement.appendChild(value);
var isComplex = !isNullOrUndefined(column) && isComplexField(column);
var complexFieldName = !isNullOrUndefined(column) && getComplexFieldID(column);
var valueDiv = this.parent.createElement('div', { className: 'e-xlfl-valuediv' });
var isFilteredCol = this.options.filteredColumns.some(function (col) { return column === col.field; });
var fltrPredicates = this.options.filteredColumns.filter(function (col) { return col.field === column; });
if (this.options.column.filterTemplate) {
var data = {};
var columnObj = this.options.column;
if (isFilteredCol && elementId) {
data = this.getExcelFilterData(elementId, data, columnObj, predicates, fltrPredicates);
}
var isReactCompiler = this.parent.isReact && typeof (this.options.column.filterTemplate) !== 'string' &&
!(this.options.column.filterTemplate.prototype && this.options.column.filterTemplate.prototype.CSPTemplate);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var isReactChild = this.parent.parentDetails && this.parent.parentDetails.parentInstObj &&
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.parent.parentDetails.parentInstObj.isReact;
var tempID = this.parent.element.id + columnObj.uid + 'filterTemplate';
if (isReactCompiler || isReactChild) {
this.options.column.getFilterTemplate()(data, this.parent, 'filterTemplate', tempID, null, null, valueDiv);
}
else {
var element = this.options.column.getFilterTemplate()(data, this.parent, 'filterTemplate', tempID, null, null, null, this.parent.root);
appendChildren(valueDiv, element);
}
if (isReactCompiler || isReactChild) {
this.parent.renderTemplates(function () {
valueDiv.querySelector('input').id = isComplex ? complexFieldName + elementId : column + elementId;
value.appendChild(valueDiv);
});
}
else {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(this.parent.isAngular ? valueDiv.children[0] : valueDiv.querySelector('input')).id = isComplex ?
complexFieldName + elementId : column + elementId;
value.appendChild(valueDiv);
}
}
else {
var valueInput = this.parent
.createElement('input', { id: isComplex ? complexFieldName + elementId : column + elementId });
valueDiv.appendChild(valueInput);
value.appendChild(valueDiv);
var flValue = void 0;
var predicate = void 0;
if (predicates && predicates.length > 0) {
predicate = predicates.length === 2 ?
(isFirst ? predicates[0] : predicates[1]) :
(isFirst ? predicates[0] : undefined);
flValue = (predicate && predicate.operator === optr.operator) ? predicate.value : undefined;
if (isNullOrUndefined(flValue)) {
flValue = undefined;
}
}
var types = {
'string': this.renderAutoComplete.bind(this),
'number': this.renderNumericTextBox.bind(this),
'date': this.renderDate.bind(this),
'dateonly': this.renderDate.bind(this),
'datetime': this.renderDateTime.bind(this)
};
types[this.options.type](this.options, column, valueInput, flValue, this.parent.enableRtl);
}
};
ExcelFilterBase.prototype.getExcelFilterData = function (elementId, data, columnObj, predicates, fltrPredicates) {
var predIndex = elementId === '-xlfl-frstvalue' ? 0 : 1;
if (elementId === '-xlfl-frstvalue' || fltrPredicates.length > 1) {
data = { column: predicates instanceof Array ? predicates[parseInt(predIndex.toString(), 10)] : predicates };
var indx = this.options.column.columnData && fltrPredicates.length > 1 ?
(this.options.column.columnData.length === 1 ? 0 : 1) : predIndex;
data[this.options.field] = columnObj.foreignKeyValue ?
this.options.column.columnData[parseInt(indx.toString(), 10)][columnObj.foreignKeyValue] :
fltrPredicates[parseInt(indx.toString(), 10)].value;
if (this.options.foreignKeyValue) {
data[this.options.foreignKeyValue] = this.options.column
.columnData[parseInt(indx.toString(), 10)][columnObj.foreignKeyValue];
}
}
return data;
};
// eslint-disable-next-line max-len
ExcelFilterBase.prototype.renderMatchCase = function (column, tr, matchCase, elementId, predicates) {
var matchCaseDiv = this.parent.createElement('div', { className: 'e-xlfl-matchcasediv' });
matchCaseDiv.style.display = 'inline-block';
var isComplex = !isNullOrUndefined(column) && isComplexField(column);
var complexFieldName = !isNullOrUndefined(column) && getComplexFieldID(column);
var matchCaseInput = this.parent.createElement('input', { id: isComplex ? complexFieldName + elementId : column + elementId, attrs: { 'type': 'checkbox' } });
matchCaseDiv.appendChild(matchCaseInput);
matchCase.appendChild(matchCaseDiv);
var flValue = predicates && predicates.length > 0 ?
(pr