| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185 | 1×
1×
1×
1×
19×
19×
19×
19×
19×
19×
19×
1×
6×
1×
67×
67×
67×
65×
65×
65×
65×
36×
36×
36×
36×
7×
29×
27×
27×
27×
27×
27×
4×
4×
27×
27×
27×
27×
14×
13×
13×
13×
13×
13×
13×
13×
13×
27×
27×
27×
238×
27×
27×
27×
27×
36×
36×
36×
36×
29×
28×
29×
29×
29×
29×
1×
65×
1×
14×
7×
7×
7×
7×
1×
3×
3×
2×
1×
1×
38×
2×
38×
32×
1×
31×
1×
31×
26×
1×
2×
1×
2×
1×
4×
4×
4×
42×
42×
1×
27×
27×
2×
2×
2×
2×
14×
14×
10×
10×
10×
14×
2×
1×
1×
1×
1×
1×
1×
7966×
1×
1×
| define(["require", "exports", "@syncfusion/ej2-base", "../base/grid", "../base/util", "../base/constant", "../services/aria-service", "../models/row", "../models/cell", "../base/enum"], function (require, exports, ej2_base_1, grid_1, util_1, events, aria_service_1, row_1, cell_1, enum_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var DetailRow = (function () {
function DetailRow(parent, locator) {
this.aria = new aria_service_1.AriaService();
this.parent = parent;
Iif (this.parent.isDestroyed) {
return;
}
this.focus = locator.getService('focus');
this.parent.on(events.click, this.clickHandler, this);
this.parent.on(events.destroy, this.destroy, this);
this.parent.on(events.keyPressed, this.keyPressHandler, this);
}
DetailRow.prototype.clickHandler = function (e) {
this.toogleExpandcollapse(ej2_base_1.closest(e.target, 'td'));
};
DetailRow.prototype.toogleExpandcollapse = function (target) {
var gObj = this.parent;
var parent = 'parentDetails';
if (target && (target.classList.contains('e-detailrowcollapse') || target.classList.contains('e-detailrowexpand'))) {
var tr = target.parentElement;
var uid_1 = tr.getAttribute('data-uid');
var nextRow = this.parent.getContentTable().querySelector('tbody').children[tr.rowIndex + 1];
if (target.classList.contains('e-detailrowcollapse')) {
var key = 'records';
var currentViewData = gObj.allowGrouping && gObj.groupSettings.columns.length ?
gObj.currentViewData[key] : gObj.currentViewData;
var data = currentViewData[tr.getAttribute('aria-rowindex')];
if (this.isDetailRow(nextRow)) {
nextRow.style.display = '';
}
else if (gObj.getDetailTemplate() || gObj.childGrid) {
var detailRow = ej2_base_1.createElement('tr', { className: 'e-detailrow' });
var detailCell = ej2_base_1.createElement('td', { className: 'e-detailcell' });
detailCell.setAttribute('colspan', this.parent.getVisibleColumns().length.toString());
var row = new row_1.Row({
isDataRow: true,
isExpand: true,
cells: [new cell_1.Cell({ cellType: enum_1.CellType.Indent }), new cell_1.Cell({ isDataCell: true, visible: true })]
});
for (var i = 0, len = gObj.groupSettings.columns.length; i < len; i++) {
detailRow.appendChild(ej2_base_1.createElement('td', { className: 'e-indentcell' }));
row.cells.unshift(new cell_1.Cell({ cellType: enum_1.CellType.Indent }));
}
detailRow.appendChild(ej2_base_1.createElement('td', { className: 'e-detailindentcell' }));
detailRow.appendChild(detailCell);
tr.parentNode.insertBefore(detailRow, tr.nextSibling);
if (gObj.detailTemplate) {
util_1.appendChildren(detailCell, gObj.getDetailTemplate()(data, gObj, 'detailTemplate'));
}
else {
gObj.childGrid[parent] = {
parentID: gObj.element.id,
parentPrimaryKeys: gObj.getPrimaryKeyFieldNames(),
parentKeyField: gObj.childGrid.queryString,
parentKeyFieldValue: data[gObj.childGrid.queryString],
parentRowData: data
};
var grid = new grid_1.Grid(gObj.childGrid);
var modules = grid.getInjectedModules();
var injectedModues = gObj.getInjectedModules();
Iif (!modules || modules.length !== injectedModues.length) {
grid.setInjectedModules(injectedModues);
}
var gridElem = ej2_base_1.createElement('div', {
id: 'child' + util_1.parents(tr, 'e-grid').length +
'_grid' + tr.rowIndex + util_1.getUid('')
});
detailCell.appendChild(gridElem);
grid.appendTo(gridElem);
}
detailRow.appendChild(detailCell);
tr.parentNode.insertBefore(detailRow, tr.nextSibling);
var idx_1;
this.parent.getRowsObject().some(function (r, rIndex) { idx_1 = rIndex; return r.uid === uid_1; });
gObj.getRows().splice(tr.rowIndex + 1, 0, detailRow);
this.parent.getRowsObject().splice(idx_1 + 1, 0, row);
gObj.trigger(events.detailDataBound, { detailElement: detailCell, data: data });
gObj.notify(events.detailDataBound, { rows: this.parent.getRowsObject() });
}
ej2_base_1.classList(target, ['e-detailrowexpand'], ['e-detailrowcollapse']);
ej2_base_1.classList(target.firstElementChild, ['e-dtdiagonaldown', 'e-icon-gdownarrow'], ['e-dtdiagonalright', 'e-icon-grightarrow']);
this.parent.getRowsObject()[tr.rowIndex].isExpand = true;
this.aria.setExpand(target, true);
}
else {
if (this.isDetailRow(nextRow)) {
nextRow.style.display = 'none';
}
ej2_base_1.classList(target, ['e-detailrowcollapse'], ['e-detailrowexpand']);
ej2_base_1.classList(target.firstElementChild, ['e-dtdiagonalright', 'e-icon-grightarrow'], ['e-dtdiagonaldown', 'e-icon-gdownarrow']);
this.parent.getRowsObject()[tr.rowIndex].isExpand = false;
this.aria.setExpand(target, false);
}
}
};
DetailRow.prototype.isDetailRow = function (row) {
return row && row.classList.contains('e-detailrow');
};
DetailRow.prototype.destroy = function () {
if (this.parent.isDestroyed) {
return;
}
this.parent.off(events.click, this.clickHandler);
this.parent.off(events.destroy, this.destroy);
this.parent.off(events.keyPressed, this.keyPressHandler);
};
DetailRow.prototype.getTDfromIndex = function (index, className) {
var tr = this.parent.getDataRows()[index];
if (tr && tr.querySelector(className)) {
return tr.querySelector(className);
}
return null;
};
DetailRow.prototype.expand = function (target) {
if (!isNaN(target)) {
target = this.getTDfromIndex(target, '.e-detailrowcollapse');
}
if (target && target.classList.contains('e-detailrowcollapse')) {
this.toogleExpandcollapse(target);
}
};
DetailRow.prototype.collapse = function (target) {
if (!isNaN(target)) {
target = this.getTDfromIndex(target, '.e-detailrowexpand');
}
if (target && target.classList.contains('e-detailrowexpand')) {
this.toogleExpandcollapse(target);
}
};
DetailRow.prototype.expandAll = function () {
this.expandCollapse(true);
};
DetailRow.prototype.collapseAll = function () {
this.expandCollapse(false);
};
DetailRow.prototype.expandCollapse = function (isExpand) {
var td;
var rows = this.parent.getDataRows();
for (var i = 0, len = rows.length; i < len; i++) {
td = rows[i].querySelector('.e-detailrowcollapse, .e-detailrowexpand');
isExpand ? this.expand(td) : this.collapse(td);
}
};
DetailRow.prototype.keyPressHandler = function (e) {
var gObj = this.parent;
switch (e.action) {
case 'ctrlDownArrow':
this.expandAll();
break;
case 'ctrlUpArrow':
this.collapseAll();
break;
case 'altUpArrow':
case 'altDownArrow':
var selected = gObj.allowSelection ? gObj.getSelectedRowIndexes() : [];
if (selected.length) {
var dataRow = gObj.getDataRows()[selected[selected.length - 1]];
var td = dataRow.querySelector('.e-detailrowcollapse, .e-detailrowexpand');
e.action === 'altDownArrow' ? this.expand(td) : this.collapse(td);
}
break;
case 'enter':
if (this.parent.isEdit) {
return;
}
var element = this.focus.getFocusedElement();
Iif (!e.target.classList.contains('e-detailrowcollapse') &&
!e.target.classList.contains('e-detailrowexpand')) {
break;
}
this.toogleExpandcollapse(element);
break;
}
};
DetailRow.prototype.getModuleName = function () {
return 'detailRow';
};
return DetailRow;
}());
exports.DetailRow = DetailRow;
});
|