@syncfusion/ej2-grids
Version:
Feature-rich JavaScript datagrid (datatable) control with built-in support for editing, filtering, grouping, paging, sorting, and exporting to Excel.
378 lines (377 loc) • 15.4 kB
JavaScript
import { extend } from '@syncfusion/ej2-base';
import { remove, isNullOrUndefined } from '@syncfusion/ej2-base';
import { Pager } from '../../pager/pager';
import { PagerDropDown } from '../../pager/pager-dropdown';
import { ExternalMessage } from '../../pager/external-message';
import { extend as gridExtend, getActualProperties, isActionPrevent, addRemoveEventListener, appendChildren } from '../base/util';
import * as events from '../base/constant';
import * as literals from '../base/string-literals';
/**
* The `Page` module is used to render pager and handle paging action.
*/
var Page = /** @class */ (function () {
/**
* Constructor for the Grid paging module
*
* @param {IGrid} parent - specifies the IGrid
* @param {PageSettingsModel} pageSettings - specifies the PageSettingsModel
* @hidden
*/
function Page(parent, pageSettings) {
this.isInitialRender = true;
/** @hidden */
this.isCancel = false;
Pager.Inject(ExternalMessage, PagerDropDown);
this.parent = parent;
this.pageSettings = pageSettings;
this.addEventListener();
}
/**
* For internal use only - Get the module name.
*
* @returns {string} returns the module name
* @private
*/
Page.prototype.getModuleName = function () {
return 'pager';
};
/**
* The function used to render pager from grid pageSettings
*
* @returns {void}
* @hidden
*/
Page.prototype.render = function () {
var gObj = this.parent;
this.pagerDestroy();
if (!isNullOrUndefined(this.parent.pagerTemplate)) {
this.pageSettings.template = this.parent.pagerTemplate;
this.parent.pageTemplateChange = true;
}
this.element = this.parent.createElement('div', { className: 'e-gridpager' });
var pagerObj = gridExtend({}, extend({}, getActualProperties(this.pageSettings)), {
click: this.clickHandler.bind(this),
dropDownChanged: this.onSelect.bind(this),
enableRtl: gObj.enableRtl, locale: gObj.locale,
created: this.addAriaAttr.bind(this)
}, ['parentObj', 'propName']);
pagerObj.cssClass = this.parent.cssClass ? this.parent.cssClass : '';
this.pagerObj = new Pager(pagerObj, undefined, this.parent);
this.pagerObj.root = gObj.root ? gObj.root : gObj;
this.pagerObj.hasParent = true;
this.pagerObj.on(events.pagerRefresh, this.renderReactPagerTemplate, this);
this.pagerObj.allowServerDataBinding = false;
};
Page.prototype.onSelect = function (e) {
this.pageSettings.pageSize = e.pageSize;
if (!this.isInitialLoad) {
this.pageSettings.currentPage = 1;
}
};
Page.prototype.addAriaAttr = function () {
if (!(this.pageSettings.template)) {
var numericContainerNew = this.parent.createElement('div', { className: 'e-numericcontainer' });
var pagerContainer = this.element.querySelector('.e-pagercontainer');
var frag = document.createDocumentFragment();
var numericContainer = this.element.querySelector('.e-numericcontainer');
var links = numericContainer.querySelectorAll('a');
for (var i = 0; i < links.length; i++) {
if (this.parent.getContentTable()) {
links[parseInt(i.toString(), 10)].setAttribute('aria-owns', this.parent.getContentTable().id + ' ' + (i + 1));
}
else {
links[parseInt(i.toString(), 10)].setAttribute('aria-owns', this.parent.element.getAttribute('id') + '_content_table' + ' ' + (i + 1));
}
var numericContainerDiv = this.parent.createElement('div');
numericContainerDiv.appendChild(links[parseInt(i.toString(), 10)]);
frag.appendChild(numericContainerDiv);
}
numericContainerNew.appendChild(frag);
pagerContainer.replaceChild(numericContainerNew, numericContainer);
var classList = ['.e-mfirst', '.e-mprev', '.e-first', '.e-prev', '.e-next', '.e-last', '.e-mnext', '.e-mlast'];
for (var j = 0; j < classList.length; j++) {
var element = this.element.querySelector(classList[parseInt(j.toString(), 10)]);
if (this.parent.getContentTable()) {
element.setAttribute('aria-owns', this.parent.getContentTable().id + classList[parseInt(j.toString(), 10)].replace('.e-', ' '));
}
}
}
};
Page.prototype.dataReady = function (e) {
this.updateModel(e);
};
/**
* Refreshes the page count, pager information, and external message.
*
* @returns {void}
*/
Page.prototype.refresh = function () {
this.pagerObj.refresh();
};
/**
* Navigates to the target page according to the given number.
*
* @param {number} pageNo - Defines the page number to navigate.
* @returns {void}
*/
Page.prototype.goToPage = function (pageNo) {
this.pagerObj.goToPage(pageNo);
};
/**
* @param {number} pageSize - specifies the page size
* @returns {void}
* @hidden
*/
Page.prototype.setPageSize = function (pageSize) {
this.pagerObj.setPageSize(pageSize);
};
/**
* The function used to update pageSettings model
*
* @param {NotifyArgs} e - specfies the NotifyArgs
* @returns {void}
* @hidden
*/
Page.prototype.updateModel = function (e) {
this.parent.pageSettings.totalRecordsCount = e.count;
var isAddAction = (e.action === 'add' && e.requestType === 'save') || (e.requestType === 'batchsave');
if (this.pagerObj.isAllPage && !isAddAction) {
this.parent.pageSettings.pageSize = this.parent.pageSettings.totalRecordsCount;
}
if (isAddAction) {
if (this.pagerObj.isAllPage && (e.count === this.pageSettings.pageSize)) {
this.pagerObj.setProperties({ pageSize: e.count }, true);
}
}
this.parent.dataBind();
};
/**
* The function used to trigger onActionComplete
*
* @param {NotifyArgs} e - specifies the NotifyArgs
* @returns {void}
* @hidden
*/
Page.prototype.onActionComplete = function (e) {
this.parent.trigger(events.actionComplete, extend(e, {
currentPage: this.parent.pageSettings.currentPage, requestType: 'paging',
type: events.actionComplete
}));
};
/**
* @param {NotifyArgs} e - specifies the NotifyArgs
* @returns {void}
* @hidden
*/
Page.prototype.onPropertyChanged = function (e) {
if (e.module !== this.getModuleName()) {
return;
}
var newProp = e.properties;
for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
var prop = _a[_i];
this.pagerObj["" + prop] = newProp["" + prop];
}
this.pagerObj.dataBind();
};
Page.prototype.clickHandler = function (e) {
var gObj = this.parent;
if (this.isForceCancel || isActionPrevent(gObj) && !gObj.prevPageMoving && !this.isCancel) {
if (!this.isForceCancel) {
if (!isNullOrUndefined(e.newProp) && !isNullOrUndefined(e.newProp.pageSize)) {
gObj.notify(events.preventBatch, { instance: this, handler: this.setPageSize, arg1: e.newProp.pageSize });
this.pagerObj.setProperties({ pageSize: e.oldProp.pageSize }, true);
this.parent.setProperties({ pageSettings: { pageSize: e.oldProp.pageSize } }, true);
this.pagerObj.setProperties({
currentPage: gObj.pageSettings.currentPage === this.pagerObj.currentPage ?
this.pagerObj.previousPageNo : gObj.pageSettings.currentPage
}, true);
}
else if (e.currentPage) {
gObj.notify(events.preventBatch, { instance: this, handler: this.goToPage, arg1: e.currentPage });
this.pagerObj.currentPage = gObj.pageSettings.currentPage === this.pagerObj.currentPage ?
this.pagerObj.previousPageNo : gObj.pageSettings.currentPage;
}
this.isForceCancel = true;
this.pagerObj.dataBind();
}
else {
this.isForceCancel = false;
}
e.cancel = true;
return;
}
gObj.pageSettings.pageSize = this.pagerObj.pageSize;
gObj.prevPageMoving = false;
var prevPage = this.pageSettings.currentPage;
var args = {
cancel: false, requestType: 'paging', previousPage: prevPage,
currentPage: e.currentPage, pageSize: gObj.pageSettings.pageSize, type: events.actionBegin
};
if (!this.isCancel) {
this.pageSettings.currentPage = e.currentPage;
this.parent.notify(events.modelChanged, args);
gObj.pageRequireRefresh = false;
}
if (args.cancel) {
e.cancel = true;
this.parent.setProperties({ pageSettings: { currentPage: prevPage } }, true);
this.pagerObj.setProperties({ currentPage: prevPage }, true);
this.isCancel = true;
return;
}
this.isCancel = false;
this.parent.requestTypeAction = 'paging';
};
Page.prototype.keyPressHandler = function (e) {
if (e.action in keyActions) {
e.preventDefault();
var element = this.element.querySelector(keyActions[e.action]);
if (!element.classList.contains('e-nextprevitemdisabled')) {
element.click();
}
}
};
/**
* Defines the text of the external message.
*
* @param {string} message - Defines the message to update.
* @returns {void}
*/
Page.prototype.updateExternalMessage = function (message) {
if (!this.pagerObj.enableExternalMessage) {
this.pagerObj.enableExternalMessage = true;
this.pagerObj.dataBind();
}
this.pagerObj.externalMessage = message;
this.pagerObj.dataBind();
};
Page.prototype.appendToElement = function () {
this.isInitialLoad = true;
this.parent.element.appendChild(this.element);
this.parent.setGridPager(this.element);
this.pagerObj.isReact = this.parent.isReact;
this.pagerObj.isVue = this.parent.isVue || (this.parent.parentDetails && this.parent.parentDetails.parentInstObj
&& this.parent.parentDetails.parentInstObj.isVue);
this.pagerObj.appendTo(this.element);
this.isInitialLoad = false;
};
Page.prototype.enableAfterRender = function (e) {
if (e.module === this.getModuleName() && e.enable) {
this.render();
this.appendToElement();
if (this.isReactTemplate()) {
this.pagerObj.updateTotalPages();
this.created();
}
}
};
/**
* @returns {void}
* @hidden
*/
Page.prototype.addEventListener = function () {
this.handlers = {
load: this.render,
end: this.appendToElement,
ready: this.dataReady,
complete: this.onActionComplete,
updateLayout: this.enableAfterRender,
inboundChange: this.onPropertyChanged,
keyPress: this.keyPressHandler,
created: this.created
};
if (this.parent.isDestroyed) {
return;
}
if (this.parent.isReact || this.parent.isVue) {
this.parent.addEventListener(literals.create, this.handlers.created.bind(this));
}
this.evtHandlers = [{ event: events.initialLoad, handler: this.handlers.load },
{ event: events.initialEnd, handler: this.handlers.end },
{ event: events.dataReady, handler: this.handlers.ready },
{ event: events.pageComplete, handler: this.handlers.complete },
{ event: events.uiUpdate, handler: this.handlers.updateLayout },
{ event: events.inBoundModelChanged, handler: this.handlers.inboundChange },
{ event: events.keyPressed, handler: this.handlers.keyPress },
{ event: events.destroy, handler: this.destroy }];
addRemoveEventListener(this.parent, this.evtHandlers, true, this);
};
Page.prototype.created = function () {
if (this.isInitialRender && this.isReactTemplate()) {
this.isInitialRender = false;
this.renderReactPagerTemplate();
}
};
Page.prototype.isReactTemplate = function () {
return (this.parent.isReact || this.parent.isVue) && this.pagerObj.template && typeof (this.pagerObj.template) !== 'string';
};
Page.prototype.renderReactPagerTemplate = function () {
if (!this.isInitialRender && this.isReactTemplate()) {
var result = void 0;
this.parent.destroyTemplate(['pagerTemplate']);
this.element.classList.add('e-pagertemplate');
this.pagerObj.compile(this.pagerObj.template);
var page = this.parent.pageSettings;
var data = {
currentPage: page.currentPage, pageSize: page.pageSize, pageCount: page.pageCount,
totalRecordsCount: page.totalRecordsCount, totalPages: this.pagerObj.totalPages
};
var tempId = this.parent.id + '_pagertemplate';
if (this.parent.isReact) {
this.pagerObj.templateFn(data, this.parent, 'pagerTemplate', tempId, null, null, this.pagerObj.element);
this.parent.renderTemplates();
}
else {
result = this.pagerObj.templateFn(data, this.parent, 'pagerTemplate');
appendChildren(this.pagerObj.element, result);
}
}
};
/**
* @returns {void}
* @hidden
*/
Page.prototype.removeEventListener = function () {
if (this.parent.isDestroyed) {
return;
}
if (this.parent.isReact || this.parent.isVue) {
this.parent.removeEventListener(literals.create, this.handlers.created);
}
this.parent.off(events.pagerRefresh, this.renderReactPagerTemplate);
addRemoveEventListener(this.parent, this.evtHandlers, false);
};
/**
* To destroy the pager
*
* @returns {void}
* @hidden
*/
Page.prototype.destroy = function () {
this.removeEventListener();
if (this.isReactTemplate()) {
this.parent.destroyTemplate(['pagerTemplate']);
}
this.pagerObj.destroy();
};
Page.prototype.pagerDestroy = function () {
if (this.pagerObj && !this.pagerObj.isDestroyed) {
this.pagerObj.destroy();
remove(this.element);
}
};
return Page;
}());
export { Page };
/**
* @hidden
*/
var keyActions = {
pageUp: '.e-prev',
pageDown: '.e-next',
ctrlAltPageDown: '.e-last',
ctrlAltPageUp: '.e-first',
altPageUp: '.e-pp',
altPageDown: '.e-np'
};