UNPKG

@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,381 lines (1,376 loc) 2.65 MB
import { Internationalization, isNullOrUndefined, setCulture, merge, extend as extend$1, Property, attributes, removeClass, addClass, setValue, getValue, remove, updateBlazorTemplate, setStyleAttribute, Droppable, closest, classList, Draggable, createElement, blazorTemplates, resetBlazorTemplate, getEnumValue, EventHandler, Browser, formatUnit, ChildProperty, isUndefined, select, Collection, compile, L10n, Component, updateCSSText, append, KeyboardEvents, SanitizeHtmlHelper, Complex, Event as Event$1, NotifyPropertyChanges, defaultCurrencyCode, detach, print, selectAll, isObject, debounce, matches, initializeCSPTemplate } from '@syncfusion/ej2-base'; import { Query, DataUtil, DataManager, RemoteSaveAdaptor, Predicate as Predicate$1, Deferred, UrlAdaptor } from '@syncfusion/ej2-data'; import { Dialog, createSpinner, showSpinner, hideSpinner, Tooltip, calculateRelativeBasedPosition, calculatePosition } from '@syncfusion/ej2-popups'; import { Button, createCheckBox, RadioButton, CheckBox, Switch } from '@syncfusion/ej2-buttons'; import { Input, NumericTextBox, TextBox, FormValidator, MaskedTextBox } from '@syncfusion/ej2-inputs'; import { DropDownList, AutoComplete, MultiSelect, CheckBoxSelection, ComboBox } from '@syncfusion/ej2-dropdowns'; import { DatePicker, DateTimePicker, MaskedDateTime, TimePicker } from '@syncfusion/ej2-calendars'; import { ContextMenu as ContextMenu$1, Toolbar as Toolbar$1 } from '@syncfusion/ej2-navigations'; import { Workbook } from '@syncfusion/ej2-excel-export'; import { PdfPageSettings, PdfDocument, PdfGridLayoutFormat, PdfLayoutType, PdfLayoutBreakType, RectangleF, PdfPageOrientation, PdfGrid, PdfFontFamily, PdfColor, PdfStandardFont, PdfSolidBrush, PdfFontStyle, PdfTrueTypeFont, PdfBorders, PdfPen, PdfStringFormat, PdfTextAlignment, PdfPaddings, PointF, SizeF, PdfPageTemplateElement, PdfPageNumberField, PdfPageCountField, PdfCompositeField, PdfBitmap, PdfTextWebLink, PdfVerticalAlignment } from '@syncfusion/ej2-pdf-export'; /** * ValueFormatter class to globalize the value. * * @hidden */ class ValueFormatter { constructor(cultureName) { this.intl = new Internationalization(); if (!isNullOrUndefined(cultureName)) { this.intl.culture = cultureName; } } getFormatFunction(format) { if (!isNullOrUndefined(format) && (format.type === 'dateTime' || format.type === 'datetime' || format.type === 'date' || format.type === 'time')) { return this.intl.getDateFormat(format); } else { return this.intl.getNumberFormat(format); } } getParserFunction(format) { if (format.type) { return this.intl.getDateParser(format); } else { return this.intl.getNumberParser(format); } } fromView(value, format, type) { if ((type === 'date' || type === 'datetime' || type === 'number') && (!isNullOrUndefined(format)) && !isNullOrUndefined(value)) { return format(value); } else { return value; } } toView(value, format) { let result = value; if (!isNullOrUndefined(format) && !isNullOrUndefined(value)) { result = format(value); } return result; } setCulture(cultureName) { if (!isNullOrUndefined(cultureName)) { setCulture(cultureName); } } } var __decorate = (undefined && undefined.__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; }; /** * Represents Grid `Column` model class. */ class Column { constructor(options, parent) { /** * If `disableHtmlEncode` is set to true, it encodes the HTML of the header and content cells. * * @default true */ this.disableHtmlEncode = true; /** * Allows grid to perform row spanning on the specified column. * * @default true */ this.enableRowSpan = true; /** * Allows grid to perform column spanning on the specified column. * * @default true */ this.enableColumnSpan = true; /** * If `allowSorting` set to false, then it disables sorting option of a particular column. * By default all columns are sortable. * * @default true */ this.allowSorting = true; /** * If `allowResizing` is set to false, it disables resize option of a particular column. * By default all the columns can be resized. * * @default true */ this.allowResizing = true; /** * If `allowFiltering` set to false, then it disables filtering option and filter bar element of a particular column. * By default all columns are filterable. * * @default true */ this.allowFiltering = true; /** * If `allowGrouping` set to false, then it disables grouping of a particular column. * By default all columns are groupable. * * @default true */ this.allowGrouping = true; /** * If `allowReordering` set to false, then it disables reorder of a particular column. * By default all columns can be reorder. * * @default true */ this.allowReordering = true; /** * If `showColumnMenu` set to false, then it disable the column menu of a particular column. * By default column menu will show for all columns * * @default true */ this.showColumnMenu = true; /** * If `enableGroupByFormat` set to true, then it groups the particular column by formatted values. * * @default true */ this.enableGroupByFormat = false; /** * If `allowEditing` set to false, then it disables editing of a particular column. * By default all columns are editable. * * @default true */ this.allowEditing = true; /** * It is used to customize the default filter options for a specific columns. * * type - Specifies the filter type as menu or checkbox. * * ui - to render custom component for specific column it has following functions. * * ui.create – It is used for creating custom components. * * ui.read - It is used for read the value from the component. * * ui.write - It is used to apply component model as dynamically. * {% codeBlock src="grid/filter-menu-api/index.ts" %}{% endcodeBlock %} * * > Check the [`Filter UI`](../../grid/filtering/filter-menu/#custom-component-in-filter-menu) for its customization. * * @default {} */ this.filter = {}; /** * If `showInColumnChooser` set to false, then hide the particular column in column chooser. * By default all columns are displayed in column Chooser. * * @default true */ this.showInColumnChooser = true; /** * Defines the `IEditCell` object to customize default edit cell. * * @default {} */ this.edit = {}; /** * If `allowSearching` set to false, then it disables Searching of a particular column. * By default all columns allow Searching. * * @default true */ this.allowSearching = true; /** * If `autoFit` set to true, then the particular column content width will be * adjusted based on its content in the initial rendering itself. * Setting this property as true is equivalent to calling `autoFitColumns` method in the `dataBound` event. * * @default false */ this.autoFit = false; this.sortDirection = 'Descending'; /** * @returns {Function} returns the edit template * @hidden */ this.getEditTemplate = () => this.editTemplateFn; /** * @returns {Function} returns the filter template * @hidden */ this.getFilterTemplate = () => this.filterTemplateFn; /** * Determines the behavior of the `aria-label` attribute for cells in template columns. * If enableAriaLabel is set to false, the aria-label attribute is not applied to template column cells, which affects screen reader accessibility. * * @default {} */ this.templateOptions = { enableAriaLabel: true }; merge(this, options); this.parent = parent; if (this.type === 'none') { this.type = null; } else if (this.type) { this.type = typeof (this.type) === 'string' ? this.type.toLowerCase() : undefined; } if (this.editType) { this.editType = this.editType.toLowerCase(); } if (isNullOrUndefined(this.uid)) { this.uid = getUid('grid-column'); } const valueFormatter = new ValueFormatter(); if (options.format && (options.format.skeleton || (options.format.format && typeof options.format.format === 'string'))) { this.setFormatter(valueFormatter.getFormatFunction(extend$1({}, options.format))); this.setParser(valueFormatter.getParserFunction(options.format)); } this.toJSON = () => { const col = {}; const skip = ['filter', 'dataSource', 'headerText', 'template', 'headerTemplate', 'edit', 'editTemplate', 'filterTemplate', 'commandsTemplate', 'parent']; const keys = Object.keys(this); for (let i = 0; i < keys.length; i++) { if (keys[parseInt(i.toString(), 10)] === 'columns') { col[keys[parseInt(i.toString(), 10)]] = []; for (let j = 0; j < this[keys[parseInt(i.toString(), 10)]].length; j++) { col[keys[parseInt(i.toString(), 10)]].push(this[keys[parseInt(i.toString(), 10)]][parseInt(j.toString(), 10)].toJSON()); } } else if (skip.indexOf(keys[parseInt(i.toString(), 10)]) < 0) { col[keys[parseInt(i.toString(), 10)]] = this[keys[parseInt(i.toString(), 10)]]; } } return col; }; if (!this.field) { this.allowFiltering = false; this.allowGrouping = false; this.allowSorting = false; this.enableColumnSpan = false; this.enableRowSpan = false; if (this.columns) { this.allowResizing = this.columns.some((col) => { return col.allowResizing; }); } } if (this.commands && !this.textAlign) { this.textAlign = 'Right'; } if (this.template || this.commandsTemplate) { this.templateFn = templateCompiler(this.template || this.commandsTemplate); } if (this.headerTemplate) { this.headerTemplateFn = templateCompiler(this.headerTemplate); } if (!isNullOrUndefined(this.filter) && this.filter.itemTemplate) { this.fltrTemplateFn = templateCompiler(this.filter.itemTemplate); } if (this.editTemplate) { this.editTemplateFn = templateCompiler(this.editTemplate); } if (this.filterTemplate) { this.filterTemplateFn = templateCompiler(this.filterTemplate); } if (this.isForeignColumn() && (isNullOrUndefined(this.editType) || this.editType === 'dropdownedit' || this.editType === 'defaultedit')) { this.editType = 'dropdownedit'; if (this.edit.params && this.edit.params.dataSource) { this.edit.params.ddEditedData = true; } this.edit.params = extend$1({ dataSource: this.dataSource, query: new Query(), fields: { value: this.foreignKeyField || this.field, text: this.foreignKeyValue } }, this.edit.params); } if (this.sortComparer) { let a = this.sortComparer; this.sortComparer = (x, y, xObj, yObj) => { if (typeof a === 'string') { a = getObject(a, window); } if (this.sortDirection === 'Descending') { const z = x; x = y; y = z; const obj = xObj; xObj = yObj; yObj = obj; } return a(x, y, xObj, yObj); }; } if (!this.sortComparer && this.isForeignColumn()) { this.sortComparer = (x, y) => { x = getObject(this.foreignKeyValue, getForeignData(this, {}, x)[0]); y = getObject(this.foreignKeyValue, getForeignData(this, {}, y)[0]); return this.sortDirection === 'Descending' ? DataUtil.fnDescending(x, y) : DataUtil.fnAscending(x, y); }; } } /** * @returns {string} returns the sort direction * @hidden */ getSortDirection() { return this.sortDirection; } /** * @param {string} direction - specifies the direction * @returns {void} * @hidden */ setSortDirection(direction) { this.sortDirection = direction; } /** * @returns {freezeTable} returns the FreezeTable * @hidden */ getFreezeTableName() { return this.freezeTable; } /** * @param {Column} column - specifies the column * @returns {void} * @hidden */ setProperties(column) { //Angular two way binding const keys = Object.keys(column); for (let i = 0; i < keys.length; i++) { if (keys[parseInt(i.toString(), 10)] === 'columns') { const cols = column[keys[parseInt(i.toString(), 10)]]; for (let j = 0; j < cols.length; j++) { this.columns.find((col) => { return col.field === cols[parseInt(j.toString(), 10)] .field; }).setProperties(cols[parseInt(j.toString(), 10)]); } } else { this[keys[parseInt(i.toString(), 10)]] = column[keys[parseInt(i.toString(), 10)]]; } //Refresh the react columnTemplates on state change if (this.parent && this.parent.isReact) { if (keys[parseInt(i.toString(), 10)] === 'template') { this.templateFn = templateCompiler(column[keys[parseInt(i.toString(), 10)]]); this.parent.refreshReactColumnTemplateByUid(this.uid, true); } else if (keys[parseInt(i.toString(), 10)] === 'headerTemplate') { this.headerTemplateFn = templateCompiler(column[keys[parseInt(i.toString(), 10)]]); this.parent.refreshReactHeaderTemplateByUid(this.uid); } else if (keys[parseInt(i.toString(), 10)] === 'editTemplate') { this.editTemplateFn = templateCompiler(column[keys[parseInt(i.toString(), 10)]]); } else if (keys[parseInt(i.toString(), 10)] === 'filterTemplate') { this.filterTemplateFn = templateCompiler(column[keys[parseInt(i.toString(), 10)]]); } else if (keys[parseInt(i.toString(), 10)] === 'commandsTemplate') { this.templateFn = templateCompiler(column[keys[parseInt(i.toString(), 10)]]); } } } } /** * @returns {boolean} returns true for foreign column * @hidden * It defines the column is foreign key column or not. */ isForeignColumn() { return !!(this.dataSource && this.foreignKeyValue); } /** * @returns {Function} returns the function * @hidden */ getFormatter() { return this.formatFn; } /** * @param {Function} value - specifies the value * @returns {void} * @hidden */ setFormatter(value) { this.formatFn = value; } /** * @returns {Function} returns the function * @hidden */ getParser() { return this.parserFn; } /** * @param {Function} value - specifies the value * @returns {void} * @hidden */ setParser(value) { this.parserFn = value; } /** * @returns {Function} returns the function * @hidden */ getColumnTemplate() { return this.templateFn; } /** * @returns {Function} returns the function * @hidden */ getHeaderTemplate() { return this.headerTemplateFn; } /** * @returns {Function} returns the function * @hidden */ getFilterItemTemplate() { return this.fltrTemplateFn; } /** * @returns {string} returns the string * @hidden */ getDomSetter() { return this.disableHtmlEncode ? 'textContent' : 'innerHTML'; } } /** * Define options for custom command buttons. */ class CommandColumnModel { } __decorate([ Property() ], CommandColumnModel.prototype, "title", void 0); __decorate([ Property() ], CommandColumnModel.prototype, "type", void 0); __decorate([ Property() ], CommandColumnModel.prototype, "buttonOption", void 0); /** * Defines Grid column */ class GridColumn extends Column { } __decorate([ Property(null) ], GridColumn.prototype, "columns", void 0); /** * Defines stacked grid column */ class StackedColumn extends GridColumn { } /** @hidden */ const created = 'create'; /** @hidden */ const destroyed = 'destroy'; /** @hidden */ const load = 'load'; /** @hidden */ const rowDataBound = 'rowDataBound'; /** @hidden */ const queryCellInfo = 'queryCellInfo'; /** @hidden */ const headerCellInfo = 'headerCellInfo'; /** @hidden */ const actionBegin = 'actionBegin'; /** @hidden */ const actionComplete = 'actionComplete'; /** @hidden */ const actionFailure = 'actionFailure'; /** @hidden */ const dataBound = 'dataBound'; /** @hidden */ const rowSelecting = 'rowSelecting'; /** @hidden */ const rowSelected = 'rowSelected'; /** @hidden */ const rowDeselecting = 'rowDeselecting'; /** @hidden */ const rowDeselected = 'rowDeselected'; /** @hidden */ const cellSelecting = 'cellSelecting'; /** @hidden */ const cellSelected = 'cellSelected'; /** @hidden */ const cellDeselecting = 'cellDeselecting'; /** @hidden */ const cellDeselected = 'cellDeselected'; /** @hidden */ const columnSelecting = 'columnSelecting'; /** @hidden */ const columnSelected = 'columnSelected'; /** @hidden */ const columnDeselecting = 'columnDeselecting'; /** @hidden */ const columnDeselected = 'columnDeselected'; /** @hidden */ const columnDragStart = 'columnDragStart'; /** @hidden */ const columnDrag = 'columnDrag'; /** @hidden */ const columnDrop = 'columnDrop'; /** @hidden */ const rowDragStartHelper = 'rowDragStartHelper'; /** @hidden */ const rowDragStart = 'rowDragStart'; /** @hidden */ const rowDrag = 'rowDrag'; /** @hidden */ const rowDrop = 'rowDrop'; /** @hidden */ const beforePrint = 'beforePrint'; /** @hidden */ const printComplete = 'printComplete'; /** @hidden */ const detailDataBound = 'detailDataBound'; /** @hidden */ const toolbarClick = 'toolbarClick'; /** @hidden */ const batchAdd = 'batchAdd'; /** @hidden */ const batchCancel = 'batchCancel'; /** @hidden */ const batchDelete = 'batchDelete'; /** @hidden */ const beforeBatchAdd = 'beforeBatchAdd'; /** @hidden */ const beforeBatchDelete = 'beforeBatchDelete'; /** @hidden */ const beforeBatchSave = 'beforeBatchSave'; /** @hidden */ const beginEdit = 'beginEdit'; /** @hidden */ const cellEdit = 'cellEdit'; /** @hidden */ const cellSave = 'cellSave'; /** @hidden */ const cellSaved = 'cellSaved'; /** @hidden */ const endAdd = 'endAdd'; /** @hidden */ const endDelete = 'endDelete'; /** @hidden */ const endEdit = 'endEdit'; /** @hidden */ const recordDoubleClick = 'recordDoubleClick'; /** @hidden */ const recordClick = 'recordClick'; /** @hidden */ const beforeDataBound = 'beforeDataBound'; /** @hidden */ const beforeOpenColumnChooser = 'beforeOpenColumnChooser'; /** @hidden */ const beforeOpenAdaptiveDialog = 'beforeOpenAdaptiveDialog'; /** @hidden */ const resizeStart = 'resizeStart'; /** @hidden */ const onResize = 'resizing'; /** @hidden */ const resizeStop = 'resizeStop'; /** @hidden */ const checkBoxChange = 'checkBoxChange'; /** @hidden */ const beforeCopy = 'beforeCopy'; /** @hidden */ const beforePaste = 'beforePaste'; /** @hidden */ const beforeAutoFill = 'beforeAutoFill'; /** @hidden */ const filterChoiceRequest = 'filterchoicerequest'; /** @hidden */ const filterAfterOpen = 'filterAfterOpen'; /** @hidden */ const filterBeforeOpen = 'filterBeforeOpen'; /** @hidden */ const filterSearchBegin = 'filterSearchBegin'; /** @hidden */ const commandClick = 'commandClick'; /** @hidden */ const exportGroupCaption = 'exportGroupCaption'; /** @hidden */ const lazyLoadGroupExpand = 'lazyLoadGroupExpand'; /** @hidden */ const lazyLoadGroupCollapse = 'lazyLoadGroupCollapse'; /** * Specifies grid internal events */ /** @hidden */ const initialLoad = 'initial-load'; /** @hidden */ const initialEnd = 'initial-end'; /** @hidden */ const dataReady = 'data-ready'; /** @hidden */ const contentReady = 'content-ready'; /** @hidden */ const uiUpdate = 'ui-update'; /** @hidden */ const onEmpty = 'on-empty'; /** @hidden */ const inBoundModelChanged = 'inbound-model-changed'; /** @hidden */ const modelChanged = 'model-changed'; /** @hidden */ const colGroupRefresh = 'colgroup-refresh'; /** @hidden */ const headerRefreshed = 'header-refreshed'; /** @hidden */ const pageBegin = 'paging-begin'; /** @hidden */ const pageComplete = 'paging-complete'; /** @hidden */ const sortBegin = 'sorting-begin'; /** @hidden */ const sortComplete = 'sorting-complete'; /** @hidden */ const filterBegin = 'filtering-begin'; /** @hidden */ const filterComplete = 'filtering-complete'; /** @hidden */ const searchBegin = 'searching-begin'; /** @hidden */ const searchComplete = 'searching-complete'; /** @hidden */ const reorderBegin = 'reorder-begin'; /** @hidden */ const reorderComplete = 'reorder-complete'; /** @hidden */ const rowDragAndDropBegin = 'rowdraganddrop-begin'; /** @hidden */ const rowDragAndDropComplete = 'rowdraganddrop-complete'; /** @hidden */ const groupBegin = 'grouping-begin'; /** @hidden */ const groupComplete = 'grouping-complete'; /** @hidden */ const ungroupBegin = 'ungrouping-begin'; /** @hidden */ const ungroupComplete = 'ungrouping-complete'; /** @hidden */ const groupAggregates = 'group-aggregates'; /** @hidden */ const refreshFooterRenderer = 'refresh-footer-rendered'; /** @hidden */ const refreshAggregateCell = 'refresh-aggregate-cell'; /** @hidden */ const refreshAggregates = 'refresh-aggregates'; /** @hidden */ const rowSelectionBegin = 'rowselecting'; /** @hidden */ const rowSelectionComplete = 'rowselected'; /** @hidden */ const columnSelectionBegin = 'columnselecting'; /** @hidden */ const columnSelectionComplete = 'columnselected'; /** @hidden */ const cellSelectionBegin = 'cellselecting'; /** @hidden */ const cellSelectionComplete = 'cellselected'; /** @hidden */ const destroyAutoFillElements = 'destroy-autofill-elements'; /** @hidden */ const beforeCellFocused = 'beforecellfocused'; /** @hidden */ const cellFocused = 'cellfocused'; /** @hidden */ const keyPressed = 'key-pressed'; /** @hidden */ const click = 'click'; /** @hidden */ const destroy = 'destroy'; /** @hidden */ const columnVisibilityChanged = 'column-visible-changed'; /** @hidden */ const scroll = 'scroll'; /** @hidden */ const columnWidthChanged = 'column-width-changed'; /** @hidden */ const columnPositionChanged = 'column-position-changed'; /** @hidden */ const rowDragAndDrop = 'row-drag-and-drop'; /** @hidden */ const rowsAdded = 'rows-added'; /** @hidden */ const rowsRemoved = 'rows-removed'; /** @hidden */ const columnDragStop = 'column-drag-stop'; /** @hidden */ const headerDrop = 'header-drop'; /** @hidden */ const dataSourceModified = 'datasource-modified'; /** @hidden */ const refreshComplete = 'refresh-complete'; /** @hidden */ const refreshVirtualBlock = 'refresh-virtual-block'; /** @hidden */ const dblclick = 'dblclick'; /** @hidden */ const toolbarRefresh = 'toolbar-refresh'; /** @hidden */ const bulkSave = 'bulk-save'; /** @hidden */ const autoCol = 'auto-col'; /** @hidden */ const tooltipDestroy = 'tooltip-destroy'; /** @hidden */ const updateData = 'update-data'; /** @hidden */ const editBegin = 'edit-begin'; /** @hidden */ const editComplete = 'edit-complete'; /** @hidden */ const addBegin = 'add-begin'; /** @hidden */ const addComplete = 'add-complete'; /** @hidden */ const saveComplete = 'save-complete'; /** @hidden */ const deleteBegin = 'delete-begin'; /** @hidden */ const deleteComplete = 'delete-complete'; /** @hidden */ const refreshAggregateComplete = 'refresh-aggregate-on-save-complete'; /** @hidden */ const preventBatch = 'prevent-batch'; /** @hidden */ const dialogDestroy = 'dialog-destroy'; /** @hidden */ const crudAction = 'crud-Action'; /** @hidden */ const addDeleteAction = 'add-delete-Action'; /** @hidden */ const destroyForm = 'destroy-form'; /** @hidden */ const doubleTap = 'double-tap'; /** @hidden */ const beforeExcelExport = 'beforeExcelExport'; /** @hidden */ const excelExportComplete = 'excelExportComplete'; /** @hidden */ const excelQueryCellInfo = 'excelQueryCellInfo'; /** @hidden */ const excelHeaderQueryCellInfo = 'excelHeaderQueryCellInfo'; /** @hidden */ const exportDetailDataBound = 'exportDetailDataBound'; /** @hidden */ const exportDetailTemplate = 'exportDetailTemplate'; /** @hidden */ const beforePdfExport = 'beforePdfExport'; /** @hidden */ const pdfExportComplete = 'pdfExportComplete'; /** @hidden */ const pdfQueryCellInfo = 'pdfQueryCellInfo'; /** @hidden */ const pdfHeaderQueryCellInfo = 'pdfHeaderQueryCellInfo'; /** @hidden */ const accessPredicate = 'access-predicate'; /** @hidden */ const contextMenuClick = 'contextMenuClick'; /** @hidden */ const freezeRender = 'freezerender'; /** @hidden */ const freezeRefresh = 'freezerefresh'; /** @hidden */ const contextMenuOpen = 'contextMenuOpen'; /** @hidden */ const contextMenuClose = 'contextMenuClose'; /** @hidden */ const columnMenuClick = 'columnMenuClick'; /** @hidden */ const columnMenuOpen = 'columnMenuOpen'; /** @hidden */ const columnMenuClose = 'columnMenuClose'; /** @hidden */ const filterOpen = 'filterOpen'; /** @hidden */ const filterDialogCreated = 'filterDialogCreated'; /** @hidden */ const filterMenuClose = 'filter-menu-close'; /** @hidden */ const initForeignKeyColumn = 'initForeignKeyColumn'; /** @hidden */ const getForeignKeyData = 'getForeignKeyData'; /** @hidden */ const generateQuery = 'generateQuery'; /** @hidden */ const showEmptyGrid = 'showEmptyGrid'; /** @hidden */ const foreignKeyData = 'foreignKeyData'; /** @hidden */ const columnDataStateChange = 'columnDataStateChange'; /** @hidden */ const dataStateChange = 'dataStateChange'; /** @hidden */ const dataSourceChanged = 'dataSourceChanged'; /** @hidden */ const rtlUpdated = 'rtl-updated'; /** @hidden */ const beforeFragAppend = 'beforeFragAppend'; /** @hidden */ const frozenHeight = 'frozenHeight'; /** @hidden */ const textWrapRefresh = 'textWrapRefresh'; /** @hidden */ const recordAdded = 'recordAdded'; /** @hidden */ const cancelBegin = 'cancel-Begin'; /** @hidden */ const editNextValCell = 'editNextValCell'; /** @hidden */ const hierarchyPrint = 'hierarchyprint'; /** @hidden */ const expandChildGrid = 'expandchildgrid'; /** @hidden */ const printGridInit = 'printGrid-Init'; /** @hidden */ const exportRowDataBound = 'export-RowDataBound'; /** @hidden */ const exportDataBound = 'export-DataBound'; /** @hidden */ const rowPositionChanged = 'row-position-changed'; /** @hidden */ const columnChooserOpened = 'columnChooserOpened'; /** @hidden */ const batchForm = 'batchedit-form'; /** @hidden */ const beforeStartEdit = 'edit-form'; /** @hidden */ const beforeBatchCancel = 'before-batch-cancel'; /** @hidden */ const batchEditFormRendered = 'batcheditform-rendered'; /** @hidden */ const partialRefresh = 'partial-refresh'; /** @hidden */ const beforeCustomFilterOpen = 'beforeCustomFilterOpen'; /** @hidden */ const customFilterOpen = 'customFilterOpen'; /** @hidden */ const selectVirtualRow = 'select-virtual-Row'; /** @hidden */ const columnsPrepared = 'columns-prepared'; /** @hidden */ const cBoxFltrBegin = 'cbox-filter-begin'; /** @hidden */ const cBoxFltrComplete = 'cbox-filter-complete'; /** @hidden */ const fltrPrevent = 'filter-Prevent'; /** @hidden */ const beforeFltrcMenuOpen = 'before-filter-cmenu-open'; /** @hidden */ const valCustomPlacement = 'validation-custom-placement'; /** @hidden */ const filterCboxValue = 'filter-cbox-value'; /** @hidden */ const componentRendered = 'component-rendered'; /** @hidden */ const restoreFocus = 'restore-Focus'; /** @hidden */ const detailStateChange = 'detail-state-change'; /** @hidden */ const detailIndentCellInfo = 'detail-indentcell-info'; /** @hidden */ const virtaulKeyHandler = 'virtaul-key-handler'; /** @hidden */ const virtaulCellFocus = 'virtaul-cell-focus'; /** @hidden */ const virtualScrollEditActionBegin = 'virtual-scroll-edit-action-begin'; /** @hidden */ const virtualScrollEditSuccess = 'virtual-scroll-edit-success'; /** @hidden */ const virtualScrollEditCancel = 'virtual-scroll-edit-cancel'; /** @hidden */ const virtualScrollEdit = 'virtual-scroll-edit'; /** @hidden */ const refreshVirtualCache = 'refresh-virtual-cache'; /** @hidden */ const editReset = 'edit-reset'; /** @hidden */ const virtualScrollAddActionBegin = 'virtual-scroll-add-action-begin'; /** @hidden */ const getVirtualData = 'get-virtual-data'; /** @hidden */ const refreshInfiniteModeBlocks = 'refresh-infinite-mode-blocks'; /** @hidden */ const resetInfiniteBlocks = 'reset-infinite-blocks'; /** @hidden */ const infiniteScrollHandler = 'infinite-scroll-handler'; /** @hidden */ const infinitePageQuery = 'infinite-page-query'; /** @hidden */ const infiniteShowHide = 'infinite-show-hide'; /** @hidden */ const appendInfiniteContent = 'append-infinite-content'; /** @hidden */ const removeInfiniteRows = 'remove-infinite-rows'; /** @hidden */ const setInfiniteCache = 'set-infinite-cache'; /** @hidden */ const infiniteEditHandler = 'infinite-edit-handler'; /** @hidden */ const initialCollapse = 'initial-collapse'; /** @hidden */ const getAggregateQuery = 'get-aggregate-query'; /** @hidden */ const closeFilterDialog = 'close-filter-dialog'; /** @hidden */ const columnChooserCancelBtnClick = 'columnChooserCancelBtnClick'; /** @hidden */ const getFilterBarOperator = 'get-filterbar-operator'; /** @hidden */ const resetColumns = 'reset-columns'; /** @hidden */ const pdfAggregateQueryCellInfo = 'pdfAggregateQueryCellInfo'; /** @hidden */ const excelAggregateQueryCellInfo = 'excelAggregateQueryCellInfo'; /** @hidden */ const setGroupCache = 'group-cache'; /** @hidden */ const lazyLoadScrollHandler = 'lazy-load-scroll-handler'; /** @hidden */ const groupCollapse = 'group-collapse'; /** @hidden */ const beforeCheckboxRenderer = 'beforeCheckboxRenderer'; /** @hidden */ const refreshHandlers = 'refreshResizeHandlers'; /** @hidden */ const refreshFrozenColumns = 'refresh-frozen-columns'; /** @hidden */ const setReorderDestinationElement = 'set-reorder-destination-element'; /** @hidden */ const refreshVirtualFrozenHeight = 'refresh-virtual-frozen-height'; /** @hidden */ const setFreezeSelection = 'set-freeze-selection'; /** @hidden */ const setInfiniteFrozenHeight = 'set-infinite-frozen-height'; /** @hidden */ const setInfiniteColFrozenHeight = 'set-infinite-col-frozen-height'; /** @hidden */ const beforeRefreshOnDataChange = 'before-refresh-on-data-change'; /** @hidden */ const immutableBatchCancel = 'immutable-batch-cancel'; /** @hidden */ const refreshVirtualFrozenRows = 'refresh-virtual-frozenrows'; /** @hidden */ const checkScrollReset = 'check-scroll-reset'; /** @hidden */ const refreshFrozenHeight = 'refresh-frozen-height'; /** @hidden */ const setHeightToFrozenElement = 'set-height-to-frozen-element'; /** @hidden */ const preventFrozenScrollRefresh = 'prevent-frozen-scroll-refresh'; /** @hidden */ const nextCellIndex = 'next-cell-index'; /** @hidden */ const refreshInfiniteCurrentViewData = 'refresh-infinite-current-view-data'; /** @hidden */ const infiniteCrudCancel = 'infinite-crud-cancel'; /** @hidden */ const filterDialogClose = 'filter-dialog-close'; /** @hidden */ const refreshCustomFilterOkBtn = 'refresh-cutsom-filter-ok-button'; /** @hidden */ const refreshCustomFilterClearBtn = 'refresh-cutsom-filter-clear-button'; /** @hidden */ const renderResponsiveCmenu = 'render-responsive-cmenu'; /** @hidden */ const filterCmenuSelect = 'filter-cmenu-select'; /** @hidden */ const customFilterClose = 'custom-filter-close'; /** @hidden */ const setFullScreenDialog = 'set-fullscreen-dialog'; /** @hidden */ const refreshExpandandCollapse = 'refresh-Expand-and-Collapse'; /** @hidden */ const rowModeChange = 'row-mode-change'; /** @hidden */ const enterKeyHandler = 'enter-key-handler'; /** @hidden */ const refreshVirtualMaxPage = 'refresh-virtual-max-page'; /** @hidden */ const setVirtualPageQuery = 'set-virtual-page-query'; /** @hidden */ const selectRowOnContextOpen = 'select-row-on-context-open'; /** @hidden */ const pagerRefresh = 'pager-refresh'; /** @hidden */ const closeInline = 'closeinline'; /** @hidden */ const closeBatch = 'closebatch'; /** @hidden */ const closeEdit = 'close-edit'; /** @hidden */ const resetVirtualFocus = 'reset-virtual-focus'; /** @hidden */ const afterContentRender = 'after-content-renderer'; /** @hidden */ const refreshVirtualEditFormCells = 'refresh-virtual-editform-cells'; /** @hidden */ const scrollToEdit = 'scroll-to-edit'; /** @hidden */ const beforeCheckboxRendererQuery = 'before-checkbox-renderer-query'; /** @hidden */ const createVirtualValidationForm = 'create-virtual-validation-form'; /** @hidden */ const validateVirtualForm = 'validate-virtual-form'; /** @hidden */ const destroyChildGrid = 'destroy-child-grid'; /** @hidden */ const stickyScrollComplete = 'sticky-scroll-complete'; /** @hidden */ const captionActionComplete = 'infinite-group-collapse'; /** @hidden */ const refreshInfinitePersistSelection = 'refresh-infinite-persist-selection'; /** @hidden */ const refreshInfiniteEditrowindex = 'refresh-infinite-editrowindex'; /** @hidden */ const afterFilterColumnMenuClose = 'after-filter-column-menu-close'; /** @hidden */ const beforeCheckboxfilterRenderer = 'beforeCheckboxfilterRenderer'; /** @hidden */ const commandColumnDestroy = 'commandColumnDestroy'; /** @hidden */ const batchCnfrmDlgCancel = 'cancelcnfrmDlg'; /** @hidden */ const refreshVirtualLazyLoadCache = 'refresh-Virtual-LazyLoad-Cache'; /** @hidden */ const refreshFrozenPosition = 'refresh-Frozen-Position'; /** @hidden */ const refreshResizePosition = 'refresh-Resize-Position'; /** @hidden */ const refreshSplitFrozenColumn = 'refresh-Split-Frozen-Column'; /** @hidden */ const renderResponsiveChangeAction = 'render-Responsive-Change-Action'; /** @hidden */ const renderResponsiveColumnChooserDiv = 'render-Responsive-Column-Chooser-Div'; /** @hidden */ const showAddNewRowFocus = 'show-Add-New-Row-Focus'; /** @hidden */ const infiniteScrollComplete = 'infinitescroll-complete'; /** @hidden */ const lastRowCellBorderUpdated = 'last-rowcell-border-updated'; /** @hidden */ const columnChooserSearch = 'columnChooserSearch'; /** @hidden */ const columnChooserClose = 'columnChooserClose'; /** @hidden */ const columnChooserUpdate = 'columnChooserUpdate'; /** @hidden */ const destroyEditForm = 'destroy-edit-form'; /** @hidden */ const beforeDetailTemplateDetach = 'beforeDetailTemplateDetach'; /** @hidden */ const detachDetailTemplate = 'detach-detail-template'; /** @hidden */ const beforeSetPartialRecords = 'beforeSetPartialRecords'; /** * Defines types of Cell * * @hidden */ var CellType; (function (CellType) { /** Defines CellType as Data */ CellType[CellType["Data"] = 0] = "Data"; /** Defines CellType as Header */ CellType[CellType["Header"] = 1] = "Header"; /** Defines CellType as Summary */ CellType[CellType["Summary"] = 2] = "Summary"; /** Defines CellType as GroupSummary */ CellType[CellType["GroupSummary"] = 3] = "GroupSummary"; /** Defines CellType as CaptionSummary */ CellType[CellType["CaptionSummary"] = 4] = "CaptionSummary"; /** Defines CellType as Filter */ CellType[CellType["Filter"] = 5] = "Filter"; /** Defines CellType as Indent */ CellType[CellType["Indent"] = 6] = "Indent"; /** Defines CellType as GroupCaption */ CellType[CellType["GroupCaption"] = 7] = "GroupCaption"; /** Defines CellType as GroupCaptionEmpty */ CellType[CellType["GroupCaptionEmpty"] = 8] = "GroupCaptionEmpty"; /** Defines CellType as Expand */ CellType[CellType["Expand"] = 9] = "Expand"; /** Defines CellType as HeaderIndent */ CellType[CellType["HeaderIndent"] = 10] = "HeaderIndent"; /** Defines CellType as StackedHeader */ CellType[CellType["StackedHeader"] = 11] = "StackedHeader"; /** Defines CellType as DetailHeader */ CellType[CellType["DetailHeader"] = 12] = "DetailHeader"; /** Defines CellType as DetailExpand */ CellType[CellType["DetailExpand"] = 13] = "DetailExpand"; /** Defines CellType as CommandColumn */ CellType[CellType["CommandColumn"] = 14] = "CommandColumn"; /** Defines CellType as DetailFooterIntent */ CellType[CellType["DetailFooterIntent"] = 15] = "DetailFooterIntent"; /** Defines CellType as RowDrag */ CellType[CellType["RowDragIcon"] = 16] = "RowDragIcon"; /** Defines CellType as RowDragHeader */ CellType[CellType["RowDragHIcon"] = 17] = "RowDragHIcon"; })(CellType || (CellType = {})); /** * Defines types of Render * * @hidden */ var RenderType; (function (RenderType) { /** Defines RenderType as Header */ RenderType[RenderType["Header"] = 0] = "Header"; /** Defines RenderType as Content */ RenderType[RenderType["Content"] = 1] = "Content"; /** Defines RenderType as Summary */ RenderType[RenderType["Summary"] = 2] = "Summary"; })(RenderType || (RenderType = {})); /** * Defines Predefined toolbar items. * * @hidden */ var ToolbarItem; (function (ToolbarItem) { ToolbarItem[ToolbarItem["Add"] = 0] = "Add"; ToolbarItem[ToolbarItem["Edit"] = 1] = "Edit"; ToolbarItem[ToolbarItem["Update"] = 2] = "Update"; ToolbarItem[ToolbarItem["Delete"] = 3] = "Delete"; ToolbarItem[ToolbarItem["Cancel"] = 4] = "Cancel"; ToolbarItem[ToolbarItem["Print"] = 5] = "Print"; ToolbarItem[ToolbarItem["Search"] = 6] = "Search"; ToolbarItem[ToolbarItem["ColumnChooser"] = 7] = "ColumnChooser"; ToolbarItem[ToolbarItem["PdfExport"] = 8] = "PdfExport"; ToolbarItem[ToolbarItem["ExcelExport"] = 9] = "ExcelExport"; ToolbarItem[ToolbarItem["CsvExport"] = 10] = "CsvExport"; ToolbarItem[ToolbarItem["WordExport"] = 11] = "WordExport"; })(ToolbarItem || (ToolbarItem = {})); /** * Defines types of responsive dialogs * * @hidden */ var ResponsiveDialogAction; (function (ResponsiveDialogAction) { /** Defines dialog type as Edit */ ResponsiveDialogAction[ResponsiveDialogAction["isEdit"] = 0] = "isEdit"; /** Defines dialog type as Add */ ResponsiveDialogAction[ResponsiveDialogAction["isAdd"] = 1] = "isAdd"; /** Defines dialog type as Sort */ ResponsiveDialogAction[ResponsiveDialogAction["isSort"] = 2] = "isSort"; /** Defines dialog type as Filter */ ResponsiveDialogAction[ResponsiveDialogAction["isFilter"] = 3] = "isFilter"; /** Defines dialog type as ColMenu */ ResponsiveDialogAction[ResponsiveDialogAction["isColMenu"] = 4] = "isColMenu"; /** Defines dialog type as ColumChooser */ ResponsiveDialogAction[ResponsiveDialogAction["isColumnChooser"] = 5] = "isColumnChooser"; })(ResponsiveDialogAction || (ResponsiveDialogAction = {})); /** * Defines responsive toolbar actions * * @hidden */ var ResponsiveToolbarAction; (function (ResponsiveToolbarAction) { /** Defines initial responsive toolbar buttons */ ResponsiveToolbarAction[ResponsiveToolbarAction["isInitial"] = 0] = "isInitial"; /** Defines responsive toolbar search */ ResponsiveToolbarAction[ResponsiveToolbarAction["isSearch"] = 1] = "isSearch"; })(ResponsiveToolbarAction || (ResponsiveToolbarAction = {})); /** * Grid data module is used to generate query and data source. * * @hidden */ class Data { /** * Constructor for data module. * * @param {IGrid} parent - specifies the IGrid * @param {ServiceLocator} serviceLocator - specifies the service locator * @hidden */ constructor(parent, serviceLocator) { this.dataState = { isPending: false, resolver: null, group: [] }; this.foreignKeyDataState = { isPending: false, resolver: null }; this.parent = parent; this.serviceLocator = serviceLocator; this.initDataManager(); if (this.parent.isDestroyed || this.getModuleName() === 'foreignKey') { return; } this.parent.on(rowsAdded, this.addRows, this); this.parent.on(rowPositionChanged, this.reorderRows, this); this.parent.on(rowsRemoved, this.removeRows, this); this.parent.on(dataSourceModified, this.initDataManager, this); this.parent.on(destroy, this.destroy, this); this.parent.on(updateData, this.crudActions, this); this.parent.on(addDeleteAction, this.getData, this); this.parent.on(autoCol, this.refreshFilteredCols, this); this.parent.on(columnsPrepared, this.refreshFilteredCols, this); } reorderRows(e) { if (this.parent.isRemote()) { this.parent.getCurrentViewRecords().splice(e.toIndex, 0, this.parent.getCurrentViewRecords().splice(e.fromIndex, 1)[0]); } else { this.dataManager.dataSource.json.splice(e.toIndex, 0, this.dataManager.dataSource.json.splice(e.fromIndex, 1)[0]); } } getModuleName() { return 'data'; } /** * The function used to initialize dataManager and external query * * @returns {void} */ initDataManager() { const gObj = this.parent; this.dataManager = gObj.dataSource instanceof DataManager ? gObj.dataSource : (isNullOrUndefined(gObj.dataSource) ? new DataManager() : new DataManager(gObj.dataSource)); if (gObj.isAngular && !(gObj.query instanceof Query)) { gObj.setProperties({ query: new Query() }, true); } else { this.isQueryInvokedFromData = true; if (!(gObj.query instanceof Query)) { gObj.query = new Query(); } } } /** * Generates a query based on the current grid configuration. * * @param {boolean} skipPage - If `true`, the query will exclude paging information. * @param {boolean} skipGroup - If `true`, the query will exclude grouping information. * * @returns {Query} A query object reflecting the current grid state. */ generateQuery(skipPage, skipGroup) { const gObj = this.parent; const query = !isNullOrUndefined(gObj.getQuery()) ? gObj.getQuery().clone() : new Query(); if (this.parent.columnQueryMode === 'ExcludeHidden') { query.select(this.parent.getColumns().filter((column) => !(column.isPrimaryKey !== true && column.visible === false || column.field === undefined)).map((column) => column.field)); } else if (this.parent.columnQueryMode === 'Schema') { const selectQueryFields = []; const columns = this.parent.columns; for (let i = 0; i < columns.length; i++) { selectQueryFields.push(columns[parseInt(i.toString(), 10)].field); } query.select(selectQueryFields); } this.filterQuery(query); this.searchQuery(query); this.aggregateQuery(query); this.sortQuery(query); if (isGroupAdaptive(this.parent)) { this.virtualGroupPageQuery(query); } else { this.pageQuery(query, skipPage); } if (isNullOrUndefined(skipGroup) || !skipGroup) { this.groupQuery(query); } return query; } /** * @param {Query} query - specifies the query * @returns {Query} - returns the query * @hidden */ aggregateQuery(query) { const rows = this.parent.aggregates; for (let i = 0; i < rows.length; i++) { const row = rows[parseInt(i.toString(), 10)]; for (let j = 0; j < row.columns.length; j++) { const cols = row.columns[parseInt(j.toString(), 10)]; const types = cols.type instanceof Array ? cols.type : [cols.type]; for (let k = 0; k < types.length; k++) { query.aggregate(types[parseInt(k.toString(), 10)].toLowerCase(), cols.field); } } } return query; } virtualGroupPageQuery(query) { const fName = 'fn'; if (query.queries.length) { for (let i = 0; i < query.queries.length; i++) { if (query.queries[parseInt(i.toString(), 10)][`${fName}`] === 'onPage') { query.queries.splice(i, 1); } } } return query; } pageQuery(query, skipPage) { const gObj = this.parent; if (skipPage) { return query; } const fName = 'fn'; const args = { query: query, skipPage: false }; gObj.notify(setVirtualPageQuery, args); if (args.skipPage) { return query; } if ((gObj.allowPaging || gObj.enableVirtualization || gObj.enableInfiniteScrolling) && skipPage !== true) { gObj.pageSettings.currentPage = Math.max(1, gObj.pageSettings.currentPage); if (gObj.pageSettings.pageCount <= 0) { gObj.pageSettings.pageCount = 8; } if (gObj.pageSettings.pageSize <= 0) { gObj.pageSettings.pageSize = 12; } if (query.queries.length) { for (let i = 0; i < query.queries.length; i++) { if (query.queries[parseInt(i.toString(), 10)][`${fName}`] === 'onPage') { query.queries.splice(i, 1); } } } if (!isNullOrUndefined(gObj.infiniteScrollModule) && gObj.enableInfiniteScrolling) { this.parent.notify(infinitePageQuery, query); } else { query.page(gObj.pageSettings.currentPage, gObj.allowPaging && gObj.pagerModule && (gObj.pagerModule.pagerObj.isAllPage && !gObj.isManualRefresh) && (!this.dataManager.dataSource.offline && !(this.dataManager.adaptor instanceof RemoteSaveAdaptor)) ? null : gObj.pageSettings.pageSize); } } return query; } groupQuery(query) { const gObj = this.parent; if (gObj.allowGrouping && gObj.groupSettings.columns.length) { if (this.parent.groupSettings.enableLazyLoading) { query.lazyLoad.push({ key: 'isLazyLoad', value: this.parent.groupSettings.enableLazyLoading }); } const columns = gObj.groupSettings.columns; for (let i = 0, len = columns.length; i < len; i++) { const column = this.getColumnByField(columns[parseInt(i.toString(), 10)]); if (!column) { this.parent.log('initial_action', { moduleName: 'group', columnName: columns[parseInt(i.toString(), 10)] }); } const isGrpFmt = column.enableGroupByFormat; const format = column.format; if (isGrpFmt) { query.group(columns[parseInt(i.toString(), 10)], this.formatGroupColumn.bind(this), format); } else { query.group(columns[parseInt(i.toString(), 10)], null); } } } return query; } sortQuery(query) { const gObj = this.parent; if ((gObj.allowSorting || gObj.allowGrouping) && gObj.sortSettings.columns.length) { const columns = gObj.sortSettings.columns; const sortGrp = []; for (let i = columns.length - 1; i > -1; i--) { const col = this.getColumnByField(columns[parseInt(i.toString(), 10)].field); if (col) { col.setSortDirection(columns[parseInt(i.toString(), 10)].direction); } else { this.parent.log('initial_action', { moduleName: 'sort', columnName: columns[parseInt(i.toString(), 10)].field }); return query; } let fn = columns[parseInt(i.toSt