all files / grid/renderer/ header-cell-renderer.js

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
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
 
1×
1×
1×
1×
1×
1×
 
1×
1×
1×
1×
 
 
1×
 
1×
1×
1×
1×
1195×
1195×
 
1195×
1195×
1195×
1195×
1195×
1195×
 
1×
8945×
 
1×
8944×
8944×
8944×
 
1×
1×
1×
1×
 
1×
1×
 
1×
8945×
8945×
8945×
8945×
8945×
8945×
 
 
 
8945×
2×
 
8945×
2279×
 
8945×
8861×
8861×
2×
 
8861×
8861×
8861×
 
 
84×
84×
84×
84×
84×
1×
 
84×
84×
 
8945×
8945×
8945×
8945×
 
 
536×
 
 
536×
536×
536×
536×
73×
73×
418×
592×
 
 
94×
94×
94×
 
 
 
 
536×
 
8945×
1934×
 
8945×
2×
 
8945×
2279×
2279×
 
8945×
3768×
3768×
 
8945×
132×
 
8945×
8945×
8945×
8945×
8945×
6×
6×
6×
6×
6×
 
6×
 
 
 
 
 
 
6×
6×
6×
 
 
8945×
8945×
1817×
1817×
1817×
1783×
 
34×
26×
 
 
8945×
3×
 
8942×
 
 
29×
28×
 
 
8945×
5034×
5034×
5034×
 
8945×
8945×
8945×
 
8945×
 
 
2×
2×
2×
 
 
 
8943×
 
8945×
1339×
 
8945×
 
1×
2×
 
1×
8945×
120×
120×
120×
15×
125×
250×
35×
35×
35×
 
 
 
 
120×
120×
 
8945×
375×
375×
375×
 
8945×
 
1×
8945×
8945×
 
1×
 
