@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,231 lines • 292 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 { isNullOrUndefined, setValue, getValue, defaultCurrencyCode, updateCSSText } from '@syncfusion/ej2-base';
import { Component, ChildProperty, Browser, closest, extend } from '@syncfusion/ej2-base';
import { addClass, removeClass, append, remove, classList, setStyleAttribute } from '@syncfusion/ej2-base';
import { Property, Collection, Complex, Event, NotifyPropertyChanges, L10n } from '@syncfusion/ej2-base';
import { EventHandler, KeyboardEvents } from '@syncfusion/ej2-base';
import { DataManager, DataUtil, UrlAdaptor } from '@syncfusion/ej2-data';
import { createSpinner, hideSpinner, showSpinner, Tooltip } from '@syncfusion/ej2-popups';
import { iterateArrayOrObject, prepareColumns, parentsUntil, wrap, templateCompiler, isGroupAdaptive, refreshForeignData, getScrollBarWidth } from './util';
import { getRowHeight, setColumnIndex, Global, ispercentageWidth, getNumberFormat, getTransformValues } from './util';
import { setRowElements, resetRowIndex, compareChanges, getCellByColAndRowIndex, performComplexDataOperation } from './util';
import * as events from '../base/constant';
import { Render } from '../renderer/render';
import { Column } from '../models/column';
import { RenderType } from './enum';
import { RowRenderer } from '../renderer/row-renderer';
import { CellRenderer } from '../renderer/cell-renderer';
import { CellRendererFactory } from '../services/cell-render-factory';
import { ServiceLocator } from '../services/service-locator';
import { ValueFormatter } from '../services/value-formatter';
import { RendererFactory } from '../services/renderer-factory';
import { ColumnWidthService } from '../services/width-controller';
import { AriaService } from '../services/aria-service';
import { FocusStrategy } from '../services/focus-strategy';
import { PageSettings } from '../models/page-settings';
import { ColumnChooserSettings } from '../models/column-chooser-settings';
import { Selection } from '../actions/selection';
import { Search } from '../actions/search';
import { ShowHide } from '../actions/show-hide';
import { Scroll } from '../actions/scroll';
import { Print } from '../actions/print';
import { AggregateRow } from '../models/aggregate';
import { Clipboard } from '../actions/clipboard';
import { Logger } from '../actions/logger';
import { RowModelGenerator } from '../services/row-model-generator';
import { SanitizeHtmlHelper } from '@syncfusion/ej2-base';
import * as literals from '../base/string-literals';
import { HeaderCellRenderer } from '../renderer/header-cell-renderer';
/**
* Represents the field name and direction of sort column.
*/
var SortDescriptor = /** @class */ (function (_super) {
__extends(SortDescriptor, _super);
function SortDescriptor() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property()
], SortDescriptor.prototype, "field", void 0);
__decorate([
Property()
], SortDescriptor.prototype, "direction", void 0);
__decorate([
Property(false)
], SortDescriptor.prototype, "isFromGroup", void 0);
return SortDescriptor;
}(ChildProperty));
export { SortDescriptor };
/**
* Configures the sorting behavior of Grid.
*/
var SortSettings = /** @class */ (function (_super) {
__extends(SortSettings, _super);
function SortSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Collection([], SortDescriptor)
], SortSettings.prototype, "columns", void 0);
__decorate([
Property(true)
], SortSettings.prototype, "allowUnsort", void 0);
return SortSettings;
}(ChildProperty));
export { SortSettings };
/**
* Represents the predicate for the filter column.
*/
var Predicate = /** @class */ (function (_super) {
__extends(Predicate, _super);
function Predicate() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property()
], Predicate.prototype, "field", void 0);
__decorate([
Property()
], Predicate.prototype, "operator", void 0);
__decorate([
Property()
], Predicate.prototype, "value", void 0);
__decorate([
Property()
], Predicate.prototype, "matchCase", void 0);
__decorate([
Property(false)
], Predicate.prototype, "ignoreAccent", void 0);
__decorate([
Property()
], Predicate.prototype, "predicate", void 0);
__decorate([
Property({})
], Predicate.prototype, "actualFilterValue", void 0);
__decorate([
Property({})
], Predicate.prototype, "actualOperator", void 0);
__decorate([
Property()
], Predicate.prototype, "type", void 0);
__decorate([
Property()
], Predicate.prototype, "ejpredicate", void 0);
__decorate([
Property()
], Predicate.prototype, "uid", void 0);
__decorate([
Property()
], Predicate.prototype, "isForeignKey", void 0);
__decorate([
Property()
], Predicate.prototype, "condition", void 0);
return Predicate;
}(ChildProperty));
export { Predicate };
/**
* Configures the infinite scroll behavior of Grid.
*/
var InfiniteScrollSettings = /** @class */ (function (_super) {
__extends(InfiniteScrollSettings, _super);
function InfiniteScrollSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property(false)
], InfiniteScrollSettings.prototype, "enableCache", void 0);
__decorate([
Property(3)
], InfiniteScrollSettings.prototype, "maxBlocks", void 0);
__decorate([
Property(3)
], InfiniteScrollSettings.prototype, "initialBlocks", void 0);
return InfiniteScrollSettings;
}(ChildProperty));
export { InfiniteScrollSettings };
/**
* Configures the filtering behavior of the Grid.
*/
var FilterSettings = /** @class */ (function (_super) {
__extends(FilterSettings, _super);
function FilterSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Collection([], Predicate)
], FilterSettings.prototype, "columns", void 0);
__decorate([
Property('FilterBar')
], FilterSettings.prototype, "type", void 0);
__decorate([
Property('OnEnter')
], FilterSettings.prototype, "mode", void 0);
__decorate([
Property(true)
], FilterSettings.prototype, "showFilterBarStatus", void 0);
__decorate([
Property(1500)
], FilterSettings.prototype, "immediateModeDelay", void 0);
__decorate([
Property()
], FilterSettings.prototype, "operators", void 0);
__decorate([
Property(false)
], FilterSettings.prototype, "ignoreAccent", void 0);
__decorate([
Property(false)
], FilterSettings.prototype, "enableInfiniteScrolling", void 0);
__decorate([
Property(50)
], FilterSettings.prototype, "itemsCount", void 0);
__decorate([
Property('Shimmer')
], FilterSettings.prototype, "loadingIndicator", void 0);
__decorate([
Property(false)
], FilterSettings.prototype, "enableCaseSensitivity", void 0);
__decorate([
Property(false)
], FilterSettings.prototype, "showFilterBarOperator", void 0);
return FilterSettings;
}(ChildProperty));
export { FilterSettings };
/**
* Configures the selection behavior of the Grid.
*/
var SelectionSettings = /** @class */ (function (_super) {
__extends(SelectionSettings, _super);
function SelectionSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('Row')
], SelectionSettings.prototype, "mode", void 0);
__decorate([
Property('Flow')
], SelectionSettings.prototype, "cellSelectionMode", void 0);
__decorate([
Property('Single')
], SelectionSettings.prototype, "type", void 0);
__decorate([
Property(false)
], SelectionSettings.prototype, "checkboxOnly", void 0);
__decorate([
Property(false)
], SelectionSettings.prototype, "persistSelection", void 0);
__decorate([
Property('Default')
], SelectionSettings.prototype, "checkboxMode", void 0);
__decorate([
Property(false)
], SelectionSettings.prototype, "enableSimpleMultiRowSelection", void 0);
__decorate([
Property(true)
], SelectionSettings.prototype, "enableToggle", void 0);
__decorate([
Property(false)
], SelectionSettings.prototype, "allowColumnSelection", void 0);
return SelectionSettings;
}(ChildProperty));
export { SelectionSettings };
/**
* Configures the search behavior of the Grid.
*/
var SearchSettings = /** @class */ (function (_super) {
__extends(SearchSettings, _super);
function SearchSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property([])
], SearchSettings.prototype, "fields", void 0);
__decorate([
Property('')
], SearchSettings.prototype, "key", void 0);
__decorate([
Property('contains')
], SearchSettings.prototype, "operator", void 0);
__decorate([
Property(true)
], SearchSettings.prototype, "ignoreCase", void 0);
__decorate([
Property(false)
], SearchSettings.prototype, "ignoreAccent", void 0);
return SearchSettings;
}(ChildProperty));
export { SearchSettings };
/**
* Configures the row drop settings of the Grid.
*/
var RowDropSettings = /** @class */ (function (_super) {
__extends(RowDropSettings, _super);
function RowDropSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property()
], RowDropSettings.prototype, "targetID", void 0);
return RowDropSettings;
}(ChildProperty));
export { RowDropSettings };
/**
* Configures the text wrap settings of the Grid.
*/
var TextWrapSettings = /** @class */ (function (_super) {
__extends(TextWrapSettings, _super);
function TextWrapSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('Both')
], TextWrapSettings.prototype, "wrapMode", void 0);
return TextWrapSettings;
}(ChildProperty));
export { TextWrapSettings };
/**
* Configures the resize behavior of the Grid.
*/
var ResizeSettings = /** @class */ (function (_super) {
__extends(ResizeSettings, _super);
function ResizeSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('Normal')
], ResizeSettings.prototype, "mode", void 0);
return ResizeSettings;
}(ChildProperty));
export { ResizeSettings };
/**
* Configures the group behavior of the Grid.
*/
var GroupSettings = /** @class */ (function (_super) {
__extends(GroupSettings, _super);
function GroupSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property(true)
], GroupSettings.prototype, "showDropArea", void 0);
__decorate([
Property(false)
], GroupSettings.prototype, "allowReordering", void 0);
__decorate([
Property(false)
], GroupSettings.prototype, "showToggleButton", void 0);
__decorate([
Property(false)
], GroupSettings.prototype, "showGroupedColumn", void 0);
__decorate([
Property(true)
], GroupSettings.prototype, "showUngroupButton", void 0);
__decorate([
Property(false)
], GroupSettings.prototype, "disablePageWiseAggregates", void 0);
__decorate([
Property([])
], GroupSettings.prototype, "columns", void 0);
__decorate([
Property()
], GroupSettings.prototype, "captionTemplate", void 0);
__decorate([
Property(false)
], GroupSettings.prototype, "enableLazyLoading", void 0);
return GroupSettings;
}(ChildProperty));
export { GroupSettings };
/**
* Configures the edit behavior of the Grid.
*/
var EditSettings = /** @class */ (function (_super) {
__extends(EditSettings, _super);
function EditSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property(false)
], EditSettings.prototype, "allowAdding", void 0);
__decorate([
Property(false)
], EditSettings.prototype, "allowEditing", void 0);
__decorate([
Property(false)
], EditSettings.prototype, "allowDeleting", void 0);
__decorate([
Property('Normal')
], EditSettings.prototype, "mode", void 0);
__decorate([
Property(true)
], EditSettings.prototype, "allowEditOnDblClick", void 0);
__decorate([
Property(true)
], EditSettings.prototype, "showConfirmDialog", void 0);
__decorate([
Property(false)
], EditSettings.prototype, "showDeleteConfirmDialog", void 0);
__decorate([
Property()
], EditSettings.prototype, "template", void 0);
__decorate([
Property()
], EditSettings.prototype, "headerTemplate", void 0);
__decorate([
Property()
], EditSettings.prototype, "footerTemplate", void 0);
__decorate([
Property('Top')
], EditSettings.prototype, "newRowPosition", void 0);
__decorate([
Property({})
], EditSettings.prototype, "dialog", void 0);
__decorate([
Property(false)
], EditSettings.prototype, "allowNextRowEdit", void 0);
__decorate([
Property(false)
], EditSettings.prototype, "showAddNewRow", void 0);
return EditSettings;
}(ChildProperty));
export { EditSettings };
/**
* Configures the Loading Indicator of the Grid.
*/
var LoadingIndicator = /** @class */ (function (_super) {
__extends(LoadingIndicator, _super);
function LoadingIndicator() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('Spinner')
], LoadingIndicator.prototype, "indicatorType", void 0);
return LoadingIndicator;
}(ChildProperty));
export { LoadingIndicator };
/**
* Represents the Grid component.
* ```html
* <div id="grid"></div>
* <script>
* var gridObj = new Grid({ allowPaging: true });
* gridObj.appendTo("#grid");
* </script>
* ```
*/
var Grid = /** @class */ (function (_super) {
__extends(Grid, _super);
/**
* Constructor for creating the component
*
* @param {GridModel} options - specifies the options
* @param {string | HTMLElement} element - specifies the element
* @hidden
*/
function Grid(options, element) {
var _this_1 = _super.call(this, options, element) || this;
_this_1.isPreventScrollEvent = false;
_this_1.inViewIndexes = [];
_this_1.keyA = false;
_this_1.frozenRightCount = 0;
_this_1.freezeColumnRefresh = true;
_this_1.rightcount = 0;
_this_1.frozenLeftCount = 0;
_this_1.leftcount = 0;
_this_1.tablesCount = 1;
_this_1.movableCount = 0;
_this_1.movablecount = 0;
_this_1.fixedcount = 0;
_this_1.fixedCount = 0;
_this_1.visibleFrozenLeft = 0;
_this_1.visibleFrozenFixed = 0;
_this_1.isPreparedFrozenColumns = false;
_this_1.visibleFrozenRight = 0;
_this_1.visibleMovable = 0;
_this_1.frozenLeftColumns = [];
_this_1.frozenRightColumns = [];
_this_1.movableColumns = [];
_this_1.fixedColumns = [];
_this_1.stackedLeft = [];
_this_1.stackedRight = [];
_this_1.stackedFixed = [];
_this_1.stackedMovable = [];
_this_1.stackedarrayLeft = [];
_this_1.stackedarrayRight = [];
_this_1.stackedarrayFixed = [];
_this_1.stackedarrayMovable = [];
_this_1.media = {};
_this_1.autoFitColumnsResize = false;
/** @hidden */
_this_1.tableIndex = 0;
_this_1.componentRefresh = Component.prototype.refresh;
_this_1.isChangeDataSourceCall = false;
_this_1.mergedColumns = false;
/** @hidden */
_this_1.isVirtualAdaptive = false;
/** @hidden */
/**
* * If `requireTemplateRef` is set to false in the load event, then the template element can't be accessed in grid queryCellInfo, and rowDataBound events.
* * By default, React's grid queryCellInfo and rowDataBound events allow access to the template element.
* * Avoid accessing the template elements in the grid queryCellInfo and rowDataBound events to improve rendering performance by setting this value as false.
*
* @default true
*/
_this_1.requireTemplateRef = true;
/** @hidden */
_this_1.vRows = [];
/** @hidden */
_this_1.vcRows = [];
/** @hidden */
_this_1.vGroupOffsets = {};
/** @hidden */
_this_1.rowUid = 0;
/** @hidden */
_this_1.translateX = 0;
/** @hidden */
_this_1.isManualRefresh = false;
/** @hidden */
_this_1.isAutoFitColumns = false;
/** @hidden */
_this_1.enableDeepCompare = false;
/** @hidden */
_this_1.totalDataRecordsCount = 0;
/** @hidden */
_this_1.disableSelectedRecords = [];
/** @hidden */
_this_1.partialSelectedRecords = [];
/** @hidden */
_this_1.isSpan = false;
/** @hidden */
_this_1.islazyloadRequest = false;
/** @hidden */
_this_1.isAddNewRow = false;
/** @hidden */
_this_1.addNewRowFocus = true;
/** @hidden */
_this_1.selectVirtualRowOnAdd = false;
/** @hidden */
_this_1.lockcolPositionCount = 0;
/** @hidden */
_this_1.prevPageMoving = false;
/** @hidden */
_this_1.pageTemplateChange = false;
/** @hidden */
_this_1.isAutoGen = false;
/** @hidden */
_this_1.isAutoGenerateColumns = false;
/** @hidden */
_this_1.pageRequireRefresh = true;
_this_1.mediaBindInstance = {};
/** @hidden */
_this_1.commandDelIndex = undefined;
/** @hidden */
_this_1.preventAutoFit = false;
/** @hidden */
_this_1.asyncTimeOut = 50;
/** @hidden */
_this_1.isExportGrid = false;
/** @hidden */
_this_1.isWidgetsDestroyed = false;
_this_1.enableLogger = false;
_this_1.needsID = true;
Grid_1.Inject(Selection);
setValue('mergePersistData', _this_1.mergePersistGridData, _this_1);
return _this_1;
}
Grid_1 = Grid;
/**
* Get the properties to be maintained in the persisted state.
*
* @returns {string} returns the persist data
*/
Grid.prototype.getPersistData = function () {
var keyEntity = ['pageSettings', 'sortSettings',
'filterSettings', 'groupSettings', 'columns', 'searchSettings', 'selectedRowIndex', 'scrollPosition'];
var ignoreOnPersist = {
pageSettings: ['template', 'pageSizes', 'enableQueryString', 'totalRecordsCount', 'pageCount'],
filterSettings: ['type', 'mode', 'showFilterBarStatus', 'immediateModeDelay', 'ignoreAccent'],
groupSettings: ['showDropArea', 'showToggleButton', 'showGroupedColumn', 'showUngroupButton',
'disablePageWiseAggregates', 'hideCaptionCount'],
searchSettings: ['fields', 'operator', 'ignoreCase'],
sortSettings: [], columns: [], selectedRowIndex: [], scrollPosition: []
};
for (var i = 0; i < keyEntity.length; i++) {
var currentObject = this[keyEntity[parseInt(i.toString(), 10)]];
for (var _i = 0, _a = ignoreOnPersist[keyEntity[parseInt(i.toString(), 10)]]; _i < _a.length; _i++) {
var val = _a[_i];
delete currentObject["" + val];
}
}
var temp = this.pageSettings.template;
var settings = Object.assign({ template: undefined }, this.pageSettings);
if (this.enableVirtualization && this.enablePersistence && this.contentModule &&
this.contentModule.getPageFromTop && !isNullOrUndefined(this.scrollPosition) &&
!isNullOrUndefined(this.scrollPosition.top)) {
settings['properties']['currentPage'] = this.contentModule.getPageFromTop(this.scrollPosition.top, { block: 1 });
}
this.setProperties({ pageSettings: settings }, true);
var captionTemplateRef = this.groupSettings.captionTemplate;
var isAngularCaptionTemplate = captionTemplateRef && this.isAngular;
if (isAngularCaptionTemplate) {
delete this.groupSettings['properties']['captionTemplate'];
}
this.pageTemplateChange = !isNullOrUndefined(this.pagerTemplate);
var persistData = this.addOnPersist(keyEntity);
settings.template = temp;
this.setProperties({ pageSettings: settings }, true);
if (isAngularCaptionTemplate) {
this.groupSettings.captionTemplate = captionTemplateRef;
}
return persistData;
};
/**
* To provide the array of modules needed for component rendering
*
* @returns {ModuleDeclaration[]} Returns the module Declaration
* @hidden
*/
Grid.prototype.requiredModules = function () {
this.setFrozenCount();
this.enableInfiniteAggrgate();
var modules = [];
if (this.isDestroyed) {
return modules;
}
if (this.allowFiltering) {
modules.push({
member: 'filter',
args: [this, this.filterSettings, this.serviceLocator],
name: 'Filter'
});
}
if (this.allowExcelExport) {
modules.push({
member: 'ExcelExport',
args: [this, this.serviceLocator],
name: 'ExcelExport'
});
}
if (this.allowPdfExport) {
modules.push({
member: 'PdfExport',
args: [this],
name: 'PdfExport'
});
}
if (this.allowSorting) {
modules.push({
member: 'sort',
args: [this, this.sortSettings, this.sortedColumns, this.serviceLocator],
name: 'Sort'
});
}
if (this.allowPaging) {
modules.push({
member: 'pager',
args: [this, this.pageSettings],
name: 'Page'
});
}
if (this.allowSelection) {
modules.push({
member: 'selection',
args: [this, this.selectionSettings, this.serviceLocator],
name: 'Selection'
});
}
if (this.resizeCheck()) {
modules.push({
member: 'resize',
args: [this],
name: 'Resize'
});
}
if (this.allowReordering) {
modules.push({
member: 'reorder',
args: [this],
name: 'Reorder'
});
}
if (this.allowRowDragAndDrop) {
modules.push({
member: 'rowDragAndDrop',
args: [this],
name: 'RowDD'
});
}
if (this.allowGrouping) {
modules.push({
member: 'group',
args: [this, this.groupSettings, this.sortedColumns, this.serviceLocator],
name: 'Group'
});
}
if (this.aggregates.length) {
modules.push({ member: 'aggregate', args: [this, this.serviceLocator], name: 'Aggregate' });
}
if (this.isDetail()) {
modules.push({
member: 'detailRow',
args: [this, this.serviceLocator],
name: 'DetailRow'
});
}
if (this.toolbar || this.toolbarTemplate) {
modules.push({
member: 'toolbar',
args: [this, this.serviceLocator],
name: 'Toolbar'
});
}
if (this.enableVirtualization || this.enableColumnVirtualization) {
modules.push({
member: 'virtualscroll',
args: [this, this.serviceLocator],
name: 'VirtualScroll'
});
}
if (this.getFrozenColumns() || this.frozenRows || this.frozenRightCount || this.frozenLeftCount) {
modules.push({ member: 'freeze', args: [this, this.serviceLocator], name: 'Freeze' });
}
if (!isNullOrUndefined(this.columns) && this.isCommandColumn(this.columns)) {
modules.push({
member: 'commandColumn',
args: [this, this.serviceLocator],
name: 'CommandColumn'
});
}
if (this.editSettings.allowAdding || this.editSettings.allowDeleting || this.editSettings.allowEditing) {
modules.push({
member: 'edit',
args: [this, this.serviceLocator],
name: 'Edit'
});
}
this.extendRequiredModules(modules);
return modules;
};
Grid.prototype.extendRequiredModules = function (modules) {
if (this.enableInfiniteScrolling) {
modules.push({
member: 'infiniteScroll',
args: [this, this.serviceLocator],
name: 'InfiniteScroll'
});
}
if (this.groupSettings.enableLazyLoading) {
modules.push({
member: 'lazyLoadGroup',
args: [this, this.serviceLocator],
name: 'LazyLoadGroup'
});
}
if (this.contextMenuItems) {
modules.push({
member: 'contextMenu',
args: [this, this.serviceLocator],
name: 'ContextMenu'
});
}
if (this.showColumnMenu) {
modules.push({
member: 'columnMenu',
args: [this, this.serviceLocator],
name: 'ColumnMenu'
});
}
if (this.showColumnChooser) {
modules.push({
member: 'columnChooser',
args: [this, this.serviceLocator],
name: 'ColumnChooser'
});
}
if (!isNullOrUndefined(this.columns) && this.isForeignKeyEnabled(this.columns)) {
modules.push({ member: 'foreignKey', args: [this, this.serviceLocator], name: 'ForeignKey' });
}
if (this.enableLogger) {
modules.push({ member: 'logger', args: [this], name: 'Logger' });
}
};
Grid.prototype.resizeCheck = function () {
var autoFitColumns = this.getColumns().filter(function (c) { return c.autoFit === true; }).length ? true : false;
if (!isNullOrUndefined(this.columnModel) && this.columnModel.length && !(this.columnModel[0] instanceof Column)) {
this.columnModel = [];
}
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 || this.autoFitColumnsResize || autoFitColumns || columnMenu || contextMenu;
};
/**
* For internal use only - Initialize the event handler;
*
* @returns {void}
* @private
*/
Grid.prototype.preRender = function () {
this.serviceLocator = new ServiceLocator;
this.initProperties();
this.initializeServices();
};
Grid.prototype.initProperties = function () {
this.isInitial = true;
this.sortedColumns = [];
this.inViewIndexes = [];
this.mediaCol = [];
this.isInitialLoad = false;
this.allowServerDataBinding = false;
this.ignoreCollectionWatch = true;
this.mergeCells = {};
this.isEdit = false;
this.checkAllRows = 'None';
this.isCheckBoxSelection = false;
this.isPersistSelection = false;
this.componentRefresh = Component.prototype.refresh;
this.freezeColumnRefresh = true;
this.filterOperators = {
contains: 'contains', endsWith: 'endswith', equal: 'equal', greaterThan: 'greaterthan', greaterThanOrEqual: 'greaterthanorequal',
lessThan: 'lessthan', lessThanOrEqual: 'lessthanorequal', notEqual: 'notequal', startsWith: 'startswith', wildCard: 'wildcard',
isNull: 'isnull', notNull: 'notnull', like: 'like'
};
this.defaultLocale = {
EmptyRecord: 'No records to display',
True: 'true',
False: 'false',
InvalidFilterMessage: 'Invalid Filter Data',
GroupDropArea: 'Drag a column header here to group its column',
UnGroup: 'Click here to ungroup',
UnGroupButton: 'Click here to ungroup',
GroupDisable: 'Grouping is disabled for this column',
FilterbarTitle: '\'s filter bar cell',
EmptyDataSourceError: 'DataSource must not be empty at initial load since columns are generated from dataSource in AutoGenerate Column Grid',
// Toolbar Items
Add: 'Add',
Edit: 'Edit',
Cancel: 'Cancel',
Update: 'Update',
Delete: 'Delete',
Print: 'Print',
Pdfexport: 'PDF Export',
Excelexport: 'Excel Export',
Wordexport: 'Word Export',
Csvexport: 'CSV Export',
Search: 'Search',
Columnchooser: 'Columns',
Save: 'Save',
Item: 'item',
Items: 'items',
EditOperationAlert: 'No records selected for edit operation',
DeleteOperationAlert: 'No records selected for delete operation',
SaveButton: 'Save',
OKButton: 'OK',
CancelButton: 'Cancel',
EditFormTitle: 'Details of ',
AddFormTitle: 'Add New Record',
BatchSaveConfirm: 'Are you sure you want to save changes?',
BatchSaveLostChanges: 'Unsaved changes will be lost. Are you sure you want to continue?',
ConfirmDelete: 'Are you sure you want to Delete Record?',
CancelEdit: 'Are you sure you want to Cancel the changes?',
ChooseColumns: 'Choose Column',
ColumnMenu: 'Column Menu',
SearchColumns: 'search columns',
Matchs: 'No matches found',
FilterButton: 'Filter',
FilterTitle: 'Filter',
FilterIcon: 'Filter',
ClearButton: 'Clear',
StartsWith: 'Starts With',
NotStartsWith: 'Does Not Start With',
Like: 'Like',
EndsWith: 'Ends With',
NotEndsWith: 'Does Not End With',
Contains: 'Contains',
NotContains: 'Does Not Contain',
IsNull: 'Null',
NotNull: 'Not Null',
IsEmpty: 'Empty',
IsNotEmpty: 'Not Empty',
Equal: 'Equal',
NotEqual: 'Not Equal',
LessThan: 'Less Than',
LessThanOrEqual: 'Less Than Or Equal',
GreaterThan: 'Greater Than',
GreaterThanOrEqual: 'Greater Than Or Equal',
In: 'In',
NotIn: 'Not In',
ChooseDate: 'Choose a Date',
EnterValue: 'Enter the value',
Copy: 'Copy',
Group: 'Group by this column',
Ungroup: 'Ungroup by this column',
GroupButton: 'Group button',
UnGroupAria: 'ungroup button',
GroupSeperator: 'Separator for the grouped columns',
UnGroupIcon: 'ungroup the grouped column ',
GroupedSortIcon: 'sort the grouped column ',
GroupedDrag: 'Drag the grouped column',
GroupCaption: ' is groupcaption cell',
CheckBoxLabel: 'checkbox',
SelectAllCheckbox: 'Select all checkbox',
SelectRow: 'Select row',
autoFitAll: 'Autofit all columns',
autoFit: 'Autofit this column',
AutoFitAll: 'Autofit all columns',
AutoFit: 'Autofit this column',
Export: 'Export',
FirstPage: 'First Page',
LastPage: 'Last Page',
PreviousPage: 'Previous Page',
NextPage: 'Next Page',
SortAscending: 'Sort Ascending',
SortDescending: 'Sort Descending',
EditRecord: 'Edit Record',
DeleteRecord: 'Delete Record',
FilterMenu: 'Filter',
SelectAll: 'Select All',
AddCurrentSelection: 'Add current selection to filter',
Blanks: 'Blanks',
FilterTrue: 'True',
FilterFalse: 'False',
NoResult: 'No matches found',
ClearFilter: 'Clear Filter',
Clear: 'Clear',
NumberFilter: 'Number Filters',
TextFilter: 'Text Filters',
DateFilter: 'Date Filters',
DateTimeFilter: 'DateTime Filters',
MatchCase: 'Match Case',
Between: 'Between',
CustomFilter: 'Custom Filter',
CustomFilterPlaceHolder: 'Enter the value',
CustomFilterDatePlaceHolder: 'Choose a date',
AND: 'AND',
OR: 'OR',
ShowRowsWhere: 'Show rows where:',
ToolbarMenuDialogARIA: 'Toolbar menu dialog',
FilterMenuDialogARIA: 'Filter menu',
ExcelFilterDialogARIA: 'Excel filter',
CheckBoxFilterDialogARIA: 'Checkbox filter',
DialogEditARIA: 'Edit dialog',
ColumnMenuDialogARIA: 'Column menu dialog',
CustomFilterDialogARIA: 'Customer filter dialog',
SortAtoZ: 'Sort A to Z',
SortZtoA: 'Sort Z to A',
SortByOldest: 'Sort by Oldest',
SortByNewest: 'Sort by Newest',
SortSmallestToLargest: 'Sort Smallest to Largest',
SortLargestToSmallest: 'Sort Largest to Smallest',
Sort: 'Sort',
SortIcon: 'Sort',
FilterDescription: 'Press Alt Down to open filter Menu',
SortDescription: 'Press Enter to sort',
ColumnMenuDescription: 'Press Alt Down to open Column Menu',
GroupDescription: 'Press Ctrl space to group',
ColumnHeader: ' column header ',
TemplateCell: ' is template cell',
CommandColumnAria: 'is Command column column header ',
DialogEdit: 'Dialog edit',
ClipBoard: 'clipboard',
AscendingText: 'Ascending',
DescendingText: 'Descending',
NoneText: 'None',
Expanded: 'Expanded',
Collapsed: 'Collapsed'
};
this.keyConfigs = {
downArrow: 'downarrow',
upArrow: 'uparrow',
rightArrow: 'rightarrow',
leftArrow: 'leftarrow',
shiftDown: 'shift+downarrow',
shiftUp: 'shift+uparrow',
shiftRight: 'shift+rightarrow',
shiftLeft: 'shift+leftarrow',
home: 'home',
end: 'end',
escape: 'escape',
ctrlHome: 'ctrl+home',
ctrlEnd: 'ctrl+end',
pageUp: 'pageup',
pageDown: 'pagedown',
ctrlAltPageUp: 'ctrl+alt+pageup',
ctrlAltPageDown: 'ctrl+alt+pagedown',
altPageUp: 'alt+pageup',
altPageDown: 'alt+pagedown',
altDownArrow: 'alt+downarrow',
altUpArrow: 'alt+uparrow',
ctrlDownArrow: 'ctrl+downarrow',
ctrlUpArrow: 'ctrl+uparrow',
ctrlPlusA: 'ctrl+A',
ctrlPlusP: 'ctrl+P',
insert: 'insert',
delete: 'delete',
f2: 'f2',
enter: 'enter',
ctrlEnter: 'ctrl+enter',
shiftEnter: 'shift+enter',
tab: 'tab',
shiftTab: 'shift+tab',
space: 'space',
ctrlPlusC: 'ctrl+C',
ctrlShiftPlusH: 'ctrl+shift+H',
ctrlSpace: 'ctrl+space',
ctrlLeftArrow: 'ctrl+leftarrow',
ctrlRightArrow: 'ctrl+rightarrow'
};
};
/**
* For internal use only - To Initialize the component rendering.
*
* @returns {void}
* @private
*/
Grid.prototype.render = function () {
this.log(['module_missing', 'promise_enabled', 'locale_missing', 'check_datasource_columns']);
this.ariaService.setOptions(this.element, { role: 'grid' });
createSpinner({ target: this.element, cssClass: this.cssClass ? this.cssClass : null }, this.createElement);
this.renderModule = new Render(this, this.serviceLocator);
this.searchModule = new Search(this);
this.scrollModule = new Scroll(this);
this.notify(events.initialLoad, {});
if (this.pageSettings.enableQueryString) {
var pageValue = new URL(window.location.href).searchParams.get('page');
if (!isNullOrUndefined(pageValue) && window.location.href.indexOf('?page=') > 0) {
var currentPageValue = parseInt(pageValue, 10);
this.setProperties({ pageSettings: { currentPage: currentPageValue } }, true);
this.pageSettings.currentPage = currentPageValue;
}
}
if ((this.getDataModule().dataManager.dataSource.offline === true || this.getDataModule().dataManager.dataSource.url === undefined)
&& !(!isNullOrUndefined(this.dataSource) && this.dataSource.result)) {
this.isVirtualAdaptive = true;
}
if (this.aggregateModule && this.aggregates.length) {
for (var i = 0; i < this.aggregates.length; i++) {
for (var j = 0; j < this.aggregates[parseInt(i.toString(), 10)].columns.length; j++) {
var column = this.aggregates[parseInt(i.toString(), 10)].columns[parseInt(j.toString(), 10)];
if (column['types']) {
column.type = column['types'];
}
}
}
}
if (this.isReact) {
var args = { requireTemplateRef: this.requireTemplateRef };
this.trigger(events.load, args);
if (!args.requireTemplateRef) {
this.requireTemplateRef = args.requireTemplateRef;
}
}
else {
this.trigger(events.load);
}
prepareColumns(this.columns, this.enableColumnVirtualization, this);
if (this.enableColumnVirtualization && this.isChangeDataSourceCall && this.columnModel) {
this.columnModel = [];
this.updateColumnModel(this.columns);
}
this.isPreparedFrozenColumns = true;
if (this.enablePersistence) {
this.notify(events.columnsPrepared, {});
}
this.getMediaColumns();
setColumnIndex(this.columns);
if (this.isFrozenGrid() && !this.mergedColumns) {
this.setInitialFrozenColumnIndex(this.columns);
}
this.checkLockColumns(this.columns);
this.getColumns();
this.processModel();
this.gridRender();
this.wireEvents();
this.addListener();
this.updateDefaultCursor();
this.updateStackedFilter();
if (this.loadingIndicator.indicatorType === 'Spinner') {
this.showSpinner();
}
this.notify(events.initialEnd, {});
if (this.loadingIndicator.indicatorType === 'Shimmer') {
this.refreshMaskRow();
}
if (this.refreshing) {
this.trigger('created');
}
};
Grid.prototype.setInitialFrozenColumnIndex = function (columns) {
for (var i = 0; i < columns.length; i++) {
var column = columns[parseInt(i.toString(), 10)];
column["" + literals.initialFrozenColumnIndex] = column.index;
if (column.columns) {
this.setInitialFrozenColumnIndex(column.columns);
}
}
};
/**
* By default, grid shows the spinner for all its actions. You can use this method to show spinner at your needed time.
*
* @returns {void}
*/
Grid.prototype.showSpinner = function () {
if (!this.isExportGrid) {
showSpinner(this.element);
}
};
/**
* By default, grid shows the spinner for all its actions. You can use this method to show spinner at your needed time.
*
* @returns {void}
*/
Grid.prototype.hideSpinner = function () {
if (!this.isExportGrid) {
hideSpinner(this.element);
}
};
Grid.prototype.showMaskRow = function (axisDirection, dialogElement) {
if (isNullOrUndefined(this.headerModule) || isNullOrUndefined(this.contentModule)) {
return;
}
var gridHeader = this.getHeaderContent().firstChild;
var gridContent = this.getContent().firstChild;
var gridFooter = this.getFooterContent();
if (dialogElement) {
var dialogHolder = dialogElement.querySelector('.e-checkboxlist');
var maskRowCount = Math.floor(dialogHolder.getBoundingClientRect().height / this.getRowHeight());
var maskTemplate = '<div class="e-ftrchk e-mask-ftrchk">'
+ '<div class="e-checkbox-wrapper"><input class="e-chk-hidden">'
+ this.getShimmerTemplate() + this.getShimmerTemplate() + '</div></div>';
dialogHolder.innerHTML = '';
for (var i = 0; i < maskRowCount; i++) {
dialogHolder.innerHTML += maskTemplate;
dialogHolder.querySelector('.e-ftrchk.e-mask-ftrchk').style.width = '100%';
dialogHolder.querySelector('.e-checkbox-wrapper').style.width = '100%';
var maskSpan = [].slice.call(dialogHolder
.querySelectorAll('.e-mask:not(.e-mask-checkbox-filter-intent):not(.e-mask-checkbox-filter-span-intent)'));
maskSpan[0].classList.add('e-mask-checkbox-filter-intent');
maskSpan[1].classList.add('e-mask-checkbox-filter-span-intent');
}
return;
}
if ((!this.enableRtl && !this.getHeaderContent().style.paddingRight)
|| (this.enableRtl && !this.getHeaderContent().style.paddingLeft)) {
gridContent.style.overflowY = 'hidden';
}
if (!this.isInitialLoad && !this.getColumns().length) {
var contentHeight = gridContent.getBoundingClientRect().height;
var maskTableHeight = contentHeight === 0 ? this.allowPaging ? this.pageSettings.pageSize * this.getRowHeight()
: window.innerHeight : contentHeight;
var contentRowCount = Math.ceil(maskTableHeight / this.getRowHeight());
if (this.rowRenderingMode !== 'Vertical') {
this.headerMaskTable = this.createEmptyMaskTable(gridHeader, 1);
}
this.contentMaskTable = this.createEmptyMaskTable(gridContent, contentRowCount);
return;
}
this.maskRowContentScroll = (this.enableVirtualization || this.enableColumnVirtualization) && axisDirection ? true : false;
if (!this.contentMaskTable) {
var content = gridContent;
if (this.enableVirtualization || this.enableColumnVirtualization) {
content = content.querySelector('.e-virtualtable');
}
if (!isNullOrUndefined(content.querySelector('tbody'))) {
this.contentMaskTable = this.createMaskTable(content, this.getContentMaskColumns(), axisDirection);
}
}
if (!this.headerMaskTable && (this.isFrozenGrid() || (this.enableColumnVirtualization && axisDirection === 'X'))) {
var content = gridHeader;
if (this.enableColumnVirtualization && axisDirection === 'X') {
content = content.querySelector('.e-virtualtable');
}
this.headerMaskTable = this.createMaskTable(content, this.getContentMaskColumns(), axisDirection);
}
if (gridFooter && gridFooter.querySelector('.e-summaryrow')) {
var gridFooterContent = gridFooter.firstChild;
if (!this.footerContentMaskTable) {
var footerContent = gridFooterContent;
this.footerContentMaskTable = this.createMaskTable(footerContent);
}
}
if (!(this.enableVirtualization && axisDirection)) {
EventHandler.add(gridContent, 'scroll', this.translateMaskRow, this);
}
};
Grid.prototype.getContentMaskColumns = function () {
return this.getColumns();
};
Grid.prototype.createEmptyMaskTable = function (maskElement, rowCount) {
var table = this.createElement('table', { className: 'e-table e-masked-table' });
var tbody = this.createElement('tbody', { className: 'e-masked-tbody' });
var row = this.createElement('tr', { className: 'e-masked-row e-row' });
row.style.height = this.getRowHeight() + "px";
var cell = this.createElement('td', { className: 'e-masked-cell e-rowcell' });
cell.innerHTML = this.getShimmerTemplate();
row.appendChild(cell);
for (var i = 0; i < rowCount; i++) {
tbody.appendChild(row.cloneNode(true));
}
table.appendChild(tbody);
maskElement.appendChild(table);
return table;
};
Grid.prototype.createMaskTable = function (element, columns, axisDirection) {
var parentElement = element;
var header = closest(parentElement, '.e-gridheader') ? true : false;
var content = closest(parentElement, '.e-gridcontent') ? true : false;
var footer = closest(parentElement, '.e-gridfooter') ? true : false;
var gridContent = this.getContent().firstChild;
var gridContentScrollHeight = gridContent.scrollHeight;
var table = parentElement.querySelector('table');
var maskTable = table.cloneNode();
maskTable.removeAttribute('role');
maskTable.removeAttribute('id');
updateCSSText(maskTable, "position: absolute; z-index: 5; width: " + table.getBoundingClientRect().width + "px;");
if (header && !(this.enableColumnVirtualization && axisDirection === 'X')) {
maskTable.style.transform = 'translate(0px,'
+ table.querySelector('thead').getBoundingClientRect().height + 'px)';
}
maskTable.setAttribute('class', 'e-table e-masked-table');
var maskColgroup = table.querySelector('colgroup').cloneNode(true);
maskColgroup.removeAttribute('id');
maskColgroup.setAttribute('class', 'e-masked-colgroup');
maskTable.appendChild(maskColgroup);
if (header && this.enableColumnVirtualization && axisDirection === 'X') {
var row = this.createMaskRow(maskColgroup, columns);
if (this.isFrozenGrid()) {
var frzTd = [].slice.call(row.querySelectorAll('.e-rowcell'));
for (var i = 0; i < frzTd.length; i++) {
if (i < this.frozenLeftCount) {
if (this.frozenLeftCount - 1 === i) {
frzTd[parseInt(i.toString(), 10)].classList.add('e-freezeleftborder');
}
frzTd[parseInt(i.toString(), 10)].classList.add('e-leftfreeze');
frzTd[parseInt(i.toString(), 10)].setAttribute('aria-colindex', (i + 1).toString());
frzTd[parseInt(i.toString(), 10)].style.left = (columns[parseInt(i.toString(), 10)].valueX -
this.translateX) + 'px';
}
else if ((frzTd.length - this.frozenRightCount) <= i && columns[parseInt(i.toString(), 10)]) {
if ((frzTd.length - this.frozenRightCount) === i) {
frzTd[parseInt(i.toString(), 10)].classList.add('e-freezerightborder');
}
frzTd[parseInt(i.toString(), 10)].classList.add('e-rightfreeze');
frzTd[parseInt(i.toString(), 10)].setAttribute('aria-colindex', (i + 1).toString());
frzTd[p