@syncfusion/ej2-schedule 30.2.4 → 31.1.17

package/dist/ts/schedule/base/resource.ts

@@ -0,0 +1,1091 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable max-len */
+import { extend, isNullOrUndefined, createElement, EventHandler, addClass, append, removeClass, remove, closest, classList } from '@syncfusion/ej2-base';
+import { DataManager, Query } from '@syncfusion/ej2-data';
+import { TreeView, NodeClickEventArgs } from '@syncfusion/ej2-navigations';
+import { Popup } from '@syncfusion/ej2-popups';
+import { Data } from '../actions/data';
+import { Schedule } from '../base/schedule';
+import { ReturnType } from '../base/type';
+import { TdData, ResourceDetails, NotifyEventArgs, ActionEventArgs, RenderCellEventArgs, CallbackFunction } from '../base/interface';
+import { ResourcesModel } from '../models/resources-model';
+import * as cls from '../base/css-constant';
+import * as events from '../base/constant';
+import * as util from '../base/util';
+
+/**
+ * Resource and group related common functionalities
+ */
+
+interface TreeSlotData extends TdData {
+    child: TdData[];
+}
+
+export class ResourceBase {
+    private parent: Schedule;
+    public resourceCollection: ResourcesModel[] = [];
+    public lastResourceLevel: TdData[];
+    public renderedResources: TdData[];
+    public expandedResources: TdData[];
+    private colorIndex: number;
+    private resourceTreeLevel: TdData[];
+    private treeViewObj: TreeView;
+    private treePopup: Popup;
+    private popupOverlay: HTMLElement;
+    private leftPixel: number = 25;
+    public resourceDateTree: TdData[][] = [];
+
+    constructor(parent: Schedule) {
+        this.parent = parent;
+    }
+
+    public renderResourceHeaderIndent(tr: Element): void {
+        const resColTd: Element = createElement('td', { className: cls.RESOURCE_LEFT_TD_CLASS });
+        const resColDiv: Element = createElement('div', { className: cls.RESOURCE_TEXT_CLASS });
+        if (this.parent.activeViewOptions.headerIndentTemplate) {
+            const data: TdData = { className: [resColTd.className], type: 'emptyCells' };
+            this.parent.renderHeaderIndentTemplate(data, resColTd);
+        } else {
+            resColTd.appendChild(resColDiv);
+        }
+        const args: RenderCellEventArgs = { elementType: 'emptyCells', element: resColTd };
+        this.parent.trigger(events.renderCell, args);
+        tr.appendChild(resColTd);
+    }
+
+    public hideResourceRows(tBody: Element): void {
+        if (this.resourceCollection.length <= 1 || this.parent.virtualScrollModule) {
+            return;
+        }
+        const trCount: number = this.lastResourceLevel.length;
+        for (let i: number = 0; i < trCount; i++) {
+            const resData: Record<string, any> = this.lastResourceLevel[parseInt(i.toString(), 10)].resourceData;
+            const res: ResourcesModel = this.lastResourceLevel[parseInt(i.toString(), 10)].resource;
+            if (resData.ClassName === cls.RESOURCE_PARENT_CLASS && !resData[res.expandedField] &&
+                !isNullOrUndefined(resData[res.expandedField])) {
+                const trCollection: HTMLElement[] = [].slice.call(tBody.children);
+                const slicedCollection: HTMLElement[] = trCollection.slice(i + 1, i + (parseInt(resData.Count as string, 10) + 1));
+                addClass(slicedCollection, cls.HIDDEN_CLASS);
+            }
+        }
+    }
+
+    public createResourceColumn(): Element {
+        const resColl: ResourcesModel[] = this.resourceCollection;
+        const resDiv: Element = createElement('div', { className: cls.RESOURCE_COLUMN_WRAP_CLASS });
+        const tbl: Element = this.parent.activeView.createTableLayout(cls.RESOURCE_COLUMN_TABLE_CLASS);
+        if (!this.parent.uiStateValues.isGroupAdaptive && this.parent.rowAutoHeight && this.parent.activeView.isTimelineView()
+            && this.parent.activeViewOptions.group.resources.length > 0) {
+            addClass([tbl], cls.AUTO_HEIGHT);
+        }
+        const tBody: Element = tbl.querySelector('tbody');
+        let resData: TdData[] = this.generateTreeData(true) as TdData[];
+        this.countCalculation(resColl.slice(0, -2), resColl.slice(0, -1));
+        this.renderedResources = this.lastResourceLevel;
+        if (this.parent.virtualScrollModule) {
+            const resourceCount: number = this.parent.virtualScrollModule.getRenderedCount();
+            this.setExpandedResources();
+            resData = this.expandedResources.slice(0, resourceCount);
+            this.renderedResources = resData;
+        }
+        append(this.getContentRows(resData), tBody);
+        this.hideResourceRows(tBody);
+        tbl.appendChild(tBody);
+        resDiv.appendChild(tbl);
+        return resDiv;
+    }
+
+    public setRenderedResources(): void {
+        const resColl: ResourcesModel[] = this.resourceCollection;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const temp: TdData[] = this.generateTreeData(true) as TdData[];
+        this.countCalculation(resColl.slice(0, -2), resColl.slice(0, -1));
+        this.renderedResources = this.lastResourceLevel;
+    }
+
+    public setExpandedResources(): void {
+        const resources: TdData[] = [];
+        for (let i: number = 0; i < this.lastResourceLevel.length; i++) {
+            const resource: Record<string, any> = this.lastResourceLevel[parseInt(i.toString(), 10)].resourceData;
+            const count: number = resource.Count as number;
+            resources.push(this.lastResourceLevel[parseInt(i.toString(), 10)]);
+            const isExpanded: boolean = resource[this.lastResourceLevel[parseInt(i.toString(), 10)].resource.expandedField] as boolean;
+            if (!isNullOrUndefined(isExpanded) && !isExpanded && count > 0) {
+                i = i + count;
+            }
+        }
+        this.expandedResources = resources;
+    }
+
+    public getContentRows(resData: TdData[], isVirtualScroll?: boolean): Element[] {
+        const resRows: Element[] = [];
+        let left: string;
+        let rIndex: number;
+        const resColl: ResourcesModel[] = this.resourceCollection;
+        const tr: Element = createElement('tr');
+        const td: Element = createElement('td', { attrs: { tabindex: isVirtualScroll ? '-1' : '0' } });
+        const existingGroupIndices: number[] = this.parent.activeView.getGroupIndices();
+        for (let i: number = 0; i < resData.length; i++) {
+            if (existingGroupIndices.length > 0 && existingGroupIndices.indexOf(resData[parseInt(i.toString(), 10)].groupIndex) > -1) {
+                continue;
+            }
+            const ntd: Element = td.cloneNode() as Element;
+            rIndex = util.findIndexInData(<Record<string, any>[]>resColl, 'name', resData[parseInt(i.toString(), 10)].resource.name);
+            if (rIndex === resColl.length - 1) {
+                extend(resData[parseInt(i.toString(), 10)].resourceData, { ClassName: cls.RESOURCE_CHILD_CLASS });
+                this.renderedResources[parseInt(i.toString(), 10)].className = [cls.RESOURCE_CHILD_CLASS];
+            } else {
+                extend(resData[parseInt(i.toString(), 10)].resourceData, { ClassName: cls.RESOURCE_PARENT_CLASS });
+                this.renderedResources[parseInt(i.toString(), 10)].className = [cls.RESOURCE_PARENT_CLASS];
+            }
+            left = (rIndex * this.leftPixel) + 'px';
+            if (resData[parseInt(i.toString(), 10)].resourceData.ClassName as string === cls.RESOURCE_PARENT_CLASS
+                && !isNullOrUndefined(resData[parseInt(i.toString(), 10)].resourceData.Count) && (resData[parseInt(i.toString(), 10)].resourceData.Count > 0)) {
+                let iconClass: string;
+                if (resData[parseInt(i.toString(), 10)].resourceData[resColl[parseInt(rIndex.toString(), 10)].expandedField] ||
+                    isNullOrUndefined(resData[parseInt(i.toString(), 10)].resourceData[resColl[parseInt(rIndex.toString(), 10)].expandedField])) {
+                    iconClass = cls.RESOURCE_COLLAPSE_CLASS;
+                } else {
+                    iconClass = cls.RESOURCE_EXPAND_CLASS;
+                }
+                const iconDiv: HTMLElement = createElement('div');
+                addClass([iconDiv], [cls.RESOURCE_TREE_ICON_CLASS, iconClass]);
+                this.setMargin(iconDiv, left);
+                ntd.appendChild(iconDiv);
+                if (this.resourceCollection.length > 1) {
+                    EventHandler.add(iconDiv, 'click', this.onTreeIconClick, this);
+                }
+            }
+            this.parent.activeView.setResourceHeaderContent(ntd, resData[parseInt(i.toString(), 10)], cls.RESOURCE_TEXT_CLASS);
+            ntd.setAttribute('data-group-index', resData[parseInt(i.toString(), 10)].groupIndex.toString());
+            ntd.setAttribute('aria-label', (resData[parseInt(i.toString(), 10)].resourceData[resData[parseInt(i.toString(), 10)].resource.textField] as string) + ' resource');
+            if (!this.parent.activeViewOptions.resourceHeaderTemplate) {
+                this.setMargin(ntd.querySelector('.' + cls.RESOURCE_TEXT_CLASS) as HTMLElement, left);
+            }
+            const classCollection: string[] = [cls.RESOURCE_CELLS_CLASS, resData[parseInt(i.toString(), 10)].resourceData.ClassName as string];
+            addClass([ntd], classCollection);
+            const args: RenderCellEventArgs = { elementType: 'resourceHeader', element: ntd, groupIndex: resData[parseInt(i.toString(), 10)].groupIndex };
+            this.parent.trigger(events.renderCell, args);
+            const ntr: Element = tr.cloneNode() as Element;
+            ntr.appendChild(ntd);
+            resRows.push(ntr);
+        }
+        return resRows;
+    }
+
+    private setMargin(element: HTMLElement, value: string): void {
+        if (!this.parent.enableRtl) {
+            element.style.marginLeft = value;
+        } else {
+            element.style.marginRight = value;
+        }
+    }
+
+    private countCalculation(parentCollection: ResourcesModel[], wholeCollection: ResourcesModel[]): void {
+        let collection: Record<string, any>[];
+        for (let y: number = 0; y < parentCollection.length; y++) {
+            const data: Record<string, any>[] = parentCollection[parentCollection.length - (y + 1)].dataSource as Record<string, any>[];
+            for (let x: number = 0; x < data.length; x++) {
+                let totalCount: number = 0;
+                if (this.parent.activeViewOptions.group.byGroupID) {
+                    const query: Query =
+                        new Query().where(wholeCollection[wholeCollection.length - 1].groupIDField, 'equal',
+                                          data[parseInt(x.toString(), 10)][parentCollection[parentCollection.length - (y + 1)].idField] as string);
+                    collection = new DataManager(wholeCollection[wholeCollection.length - 1].dataSource).executeLocal(query) as Record<string, any>[];
+                } else {
+                    collection = wholeCollection[wholeCollection.length - 1].dataSource as Record<string, any>[];
+                }
+                for (let z: number = 0; z < collection.length; z++) {
+                    totalCount = totalCount + parseInt(collection[parseInt(z.toString(), 10)].Count as string, 10);
+                }
+                totalCount = totalCount + parseInt(data[parseInt(x.toString(), 10)].Count as string, 10);
+                extend(data[parseInt(x.toString(), 10)], { Count: totalCount });
+            }
+            wholeCollection = wholeCollection.slice(0, -1);
+        }
+    }
+
+    public onTreeIconClick(e: Event): void {
+        if (this.parent.eventTooltip) {
+            this.parent.eventTooltip.close();
+        }
+        const target: Element = <HTMLElement>e.target;
+        let hide: boolean;
+        const trElement: HTMLTableRowElement = closest(target as Element, '.' + cls.RESOURCE_PARENT_CLASS)
+            .parentElement as HTMLTableRowElement;
+        const index: number = parseInt(trElement.children[0].getAttribute('data-group-index'), 10);
+        let args: ActionEventArgs = {
+            cancel: false, event: e, groupIndex: index,
+            requestType: !target.classList.contains(cls.RESOURCE_COLLAPSE_CLASS) ? 'resourceExpand' : 'resourceCollapse'
+        };
+        this.parent.trigger(events.actionBegin, args, (actionArgs: ActionEventArgs) => {
+            if (!actionArgs.cancel) {
+                if (target.classList.contains(cls.RESOURCE_COLLAPSE_CLASS)) {
+                    classList(target, [cls.RESOURCE_EXPAND_CLASS], [cls.RESOURCE_COLLAPSE_CLASS]);
+                    hide = true;
+                } else {
+                    classList(target, [cls.RESOURCE_COLLAPSE_CLASS], [cls.RESOURCE_EXPAND_CLASS]);
+                    hide = false;
+                }
+                const eventElements: Element[] = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CLASS + ',.' + cls.MORE_INDICATOR_CLASS));
+                for (const element of eventElements) {
+                    remove(element);
+                }
+                if (this.parent.virtualScrollModule) {
+                    this.updateVirtualContent(index, hide, e, target);
+                } else {
+                    this.updateContent(index, hide);
+                }
+                const data: NotifyEventArgs = { cssProperties: this.parent.getCssProperties(), module: 'scroll' };
+                this.parent.notify(events.scrollUiUpdate, data);
+                args = {
+                    cancel: false, event: e, groupIndex: index,
+                    requestType: target.classList.contains(cls.RESOURCE_COLLAPSE_CLASS) ? 'resourceExpanded' : 'resourceCollapsed'
+                };
+                this.parent.refreshEvents(false);
+                this.parent.trigger(events.actionComplete, args);
+            }
+        });
+    }
+
+    public updateContent(index: number, hide: boolean): void {
+        const rowCollection: HTMLTableRowElement[] = [];
+        const workCellCollection: HTMLTableRowElement[] = [];
+        const headerRowCollection: HTMLTableRowElement[] = [];
+        let pNode: boolean;
+        const clickedRes: Record<string, any> = this.lastResourceLevel[parseInt(index.toString(), 10)].resourceData as Record<string, any>;
+        const resRows: Element[] = [].slice.call(this.parent.element.querySelectorAll('.' + cls.RESOURCE_COLUMN_WRAP_CLASS + ' ' + 'tr'));
+        const contentRows: Element[] = [].slice.call(this.parent.element.querySelectorAll('.' + cls.CONTENT_WRAP_CLASS + ' ' + 'tbody tr'));
+        const eventRows: Element[] = [].slice.call(this.parent.element.querySelectorAll('.' + cls.CONTENT_WRAP_CLASS + ' .' + cls.APPOINTMENT_CONTAINER_CLASS));
+        for (let j: number = 0; j < clickedRes.Count; j++) {
+            rowCollection.push(resRows[index + j + 1] as HTMLTableRowElement);
+            workCellCollection.push(contentRows[index + j + 1] as HTMLTableRowElement);
+            headerRowCollection.push(eventRows[index + j + 1] as HTMLTableRowElement);
+        }
+        const clonedCollection: TdData[] = this.lastResourceLevel;
+        for (let i: number = 0; i < rowCollection.length; i++) {
+            let expanded: boolean = true;
+            pNode = rowCollection[parseInt(i.toString(), 10)].children[0].classList.contains(cls.RESOURCE_PARENT_CLASS);
+            clonedCollection[parseInt(index.toString(), 10)].resourceData[clonedCollection[parseInt(index.toString(), 10)].resource.expandedField] = !hide;
+            if (hide) {
+                if (pNode) {
+                    const trElem: Element = rowCollection[parseInt(i.toString(), 10)].querySelector('.' + cls.RESOURCE_TREE_ICON_CLASS);
+                    if (trElem) {
+                        classList(trElem, [cls.RESOURCE_EXPAND_CLASS], [cls.RESOURCE_COLLAPSE_CLASS]);
+                    }
+                }
+                if (!rowCollection[parseInt(i.toString(), 10)].classList.contains(cls.HIDDEN_CLASS)) {
+                    addClass([rowCollection[parseInt(i.toString(), 10)], workCellCollection[parseInt(i.toString(), 10)], headerRowCollection[parseInt(i.toString(), 10)]], cls.HIDDEN_CLASS);
+                }
+            } else {
+                if (pNode) {
+                    const rowIndex: number = rowCollection[parseInt(i.toString(), 10)].rowIndex;
+                    if (!clonedCollection[parseInt(rowIndex.toString(), 10)].resourceData[clonedCollection[parseInt(rowIndex.toString(), 10)].resource.expandedField]
+                        && !isNullOrUndefined(clonedCollection[parseInt(rowIndex.toString(), 10)].resourceData[clonedCollection[parseInt(rowIndex.toString(), 10)].resource.expandedField])) {
+                        rowCollection.splice(i + 1, (parseInt(clonedCollection[parseInt(rowIndex.toString(), 10)].resourceData.Count as string, 10)));
+                        workCellCollection.splice(i + 1, (parseInt(clonedCollection[parseInt(rowIndex.toString(), 10)].resourceData.Count as string, 10)));
+                        headerRowCollection.splice(i + 1, (parseInt(clonedCollection[parseInt(rowIndex.toString(), 10)].resourceData.Count as string, 10)));
+                        expanded = false;
+                    }
+                    if (expanded) {
+                        const trElem: Element = rowCollection[parseInt(i.toString(), 10)].querySelector('.' + cls.RESOURCE_TREE_ICON_CLASS);
+                        if (trElem) {
+                            classList(trElem, [cls.RESOURCE_COLLAPSE_CLASS], [cls.RESOURCE_EXPAND_CLASS]);
+                        }
+                    }
+                }
+                if (rowCollection[parseInt(i.toString(), 10)].classList.contains(cls.HIDDEN_CLASS)) {
+                    removeClass([rowCollection[parseInt(i.toString(), 10)], workCellCollection[parseInt(i.toString(), 10)], headerRowCollection[parseInt(i.toString(), 10)]], cls.HIDDEN_CLASS);
+                }
+            }
+        }
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    public updateVirtualContent(index: number, expand: boolean, e: Event, target: Element): void {
+        this.lastResourceLevel[parseInt(index.toString(), 10)].resourceData[this.lastResourceLevel[parseInt(index.toString(), 10)].resource.expandedField] = !expand;
+        this.setExpandedResources();
+        const resourceCount: number = this.parent.virtualScrollModule.getRenderedCount();
+        const startIndex: number = this.expandedResources.indexOf(this.renderedResources[0]);
+        this.parent.virtualScrollModule.existingDataCollection = this.renderedResources;
+        this.renderedResources = this.expandedResources.slice(startIndex, startIndex + resourceCount);
+        if (this.renderedResources.length < resourceCount) {
+            let sIndex: number = this.expandedResources.length - resourceCount;
+            sIndex = (sIndex > 0) ? sIndex : 0;
+            this.renderedResources = this.expandedResources.slice(sIndex, this.expandedResources.length);
+        }
+        const virtualTrack: HTMLElement = this.parent.element.querySelector('.' + cls.VIRTUAL_TRACK_CLASS);
+        this.parent.virtualScrollModule.updateVirtualTrackHeight(virtualTrack);
+        const resTable: HTMLElement =
+            this.parent.element.querySelector('.' + cls.RESOURCE_COLUMN_WRAP_CLASS + ' ' + 'table') as HTMLElement;
+        const contentTable: HTMLElement =
+            this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS + ' ' + 'table') as HTMLElement;
+        const eventTable: HTMLElement = this.parent.element.querySelector('.' + cls.EVENT_TABLE_CLASS) as HTMLElement;
+        this.parent.virtualScrollModule.updateContent(resTable, contentTable, eventTable, this.renderedResources);
+        const timeIndicator: HTMLElement = this.parent.element.querySelector('.' + cls.CURRENT_TIMELINE_CLASS) as HTMLElement;
+        if (!isNullOrUndefined(timeIndicator)) {
+            timeIndicator.style.height =
+                (this.parent.element.querySelector('.' + cls.CONTENT_TABLE_CLASS) as HTMLElement).offsetHeight + 'px';
+        }
+    }
+
+    public renderResourceHeader(): void {
+        const resourceWrapper: HTMLElement = createElement('div', { className: cls.RESOURCE_TOOLBAR_CONTAINER });
+        resourceWrapper.innerHTML = '<div class="' + cls.RESOURCE_HEADER_TOOLBAR + '"><div class="' + cls.RESOURCE_MENU + '">' +
+            '<div class="e-icons ' + cls.RESOURCE_MENU_ICON + '"></div></div><div class="' + cls.RESOURCE_LEVEL_TITLE + '"></div></div>';
+        if (this.parent.currentView === 'MonthAgenda') {
+            const target: Element = this.parent.activeView.getPanel().querySelector('.' + cls.CONTENT_WRAP_CLASS);
+            target.insertBefore(resourceWrapper, target.querySelector('.' + cls.WRAPPER_CONTAINER_CLASS));
+        } else {
+            this.parent.element.insertBefore(resourceWrapper, this.parent.element.querySelector('.' + cls.TABLE_CONTAINER_CLASS));
+        }
+        this.renderResourceHeaderText();
+        EventHandler.add(resourceWrapper.querySelector('.' + cls.RESOURCE_MENU_ICON), 'click', this.menuClick, this);
+    }
+
+    public renderResourceTree(): void {
+        this.popupOverlay = createElement('div', { className: cls.RESOURCE_TREE_POPUP_OVERLAY });
+        const treeWrapper: HTMLElement = createElement('div', { className: cls.RESOURCE_TREE_POPUP + ' e-popup-close' });
+        if (this.parent.currentView === 'MonthAgenda') {
+            const target: Element = this.parent.activeView.getPanel().querySelector('.' + cls.WRAPPER_CONTAINER_CLASS);
+            target.insertBefore(treeWrapper, target.children[0]);
+            target.appendChild(this.popupOverlay);
+        } else {
+            this.parent.element.querySelector('.' + cls.TABLE_CONTAINER_CLASS).appendChild(treeWrapper);
+            this.parent.element.querySelector('.' + cls.TABLE_CONTAINER_CLASS).appendChild(this.popupOverlay);
+        }
+        const resourceTree: HTMLElement = createElement('div', { className: cls.RESOURCE_TREE });
+        treeWrapper.appendChild(resourceTree);
+        this.treeViewObj = new TreeView({
+            cssClass: this.parent.cssClass,
+            enableRtl: this.parent.enableRtl,
+            enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
+            fields: {
+                dataSource: [].slice.call(this.generateTreeData()) as Record<string, any>[],
+                id: 'resourceId',
+                text: 'resourceName',
+                child: 'resourceChild'
+            },
+            nodeTemplate: this.parent.resourceHeaderTemplate as any,
+            nodeClicked: this.resourceClick.bind(this),
+            created: this.resourceTreeCreated.bind(this)
+        });
+        this.treeViewObj.root = this.parent.root ? this.parent.root : this.parent;
+        this.treeViewObj.appendTo(resourceTree);
+        this.treeViewObj.expandAll();
+        this.treePopup = new Popup(treeWrapper, {
+            targetType: 'relative',
+            actionOnScroll: 'none',
+            content: this.treeViewObj.element,
+            relateTo: this.parent.element.querySelector('.' + cls.TABLE_CONTAINER_CLASS) as HTMLElement,
+            enableRtl: this.parent.enableRtl,
+            hideAnimation: { name: 'SlideLeftOut', duration: 500 },
+            showAnimation: { name: 'SlideLeftIn', duration: 500 },
+            viewPortElement: this.parent.element.querySelector('.' + (this.parent.currentView === 'MonthAgenda' ?
+                cls.WRAPPER_CONTAINER_CLASS : cls.TABLE_CONTAINER_CLASS)) as HTMLElement
+        });
+        this.parent.on(events.documentClick, this.documentClick, this);
+    }
+
+    private resourceTreeCreated(): void {
+        if (this.parent.activeViewOptions.resourceHeaderTemplate && (this as any).parent.portals && (this.treeViewObj as any).portals) {
+            (this as any).parent.portals = (this as any).parent.portals.concat((this.treeViewObj as any).portals);
+            this.parent.renderTemplates();
+        }
+    }
+
+    private generateTreeData(isTimeLine?: boolean): ResourceDetails[] | TdData[] {
+        const treeCollection: ResourceDetails[] = [];
+        const resTreeColl: TdData[] = [];
+        let groupIndex: number = 0;
+        for (let i: number = 0, len: number = this.resourceTreeLevel.length; i < len; i++) {
+            const treeHandler: CallbackFunction = (treeLevel: TreeSlotData, index: number, levelId: string): ResourceDetails => {
+                const resource: ResourcesModel = this.resourceCollection[parseInt(index.toString(), 10)];
+                let treeArgs: ResourceDetails;
+                let resObj: TdData;
+                if (!isTimeLine) {
+                    treeArgs = {
+                        resourceId: levelId,
+                        resourceName: treeLevel.resourceData[resource.textField] as string,
+                        resource: treeLevel.resource,
+                        resourceData: treeLevel.resourceData
+                    };
+                } else {
+                    resObj = {
+                        type: 'resourceHeader', resource: treeLevel.resource,
+                        resourceData: treeLevel.resourceData, groupIndex: groupIndex,
+                        groupOrder: treeLevel.groupOrder
+                    };
+                    resTreeColl.push(resObj);
+                    groupIndex++;
+                }
+                if (treeLevel.child.length > 0 && !isTimeLine) {
+                    treeArgs.resourceChild = [];
+                }
+                let count: number = 1;
+                for (const tree of treeLevel.child) {
+                    if (!isTimeLine) {
+                        treeArgs.resourceChild.push(treeHandler(tree, index + 1, levelId + '-' + count));
+                    } else {
+                        treeHandler(tree, index + 1, levelId + '-' + count);
+                    }
+                    count += 1;
+                }
+                if (isTimeLine) {
+                    extend(resObj.resourceData, { Count: count - 1 });
+                }
+                return treeArgs;
+            };
+            if (!isTimeLine) {
+                treeCollection.push(treeHandler(this.resourceTreeLevel[parseInt(i.toString(), 10)], 0, (i + 1).toString()));
+            } else {
+                treeHandler(this.resourceTreeLevel[parseInt(i.toString(), 10)], 0, (i + 1).toString());
+            }
+        }
+        if (isTimeLine) {
+            this.lastResourceLevel = resTreeColl;
+            return resTreeColl;
+        } else {
+            return treeCollection;
+        }
+    }
+
+    private renderResourceHeaderText(): void {
+        const resource: TdData = this.lastResourceLevel[this.parent.uiStateValues.groupIndex];
+        const headerCollection: HTMLElement[] = [];
+        for (let i: number = 0, len: number = resource.groupOrder.length; i < len; i++) {
+            const resourceLevel: ResourcesModel = this.resourceCollection[parseInt(i.toString(), 10)];
+            const resourceText: Record<string, any>[] =
+                (resourceLevel.dataSource as Record<string, any>[]).filter((resData: Record<string, any>) =>
+                    resData[resourceLevel.idField] === resource.groupOrder[parseInt(i.toString(), 10)]);
+            const resourceName: HTMLElement = createElement('div', { className: cls.RESOURCE_NAME });
+            this.parent.sanitize((<Record<string, any>>resourceText[0])[resourceLevel.textField] as string, resourceName);
+            headerCollection.push(resourceName);
+            const levelIcon: HTMLElement = createElement('div', { className: 'e-icons e-icon-next' });
+            headerCollection.push(levelIcon);
+        }
+        headerCollection.pop();
+        const target: HTMLElement = (this.parent.currentView === 'MonthAgenda') ? this.parent.activeView.getPanel() : this.parent.element;
+        const headerWrapper: Element = target.querySelector('.' + cls.RESOURCE_LEVEL_TITLE);
+        util.removeChildren(headerWrapper);
+        for (const header of headerCollection) {
+            headerWrapper.appendChild(header);
+        }
+        if (this.lastResourceLevel.length === 1) {
+            addClass([this.parent.element.querySelector('.' + cls.RESOURCE_MENU)], cls.DISABLE_CLASS);
+        }
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    private menuClick(event: Event): void {
+        if (this.parent.element.querySelector('.' + cls.RESOURCE_TREE_POPUP).classList.contains(cls.POPUP_OPEN)) {
+            this.treePopup.hide();
+            removeClass([this.popupOverlay], cls.ENABLE_CLASS);
+        } else {
+            const treeNodes: HTMLElement[] = [].slice.call(this.treeViewObj.element.querySelectorAll('.e-list-item:not(.e-has-child)'));
+            removeClass(treeNodes, 'e-active');
+            addClass([treeNodes[this.parent.uiStateValues.groupIndex]], 'e-active');
+            this.treePopup.show();
+            addClass([this.popupOverlay], cls.ENABLE_CLASS);
+        }
+    }
+
+    public selectResourceByIndex(groupIndex: number): void {
+        if (this.lastResourceLevel && groupIndex > -1 && groupIndex < this.lastResourceLevel.length) {
+            this.triggerEvents(groupIndex);
+        }
+    }
+
+    private resourceClick(event: NodeClickEventArgs): void {
+        if (!event.node.classList.contains('e-has-child')) {
+            this.treePopup.hide();
+            removeClass([this.popupOverlay], cls.ENABLE_CLASS);
+            const treeNodes: HTMLLIElement[] = [].slice.call(this.treeViewObj.element.querySelectorAll('.e-list-item:not(.e-has-child)'));
+            const groupIndex: number = treeNodes.indexOf(event.node);
+            this.triggerEvents(groupIndex, event);
+            event.event.preventDefault();
+        }
+    }
+
+    private triggerEvents(groupIndex: number, event?: NodeClickEventArgs): void {
+        let args: ActionEventArgs = { cancel: false, event: (event) ? event.event : null, groupIndex: groupIndex, requestType: 'resourceChange' };
+        this.parent.trigger(events.actionBegin, args, (actionArgs: ActionEventArgs) => {
+            if (!actionArgs.cancel) {
+                this.parent.uiStateValues.groupIndex = actionArgs.groupIndex;
+                this.parent.renderModule.render(this.parent.currentView);
+                args = {
+                    cancel: false, event: (event) ? event.event : null, groupIndex: this.parent.uiStateValues.groupIndex, requestType: 'resourceChanged'
+                };
+                this.parent.adaptiveGroupIndex = this.parent.uiStateValues.groupIndex;
+                this.parent.trigger(events.actionComplete, args);
+            }
+        });
+    }
+
+    private documentClick(args: { event: Event }): void {
+        if (closest(args.event.target as Element, '.' + cls.RESOURCE_TREE_POPUP)) {
+            return;
+        }
+        const treeWrapper: Element = this.parent.element.querySelector('.' + cls.RESOURCE_TREE_POPUP);
+        if (treeWrapper && treeWrapper.classList.contains(cls.POPUP_OPEN)) {
+            this.treePopup.hide();
+            removeClass([this.popupOverlay], cls.ENABLE_CLASS);
+        }
+    }
+
+    public bindResourcesData(isSetModel: boolean): void {
+        this.parent.showSpinner();
+        const promises: Promise<any>[] = [];
+        for (const resource of this.parent.resources) {
+            const dataModule: Data = new Data(this.parent, resource.dataSource, resource.query);
+            promises.push(dataModule.getData(dataModule.generateQuery()));
+        }
+        Promise.all(promises).then((e: ReturnType[]) => this.dataManagerSuccess(e, isSetModel))
+            .catch((e: ReturnType) => this.parent.crudModule.dataManagerFailure(e));
+    }
+
+    private dataManagerSuccess(e: ReturnType[], isSetModel: boolean): void {
+        if (!this.parent || this.parent && this.parent.isDestroyed) { return; }
+        this.parent.resourceCollection = [];
+        for (let i: number = 0, length: number = e.length; i < length; i++) {
+            const resource: ResourcesModel = this.parent.resources[parseInt(i.toString(), 10)];
+            const resourceObj: ResourcesModel = this.getResourceModel(resource, e[parseInt(i.toString(), 10)].result);
+            this.parent.resourceCollection.push(resourceObj);
+        }
+        this.refreshLayout(isSetModel);
+    }
+
+    private getResourceModel(resource: ResourcesModel, resourceData?: Record<string, any>[]): ResourcesModel {
+        const resourceObj: ResourcesModel = {
+            field: resource.field,
+            title: resource.title,
+            name: resource.name,
+            allowMultiple: resource.allowMultiple,
+            dataSource: resourceData || resource.dataSource,
+            idField: resource.idField,
+            textField: resource.textField,
+            groupIDField: resource.groupIDField,
+            colorField: resource.colorField,
+            startHourField: resource.startHourField,
+            endHourField: resource.endHourField,
+            workDaysField: resource.workDaysField,
+            expandedField: resource.expandedField,
+            cssClassField: resource.cssClassField
+        };
+        return resourceObj;
+    }
+
+    public refreshLayout(isSetModel: boolean): void {
+        if (isNullOrUndefined(this.parent.uiStateValues.groupIndex) || !(this.parent.enablePersistence)) {
+            this.parent.uiStateValues.groupIndex = 0;
+        }
+        this.parent.renderElements(isSetModel);
+    }
+
+    public setResourceCollection(): void {
+        let requiredResources: ResourcesModel[] = [];
+        this.resourceCollection = [];
+        this.colorIndex = null;
+        if (this.parent.activeViewOptions.group.resources.length > 0) {
+            for (const resource of this.parent.activeViewOptions.group.resources) {
+                const index: number = util.findIndexInData(<Record<string, any>[]>this.parent.resourceCollection, 'name', resource);
+                if (index >= 0) {
+                    requiredResources.push(this.parent.resourceCollection[parseInt(index.toString(), 10)]);
+                }
+            }
+        } else if (this.parent.resourceCollection.length > 0) {
+            requiredResources = this.parent.resourceCollection;
+        }
+        let index: number = 0;
+        for (const resource of requiredResources) {
+            const resources: ResourcesModel = this.getResourceModel(resource);
+            if (resource.name === this.parent.eventSettings.resourceColorField) {
+                this.colorIndex = index;
+            }
+            index++;
+            this.resourceCollection.push(resources);
+        }
+        if (isNullOrUndefined(this.colorIndex)) {
+            this.colorIndex = this.resourceCollection.length - 1;
+        }
+    }
+
+    public generateResourceLevels(innerDates: TdData[], isTimeLine?: boolean): TdData[][] {
+        const resources: ResourcesModel[] = this.resourceCollection;
+        const resTreeGroup: TdData[][][] = [];
+        let lastColumnDates: TdData[] = [];
+        const group: CallbackFunction = (resources: ResourcesModel[], index: number, prevResource?: ResourcesModel, prevResourceData?: Record<string, any>, prevOrder?: string[]): TdData[] => {
+            const resTree: TdData[] = [];
+            const resource: ResourcesModel = resources[0];
+            if (resource) {
+                let data: Record<string, any>[];
+                if (prevResourceData && this.parent.activeViewOptions.group.byGroupID) {
+                    const id: string = (prevResourceData as Record<string, any>)[prevResource.idField] as string;
+                    data = (resource.dataSource as Record<string, any>[]).filter((e: Record<string, any>) =>
+                        e[resource.groupIDField] === id);
+                } else {
+                    data = resource.dataSource as Record<string, any>[];
+                }
+                for (let i: number = 0; i < data.length; i++) {
+                    let groupOrder: string[] = [];
+                    if (prevOrder && prevOrder.length > 0) {
+                        groupOrder = groupOrder.concat(prevOrder);
+                    }
+                    groupOrder.push((data[parseInt(i.toString(), 10)] as Record<string, any>)[resource.idField] as string);
+                    const items: TdData[] = group(resources.slice(1), index + 1, resource, data[parseInt(i.toString(), 10)], groupOrder);
+                    // Here validate child item empty top level resource only
+                    if (index === 0 && items.length === 0 && this.resourceCollection.length > 1) {
+                        continue;
+                    }
+                    let dateCol: TdData[] = [];
+                    let renderDates: Date[] = this.parent.activeView.renderDates;
+                    let resWorkDays: number[];
+                    if (!this.parent.activeViewOptions.group.byDate && index + 1 === this.resourceCollection.length) {
+                        const workDays: number[] = data[parseInt(i.toString(), 10)][resource.workDaysField] as number[];
+                        const resStartHour: string = data[parseInt(i.toString(), 10)][resource.startHourField] as string;
+                        const resEndHour: string = data[parseInt(i.toString(), 10)][resource.endHourField] as string;
+                        if (workDays && workDays.length > 0) {
+                            renderDates = this.parent.activeView.getRenderDates(workDays);
+                            resWorkDays = workDays;
+                            dateCol = this.parent.activeView.getDateSlots(renderDates, workDays);
+                        } else {
+                            resWorkDays = this.parent.activeViewOptions.workDays;
+                            dateCol = innerDates;
+                        }
+                        const dateSlots: TdData[] = this.generateCustomHours(dateCol, resStartHour, resEndHour, groupOrder);
+                        lastColumnDates = lastColumnDates.concat(dateSlots);
+                    }
+                    const resCssClass: string = data[parseInt(i.toString(), 10)][resource.cssClassField] as string;
+                    const slotData: TreeSlotData = {
+                        type: 'resourceHeader', className: ['e-resource-cells'],
+                        resourceLevelIndex: index, groupOrder: groupOrder,
+                        resource: resource, resourceData: data[parseInt(i.toString(), 10)],
+                        colSpan: this.parent.activeViewOptions.group.byDate ? 1 : dateCol.length,
+                        renderDates: renderDates, workDays: resWorkDays, cssClass: resCssClass,
+                        child: items
+                    };
+                    resTree.push(slotData);
+                }
+                if (!resTreeGroup[parseInt(index.toString(), 10)]) {
+                    resTreeGroup[parseInt(index.toString(), 10)] = [];
+                }
+                if (resTree.length > 0) {
+                    resTreeGroup[parseInt(index.toString(), 10)].push(resTree);
+                }
+                return resTree;
+            }
+            return [];
+        };
+        this.resourceTreeLevel = group(resources, 0);
+        return (isTimeLine) ? [] : this.generateHeaderLevels(resTreeGroup, lastColumnDates, innerDates);
+    }
+
+    public generateCustomHours(renderDates: TdData[], startHour: string, endHour: string, groupOrder?: string[]): TdData[] {
+        const dateSlots: TdData[] = <TdData[]>extend([], renderDates, null, true);
+        for (const dateSlot of dateSlots) {
+            if (startHour) {
+                dateSlot.startHour = this.parent.getStartEndTime(startHour);
+            }
+            if (endHour) {
+                dateSlot.endHour = this.parent.getStartEndTime(endHour);
+            }
+            if (groupOrder) {
+                dateSlot.groupOrder = groupOrder;
+            }
+        }
+        return dateSlots;
+    }
+
+    private generateHeaderLevels(resTreeGroup: TdData[][][], lastColumnDates: TdData[], headerDates: TdData[]): TdData[][] {
+        const headerLevels: TdData[][] = [];
+        for (let i: number = resTreeGroup.length - 1; i >= 0; i--) {
+            let temp: number = 0;
+            for (const currentLevelChilds of resTreeGroup[parseInt(i.toString(), 10)]) {
+                for (const currentLevelChild of currentLevelChilds) {
+                    if (resTreeGroup[i + 1] && resTreeGroup[i + 1].length > 0) {
+                        const nextLevelChilds: TdData[] = resTreeGroup[parseInt((i + 1).toString(), 10)][parseInt(temp.toString(), 10)];
+                        if (!nextLevelChilds) { continue; }
+                        let colSpan: number = 0;
+                        for (const nextLevelChild of nextLevelChilds) {
+                            if (!this.parent.activeViewOptions.group.byGroupID || (this.parent.activeViewOptions.group.byGroupID &&
+                                nextLevelChild.resourceData[nextLevelChild.resource.groupIDField] ===
+                                currentLevelChild.resourceData[currentLevelChild.resource.idField])) {
+                                colSpan += nextLevelChild.colSpan;
+                            }
+                        }
+                        currentLevelChild.colSpan = colSpan;
+                    }
+                    currentLevelChild.groupIndex = temp;
+                    temp++;
+                    headerLevels[currentLevelChild.resourceLevelIndex] = headerLevels[currentLevelChild.resourceLevelIndex] || [];
+                    headerLevels[currentLevelChild.resourceLevelIndex].push(currentLevelChild);
+                }
+            }
+        }
+        this.lastResourceLevel = headerLevels.slice(-1)[0] || [];
+        if (!this.parent.activeViewOptions.group.byDate) {
+            let index: number = 0;
+            for (const lastLevelResource of this.lastResourceLevel) {
+                for (let i: number = 0; i < lastLevelResource.colSpan; i++) {
+                    lastColumnDates[parseInt(index.toString(), 10)].groupIndex = lastLevelResource.groupIndex;
+                    index++;
+                }
+            }
+            headerLevels.push(lastColumnDates);
+            return headerLevels;
+        }
+        const dateHeaderLevels: TdData[][] = [];
+        const levels: TdData[][] = <TdData[][]>extend([], headerLevels, null, true);
+        const datesColumn: TdData[] = [];
+        if (this.parent.activeViewOptions.group.hideNonWorkingDays) {
+            const renderDates: Date[][] = [];
+            let dateIndex: number = 0;
+            for (const headerDate of headerDates) {
+                this.resourceDateTree[parseInt(dateIndex.toString(), 10)] = [];
+                const currentDateLevels: TdData[][] = [];
+                for (let j: number = 0; j < this.lastResourceLevel.length; j++) {
+                    let workDays: number[] = this.lastResourceLevel[parseInt(j.toString(), 10)].resourceData[this.lastResourceLevel[parseInt(j.toString(), 10)].resource.workDaysField];
+                    if (!workDays) {
+                        workDays = this.parent.activeViewOptions.workDays;
+                    }
+                    if (workDays.indexOf(headerDate.date.getDay()) !== -1) {
+                        const resTd: TdData = <TdData>extend({}, this.lastResourceLevel[parseInt(j.toString(), 10)], null, true);
+                        resTd.date = headerDate.date;
+                        this.lastResourceLevel[parseInt(j.toString(), 10)].workDays = workDays;
+                        resTd.startHour = this.parent.getStartEndTime((resTd.resourceData[resTd.resource.startHourField] as string)) ||
+                            headerDate.startHour;
+                        resTd.endHour = this.parent.getStartEndTime((resTd.resourceData[resTd.resource.endHourField] as string)) ||
+                            headerDate.endHour;
+                        this.resourceDateTree[parseInt(dateIndex.toString(), 10)].push(resTd);
+                        for (let k: number = 0; k < resTd.groupOrder.length; k++) {
+                            if (!currentDateLevels[parseInt(k.toString(), 10)]) {
+                                currentDateLevels[parseInt(k.toString(), 10)] = [];
+                            }
+                            if (k === resTd.groupOrder.length - 1) {
+                                if (!renderDates[parseInt(j.toString(), 10)]) {
+                                    renderDates[parseInt(j.toString(), 10)] = [];
+                                }
+                                const filterDates: Date[] = resTd.renderDates.filter((x: Date) => x.getDay() === headerDate.date.getDay());
+                                renderDates[parseInt(j.toString(), 10)] = renderDates[parseInt(j.toString(), 10)].concat(filterDates);
+                                currentDateLevels[parseInt(k.toString(), 10)].push(resTd);
+                                continue;
+                            }
+                            const currentLevel: TdData[] = levels[parseInt(k.toString(), 10)];
+                            const filteredResource: TdData[] = currentLevel.filter((data: TdData) =>
+                                data.resourceData[data.resource.idField] === resTd.groupOrder[parseInt(k.toString(), 10)]);
+                            if (filteredResource && filteredResource.length > 0) {
+                                const existedResource: TdData[] = currentDateLevels[parseInt(k.toString(), 10)].filter((data: TdData) =>
+                                    data.resourceData[data.resource.idField] === resTd.groupOrder[parseInt(k.toString(), 10)]);
+                                if (existedResource && existedResource.length > 0) {
+                                    existedResource[0].colSpan += 1;
+                                }
+                                else {
+                                    const filteredTd: TdData = <TdData>extend({}, filteredResource[0], null, true);
+                                    filteredTd.colSpan = 1;
+                                    currentDateLevels[parseInt(k.toString(), 10)].push(filteredTd);
+                                }
+                            }
+                        }
+                    }
+                }
+                if (currentDateLevels.length > 0) {
+                    for (let l: number = 0; l < levels.length; l++) {
+                        if (!dateHeaderLevels[parseInt(l.toString(), 10)]) {
+                            dateHeaderLevels[parseInt(l.toString(), 10)] = [];
+                        }
+                        dateHeaderLevels[parseInt(l.toString(), 10)] = dateHeaderLevels[parseInt(l.toString(), 10)].concat(currentDateLevels[parseInt(l.toString(), 10)]);
+                    }
+                    headerDate.colSpan = currentDateLevels[currentDateLevels.length - 1].length;
+                    datesColumn.push(headerDate);
+                }
+                dateIndex++;
+            }
+            this.resourceDateTree = this.resourceDateTree.filter((data: TdData[]) => data.length > 0);
+            this.lastResourceLevel.forEach((x: TdData, index: number) => {
+                if (renderDates[parseInt(index.toString(), 10)]) {
+                    x.renderDates = renderDates[parseInt(index.toString(), 10)].sort((a: Date, b: Date) => a.getTime() - b.getTime());
+                }
+            });
+            dateHeaderLevels.unshift(datesColumn);
+            return dateHeaderLevels;
+        }
+        let dateColSpan: number = 0;
+        for (const firstRowTd of levels[0]) {
+            dateColSpan += firstRowTd.colSpan;
+        }
+        for (const headerDate of headerDates) {
+            headerDate.colSpan = dateColSpan;
+            datesColumn.push(headerDate);
+            const resGroup: TdData[][] = <TdData[][]>extend([], levels, null, true);
+            for (let k: number = 0, length: number = resGroup.length; k < length; k++) {
+                if (k === resGroup.length - 1) {
+                    for (const resTd of resGroup[parseInt(k.toString(), 10)]) {
+                        resTd.date = headerDate.date;
+                        resTd.workDays = headerDate.workDays;
+                        resTd.startHour = this.parent.getStartEndTime((resTd.resourceData[resTd.resource.startHourField] as string)) ||
+                            headerDate.startHour;
+                        resTd.endHour = this.parent.getStartEndTime((resTd.resourceData[resTd.resource.endHourField] as string)) ||
+                            headerDate.endHour;
+                    }
+                }
+                if (!dateHeaderLevels[parseInt(k.toString(), 10)]) {
+                    dateHeaderLevels[parseInt(k.toString(), 10)] = [];
+                }
+                dateHeaderLevels[parseInt(k.toString(), 10)] = dateHeaderLevels[parseInt(k.toString(), 10)].concat(resGroup[parseInt(k.toString(), 10)]);
+            }
+        }
+        dateHeaderLevels.unshift(datesColumn);
+        return dateHeaderLevels;
+    }
+
+    public setResourceValues(eventObj: Record<string, any>, groupIndex?: number): void {
+        const setValues: CallbackFunction = (index: number, field: string, value: Record<string, any>) => {
+            if (this.resourceCollection[parseInt(index.toString(), 10)].allowMultiple && this.parent.activeViewOptions.group.allowGroupEdit) {
+                eventObj[`${field}`] = [value];
+            } else {
+                eventObj[`${field}`] = value;
+            }
+        };
+        if (groupIndex === void 0) {
+            groupIndex = this.parent.uiStateValues.isGroupAdaptive ? this.parent.uiStateValues.groupIndex :
+                this.parent.activeCellsData.groupIndex;
+        }
+        if (this.parent.activeViewOptions.group.resources.length > 0 && !isNullOrUndefined(groupIndex)) {
+            const groupOrder: number[] | string[] = this.lastResourceLevel[parseInt(groupIndex.toString(), 10)].groupOrder;
+            for (let index: number = 0; index < this.resourceCollection.length; index++) {
+                setValues(index, this.resourceCollection[parseInt(index.toString(), 10)].field, groupOrder[parseInt(index.toString(), 10)]);
+            }
+        } else if (this.parent.resourceCollection.length > 0) {
+            for (let index: number = 0; index < this.resourceCollection.length; index++) {
+                const data: Record<string, any> = (this.resourceCollection[parseInt(index.toString(), 10)] as Record<string, unknown[]>).dataSource[0] as Record<string, any>;
+                if (data) { setValues(index, this.resourceCollection[parseInt(index.toString(), 10)].field, data[this.resourceCollection[parseInt(index.toString(), 10)].idField]); }
+            }
+        }
+    }
+
+    public getResourceColor(eventObj: Record<string, any>, groupOrder?: string[]): string {
+        const colorFieldIndex: number = (!isNullOrUndefined(groupOrder) &&
+            this.colorIndex > groupOrder.length - 1) ? groupOrder.length - 1 : this.colorIndex;
+        const resource: ResourcesModel = this.resourceCollection[parseInt(colorFieldIndex.toString(), 10)];
+        if (isNullOrUndefined(groupOrder) && this.parent.activeViewOptions.group.allowGroupEdit && resource.allowMultiple) {
+            return undefined;
+        }
+        const id: string = isNullOrUndefined(groupOrder) ? <string>eventObj[resource.field] : <string>groupOrder[parseInt(colorFieldIndex.toString(), 10)];
+        const data: Record<string, any>[] = this.filterData(resource.dataSource as Record<string, any>[], resource.idField, id);
+        if (data.length > 0) {
+            return data[0][resource.colorField] as string;
+        }
+        return undefined;
+    }
+
+    public getCssClass(eventObj: Record<string, any>): string {
+        const resource: ResourcesModel = this.resourceCollection.slice(-1)[0];
+        if (this.parent.activeViewOptions.group.allowGroupEdit && resource.allowMultiple) {
+            return undefined;
+        }
+        const data: Record<string, any>[] = this.filterData(resource.dataSource as Record<string, any>[], resource.idField, eventObj[resource.field] as string);
+        if (data.length > 0) {
+            return data[0][resource.cssClassField] as string;
+        }
+        return undefined;
+    }
+
+    public getResourceRenderDates(): Date[] {
+        // eslint-disable-next-line prefer-spread
+        const resourceDates: Date[] = [].concat.apply([], this.lastResourceLevel.map((e: TdData) => e.renderDates));
+        const time: number[] = resourceDates.map((dateObj: Date) => dateObj.getTime());
+        const removeDuplicateDates: CallbackFunction = (dateColl: Date[]) => dateColl.filter((date: Date, index: number) =>
+            time.indexOf(date.getTime()) === index);
+        const renderDates: Date[] = removeDuplicateDates(resourceDates);
+        renderDates.sort((a: Date, b: Date) => a.getTime() - b.getTime());
+        return renderDates;
+    }
+
+    private filterData(dataSource: Record<string, any>[], field: string, value: string): Record<string, any>[] {
+        return dataSource.filter((data: Record<string, any>) => data[`${field}`] === value);
+    }
+
+    public getResourceData(eventObj: Record<string, any>, index: number, groupEditIndex: number[]): void {
+        if (this.parent.activeViewOptions.group.allowGroupEdit) {
+            const resourceObj: Record<string, any> = {};
+            for (const groupIndex of groupEditIndex) {
+                const resourceLevel: Record<string, any>[] = this.lastResourceLevel[parseInt(groupIndex.toString(), 10)].groupOrder as unknown as Record<string, any>[];
+                for (let level: number = 0, length: number = resourceLevel.length; level < length; level++) {
+                    const fieldName: string = this.resourceCollection[parseInt((level as number).toString(), 10)].field;
+                    if (isNullOrUndefined(resourceObj[`${fieldName}`])) {
+                        resourceObj[`${fieldName}`] = [];
+                    }
+                    (<Record<string, any>[]>resourceObj[`${fieldName}`]).push(resourceLevel[parseInt(level.toString(), 10)]);
+                }
+            }
+            eventObj = extend(eventObj, resourceObj) as Record<string, any>;
+        } else {
+            for (let level: number = 0, length: number = this.resourceCollection.length; level < length; level++) {
+                if (this.lastResourceLevel[parseInt(index.toString(), 10)]) {
+                    eventObj[this.resourceCollection[parseInt(level.toString(), 10)].field] = this.lastResourceLevel[parseInt(index.toString(), 10)].groupOrder[parseInt(level.toString(), 10)];
+                }
+            }
+        }
+    }
+
+    public addResource(resources: Record<string, any> | Record<string, any>[], name: string, index: number): void {
+        const resourceCollection: Record<string, any>[] = (resources instanceof Array) ? resources : [resources];
+        for (const resource of this.parent.resourceCollection) {
+            if (resource.name === name) {
+                resourceCollection.forEach((addObj: Record<string, any>, i: number) =>
+                    new DataManager({ json: resource.dataSource as Record<string, any>[] }).insert(addObj, null, null, index + i));
+                break;
+            }
+        }
+        this.refreshLayout(true);
+    }
+
+    public removeResource(resourceId: string | string[] | number | number[], name: string): void {
+        const resourceCollection: (string | number)[] = (resourceId instanceof Array) ? resourceId : [resourceId];
+        for (const resource of this.parent.resourceCollection) {
+            if (resource.name === name) {
+                resourceCollection.forEach((removeObj: string | number) =>
+                    new DataManager({ json: resource.dataSource as Record<string, any>[] }).remove(resource.idField, removeObj));
+                break;
+            }
+        }
+        this.refreshLayout(true);
+    }
+
+    public getIndexFromResourceId(id: string | number, name?: string, resourceData?: ResourcesModel, event?: Record<string, any>, parentField?: string): number {
+        name = name || this.parent.resourceCollection.slice(-1)[0].name;
+        if (isNullOrUndefined(resourceData)) {
+            resourceData = this.resourceCollection.filter((e: ResourcesModel) => e.name === name)[0];
+            if (isNullOrUndefined(resourceData)) {
+                return null;
+            }
+        }
+        const resource: Record<string, any> = (resourceData.dataSource as Record<string, any>[]).filter((e: Record<string, any>) => {
+            if (event && e[resourceData.idField] === id) {
+                if (e[resourceData.groupIDField] === event[`${parentField}`]) {
+                    return e[resourceData.idField] === id;
+                }
+                return null;
+            } else {
+                return e[resourceData.idField] === id;
+            }
+        })[0] as Record<string, any>;
+        return (this.lastResourceLevel.map((e: TdData) => e.resourceData).indexOf(resource));
+    }
+
+    public resourceExpand(id: string | number, name: string, hide: boolean): void {
+        const resource: ResourcesModel = this.parent.resourceCollection.filter((e: ResourcesModel) => {
+            if (e.name === name) {
+                return e;
+            }
+            return null;
+        })[0];
+        let index: number = 0;
+        const resourceData: Record<string, any> = (resource.dataSource as Record<string, any>[]).filter((e: Record<string, any>) => e[resource.idField] === id)[0] as Record<string, any>;
+        if (!this.parent.activeViewOptions.group.byGroupID) {
+            index = this.getIndexFromResourceId(id, name, resource);
+        } else {
+            index = this.lastResourceLevel.map((e: TdData) => e.resourceData).indexOf(resourceData);
+        }
+        const target: HTMLElement =
+            this.parent.element.querySelector('.' + cls.RESOURCE_COLUMN_WRAP_CLASS + ' ' + `[data-group-index="${index}"]` +
+                ' ' + '.' + cls.RESOURCE_TREE_ICON_CLASS) as HTMLElement;
+        if (target) {
+            if (target.classList.contains(cls.RESOURCE_EXPAND_CLASS) && !hide) {
+                target.click();
+            } else if (target.classList.contains(cls.RESOURCE_COLLAPSE_CLASS) && hide) {
+                target.click();
+            }
+        }
+    }
+    public resourceScroll(id: string | number, name: string): void {
+        if (this.parent.isAdaptive || ['Agenda', 'MonthAgenda'].indexOf(this.parent.currentView) > -1) {
+            return;
+        }
+        const levelName: string = name || this.parent.resourceCollection.slice(-1)[0].name;
+        let levelIndex: number = this.parent.resourceCollection.length - 1;
+        const resource: ResourcesModel = this.parent.resourceCollection.filter((e: ResourcesModel, index: number) => {
+            if (e.name === levelName) {
+                levelIndex = index;
+                return e;
+            }
+            return null;
+        })[0];
+        const scrollElement: HTMLElement = this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS) as HTMLElement;
+        let index: number = 0;
+        if (this.parent.activeView.isTimelineView()) {
+            if (!this.parent.activeViewOptions.group.byGroupID) {
+                index = this.getIndexFromResourceId(id, levelName, resource);
+            } else {
+                const resourceData: Record<string, any> = (resource.dataSource as Record<string, any>[]).filter((e: Record<string, any>) =>
+                    e[resource.idField] === id)[0] as Record<string, any>;
+                index = this.lastResourceLevel.map((e: TdData) => e.resourceData).indexOf(resourceData);
+            }
+            if (this.parent.virtualScrollModule) {
+                const virtual: HTMLElement = this.parent.element.querySelector('.' + cls.VIRTUAL_TRACK_CLASS) as HTMLElement;
+                const averageRowHeight: number = Math.round(virtual.offsetHeight / this.expandedResources.length);
+                if (this.parent.rowAutoHeight) {
+                    scrollElement.scrollTop = 0;
+                    this.parent.virtualScrollModule.virtualScrolling();
+                }
+                scrollElement.scrollTop = (index * averageRowHeight) - (((this.parent.virtualScrollModule.bufferCount - 1) * averageRowHeight));
+                this.parent.virtualScrollModule.virtualScrolling();
+                if (this.parent.rowAutoHeight) {
+                    const td: HTMLElement =
+                        this.parent.element.querySelector(`.${cls.WORK_CELLS_CLASS}[data-group-index="${index}"]`) as HTMLElement;
+                    if (td && !td.parentElement.classList.contains(cls.HIDDEN_CLASS)) {
+                        scrollElement.scrollTop =
+                            (scrollElement.scrollTop < td.offsetTop) ? td.offsetTop : scrollElement.scrollTop + td.offsetTop;
+                    }
+                } else {
+                    scrollElement.scrollTop = (index * averageRowHeight);
+                }
+            } else {
+                const td: HTMLElement =
+                    this.parent.element.querySelector(`.${cls.WORK_CELLS_CLASS}[data-group-index="${index}"]`) as HTMLElement;
+                if (td && !td.parentElement.classList.contains(cls.HIDDEN_CLASS)) {
+                    scrollElement.scrollTop = td.offsetTop;
+                }
+            }
+        } else {
+            if (!this.parent.activeViewOptions.group.byGroupID) {
+                index = this.getIndexFromResourceId(id, levelName, resource);
+            } else {
+                if (levelName === this.parent.resourceCollection.slice(-1)[0].name) {
+                    index = this.lastResourceLevel.map((e: TdData) => (e.resourceData as Record<string, any>)[resource.idField]).indexOf(id);
+                } else {
+                    index = (resource.dataSource as Record<string, any>[]).map((e: Record<string, any>) => e[resource.idField]).indexOf(id);
+                }
+            }
+            const offsetTarget: Element = this.parent.currentView === 'Month' ? this.parent.element.querySelector(`.${cls.DATE_HEADER_WRAP_CLASS} tbody tr:nth-child(${levelIndex + 1})`)
+                : this.parent.element.querySelector(`.${cls.HEADER_ROW_CLASS}:nth-child(${levelIndex + 1})`);
+            const offset: number[] = [].slice.call(offsetTarget.children).map((node: HTMLElement) => node.offsetLeft);
+            scrollElement.scrollLeft = offset[parseInt(index.toString(), 10)];
+        }
+    }
+
+    public destroy(): void {
+        this.parent.off(events.documentClick, this.documentClick);
+        if (this.treeViewObj) {
+            if ((this.treeViewObj as any).portals && (this.treeViewObj as any).portals.length > 0) {
+                const treeViewTemplates: string[] = (this.treeViewObj as any).portals.map((x: any) => x.propName);
+                if (treeViewTemplates.length > 0) {
+                    this.parent.resetTemplates(treeViewTemplates);
+                }
+            }
+            this.treeViewObj.destroy();
+            this.treeViewObj = null;
+        }
+        if (this.treePopup) {
+            this.treePopup.destroy();
+            this.treePopup = null;
+            remove(this.parent.element.querySelector('.' + cls.RESOURCE_TREE_POPUP));
+            remove(this.parent.element.querySelector('.' + cls.RESOURCE_TREE_POPUP_OVERLAY));
+        }
+        const resToolBarEle: Element = this.parent.element.querySelector('.' + cls.RESOURCE_TOOLBAR_CONTAINER);
+        if (resToolBarEle) {
+            remove(resToolBarEle);
+        }
+    }
+
+}