1×
 
 
/* istanbul ignore next */ 
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/util", "./cell-renderer", "../services/aria-service", "@syncfusion/ej2-buttons", "../base/constant"], function (require, exports, ej2_base_1, ej2_base_2, util_1, cell_renderer_1, aria_service_1, ej2_buttons_1, constant_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var HeaderCellRenderer = (function (_super) {
        __extends(HeaderCellRenderer, _super);
        function HeaderCellRenderer() {
            var _this = _super !== null && _super.apply(this, arguments) || this;
            _this.element = _this.parent
                .createElement('TH', { className: 'e-headercell', attrs: { tabindex: '-1', role: 'columnheader' } });
            _this.ariaService = new aria_service_1.AriaService();
            _this.hTxtEle = _this.parent.createElement('span', { className: 'e-headertext' });
            _this.sortEle = _this.parent.createElement('div', { className: 'e-sortfilterdiv e-icons', attrs: { 'aria-hidden': 'true' } });
            _this.gui = _this.parent.createElement('div');
            _this.chkAllBox = _this.parent.createElement('input', { className: 'e-checkselectall', attrs: { 'type': 'checkbox', 'aria-label': _this.localizer.getConstant('SelectAllCheckbox') } });
            return _this;
        }
        HeaderCellRenderer.prototype.getGui = function () {
            return this.gui.cloneNode();
        };
        HeaderCellRenderer.prototype.render = function (cell, data, attributes) {
            var node = this.element.cloneNode();
            var fltrMenuEle = this.parent.createElement('div', { className: 'e-filtermenudiv e-icons e-icon-filter', attrs: { 'aria-hidden': 'true' } });
            return this.prepareHeader(cell, node, fltrMenuEle);
        };
        HeaderCellRenderer.prototype.refresh = function (cell, node) {
            this.clean(node);
            var fltrMenuEle = this.parent.createElement('div', { className: 'e-filtermenudiv e-icons e-icon-filter', attrs: { 'aria-hidden': 'true' } });
            return this.prepareHeader(cell, node, fltrMenuEle);
        };
        HeaderCellRenderer.prototype.clean = function (node) {
            node.innerHTML = '';
        };
        HeaderCellRenderer.prototype.prepareHeader = function (cell, node, fltrMenuEle) {
            var column = cell.column;
            var ariaAttr = {};
            var elementDesc = '';
            var innerDIV = this.getGui();
            var hValueAccer;
            ej2_base_2.attributes(innerDIV, {
                'e-mappinguid': column.uid,
                'class': 'e-headercelldiv'
            });
            if (!ej2_base_1.isNullOrUndefined(column.headerValueAccessor)) {
                hValueAccer = this.getValue(column.headerText, column);
            }
            if (this.parent.allowSorting && column.allowSorting && !ej2_base_1.isNullOrUndefined(column.field)) {
                node.classList.add('e-sort-icon');
            }
            if (column.type !== 'checkbox') {
                var value = column.headerText;
                if (!ej2_base_1.isNullOrUndefined(hValueAccer)) {
                    value = hValueAccer;
                }
                var headerText = this.hTxtEle.cloneNode();
                headerText[column.getDomSetter()] = this.parent.sanitize(value);
                innerDIV.appendChild(headerText);
            }
            else {
                column.editType = 'booleanedit';
                var checkAllWrap = ej2_buttons_1.createCheckBox(this.parent.createElement, false, { checked: false, label: ' ' });
                this.chkAllBox.id = 'checkbox-' + column.uid;
                checkAllWrap.insertBefore(this.chkAllBox.cloneNode(), checkAllWrap.firstChild);
                if (this.parent.cssClass) {
                    ej2_base_1.addClass([checkAllWrap], [this.parent.cssClass]);
                }
                innerDIV.appendChild(checkAllWrap);
                innerDIV.classList.add('e-headerchkcelldiv');
            }
            this.buildAttributeFromCell(node, cell);
            this.appendHtml(node, innerDIV);
            node.appendChild(this.sortEle.cloneNode());
            if ((this.parent.allowFiltering && this.parent.filterSettings.type !== 'FilterBar') &&
                (column.allowFiltering && !ej2_base_1.isNullOrUndefined(column.field)) &&
                !(this.parent.showColumnMenu && column.showColumnMenu)) {
                ej2_base_2.attributes(fltrMenuEle, {
                    'e-mappinguid': 'e-flmenu-' + column.uid
                });
                elementDesc = elementDesc.length ? elementDesc + '. ' + this.localizer.getConstant('FilterDescription') : this.localizer.getConstant('FilterDescription');
                node.classList.add('e-fltr-icon');
                var matchFlColumns = [];
                if (this.parent.filterSettings.columns.length && this.parent.filterSettings.columns.length !== matchFlColumns.length) {
                    var foreignColumn = this.parent.getForeignKeyColumns();
                    for (var index = 0; index < this.parent.columns.length; index++) {
                        for (var count = 0; count < this.parent.filterSettings.columns.length; count++) {
                            if (this.parent.filterSettings.columns[parseInt(count.toString(), 10)].field === column.field
                                || (foreignColumn.length
                                    && column.foreignKeyValue === this.parent.filterSettings.columns[parseInt(count.toString(), 10)].field)) {
                                fltrMenuEle.classList.add('e-filtered');
                                matchFlColumns.push(column.field);
                                break;
                            }
                        }
                    }
                }
                node.appendChild(fltrMenuEle.cloneNode());
            }
            if (cell.className) {
                node.classList.add(cell.className);
            }
            if (column.customAttributes) {
                util_1.setStyleAndAttributes(node, column.customAttributes);
            }
            if (this.parent.allowSorting && column.allowSorting) {
                ariaAttr.sort = 'none';
                elementDesc = elementDesc.length ? elementDesc + '. ' + this.localizer.getConstant('SortDescription') : this.localizer.getConstant('SortDescription');
            }
            if ((this.parent.allowGrouping && column.allowGrouping) || this.parent.allowReordering && column.allowReordering) {
                ariaAttr.grabbed = false;
                elementDesc = elementDesc.length ? elementDesc + '. ' + this.localizer.getConstant('GroupDescription') : this.localizer.getConstant('GroupDescription');
            }
            if (this.parent.showColumnMenu && column.type !== 'checkbox' && !column.template) {
                elementDesc = elementDesc.length ? elementDesc + '. ' + this.localizer.getConstant('ColumnMenuDescription') : this.localizer.getConstant('ColumnMenuDescription');
            }
            node = this.extendPrepareHeader(column, node);
            var result;
            var gridObj = this.parent;
            var colIndex = gridObj.getColumnIndexByField(column.field);
            if (!ej2_base_1.isNullOrUndefined(column.headerTemplate)) {
                var headerTempID = gridObj.element.id + column.uid + 'headerTemplate';
                var str = 'isStringTemplate';
                var col = column;
                var isReactCompiler = this.parent.isReact && typeof (column.headerTemplate) !== 'string' && !(column.headerTemplate.prototype && column.headerTemplate.prototype.CSPTemplate);
                var isReactChild_1 = this.parent.parentDetails && this.parent.parentDetails.parentInstObj &&
                    this.parent.parentDetails.parentInstObj.isReact;
                Iif (isReactCompiler || isReactChild_1) {
                    var copied = { 'index': colIndex };
                    node.firstElementChild.innerHTML = '';
                    column.getHeaderTemplate()(ej2_base_1.extend(copied, col), gridObj, 'headerTemplate', headerTempID, this.parent["" + str], null, node.firstElementChild);
                    this.parent.renderTemplates();
                }
                else {
                    result = column.getHeaderTemplate()(ej2_base_1.extend({ 'index': colIndex }, col), gridObj, 'headerTemplate', headerTempID, this.parent["" + str], undefined, undefined, this.parent['root']);
                    node.firstElementChild.innerHTML = '';
                    util_1.appendChildren(node.firstElementChild, result);
                }
            }
            this.ariaService.setOptions(node, ariaAttr);
            if (!ej2_base_1.isNullOrUndefined(column.headerTextAlign) || !ej2_base_1.isNullOrUndefined(column.textAlign)) {
                var alignment = column.headerTextAlign || column.textAlign;
                innerDIV.style.textAlign = alignment;
                if (alignment === 'Right' || alignment === 'Left') {
                    node.classList.add(alignment === 'Right' ? 'e-rightalign' : 'e-leftalign');
                }
                else if (alignment === 'Center') {
                    node.classList.add('e-centeralign');
                }
            }
            if (column.clipMode === 'Clip' || (!column.clipMode && this.parent.clipMode === 'Clip')) {
                node.classList.add('e-gridclip');
            }
            else if ((column.clipMode === 'EllipsisWithTooltip' || (!column.clipMode && this.parent.clipMode === 'EllipsisWithTooltip'))
                && !(gridObj.allowTextWrap && (gridObj.textWrapSettings.wrapMode === 'Header'
                    || gridObj.textWrapSettings.wrapMode === 'Both'))) {
                if (column.type !== 'checkbox') {
                    node.classList.add('e-ellipsistooltip');
                }
            }
            if (elementDesc) {
                var titleElem = (this.parent.createElement('span', { id: 'headerTitle-' + column.uid, innerHTML: elementDesc, attrs: { style: 'display:none' } }));
                node.appendChild(titleElem);
                node.setAttribute('aria-describedby', titleElem.id);
            }
            node.setAttribute('aria-rowspan', (!ej2_base_1.isNullOrUndefined(cell.rowSpan) ? cell.rowSpan : 1).toString());
            node.setAttribute('aria-colspan', '1');
            var isReactChild = this.parent.parentDetails && this.parent.parentDetails.parentInstObj &&
                this.parent.parentDetails.parentInstObj.isReact;
            if (((this.parent.isReact && this.parent.requireTemplateRef)
                || (isReactChild && this.parent.parentDetails.parentInstObj.requireTemplateRef))
                && !ej2_base_1.isNullOrUndefined(column.headerTemplate)) {
                var thisRef_1 = this;
                thisRef_1.parent.renderTemplates(function () {
                    thisRef_1.parent.trigger(constant_1.headerCellInfo, { cell: cell, node: node });
                });
            }
            else {
                this.parent.trigger(constant_1.headerCellInfo, { cell: cell, node: node });
            }
            if (this.parent.isFrozenGrid()) {
                util_1.addStickyColumnPosition(this.parent, column, node);
            }
            return node;
        };
        HeaderCellRenderer.prototype.getValue = function (field, column) {
            return column.headerValueAccessor(field, column);
        };
        HeaderCellRenderer.prototype.extendPrepareHeader = function (column, node) {
            if (this.parent.showColumnMenu && column.showColumnMenu && !ej2_base_1.isNullOrUndefined(column.field)) {
                var element = (this.parent.createElement('div', { className: 'e-icons e-columnmenu', attrs: { 'aria-hidden': 'true' } }));
                var matchFilteredColumns = [];
                if (this.parent.filterSettings.columns.length && this.parent.filterSettings.columns.length !== matchFilteredColumns.length) {
                    for (var i = 0; i < this.parent.columns.length; i++) {
                        for (var j = 0; j < this.parent.filterSettings.columns.length; j++) {
                            if (this.parent.filterSettings.columns[parseInt(j.toString(), 10)].field === column.field) {
                                element.classList.add('e-filtered');
                                matchFilteredColumns.push(column.field);
                                break;
                            }
                        }
                    }
                }
                node.classList.add('e-fltr-icon');
                node.appendChild(element);
            }
            if (this.parent.allowResizing) {
                var handler = this.parent.createElement('div');
                handler.className = column.allowResizing ? 'e-rhandler e-rcursor' : 'e-rsuppress';
                node.appendChild(handler);
            }
            return node;
        };
        HeaderCellRenderer.prototype.appendHtml = function (node, innerHtml) {
            node.appendChild(innerHtml);
            return node;
        };
        return HeaderCellRenderer;
    }(cell_renderer_1.CellRenderer));
    exports.HeaderCellRenderer = HeaderCellRenderer;
});