@syncfusion/ej2-treegrid
Version:
Essential JS 2 TreeGrid Component
314 lines (313 loc) • 15.5 kB
JavaScript
import { Grid, InfiniteScroll as GridInfiniteScroll } from '@syncfusion/ej2-grids';
import { RowRenderer, resetRowIndex } from '@syncfusion/ej2-grids';
import { getValue, isNullOrUndefined, remove } from '@syncfusion/ej2-base';
import * as events from '../base/constant';
import { DataManager, Predicate, Query } from '@syncfusion/ej2-data';
import { findChildrenRecords } from '../utils';
/**
* TreeGrid Infinite Scroll module will handle Infinite Scrolling.
*
* @hidden
*/
var InfiniteScroll = /** @class */ (function () {
/**
* Constructor for VirtualScroll module
*
* @param {TreeGrid} parent - Tree Grid instance
*/
function InfiniteScroll(parent) {
this.parent = parent;
Grid.Inject(GridInfiniteScroll);
this.addEventListener();
}
/**
* For internal use only - Get the module name.
*
* @private
* @returns {string} - Returns Logger module name
*/
InfiniteScroll.prototype.getModuleName = function () {
return 'infiniteScroll';
};
/**
* @hidden
* @returns {void}
*/
InfiniteScroll.prototype.addEventListener = function () {
this.parent.on(events.pagingActions, this.infinitePageAction, this);
this.parent.on('infinite-remote-expand', this.infiniteRemoteExpand, this);
this.parent.grid.on('delete-complete', this.infiniteDeleteHandler, this);
this.parent.grid.on('infinite-edit-handler', this.infiniteEditHandler, this);
this.parent.grid.on('infinite-crud-cancel', this.createRows, this);
this.parent.grid.on('content-ready', this.contentready, this);
};
/**
* @hidden
* @returns {void}
*/
InfiniteScroll.prototype.removeEventListener = function () {
if (this.parent.isDestroyed) {
return;
}
this.parent.off('infinite-remote-expand', this.infiniteRemoteExpand);
this.parent.grid.off('delete-complete', this.infiniteDeleteHandler);
this.parent.grid.off('infinite-edit-handler', this.infiniteEditHandler);
this.parent.off(events.pagingActions, this.infinitePageAction);
this.parent.grid.off('infinite-crud-cancel', this.createRows);
this.parent.grid.off('content-ready', this.contentready);
};
/**
* Handles the Expand Collapse action for Remote data with infinite scrolling.
*
* @param {{ index: number, childData: ITreeData[] }} args - expanded row index and its child data
* @param { number } args.index - expanded row index
* @param { ITreeData[] } args.childData - child data of expanded row
* @returns {void}
*/
InfiniteScroll.prototype.infiniteRemoteExpand = function (args) {
var rowObjects = this.parent.grid.getRowsObject();
var locator = 'serviceLocator';
var generateRows = 'generateRows';
var serviceLocator = this.parent.grid.infiniteScrollModule["" + locator];
var rowRenderer = new RowRenderer(serviceLocator, null, this.parent.grid);
var rows = this.parent.getRows();
var position = args.index === rows.length - 1 ? 'after' : 'before';
var cols = this.parent.grid.getColumns();
var childRowObjects = this.parent.grid.infiniteScrollModule["" + generateRows](args.childData, args);
var childRowElements = [];
for (var i = 0; i < childRowObjects.length; i++) {
childRowElements.push(rowRenderer.render(childRowObjects[parseInt(i.toString(), 10)], cols));
}
rowObjects.splice.apply(rowObjects, [args.index + 1, 0].concat(childRowObjects));
for (var i = 0; i < childRowElements.length; i++) {
if (position === 'after') {
rows[args.index + i]["" + position](childRowElements[parseInt(i.toString(), 10)]);
}
else {
rows[args.index + i + 1]["" + position](childRowElements[parseInt(i.toString(), 10)]);
}
rows.splice(args.index + 1 + i, 0, childRowElements[parseInt(i.toString(), 10)]);
}
resetRowIndex(this.parent.grid, this.parent.grid.getRowsObject(), this.parent.grid.getRows(), 0);
};
/**
* Resetted the row index for expand collapse action for cache support.
*
* @returns {void}
*/
InfiniteScroll.prototype.contentready = function () {
if (this.parent.infiniteScrollSettings.enableCache && !isNullOrUndefined(this.parent.editModule)) {
var updateIndex = 'updateIndex';
this.parent.editModule["" + updateIndex](this.parent.grid.dataSource, this.parent.getRows(), this.parent.getCurrentViewRecords());
if (this.parent.getFrozenColumns()) {
this.parent.editModule["" + updateIndex](this.parent.grid.dataSource, this.parent.getDataRows(), this.parent.getCurrentViewRecords());
}
}
};
/**
* Handles the page query for Data operations and CRUD actions.
*
* @param {{ result: ITreeData[], count: number, actionArgs: object }} pageingDetails - data, its count and action details
* @param {ITreeData[]} pageingDetails.result - data on scroll action
* @param {number} pageingDetails.count - data count on scroll action
* @param {Object} pageingDetails.actionArgs - scroll action details
* @returns {void}
*/
InfiniteScroll.prototype.infinitePageAction = function (pageingDetails) {
var dm = new DataManager(pageingDetails.result);
var expanded = new Predicate('expanded', 'notequal', null).or('expanded', 'notequal', undefined);
var visualData = dm.executeLocal(new Query().where(expanded));
var actionArgs = getValue('actionArgs', pageingDetails.actionArgs);
var actions = getValue('actions', this.parent.grid.infiniteScrollModule);
if (this.parent.grid.infiniteScrollModule['isInitialRender'] && !this.parent.initialRender) {
this.parent.grid.pageSettings.currentPage = 1;
}
var initial = actions.some(function (value) { return value === actionArgs.requestType; });
var initialRender = initial ? true : this.parent.initialRender ? true : false;
this.visualData = visualData;
pageingDetails.count = visualData.length;
if (getValue('isPrinting', pageingDetails.actionArgs)) {
pageingDetails.result = visualData;
}
else {
var query = new Query();
var isCache = this.parent.infiniteScrollSettings.enableCache;
if (isCache && this.parent.infiniteScrollSettings.initialBlocks > this.parent.infiniteScrollSettings.maxBlocks) {
this.parent.infiniteScrollSettings.initialBlocks = this.parent.infiniteScrollSettings.maxBlocks;
}
var size = initialRender ?
this.parent.grid.pageSettings.pageSize * this.parent.infiniteScrollSettings.initialBlocks :
this.parent.grid.pageSettings.pageSize;
var current = this.parent.grid.pageSettings.currentPage;
if (!isNullOrUndefined(actionArgs)) {
var lastIndex = getValue('lastIndex', this.parent.grid.infiniteScrollModule);
var firstIndex = getValue('firstIndex', this.parent.grid.infiniteScrollModule);
if (!isCache && actionArgs.requestType === 'delete') {
var skip = lastIndex - actionArgs.data.length + 1;
var take = actionArgs.data.length;
query = query.skip(skip).take(take);
}
else if (isCache && actionArgs.requestType === 'delete' ||
(actionArgs.requestType === 'save' && actionArgs.action === 'add')) {
query = query.skip(firstIndex);
query = query.take(this.parent.infiniteScrollSettings.initialBlocks * this.parent.pageSettings.pageSize);
}
else {
query = query.page(current, size);
}
}
else {
query = query.page(current, size);
}
dm.dataSource.json = visualData;
if (!isCache && !isNullOrUndefined(actionArgs) && actionArgs.requestType === 'save' && actionArgs.action === 'add') {
pageingDetails.result = [actionArgs.data];
}
else {
pageingDetails.result = dm.executeLocal(query);
}
}
this.parent.notify('updateAction', pageingDetails);
};
/**
* Handles the currentviewdata for delete operation.
*
* @param {{ e: InfiniteScrollArgs, result: Object[] }} args - Scroller and data details
* @param {InfiniteScrollArgs} args.e - scroller details while CRUD
* @param {Object[]} args.result - data details while CRUD
* @returns {void}
*/
InfiniteScroll.prototype.infiniteEditHandler = function (args) {
var infiniteData = 'infiniteCurrentViewData';
var infiniteCurrentViewData = this.parent.grid.infiniteScrollModule["" + infiniteData];
var keys = Object.keys(infiniteCurrentViewData);
if (args.e.requestType === 'delete' && args.result.length > 1) {
for (var i = 1; i < args.result.length; i++) {
infiniteCurrentViewData[keys[keys.length - 1]].push(args.result[parseInt(i.toString(), 10)]);
}
}
};
/**
* Handles the row objects for delete operation.
*
* @param {ActionEventArgs} args - crud action details
* @returns {void}
*/
InfiniteScroll.prototype.infiniteDeleteHandler = function (args) {
if (args.requestType === 'delete') {
var rows = this.parent.grid.getRowsObject();
var rowElms = this.parent.getRows();
var data = args.data instanceof Array ? args.data : [args.data];
var keyField = this.parent.grid.getPrimaryKeyFieldNames()[0];
this.removeRows(rowElms, rows, data, keyField, true);
if (this.parent.getFrozenColumns() > 0) {
var mRows = this.parent.grid.getRowsObject();
var mRowElms = this.parent.grid.getRows();
this.removeRows(mRowElms, mRows, data, keyField);
}
}
};
/**
* Handles the row objects for delete operation.
*
* @param {Element[]} rowElms - row elements
* @param {Row<Column>[]} rows - Row object collection
* @param {Object[]} data - data collection
* @param {string} keyField - primary key name
* @param { boolean} isFrozen - Specifies whether frozen column enabled
* @returns {void}
*/
InfiniteScroll.prototype.removeRows = function (rowElms, rows, data, keyField, isFrozen) {
var _this = this;
var resetInfiniteCurrentViewData = 'resetInfiniteCurrentViewData';
var _loop_1 = function (i) {
rows.filter(function (e, index) {
if (e.data["" + keyField] === data[parseInt(i.toString(), 10)]["" + keyField]) {
if (isFrozen) {
var page = Math.ceil((index + 1) / _this.parent.grid.pageSettings.pageSize);
_this.parent.grid.infiniteScrollModule["" + resetInfiniteCurrentViewData](page, index);
}
rows.splice(index, 1);
remove(rowElms[parseInt(index.toString(), 10)]);
rowElms.splice(index, 1);
}
});
};
for (var i = 0; i < data.length; i++) {
_loop_1(i);
}
};
/**
* Handles the row objects for Add operation.
*/
InfiniteScroll.prototype.createRows = function (eventArgs) {
var locator = 'serviceLocator';
var actionArgs = eventArgs.args.e;
var row = eventArgs.row;
var serviceLocator = this.parent.grid.infiniteScrollModule["" + locator];
var rowRenderer = new RowRenderer(serviceLocator, null, this.parent.grid);
var tbody;
var currentData = this.parent.getCurrentViewRecords();
var currentRows = eventArgs.isMovable ? this.parent.grid.getRows()
: this.parent.grid.getDataRows();
if (eventArgs.isFrozenRight) {
tbody = this.parent.element.querySelector('.e-frozen-right-content').querySelector('tbody');
}
else {
tbody = !this.parent.grid.isFrozenGrid() ? this.parent.getContent().querySelector('tbody') : eventArgs.isMovable
? this.parent.grid.getContent().querySelector('tbody')
: this.parent.grid.getContent().querySelector('tbody');
}
if (this.parent.frozenRows) {
tbody = eventArgs.isFrozenRows && this.parent.grid.infiniteScrollModule.requestType !== 'add'
|| !eventArgs.isFrozenRows && this.parent.grid.infiniteScrollModule.requestType === 'add'
? !this.parent.grid.isFrozenGrid() ? this.parent.getHeaderContent().querySelector('tbody')
: eventArgs.isMovable ? this.parent.grid.getHeaderContent().querySelector('tbody')
: eventArgs.isFrozenRight ? this.parent.element.querySelector('.e-frozen-right-header').querySelector('tbody')
: this.parent.grid.getHeaderContent().querySelector('tbody') : tbody;
}
var position;
var addRowIndex = 'addRowIndex';
var newRowIndex = this.parent.editModule["" + addRowIndex];
for (var i = 0; i < row.length; i++) {
var newRow = rowRenderer.render(row[parseInt(i.toString(), 10)], this.parent.grid.getColumns());
if (actionArgs.requestType === 'save' && actionArgs.action === 'add') {
if (getValue('selectedIndex', this.parent.editModule) !== -1 && this.parent.editSettings.newRowPosition !== 'Top') {
if (this.parent.editSettings.newRowPosition === 'Below' || this.parent.editSettings.newRowPosition === 'Child') {
position = 'after';
newRowIndex += findChildrenRecords(currentData[parseInt(newRowIndex.toString(), 10)]).length;
if (this.parent.editSettings.newRowPosition === 'Child') {
newRowIndex -= 1; //// for child position already child record is added in childRecords so subtracting 1
}
currentRows[parseInt(newRowIndex.toString(), 10)]["" + position](newRow);
}
else if (this.parent.editSettings.newRowPosition === 'Above') {
position = 'before';
currentRows[this.parent.editModule["" + addRowIndex]]["" + position](newRow);
}
}
else if (this.parent.editSettings.newRowPosition === 'Bottom') {
tbody.appendChild(newRow);
}
else {
tbody.insertBefore(newRow, tbody.firstElementChild);
}
}
else if (actionArgs.requestType === 'delete') {
tbody.appendChild(newRow);
}
}
eventArgs.cancel = true;
};
/**
* To destroy the infiniteScroll module
*
* @returns {void}
* @hidden
*/
InfiniteScroll.prototype.destroy = function () {
this.removeEventListener();
};
return InfiniteScroll;
}());
export { InfiniteScroll };