@syncfusion/ej2-treegrid 31.1.17 → 31.1.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ej2-treegrid.min.js +2 -2
- package/dist/ej2-treegrid.umd.min.js +2 -2
- package/dist/ej2-treegrid.umd.min.js.map +1 -1
- package/dist/es6/ej2-treegrid.es2015.js +13 -4
- package/dist/es6/ej2-treegrid.es2015.js.map +1 -1
- package/dist/es6/ej2-treegrid.es5.js +13 -4
- package/dist/es6/ej2-treegrid.es5.js.map +1 -1
- package/dist/global/ej2-treegrid.min.js +2 -2
- package/dist/global/ej2-treegrid.min.js.map +1 -1
- package/dist/global/index.d.ts +1 -1
- package/package.json +14 -50
- package/src/treegrid/actions/edit.js +1 -1
- package/src/treegrid/actions/rowdragdrop.js +12 -3
- package/styles/bootstrap4-lite.css +8 -0
- package/styles/bootstrap4.css +8 -0
- package/styles/treegrid/bootstrap4.css +8 -0
- package/dist/ts/index.d.ts +0 -4
- package/dist/ts/index.ts +0 -4
- package/dist/ts/treegrid/actions/batch-edit.d.ts +0 -74
- package/dist/ts/treegrid/actions/batch-edit.ts +0 -627
- package/dist/ts/treegrid/actions/clipboard.d.ts +0 -36
- package/dist/ts/treegrid/actions/clipboard.ts +0 -174
- package/dist/ts/treegrid/actions/column-chooser.d.ts +0 -37
- package/dist/ts/treegrid/actions/column-chooser.ts +0 -55
- package/dist/ts/treegrid/actions/column-menu.d.ts +0 -24
- package/dist/ts/treegrid/actions/column-menu.ts +0 -39
- package/dist/ts/treegrid/actions/command-column.d.ts +0 -24
- package/dist/ts/treegrid/actions/command-column.ts +0 -32
- package/dist/ts/treegrid/actions/context-menu.d.ts +0 -42
- package/dist/ts/treegrid/actions/context-menu.ts +0 -149
- package/dist/ts/treegrid/actions/crud-actions.d.ts +0 -66
- package/dist/ts/treegrid/actions/crud-actions.ts +0 -388
- package/dist/ts/treegrid/actions/detail-row.d.ts +0 -39
- package/dist/ts/treegrid/actions/detail-row.ts +0 -124
- package/dist/ts/treegrid/actions/edit.d.ts +0 -121
- package/dist/ts/treegrid/actions/edit.ts +0 -1083
- package/dist/ts/treegrid/actions/excel-export.d.ts +0 -67
- package/dist/ts/treegrid/actions/excel-export.ts +0 -240
- package/dist/ts/treegrid/actions/filter.d.ts +0 -57
- package/dist/ts/treegrid/actions/filter.ts +0 -231
- package/dist/ts/treegrid/actions/freeze-column.d.ts +0 -28
- package/dist/ts/treegrid/actions/freeze-column.ts +0 -119
- package/dist/ts/treegrid/actions/index.d.ts +0 -24
- package/dist/ts/treegrid/actions/index.ts +0 -24
- package/dist/ts/treegrid/actions/infinite-scroll.d.ts +0 -96
- package/dist/ts/treegrid/actions/infinite-scroll.ts +0 -320
- package/dist/ts/treegrid/actions/logger.d.ts +0 -25
- package/dist/ts/treegrid/actions/logger.ts +0 -136
- package/dist/ts/treegrid/actions/page.d.ts +0 -67
- package/dist/ts/treegrid/actions/page.ts +0 -212
- package/dist/ts/treegrid/actions/pdf-export.d.ts +0 -63
- package/dist/ts/treegrid/actions/pdf-export.ts +0 -182
- package/dist/ts/treegrid/actions/print.d.ts +0 -37
- package/dist/ts/treegrid/actions/print.ts +0 -69
- package/dist/ts/treegrid/actions/reorder.d.ts +0 -36
- package/dist/ts/treegrid/actions/reorder.ts +0 -60
- package/dist/ts/treegrid/actions/resize.d.ts +0 -36
- package/dist/ts/treegrid/actions/resize.ts +0 -54
- package/dist/ts/treegrid/actions/rowdragdrop.d.ts +0 -405
- package/dist/ts/treegrid/actions/rowdragdrop.ts +0 -1896
- package/dist/ts/treegrid/actions/selection.d.ts +0 -51
- package/dist/ts/treegrid/actions/selection.ts +0 -530
- package/dist/ts/treegrid/actions/sort.d.ts +0 -63
- package/dist/ts/treegrid/actions/sort.ts +0 -149
- package/dist/ts/treegrid/actions/summary.d.ts +0 -47
- package/dist/ts/treegrid/actions/summary.ts +0 -231
- package/dist/ts/treegrid/actions/toolbar.d.ts +0 -52
- package/dist/ts/treegrid/actions/toolbar.ts +0 -154
- package/dist/ts/treegrid/actions/virtual-scroll.d.ts +0 -90
- package/dist/ts/treegrid/actions/virtual-scroll.ts +0 -306
- package/dist/ts/treegrid/base/constant.d.ts +0 -158
- package/dist/ts/treegrid/base/constant.ts +0 -158
- package/dist/ts/treegrid/base/data.d.ts +0 -90
- package/dist/ts/treegrid/base/data.ts +0 -904
- package/dist/ts/treegrid/base/index.d.ts +0 -11
- package/dist/ts/treegrid/base/index.ts +0 -11
- package/dist/ts/treegrid/base/interface.d.ts +0 -186
- package/dist/ts/treegrid/base/interface.ts +0 -191
- package/dist/ts/treegrid/base/treegrid-model.d.ts +0 -1100
- package/dist/ts/treegrid/base/treegrid.d.ts +0 -2422
- package/dist/ts/treegrid/base/treegrid.ts +0 -5962
- package/dist/ts/treegrid/enum.d.ts +0 -152
- package/dist/ts/treegrid/enum.ts +0 -217
- package/dist/ts/treegrid/index.d.ts +0 -9
- package/dist/ts/treegrid/index.ts +0 -9
- package/dist/ts/treegrid/models/column-chooser-settings-model.d.ts +0 -62
- package/dist/ts/treegrid/models/column-chooser-settings.d.ts +0 -53
- package/dist/ts/treegrid/models/column-chooser-settings.ts +0 -67
- package/dist/ts/treegrid/models/column-model.d.ts +0 -30
- package/dist/ts/treegrid/models/column.d.ts +0 -697
- package/dist/ts/treegrid/models/column.ts +0 -800
- package/dist/ts/treegrid/models/edit-settings-model.d.ts +0 -100
- package/dist/ts/treegrid/models/edit-settings.d.ts +0 -89
- package/dist/ts/treegrid/models/edit-settings.ts +0 -111
- package/dist/ts/treegrid/models/filter-settings-model.d.ts +0 -216
- package/dist/ts/treegrid/models/filter-settings.d.ts +0 -195
- package/dist/ts/treegrid/models/filter-settings.ts +0 -237
- package/dist/ts/treegrid/models/index.d.ts +0 -24
- package/dist/ts/treegrid/models/index.ts +0 -24
- package/dist/ts/treegrid/models/infinite-scroll-settings-model.d.ts +0 -29
- package/dist/ts/treegrid/models/infinite-scroll-settings.d.ts +0 -25
- package/dist/ts/treegrid/models/infinite-scroll-settings.ts +0 -31
- package/dist/ts/treegrid/models/loading-indicator-model.d.ts +0 -21
- package/dist/ts/treegrid/models/loading-indicator.d.ts +0 -19
- package/dist/ts/treegrid/models/loading-indicator.ts +0 -21
- package/dist/ts/treegrid/models/page-settings-model.d.ts +0 -66
- package/dist/ts/treegrid/models/page-settings.d.ts +0 -57
- package/dist/ts/treegrid/models/page-settings.ts +0 -73
- package/dist/ts/treegrid/models/rowdrop-settings-model.d.ts +0 -15
- package/dist/ts/treegrid/models/rowdrop-settings.d.ts +0 -34
- package/dist/ts/treegrid/models/rowdrop-settings.ts +0 -37
- package/dist/ts/treegrid/models/search-settings-model.d.ts +0 -79
- package/dist/ts/treegrid/models/search-settings.d.ts +0 -73
- package/dist/ts/treegrid/models/search-settings.ts +0 -83
- package/dist/ts/treegrid/models/selection-settings-model.d.ts +0 -76
- package/dist/ts/treegrid/models/selection-settings.d.ts +0 -68
- package/dist/ts/treegrid/models/selection-settings.ts +0 -82
- package/dist/ts/treegrid/models/sort-settings-model.d.ts +0 -49
- package/dist/ts/treegrid/models/sort-settings.d.ts +0 -43
- package/dist/ts/treegrid/models/sort-settings.ts +0 -51
- package/dist/ts/treegrid/models/summary-model.d.ts +0 -93
- package/dist/ts/treegrid/models/summary.d.ts +0 -126
- package/dist/ts/treegrid/models/summary.ts +0 -170
- package/dist/ts/treegrid/models/textwrap-settings-model.d.ts +0 -21
- package/dist/ts/treegrid/models/textwrap-settings.d.ts +0 -19
- package/dist/ts/treegrid/models/textwrap-settings.ts +0 -21
- package/dist/ts/treegrid/renderer/index.d.ts +0 -5
- package/dist/ts/treegrid/renderer/index.ts +0 -5
- package/dist/ts/treegrid/renderer/render.d.ts +0 -41
- package/dist/ts/treegrid/renderer/render.ts +0 -379
- package/dist/ts/treegrid/renderer/virtual-row-model-generator.d.ts +0 -16
- package/dist/ts/treegrid/renderer/virtual-row-model-generator.ts +0 -90
- package/dist/ts/treegrid/renderer/virtual-tree-content-render.d.ts +0 -353
- package/dist/ts/treegrid/renderer/virtual-tree-content-render.ts +0 -1125
- package/dist/ts/treegrid/utils.d.ts +0 -70
- package/dist/ts/treegrid/utils.ts +0 -217
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { TreeGrid } from '..';
|
|
2
|
-
import { QueryCellInfoEventArgs, RowDataBoundEventArgs } from '@syncfusion/ej2-grids';
|
|
3
|
-
/**
|
|
4
|
-
* TreeGrid render module
|
|
5
|
-
*
|
|
6
|
-
* @hidden
|
|
7
|
-
*/
|
|
8
|
-
export declare class Render {
|
|
9
|
-
private parent;
|
|
10
|
-
private templateResult;
|
|
11
|
-
/**
|
|
12
|
-
* Constructor for render module
|
|
13
|
-
*
|
|
14
|
-
* @param {TreeGrid} parent - Tree Grid instance
|
|
15
|
-
*/
|
|
16
|
-
constructor(parent?: TreeGrid);
|
|
17
|
-
/**
|
|
18
|
-
* Updated row elements for TreeGrid
|
|
19
|
-
*
|
|
20
|
-
* @param {RowDataBoundEventArgs} args - Row details before its bound to DOM
|
|
21
|
-
* @returns {void}
|
|
22
|
-
*/
|
|
23
|
-
RowModifier(args: RowDataBoundEventArgs): void;
|
|
24
|
-
/**
|
|
25
|
-
* cell renderer for tree column index cell
|
|
26
|
-
*
|
|
27
|
-
* @param {QueryCellInfoEventArgs} args - Cell detail before its bound to DOM
|
|
28
|
-
* @returns {void}
|
|
29
|
-
*/
|
|
30
|
-
cellRender(args: QueryCellInfoEventArgs): void;
|
|
31
|
-
private updateTreeCell;
|
|
32
|
-
/**
|
|
33
|
-
* @param {string} columnUid - Defines column uid
|
|
34
|
-
* @returns {void}
|
|
35
|
-
* @hidden
|
|
36
|
-
*/
|
|
37
|
-
private refreshReactColumnTemplateByUid;
|
|
38
|
-
private columnTemplateResult;
|
|
39
|
-
private reactTemplateRender;
|
|
40
|
-
destroy(): void;
|
|
41
|
-
}
|
|
@@ -1,379 +0,0 @@
|
|
|
1
|
-
import { TreeGrid } from '..';
|
|
2
|
-
import { QueryCellInfoEventArgs, IGrid, RowDataBoundEventArgs, getObject, appendChildren } from '@syncfusion/ej2-grids';
|
|
3
|
-
import { templateCompiler, extend, Row, CellRenderer, Cell } from '@syncfusion/ej2-grids';
|
|
4
|
-
import { addClass, createElement, isNullOrUndefined, getValue } from '@syncfusion/ej2-base';
|
|
5
|
-
import { ITreeData } from '../base/interface';
|
|
6
|
-
import * as events from '../base/constant';
|
|
7
|
-
import { isRemoteData, isOffline, getExpandStatus, isFilterChildHierarchy } from '../utils';
|
|
8
|
-
import { Column } from '../models';
|
|
9
|
-
import { Column as gridColumn } from '@syncfusion/ej2-grids';
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* TreeGrid render module
|
|
13
|
-
*
|
|
14
|
-
* @hidden
|
|
15
|
-
*/
|
|
16
|
-
export class Render {
|
|
17
|
-
//Module declarations
|
|
18
|
-
private parent: TreeGrid;
|
|
19
|
-
private templateResult: NodeList;
|
|
20
|
-
/**
|
|
21
|
-
* Constructor for render module
|
|
22
|
-
*
|
|
23
|
-
* @param {TreeGrid} parent - Tree Grid instance
|
|
24
|
-
*/
|
|
25
|
-
constructor(parent?: TreeGrid) {
|
|
26
|
-
this.parent = parent;
|
|
27
|
-
this.templateResult = null;
|
|
28
|
-
this.parent.grid.on('template-result', this.columnTemplateResult, this);
|
|
29
|
-
this.parent.grid.on('reactTemplateRender', this.reactTemplateRender, this);
|
|
30
|
-
}
|
|
31
|
-
/**
|
|
32
|
-
* Updated row elements for TreeGrid
|
|
33
|
-
*
|
|
34
|
-
* @param {RowDataBoundEventArgs} args - Row details before its bound to DOM
|
|
35
|
-
* @returns {void}
|
|
36
|
-
*/
|
|
37
|
-
public RowModifier(args: RowDataBoundEventArgs): void {
|
|
38
|
-
if (!args.data) {
|
|
39
|
-
return;
|
|
40
|
-
}
|
|
41
|
-
const data: ITreeData = <ITreeData>args.data;
|
|
42
|
-
const parentData: ITreeData = <ITreeData>data.parentItem;
|
|
43
|
-
if (!isNullOrUndefined(data.parentItem) && !isFilterChildHierarchy(this.parent) &&
|
|
44
|
-
(!(this.parent.allowPaging && !(this.parent.pageSettings.pageSizeMode === 'Root')) ||
|
|
45
|
-
(isRemoteData(this.parent) && !isOffline(this.parent)))) {
|
|
46
|
-
const collapsed: boolean = (this.parent.initialRender && (!(isNullOrUndefined(parentData[this.parent.expandStateMapping]) ||
|
|
47
|
-
parentData[this.parent.expandStateMapping]) || this.parent.enableCollapseAll)) ||
|
|
48
|
-
!getExpandStatus(this.parent, args.data, this.parent.grid.getCurrentViewRecords());
|
|
49
|
-
if (collapsed && !isNullOrUndefined(args.row)) {
|
|
50
|
-
this.parent['toggleRowVisibility'](<HTMLTableRowElement>args.row, 'e-childrow-hidden');
|
|
51
|
-
const rowsObj: Row<gridColumn>[] = this.parent.grid.getRowsObject();
|
|
52
|
-
if (!this.parent.grid.isFrozenGrid() && !isNullOrUndefined(args.row.getAttribute('data-uid'))) {
|
|
53
|
-
rowsObj.filter((e : Row<gridColumn>) => e.uid === args.row.getAttribute('data-uid'))[0].visible = false;
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
if (isRemoteData(this.parent) && !isOffline(this.parent)) {
|
|
58
|
-
const proxy: TreeGrid = this.parent;
|
|
59
|
-
const parentrec: ITreeData[] = this.parent.getCurrentViewRecords().filter((rec: ITreeData) => {
|
|
60
|
-
return getValue(proxy.idMapping, rec) === getValue(proxy.parentIdMapping, data);
|
|
61
|
-
});
|
|
62
|
-
if (parentrec.length > 0 && !parentrec[0].isSummaryRow && !isNullOrUndefined(args.row)) {
|
|
63
|
-
const display: string = parentrec[0].expanded ? 'e-childrow-visible' : 'e-childrow-hidden';
|
|
64
|
-
this.parent['toggleRowVisibility'](<HTMLTableRowElement>args.row, display);
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
//addClass([args.row], 'e-gridrowindex' + index + 'level' + (<ITreeData>args.data).level);
|
|
68
|
-
const summaryRow: boolean = getObject('isSummaryRow', args.data);
|
|
69
|
-
if (summaryRow) {
|
|
70
|
-
addClass([args.row], 'e-summaryrow');
|
|
71
|
-
}
|
|
72
|
-
if (!isNullOrUndefined(args.row)) {
|
|
73
|
-
if (args.row.querySelector('.e-treegridexpand')) {
|
|
74
|
-
args.row.setAttribute('aria-expanded', 'true');
|
|
75
|
-
} else if (args.row.querySelector('.e-treegridcollapse')) {
|
|
76
|
-
args.row.setAttribute('aria-expanded', 'false');
|
|
77
|
-
}
|
|
78
|
-
if (this.parent.enableCollapseAll && this.parent.initialRender) {
|
|
79
|
-
if (!isNullOrUndefined(data.parentItem)) {
|
|
80
|
-
this.parent['toggleRowVisibility'](<HTMLTableRowElement>args.row, 'e-childrow-hidden');
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
const dragStartData: string = 'dragStartData';
|
|
85
|
-
const draggedRecord: string = 'draggedRecord';
|
|
86
|
-
if (this.parent.rowDragAndDropModule && this.parent.grid.rowDragAndDropModule && (this.parent.grid.rowDragAndDropModule[`${dragStartData}`] ||
|
|
87
|
-
this.parent.rowDragAndDropModule[`${draggedRecord}`]) && this.parent.getContentTable().scrollHeight <= this.parent.getContent().clientHeight) {
|
|
88
|
-
const lastRowBorder: string = 'lastRowBorder';
|
|
89
|
-
const lastVisualData: ITreeData = this.parent.getVisibleRecords()[this.parent.getVisibleRecords().length - 1];
|
|
90
|
-
if (lastVisualData.uniqueID === (args.data as ITreeData).uniqueID && !isNullOrUndefined(args.row as HTMLTableRowElement) && !(args.row as HTMLTableRowElement).cells[0].classList.contains('e-lastrowcell')) {
|
|
91
|
-
this.parent[`${lastRowBorder}`](args.row as HTMLTableRowElement, true);
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
if ((<{ isReact?: boolean }>this.parent).isReact) {
|
|
95
|
-
const renderReactTemplates: string = 'renderReactTemplates';
|
|
96
|
-
// eslint-disable-next-line @typescript-eslint/no-this-alias
|
|
97
|
-
const thisRef: Render = this;
|
|
98
|
-
// tslint:disable-next-line:typedef
|
|
99
|
-
thisRef.parent[`${renderReactTemplates}`](function () {
|
|
100
|
-
thisRef.parent.trigger(events.rowDataBound, args);
|
|
101
|
-
});
|
|
102
|
-
} else {
|
|
103
|
-
this.parent.trigger(events.rowDataBound, args);
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
/**
|
|
107
|
-
* cell renderer for tree column index cell
|
|
108
|
-
*
|
|
109
|
-
* @param {QueryCellInfoEventArgs} args - Cell detail before its bound to DOM
|
|
110
|
-
* @returns {void}
|
|
111
|
-
*/
|
|
112
|
-
public cellRender(args: QueryCellInfoEventArgs): void {
|
|
113
|
-
if (!args.data) {
|
|
114
|
-
return;
|
|
115
|
-
}
|
|
116
|
-
const grid: IGrid = this.parent.grid; const data: ITreeData = <ITreeData>args.data; let index: number;
|
|
117
|
-
const ispadfilter: boolean = isNullOrUndefined(data.filterLevel);
|
|
118
|
-
const pad: number = ispadfilter ? data.level : data.filterLevel;
|
|
119
|
-
let totalIconsWidth: number = 0; let cellElement: HTMLElement;
|
|
120
|
-
const column: Column = this.parent.getColumnByUid(args.column.uid);
|
|
121
|
-
const summaryRow: boolean = data.isSummaryRow; const frozenColumns: number = this.parent.getFrozenColumns();
|
|
122
|
-
if (!isNullOrUndefined(data.parentItem)) {
|
|
123
|
-
index = data.parentItem.index;
|
|
124
|
-
} else { index = data.index; }
|
|
125
|
-
let columnIndex: number; const getVirtualColIndexByUid: string = 'getVirtualColIndexByUid';
|
|
126
|
-
if (this.parent.enableColumnVirtualization && !this.parent.initialRender) {
|
|
127
|
-
columnIndex = this.parent[`${getVirtualColIndexByUid}`](args.column.uid);
|
|
128
|
-
} else {
|
|
129
|
-
columnIndex = grid.getColumnIndexByUid(args.column.uid);
|
|
130
|
-
}
|
|
131
|
-
if (columnIndex === this.parent.treeColumnIndex && (args.requestType === 'add' || args.requestType
|
|
132
|
-
=== 'rowDragAndDrop' || args.requestType === 'delete' || isNullOrUndefined(args.cell.querySelector('.e-treecell')))) {
|
|
133
|
-
const container: Element = createElement('div', { className: 'e-treecolumn-container' });
|
|
134
|
-
const emptyExpandIcon: HTMLElement = createElement('span', { className: 'e-icons e-none' });
|
|
135
|
-
emptyExpandIcon.style.width = '10px';
|
|
136
|
-
emptyExpandIcon.style.display = 'inline-block';
|
|
137
|
-
for (let n: number = 0; n < pad; n++) {
|
|
138
|
-
totalIconsWidth += 10;
|
|
139
|
-
container.appendChild(emptyExpandIcon.cloneNode());
|
|
140
|
-
}
|
|
141
|
-
let iconRequired: boolean = !isNullOrUndefined(data.hasFilteredChildRecords)
|
|
142
|
-
? data.hasFilteredChildRecords : data.hasChildRecords;
|
|
143
|
-
if (iconRequired && !isNullOrUndefined(data.childRecords)) {
|
|
144
|
-
if (this.parent['isFromGantt'] && this.parent.loadChildOnDemand) {
|
|
145
|
-
iconRequired = data.hasChildRecords;
|
|
146
|
-
}
|
|
147
|
-
else {
|
|
148
|
-
iconRequired = !((<ITreeData>data).childRecords.length === 0 );
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
if (iconRequired) {
|
|
152
|
-
addClass([args.cell], 'e-treerowcell');
|
|
153
|
-
args.cell.setAttribute('aria-expanded', data.expanded ? 'true' : 'false');
|
|
154
|
-
const expandIcon: Element = createElement('span', { className: 'e-icons' });
|
|
155
|
-
let expand: boolean;
|
|
156
|
-
if (this.parent.initialRender) {
|
|
157
|
-
expand = data.expanded &&
|
|
158
|
-
(isNullOrUndefined(data[this.parent.expandStateMapping]) || data[this.parent.expandStateMapping]) &&
|
|
159
|
-
!this.parent.enableCollapseAll;
|
|
160
|
-
} else {
|
|
161
|
-
expand = !(!data.expanded || !getExpandStatus(this.parent, data, this.parent.grid.getCurrentViewRecords()));
|
|
162
|
-
// TicketsID 43483: While Modify Data Expand and Collapse Icon Behavior Changed
|
|
163
|
-
if (this.parent.editSettings.mode === 'Cell' && !isRemoteData(this.parent)) {
|
|
164
|
-
const selectedRow: ITreeData = this.parent.flatData.find((item: ITreeData) => item.uniqueID === data.uniqueID);
|
|
165
|
-
if (!isNullOrUndefined(selectedRow)) {
|
|
166
|
-
expand = data.expanded !== selectedRow.expanded ? selectedRow.expanded : data.expanded;
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
addClass([expandIcon], (expand ) ? 'e-treegridexpand' : 'e-treegridcollapse');
|
|
171
|
-
totalIconsWidth += 18;
|
|
172
|
-
container.appendChild(expandIcon);
|
|
173
|
-
emptyExpandIcon.style.width = '4px'; totalIconsWidth += 7;
|
|
174
|
-
container.appendChild(emptyExpandIcon.cloneNode());
|
|
175
|
-
} else if (pad || !pad && !data.level) {
|
|
176
|
-
// icons width
|
|
177
|
-
totalIconsWidth += 20;
|
|
178
|
-
container.appendChild(emptyExpandIcon.cloneNode());
|
|
179
|
-
container.appendChild(emptyExpandIcon.cloneNode());
|
|
180
|
-
}
|
|
181
|
-
//should add below code when paging funcitonality implemented
|
|
182
|
-
// if (data.hasChildRecords) {
|
|
183
|
-
// addClass([expandIcon], data.expanded ? 'e-treegridexpand' : 'e-treegridcollapse');
|
|
184
|
-
// }
|
|
185
|
-
cellElement = createElement('span', { className: 'e-treecell' });
|
|
186
|
-
if (this.parent.allowTextWrap) {
|
|
187
|
-
cellElement.style.width = 'Calc(100% - ' + totalIconsWidth + 'px)';
|
|
188
|
-
}
|
|
189
|
-
addClass([args.cell], 'e-gridrowindex' + index + 'level' + data.level);
|
|
190
|
-
this.updateTreeCell(args, cellElement);
|
|
191
|
-
container.appendChild(cellElement);
|
|
192
|
-
args.cell.appendChild(container);
|
|
193
|
-
} else if (this.templateResult) {
|
|
194
|
-
this.templateResult = null;
|
|
195
|
-
}
|
|
196
|
-
const freeze: boolean = (grid.getFrozenLeftColumnsCount() > 0 || grid.getFrozenRightColumnsCount() > 0 ) ? true : false;
|
|
197
|
-
if (!freeze) {
|
|
198
|
-
if (frozenColumns > this.parent.treeColumnIndex && frozenColumns > 0 &&
|
|
199
|
-
grid.getColumnIndexByUid(args.column.uid) === frozenColumns) {
|
|
200
|
-
addClass([args.cell], 'e-gridrowindex' + index + 'level' + data.level);
|
|
201
|
-
} else if (frozenColumns < this.parent.treeColumnIndex && frozenColumns > 0 &&
|
|
202
|
-
(grid.getColumnIndexByUid(args.column.uid) === frozenColumns
|
|
203
|
-
|| grid.getColumnIndexByUid(args.column.uid) === frozenColumns - 1)) {
|
|
204
|
-
addClass([args.cell], 'e-gridrowindex' + index + 'level' + data.level);
|
|
205
|
-
} else if (frozenColumns === this.parent.treeColumnIndex && frozenColumns > 0 &&
|
|
206
|
-
grid.getColumnIndexByUid(args.column.uid) === this.parent.treeColumnIndex - 1) {
|
|
207
|
-
addClass([args.cell], 'e-gridrowindex' + index + 'level' + data.level);
|
|
208
|
-
}
|
|
209
|
-
} else {
|
|
210
|
-
const freezerightColumns: gridColumn[] = grid.getFrozenRightColumns();
|
|
211
|
-
const freezeLeftColumns: gridColumn[] = grid.getFrozenLeftColumns();
|
|
212
|
-
const movableColumns: gridColumn[] = grid.getMovableColumns();
|
|
213
|
-
if ((freezerightColumns.length > 0) && freezerightColumns[0].field === args.column.field) {
|
|
214
|
-
addClass([args.cell], 'e-gridrowindex' + index + 'level' + data.level);
|
|
215
|
-
} else if ((freezeLeftColumns.length > 0) && freezeLeftColumns[0].field === args.column.field) {
|
|
216
|
-
addClass([args.cell], 'e-gridrowindex' + index + 'level' + data.level);
|
|
217
|
-
} else if ((movableColumns.length > 0) && movableColumns[0].field === args.column.field) {
|
|
218
|
-
addClass([args.cell], 'e-gridrowindex' + index + 'level' + data.level);
|
|
219
|
-
}
|
|
220
|
-
}
|
|
221
|
-
if (!isNullOrUndefined(column) && column.showCheckbox) {
|
|
222
|
-
this.parent.notify('columnCheckbox', args);
|
|
223
|
-
if (this.parent.allowTextWrap) {
|
|
224
|
-
const checkboxElement: HTMLElement = <HTMLElement>args.cell.querySelectorAll('.e-frame')[0];
|
|
225
|
-
const width: number = parseInt(checkboxElement.style.width, 16);
|
|
226
|
-
totalIconsWidth += width; totalIconsWidth += 10;
|
|
227
|
-
if (grid.getColumnIndexByUid(args.column.uid) === this.parent.treeColumnIndex) {
|
|
228
|
-
cellElement = <HTMLElement>args.cell.querySelector('.e-treecell');
|
|
229
|
-
} else {
|
|
230
|
-
cellElement = <HTMLElement>args.cell.querySelector('.e-treecheckbox');
|
|
231
|
-
}
|
|
232
|
-
cellElement.style.width = 'Calc(100% - ' + totalIconsWidth + 'px)';
|
|
233
|
-
}
|
|
234
|
-
}
|
|
235
|
-
if (summaryRow) {
|
|
236
|
-
addClass([args.cell], 'e-summarycell');
|
|
237
|
-
let summaryData: string = getObject(args.column.field, args.data);
|
|
238
|
-
summaryData = isNullOrUndefined(summaryData) ? null : summaryData;
|
|
239
|
-
if (args.cell.querySelector('.e-treecell') != null) {
|
|
240
|
-
args.cell.querySelector('.e-treecell').innerHTML = summaryData;
|
|
241
|
-
} else {
|
|
242
|
-
if (args.column.template) {
|
|
243
|
-
args.cell.innerHTML = null;
|
|
244
|
-
}
|
|
245
|
-
else {
|
|
246
|
-
args.cell.innerHTML = summaryData;
|
|
247
|
-
}
|
|
248
|
-
}
|
|
249
|
-
}
|
|
250
|
-
this.parent['args'] = args;
|
|
251
|
-
const columnModel: Column[] = getValue('columnModel', this.parent);
|
|
252
|
-
const treeColumn: Column = columnModel[this.parent.treeColumnIndex];
|
|
253
|
-
if ((isNullOrUndefined(this.parent.rowTemplate) && !((<{ isReact?: boolean }>this.parent).isReact))
|
|
254
|
-
|| (((<{ isReact?: boolean }>this.parent).isReact) &&
|
|
255
|
-
!args.column['template'])) {
|
|
256
|
-
this.parent.trigger(events.queryCellInfo, args);
|
|
257
|
-
} else if ((((<{ isReact?: boolean }>this.parent).isReact) &&
|
|
258
|
-
treeColumn.field !== args.column.field)) {
|
|
259
|
-
const renderReactTemplates: string = 'renderReactTemplates';
|
|
260
|
-
// eslint-disable-next-line @typescript-eslint/no-this-alias
|
|
261
|
-
const thisRef: Render = this;
|
|
262
|
-
// tslint:disable-next-line:typedef
|
|
263
|
-
thisRef.parent[`${renderReactTemplates}`](function () {
|
|
264
|
-
thisRef.parent.trigger(events.queryCellInfo, args);
|
|
265
|
-
});
|
|
266
|
-
}
|
|
267
|
-
}
|
|
268
|
-
private updateTreeCell(args: QueryCellInfoEventArgs, cellElement: HTMLElement): void {
|
|
269
|
-
const columnModel: Column[] = getValue('columnModel', this.parent);
|
|
270
|
-
const treeColumn: Column = columnModel[this.parent.treeColumnIndex];
|
|
271
|
-
const templateFn: string = 'templateFn';
|
|
272
|
-
const colindex: number = args.column.index;
|
|
273
|
-
if (isNullOrUndefined(treeColumn.field)) {
|
|
274
|
-
args.cell.setAttribute('aria-colindex', (colindex + 1) + '');
|
|
275
|
-
}
|
|
276
|
-
if (treeColumn.field === args.column.field && !isNullOrUndefined(treeColumn.template)) {
|
|
277
|
-
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
|
|
278
|
-
args.column.template = treeColumn.template as any;
|
|
279
|
-
args.column[`${templateFn}`] = templateCompiler(args.column.template);
|
|
280
|
-
args.cell.classList.add('e-templatecell');
|
|
281
|
-
}
|
|
282
|
-
const textContent: string = args.cell.querySelector('.e-treecell') != null ?
|
|
283
|
-
args.cell.querySelector('.e-treecell').innerHTML : args.cell.innerHTML;
|
|
284
|
-
if ( typeof(args.column.template) === 'object' && this.templateResult ) {
|
|
285
|
-
appendChildren(cellElement , this.templateResult);
|
|
286
|
-
this.templateResult = null;
|
|
287
|
-
args.cell.innerHTML = '';
|
|
288
|
-
} else if (args.cell.classList.contains('e-templatecell')) {
|
|
289
|
-
let len: number = args.cell.children.length;
|
|
290
|
-
const tempID: string = this.parent.element.id + args.column.uid;
|
|
291
|
-
if (treeColumn.field === args.column.field && !isNullOrUndefined(treeColumn.template)) {
|
|
292
|
-
const portals: string = 'portals';
|
|
293
|
-
const renderReactTemplates: string = 'renderReactTemplates';
|
|
294
|
-
if ((<{ isReact?: boolean }>this.parent).isReact && typeof (args.column.template) !== 'string') {
|
|
295
|
-
args.column[`${templateFn}`](args.data, this.parent, 'columnTemplate', tempID, null, null, cellElement);
|
|
296
|
-
if (isNullOrUndefined(this.parent.grid[`${portals}`])) {
|
|
297
|
-
this.parent.grid[`${portals}`] = this.parent[`${portals}`];
|
|
298
|
-
}
|
|
299
|
-
this.parent.notify('renderReactTemplate', this.parent[`${portals}`]);
|
|
300
|
-
// eslint-disable-next-line @typescript-eslint/no-this-alias
|
|
301
|
-
const thisRef: Render = this;
|
|
302
|
-
// tslint:disable-next-line:typedef
|
|
303
|
-
thisRef.parent[`${renderReactTemplates}`](function () {
|
|
304
|
-
thisRef.parent.trigger(events.queryCellInfo, args);
|
|
305
|
-
});
|
|
306
|
-
} else {
|
|
307
|
-
const str: string = 'isStringTemplate';
|
|
308
|
-
const result: Element[] = args.column[`${templateFn}`](
|
|
309
|
-
extend({ 'index': '' }, args.data), this.parent, 'template', tempID, this.parent[`${str}`]);
|
|
310
|
-
appendChildren(cellElement, result);
|
|
311
|
-
}
|
|
312
|
-
delete args.column.template;
|
|
313
|
-
delete args.column[`${templateFn}`];
|
|
314
|
-
args.cell.innerHTML = '';
|
|
315
|
-
} else {
|
|
316
|
-
for (let i: number = 0; i < len; len = args.cell.children.length) {
|
|
317
|
-
cellElement.appendChild(args.cell.children[parseInt(i.toString(), 10)]);
|
|
318
|
-
}
|
|
319
|
-
}
|
|
320
|
-
} else {
|
|
321
|
-
cellElement.innerHTML = textContent;
|
|
322
|
-
args.cell.innerHTML = '';
|
|
323
|
-
}
|
|
324
|
-
}
|
|
325
|
-
|
|
326
|
-
/**
|
|
327
|
-
* @param {string} columnUid - Defines column uid
|
|
328
|
-
* @returns {void}
|
|
329
|
-
* @hidden
|
|
330
|
-
*/
|
|
331
|
-
private refreshReactColumnTemplateByUid(columnUid: string): void {
|
|
332
|
-
if ((<{ isReact?: boolean }>this.parent).isReact) {
|
|
333
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
334
|
-
(this as any).parent.clearTemplate(['columnTemplate'], undefined, () => {
|
|
335
|
-
const cells: string = 'cells';
|
|
336
|
-
const rowIdx: string = 'index';
|
|
337
|
-
const rowsObj: Row<gridColumn>[] = this.parent.grid.getRowsObject();
|
|
338
|
-
const rows: Element[] = this.parent.getDataRows();
|
|
339
|
-
const indent: number = this.parent.grid.getIndentCount();
|
|
340
|
-
const cellIndex: number = this.parent.grid.getNormalizedColumnIndex(columnUid);
|
|
341
|
-
if (rows.length !== 0) {
|
|
342
|
-
for (let j: number = 0; j < rowsObj.length; j++) {
|
|
343
|
-
if (rowsObj[parseInt(j.toString(), 10)].isDataRow
|
|
344
|
-
&& !isNullOrUndefined(rowsObj[parseInt(j.toString(), 10)].index)) {
|
|
345
|
-
const cell: Cell<gridColumn> = rowsObj[parseInt(j.toString(), 10)][`${cells}`][parseInt(cellIndex.toString(), 10)];
|
|
346
|
-
const cellRenderer: CellRenderer = new CellRenderer(this.parent.grid as IGrid, this.parent.grid.serviceLocator);
|
|
347
|
-
const td: Element = rows.length >= rowsObj.length
|
|
348
|
-
? this.parent.getCellFromIndex(rowsObj[parseInt(j.toString(), 10)].index, cellIndex - indent)
|
|
349
|
-
: rows[rowsObj[parseInt(j.toString(), 10)].index].querySelector('.e-templatecell');
|
|
350
|
-
cellRenderer.refreshTD(td, cell, rowsObj[parseInt(j.toString(), 10)].data, { index: rowsObj[parseInt(j.toString(), 10)][`${rowIdx}`] });
|
|
351
|
-
const treecell: Element =
|
|
352
|
-
this.parent.getRows()[parseInt(j.toString(), 10)]
|
|
353
|
-
.cells[parseInt(cellIndex.toString(), 10)];
|
|
354
|
-
this.cellRender({ data: rowsObj[parseInt(j.toString(), 10)].data, cell: treecell, column: cell.column });
|
|
355
|
-
}
|
|
356
|
-
}
|
|
357
|
-
}
|
|
358
|
-
});
|
|
359
|
-
}
|
|
360
|
-
}
|
|
361
|
-
|
|
362
|
-
private columnTemplateResult(args: {template : NodeList, name: string}): void {
|
|
363
|
-
this.templateResult = args.template;
|
|
364
|
-
}
|
|
365
|
-
|
|
366
|
-
// eslint-disable-next-line
|
|
367
|
-
private reactTemplateRender(args: Object[], callBack?: any): void {
|
|
368
|
-
const renderReactTemplates: string = 'renderReactTemplates';
|
|
369
|
-
const portals: string = 'portals';
|
|
370
|
-
this.parent[`${portals}`] = args;
|
|
371
|
-
this.parent.notify('renderReactTemplate', this.parent[`${portals}`]);
|
|
372
|
-
this.parent[`${renderReactTemplates}`](callBack);
|
|
373
|
-
}
|
|
374
|
-
|
|
375
|
-
public destroy(): void {
|
|
376
|
-
this.parent.grid.off('template-result', this.columnTemplateResult);
|
|
377
|
-
this.parent.grid.off('reactTemplateRender', this.reactTemplateRender);
|
|
378
|
-
}
|
|
379
|
-
}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { VirtualRowModelGenerator } from '@syncfusion/ej2-grids';
|
|
2
|
-
import { NotifyArgs, Row, Column, IGrid } from '@syncfusion/ej2-grids';
|
|
3
|
-
/**
|
|
4
|
-
* RowModelGenerator is used to generate grid data rows.
|
|
5
|
-
*
|
|
6
|
-
* @hidden
|
|
7
|
-
*/
|
|
8
|
-
export declare class TreeVirtualRowModelGenerator extends VirtualRowModelGenerator {
|
|
9
|
-
private visualData;
|
|
10
|
-
constructor(parent: IGrid);
|
|
11
|
-
addEventListener(): void;
|
|
12
|
-
private getDatas;
|
|
13
|
-
private getDataInfo;
|
|
14
|
-
generateRows(data: Object[], notifyArgs?: NotifyArgs): Row<Column>[];
|
|
15
|
-
checkAndResetCache(action: string): boolean;
|
|
16
|
-
}
|
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
import { VirtualInfo, VirtualRowModelGenerator } from '@syncfusion/ej2-grids';
|
|
2
|
-
import { NotifyArgs, Row, Column, IGrid, Grid, VirtualContentRenderer } from '@syncfusion/ej2-grids';
|
|
3
|
-
import { ITreeData } from '../base';
|
|
4
|
-
import * as events from '../base/constant';
|
|
5
|
-
import { isNullOrUndefined } from '@syncfusion/ej2-base';
|
|
6
|
-
import { DataManager } from '@syncfusion/ej2-data';
|
|
7
|
-
import { isCountRequired, isRemoteData } from '../utils';
|
|
8
|
-
/**
|
|
9
|
-
* RowModelGenerator is used to generate grid data rows.
|
|
10
|
-
*
|
|
11
|
-
* @hidden
|
|
12
|
-
*/
|
|
13
|
-
|
|
14
|
-
export class TreeVirtualRowModelGenerator extends VirtualRowModelGenerator {
|
|
15
|
-
private visualData: ITreeData[];
|
|
16
|
-
constructor(parent: IGrid) {
|
|
17
|
-
super(parent);
|
|
18
|
-
this.addEventListener();
|
|
19
|
-
}
|
|
20
|
-
public addEventListener() : void {
|
|
21
|
-
this.parent.on(events.dataListener, this.getDatas, this);
|
|
22
|
-
}
|
|
23
|
-
private getDatas(args: {data: ITreeData[]}): void {
|
|
24
|
-
this.visualData = args.data;
|
|
25
|
-
}
|
|
26
|
-
private getDataInfo(): VirtualInfo{
|
|
27
|
-
return super.getData();
|
|
28
|
-
}
|
|
29
|
-
public generateRows(data: Object[], notifyArgs?: NotifyArgs): Row<Column>[] {
|
|
30
|
-
const info: VirtualInfo = this.getDataInfo();
|
|
31
|
-
if (notifyArgs.requestType === 'refresh' && (notifyArgs as any).isExpandCollapse) {
|
|
32
|
-
notifyArgs.virtualInfo = this['prevInfo'];
|
|
33
|
-
}
|
|
34
|
-
if (!isNullOrUndefined(notifyArgs.virtualInfo) && !(this.parent.root.loadChildOnDemand && isRemoteData(this.parent.root))) {
|
|
35
|
-
if (notifyArgs.virtualInfo.direction !== 'right' && notifyArgs.virtualInfo.direction !== 'left') {
|
|
36
|
-
if ((!isRemoteData(this.parent.root) || isCountRequired(this.parent))
|
|
37
|
-
|| notifyArgs.virtualInfo.blockIndexes.length === 1) {
|
|
38
|
-
notifyArgs.virtualInfo.blockIndexes = info.blockIndexes;
|
|
39
|
-
}
|
|
40
|
-
} else {
|
|
41
|
-
notifyArgs.virtualInfo.blockIndexes = this.getBlockIndexes(notifyArgs.virtualInfo.page);
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
if ((this.parent.dataSource instanceof DataManager && (this.parent.dataSource as DataManager).dataSource.url !== undefined
|
|
45
|
-
&& !(this.parent.dataSource as DataManager).dataSource.offline && (this.parent.dataSource as DataManager).dataSource.url !== '') || isCountRequired(this.parent)) {
|
|
46
|
-
return super.generateRows(data, notifyArgs);
|
|
47
|
-
} else {
|
|
48
|
-
if (!isNullOrUndefined(notifyArgs.requestType) && notifyArgs.requestType.toString() === 'collapseAll') {
|
|
49
|
-
notifyArgs.requestType = 'refresh';
|
|
50
|
-
}
|
|
51
|
-
const rows: Row<Column>[] = super.generateRows(data, notifyArgs);
|
|
52
|
-
if (!isNullOrUndefined(<ITreeData[]>(this.visualData))) {
|
|
53
|
-
for (let r: number = 0; r < rows.length; r++) {
|
|
54
|
-
rows[parseInt(r.toString(), 10)].index
|
|
55
|
-
= (<ITreeData[]>(this.visualData)).indexOf(rows[parseInt(r.toString(), 10)].data); }
|
|
56
|
-
}
|
|
57
|
-
return rows;
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
public checkAndResetCache(action: string): boolean {
|
|
61
|
-
const clear: boolean = ['paging', 'refresh', 'sorting', 'filtering', 'searching', 'reorder',
|
|
62
|
-
'save', 'delete'].some((value: string) => action === value);
|
|
63
|
-
if ((this.parent.dataSource instanceof DataManager && (this.parent.dataSource as DataManager).dataSource.url !== undefined
|
|
64
|
-
&& !(this.parent.dataSource as DataManager).dataSource.offline && (this.parent.dataSource as DataManager).dataSource.url !== '') || isCountRequired(this.parent)) {
|
|
65
|
-
const model: string = 'model';
|
|
66
|
-
const currentPage: number = this[`${model}`].currentPage;
|
|
67
|
-
if (clear) {
|
|
68
|
-
this.cache = {};
|
|
69
|
-
/*this.movableCache = {};
|
|
70
|
-
this.frozenRightCache = {};*/
|
|
71
|
-
this.data = {};
|
|
72
|
-
this.groups = {};
|
|
73
|
-
} else if (action === 'virtualscroll' && this.cache[parseInt(currentPage.toString(), 10)] &&
|
|
74
|
-
this.cache[parseInt(currentPage.toString(), 10)].length >
|
|
75
|
-
(((this.parent as Grid).contentModule) as VirtualContentRenderer).getBlockSize()) {
|
|
76
|
-
if (this.cache[parseInt(currentPage.toString(), 10)].length > (this.parent.contentModule).getBlockSize()) {
|
|
77
|
-
this.cache[parseInt(currentPage.toString(), 10)] =
|
|
78
|
-
this.cache[parseInt(currentPage.toString(), 10)].slice(0, (this.parent.contentModule).getBlockSize());
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
} else {
|
|
82
|
-
if (clear || action === 'virtualscroll') {
|
|
83
|
-
this.cache = {}; this.data = {}; this.groups = {};
|
|
84
|
-
/*this.movableCache = {};
|
|
85
|
-
this.frozenRightCache = {};*/
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
return clear;
|
|
89
|
-
}
|
|
90
|
-
}
|