| 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 | 1×
1×
1×
1×
59×
59×
59×
1×
18017×
1×
59×
59×
59×
19×
59×
59×
56×
1×
56×
56×
56×
56×
56×
56×
1×
59×
59×
59×
59×
59×
59×
1×
123×
65×
58×
58×
58×
58×
58×
1×
55×
55×
55×
1×
36×
36×
35×
35×
35×
35×
35×
35×
35×
35×
35×
35×
395×
2×
393×
23×
35×
35×
1×
22×
22×
22×
22×
2×
2×
2×
2×
2×
2×
20×
20×
20×
1×
20×
20×
20×
4×
4×
1×
4×
4×
3×
3×
3×
3×
3×
3×
3×
3×
61×
3×
3×
3×
3×
1×
20×
20×
274×
274×
273×
273×
273×
1×
411×
1×
123×
1×
1×
| define(["require", "exports", "../base/constant", "../base/enum", "../renderer/virtual-content-renderer", "../base/constant", "../renderer/row-renderer", "@syncfusion/ej2-base", "../base/util"], function (require, exports, constant_1, enum_1, virtual_content_renderer_1, events, row_renderer_1, ej2_base_1, util_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var VirtualScroll = (function () {
function VirtualScroll(parent, locator) {
this.parent = parent;
this.locator = locator;
this.addEventListener();
}
VirtualScroll.prototype.getModuleName = function () {
return 'virtualscroll';
};
VirtualScroll.prototype.instantiateRenderer = function () {
this.parent.log(['limitation', 'virtual_height'], 'virtualization');
var renderer = this.locator.getService('rendererFactory');
if (this.parent.enableColumnVirtualization) {
renderer.addRenderer(enum_1.RenderType.Header, new virtual_content_renderer_1.VirtualHeaderRenderer(this.parent, this.locator));
}
renderer.addRenderer(enum_1.RenderType.Content, new virtual_content_renderer_1.VirtualContentRenderer(this.parent, this.locator));
if (!(!this.parent.enableVirtualization && this.parent.enableColumnVirtualization)) {
this.ensurePageSize();
}
};
VirtualScroll.prototype.ensurePageSize = function () {
var rowHeight = this.parent.getRowHeight();
var vHeight = this.parent.height.toString().indexOf('%') < 0 ? this.parent.height :
this.parent.element.getBoundingClientRect().height;
this.blockSize = ~~(parseFloat(vHeight.toString()) / rowHeight);
var height = this.blockSize * 2;
var size = this.parent.pageSettings.pageSize;
this.parent.setProperties({ pageSettings: { pageSize: size < height ? height : size } }, true);
};
VirtualScroll.prototype.addEventListener = function () {
Iif (this.parent.isDestroyed) {
return;
}
this.parent.on(constant_1.initialLoad, this.instantiateRenderer, this);
this.parent.on(events.columnWidthChanged, this.refreshVirtualElement, this);
this.parent.on(events.createVirtualValidationForm, this.createVirtualValidationForm, this);
this.parent.on(events.validateVirtualForm, this.virtualEditFormValidation, this);
this.parent.on(events.destroy, this.destroy, this);
};
VirtualScroll.prototype.removeEventListener = function () {
if (this.parent.isDestroyed) {
return;
}
this.parent.off(constant_1.initialLoad, this.instantiateRenderer);
this.parent.off(events.columnWidthChanged, this.refreshVirtualElement);
this.parent.off(events.createVirtualValidationForm, this.createVirtualValidationForm);
this.parent.off(events.validateVirtualForm, this.virtualEditFormValidation);
this.parent.off(events.destroy, this.destroy);
};
VirtualScroll.prototype.getCurrentEditedData = function (prevData) {
var data = {
virtualData: ej2_base_1.extend({}, {}, prevData, true), isAdd: false, isScroll: false, endEdit: true
};
this.parent.notify(events.getVirtualData, data);
return data.virtualData;
};
VirtualScroll.prototype.createVirtualValidationForm = function (e) {
var gObj = this.parent;
if (gObj.enableVirtualization && gObj.editSettings.mode === 'Normal') {
var cols = gObj.columns;
var rowRenderer = new row_renderer_1.RowRenderer(this.locator, null, this.parent);
var rowObj = ej2_base_1.extend({}, {}, gObj.getRowObjectFromUID(e.uid), true);
gObj.notify(events.refreshVirtualEditFormCells, rowObj);
var args = e.argsCreator(this.getCurrentEditedData(e.prevData), {}, false);
args.isCustomFormValidation = true;
args.row = rowRenderer.render(rowObj, cols);
e.renderer.update(args);
var rules = {};
for (var i = 0; i < cols.length; i++) {
if (!cols[parseInt(i.toString(), 10)].visible) {
continue;
}
if (cols[parseInt(i.toString(), 10)].validationRules) {
util_1.setValidationRuels(cols[parseInt(i.toString(), 10)], 0, rules, {}, {}, cols.length, true);
}
}
args.form.classList.add('e-virtual-validation');
gObj.editModule.virtualFormObj = gObj.editModule.createFormObj(args.form, rules);
}
};
VirtualScroll.prototype.virtualEditFormValidation = function (args) {
var gObj = this.parent;
var error = gObj.element.querySelector('.e-griderror:not([style*="display: none"])');
Eif (gObj.editModule.virtualFormObj) {
if (error && error.style.display !== 'none') {
var errorDomRect = error.getBoundingClientRect();
var forms = gObj.element.querySelectorAll('.e-gridform');
var form = forms[0];
var contentLeft = gObj.getContent().getBoundingClientRect().left;
Iif (forms.length > 1) {
form = forms[1];
}
Iif (errorDomRect.left < contentLeft || errorDomRect.right > gObj.element.offsetWidth) {
var tooltip = form.querySelector('.e-tooltip-wrap:not([style*="display: none"])');
this.scrollToEdit(tooltip, { editIdx: args.editIdx, addIdx: args.addIdx }, true);
}
}
else Eif (gObj.editModule.virtualFormObj && (!error || error.style.display === 'none')) {
var existingErrors = gObj.editModule.virtualFormObj.element.querySelectorAll('.e-tooltip-wrap:not([style*="display: none"])');
for (var i = 0; i < existingErrors.length; i++) {
ej2_base_1.remove(existingErrors[parseInt(i.toString(), 10)]);
}
this.setEditedDataToValidationForm(gObj.editModule.virtualFormObj.element, this.getCurrentEditedData(args.prevData));
args.isValid = gObj.editModule.virtualFormObj.validate();
if (!args.isValid) {
var tooltip = gObj.editModule.virtualFormObj.element.querySelector('.e-tooltip-wrap:not([style*="display: none"])');
this.scrollToEdit(tooltip, { editIdx: args.editIdx, addIdx: args.addIdx });
}
}
}
};
VirtualScroll.prototype.scrollToEdit = function (tooltip, args, isRenderer) {
var gObj = this.parent;
if (tooltip) {
var cols = gObj.columnModel;
var field = util_1.setComplexFieldID(tooltip.id).split('_')[0];
var col = gObj.getColumnByField(field);
var scrollTop = this.parent.getContent().firstElementChild.scrollTop;
var row = gObj.getRowByIndex(args.editIdx);
Eif (isRenderer || !col || (!ej2_base_1.isNullOrUndefined(args.addIdx) && scrollTop > 0) || (!ej2_base_1.isNullOrUndefined(args.editIdx) && !row)) {
var validationCol = void 0;
for (var i = 0; i < cols.length && !col; i++) {
if (cols[parseInt(i.toString(), 10)].field === field) {
validationCol = cols[parseInt(i.toString(), 10)];
break;
}
}
Iif (isRenderer) {
validationCol = col;
}
this.parent.notify(events.scrollToEdit, validationCol);
}
}
};
VirtualScroll.prototype.setEditedDataToValidationForm = function (form, editedData) {
var inputs = [].slice.call(form.getElementsByClassName('e-field'));
for (var i = 0, len = inputs.length; i < len; i++) {
var col = util_1.getColumnModelByUid(this.parent, inputs[parseInt(i.toString(), 10)].getAttribute('e-mappinguid'));
if (col.field) {
var value = ej2_base_1.getValue(col.field, editedData);
value = ej2_base_1.isNullOrUndefined(value) ? '' : value;
inputs[parseInt(i.toString(), 10)].value = value;
}
}
};
VirtualScroll.prototype.refreshVirtualElement = function (args) {
Iif (this.parent.enableColumnVirtualization && args.module === 'resize') {
var renderer = this.locator.getService('rendererFactory');
renderer.getRenderer(enum_1.RenderType.Content).refreshVirtualElement();
}
};
VirtualScroll.prototype.destroy = function () {
this.removeEventListener();
};
return VirtualScroll;
}());
exports.VirtualScroll = VirtualScroll;
});
|