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

95.85% Statements 208/217
89.95% Branches 188/209
100% Functions 16/16
96.28% Lines 207/215
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 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 3051×   1× 1× 1× 27972× 27972× 27972× 27972× 27972×   1× 247262×   1× 252552× 25160× 274×   25160×     25160× 1× 1×   25160×   252552×   1× 243011× 243011× 243011× 730× 730×   730× 730× 730× 730× 730× 730× 730×     730×     730× 3× 3× 3×     727×   730× 730×   730× 730× 730× 720×     730×   242281×   1× 247262× 8× 4× 4×   4× 2×     2×     247262×   1× 246810×   1× 452× 452× 98× 98× 98× 98× 98× 98× 98×             354× 354× 354× 354× 354× 354× 336× 336×   354× 2×   352×         1× 98× 98× 98× 98× 624× 624×     1× 247262× 247262× 247262× 247262× 247262× 1085×   247262× 247262×   247262× 247262× 26× 26× 26× 8× 8× 8× 8×   26×   247262× 47× 47× 33× 33×   47×   12×     247262× 9414×   247262× 6× 6×   247262× 3×     247259×   247262× 247262× 4871× 4871×   247262× 247262× 247262× 243582×   3680× 2068× 2068× 1182×     886×   2068× 2068× 72×   2068× 2068× 2068×   247262× 72×   247262× 247262× 221× 221× 221× 221× 221× 221×     221×   247262× 2849× 2849× 2849×   247262× 30913×   247262×   1× 243750× 243750× 243750×   1× 247882× 247882× 247882× 247882× 247882× 64×   247882× 1263×   247882× 30465× 30465× 30465×     247882× 51×   247831×     359× 342×       1× 259584× 259584× 259584×     259584× 199×   259584× 1620×   259584× 39×   259584× 1449× 1449× 207×     259584×     259584× 11701×   247883× 243214×   259584× 12154×   259584× 259584×   1× 243782×   1×   1×    
define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../base/util", "@syncfusion/ej2-buttons", "../base/constant", "../base/enum", "../base/string-literals"], function (require, exports, ej2_base_1, ej2_base_2, util_1, ej2_buttons_1, constant_1, enum_1, literals) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var CellRenderer = (function () {
        function CellRenderer(parent, locator) {
            this.localizer = locator.getService('localization');
            this.formatter = locator.getService('valueFormatter');
            this.parent = parent;
            this.element = this.parent.createElement('TD', { className: literals.rowCell, attrs: { role: 'gridcell', tabindex: '-1' } });
            this.rowChkBox = this.parent.createElement('input', { className: 'e-checkselect', attrs: { 'type': 'checkbox', 'aria-label': this.localizer.getConstant('SelectRow') } });
        }
        CellRenderer.prototype.getGui = function () {
            return '';
        };
        CellRenderer.prototype.format = function (column, value, data) {
            if (!ej2_base_2.isNullOrUndefined(column.format)) {
                if (column.type === 'number' && isNaN(parseInt(value, 10))) {
                    value = null;
                }
                Iif (column.allowFormula && isNaN(parseInt(value, 10))) {
                    value = null;
                }
                if (column.type === 'dateonly' && typeof value === 'string' && value) {
                    var arr = value.split(/[^0-9.]/);
                    value = new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, parseInt(arr[2], 10));
                }
                value = this.formatter.toView(value, column.getFormatter());
            }
            return ej2_base_2.isNullOrUndefined(value) ? '' : String(value);
        };
        CellRenderer.prototype.evaluate = function (node, cell, data, attributes, fData, isEdit, rowNumber) {
            var _a;
            var result;
            if (cell.column.template) {
                var isReactCompiler = this.parent.isReact && typeof (cell.column.template) !== 'string' && !(cell.column.template.prototype && cell.column.template.prototype.CSPTemplate);
                var isReactChild = this.parent.parentDetails && this.parent.parentDetails.parentInstObj &&
                    this.parent.parentDetails.parentInstObj.isReact;
                var isReactPrintGrid = this.parent.printGridParent && this.parent.printGridParent.isReact;
                var literals_1 = ['data-index'];
                var dummyData = util_1.extendObjWithFn({}, data, (_a = {}, _a[constant_1.foreignKeyData] = fData, _a.column = cell.column, _a));
                var templateID = this.parent.element.id + cell.column.uid;
                var str = 'isStringTemplate';
                var copied = { 'index': attributes[literals_1[0]] };
                Iif (rowNumber > 0) {
                    copied.rowNumber = rowNumber;
                }
                Iif (isReactCompiler || isReactChild || isReactPrintGrid) {
                    cell.column.getColumnTemplate()(ej2_base_2.extend(copied, dummyData), this.parent, 'columnTemplate', templateID, this.parent["" + str], null, node);
                }
                else if (this.parent.isAngular) {
                    var columnTemplateID = 'template_' + attributes[literals_1[0]] + '_' + cell.column.uid;
                    result = cell.column.getColumnTemplate()(ej2_base_2.extend(copied, dummyData), this.parent, columnTemplateID, templateID, this.parent["" + str], undefined, undefined, this.parent['root']);
                    this.parent.columnTemplateIDs.push(columnTemplateID);
                }
                else {
                    result = cell.column.getColumnTemplate()(ej2_base_2.extend(copied, dummyData), this.parent, 'template', templateID, this.parent["" + str], undefined, undefined, this.parent['root']);
                }
                Eif (!isReactCompiler && !isReactChild && !isReactPrintGrid) {
                    util_1.appendChildren(node, result);
                }
                this.parent.notify('template-result', { template: result });
                result = null;
                if (cell.column.templateOptions.enableAriaLabel) {
                    node.setAttribute('aria-label', node.innerText + this.localizer.getConstant('TemplateCell') +
                        this.localizer.getConstant('ColumnHeader') + cell.column.headerText);
                }
                return false;
            }
            return true;
        };
        CellRenderer.prototype.invokeFormatter = function (column, value, data) {
            if (!ej2_base_2.isNullOrUndefined(column.formatter)) {
                if (util_1.doesImplementInterface(column.formatter, 'getValue')) {
                    var formatter = column.formatter;
                    value = new formatter().getValue(column, data);
                }
                else if (typeof column.formatter === 'function') {
                    value = column.formatter(column, data);
                }
                else {
                    value = column.formatter.getValue(column, data);
                }
            }
            return value;
        };
        CellRenderer.prototype.render = function (cell, data, attributes, isExpand, isEdit) {
            return this.refreshCell(cell, data, attributes, isEdit);
        };
        CellRenderer.prototype.refreshTD = function (td, cell, data, attributes) {
            var isEdit = this.parent.editSettings.mode === 'Batch' && td.classList.contains('e-editedbatchcell');
            if (this.parent.isReact) {
                var cellIndex = td.cellIndex;
                var parentRow = td.parentElement;
                ej2_base_1.remove(td);
                var newTD = this.refreshCell(cell, data, attributes, isEdit);
                this.cloneAttributes(newTD, td);
                Eif (parentRow.cells.length !== cellIndex - 1) {
                    parentRow.insertBefore(newTD, parentRow.cells[parseInt(cellIndex.toString(), 10)]);
                }
                else {
                    parentRow.appendChild(newTD);
                }
            }
            else {
                var node = this.refreshCell(cell, data, attributes, isEdit);
                td.innerHTML = '';
                var arialabelText = node.getAttribute('aria-label');
                arialabelText ? td.setAttribute('aria-label', arialabelText) : null;
                var elements = [].slice.call(node.childNodes);
                for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {
                    var elem = elements_1[_i];
                    td.appendChild(elem);
                }
                if (td.innerHTML && typeof td.innerHTML === 'string' && td.innerHTML.startsWith('#')) {
                    td.classList.add('e-formula-error');
                }
                else Iif (td.classList.contains('e-formula-error')) {
                    td.classList.remove('e-formula-error');
                }
            }
        };
        CellRenderer.prototype.cloneAttributes = function (target, source) {
            var attrs = source.attributes;
            var i = attrs.length;
            var attr;
            while (i--) {
                attr = attrs[parseInt(i.toString(), 10)];
                target.setAttribute(attr.name, attr.value);
            }
        };
        CellRenderer.prototype.refreshCell = function (cell, data, attributes, isEdit) {
            var _a;
            var node = this.element.cloneNode();
            var column = cell.column;
            var fData;
            if (cell.isForeignKey) {
                fData = cell.foreignKeyData && cell.foreignKeyData[0] ? cell.foreignKeyData[0] : (_a = {}, _a[column.foreignKeyValue] = column.format ? null : '', _a);
            }
            var innerHtml = this.getGui();
            var value = cell.isForeignKey ? this.getValue(column.foreignKeyValue, fData, column) :
                this.getValue(column.field, data, column);
            var rowNumber = 0;
            if (!ej2_base_2.isNullOrUndefined(column) && column.type === 'rownumber') {
                var index = parseInt(attributes && attributes['data-index'], 10);
                rowNumber = index + 1;
                if (this.parent.allowPaging) {
                    var pageSize = this.parent.pageSettings.pageSize || 0;
                    var currentPage = this.parent.pageSettings.currentPage || 1;
                    var pageOffset = (currentPage - 1) * pageSize;
                    rowNumber = index + pageOffset + 1;
                }
                value = rowNumber;
            }
            if (this.parent.formulaModule && column.allowFormula && !isEdit) {
                var isRawFormula = typeof value === 'string' && value.trim().startsWith('=');
                if (isRawFormula) {
                    var primaryKey = this.parent.getPrimaryKeyFieldNames()[0];
                    value = this.parent.getFormulaValue(data["" + primaryKey], column.field);
                }
                if (!ej2_base_2.isNullOrUndefined(this.parent.getHeaderTable().querySelectorAll('.e-header-col-ref')) &&
                    ej2_base_2.isNullOrUndefined(this.parent.getHeaderTable().querySelector('.e-col-hidden'))) {
                    Array.from(this.parent.getHeaderTable().querySelectorAll('.e-header-col-ref')).map(function (ele) { return ele.classList.add('e-col-hidden'); });
                }
            }
            if ((column.type === 'date' || column.type === 'datetime') && !ej2_base_2.isNullOrUndefined(value)) {
                value = new Date(value);
            }
            if (column.type === 'dateonly' && !ej2_base_2.isNullOrUndefined(value) && typeof value === 'string') {
                var arr = value.split(/[^0-9.]/);
                value = new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, parseInt(arr[2], 10));
            }
            if (value instanceof Error) {
                value = String(value);
            }
            else {
                value = this.format(column, value, data);
            }
            innerHtml = value.toString();
            if (column.type === 'boolean' && !column.displayAsCheckBox) {
                var localeStr = (value !== 'true' && value !== 'false') ? null : value === 'true' ? 'True' : 'False';
                innerHtml = localeStr ? this.localizer.getConstant(localeStr) : innerHtml;
            }
            var fromFormatter = this.invokeFormatter(column, value, data);
            innerHtml = !ej2_base_2.isNullOrUndefined(column.formatter) ? ej2_base_2.isNullOrUndefined(fromFormatter) ? '' : fromFormatter.toString() : innerHtml;
            if (this.evaluate(node, cell, data, attributes, fData, isEdit, rowNumber) && column.type !== 'checkbox') {
                this.appendHtml(node, this.parent.sanitize(innerHtml), column.getDomSetter ? column.getDomSetter() : 'innerHTML');
            }
            else if (column.type === 'checkbox') {
                node.classList.add(literals.gridChkBox);
                if (this.parent.selectionSettings.persistSelection) {
                    value = value === 'true';
                }
                else {
                    value = false;
                }
                var checkWrap = ej2_buttons_1.createCheckBox(this.parent.createElement, false, { checked: value, label: ' ' });
                if (this.parent.cssClass) {
                    ej2_base_1.addClass([checkWrap], [this.parent.cssClass]);
                }
                this.rowChkBox.id = 'checkbox-' + cell.rowID;
                checkWrap.insertBefore(this.rowChkBox.cloneNode(), checkWrap.firstChild);
                node.appendChild(checkWrap);
            }
            if (this.parent.checkAllRows === 'Check' && this.parent.enableVirtualization) {
                cell.isSelected = true;
            }
            this.setAttributes(node, cell, attributes);
            if (column.type === 'boolean' && column.displayAsCheckBox) {
                var checked = isNaN(parseInt(value.toString(), 10)) ? value === 'true' : parseInt(value.toString(), 10) > 0;
                var checkWrap = ej2_buttons_1.createCheckBox(this.parent.createElement, false, { checked: checked, label: ' ' });
                node.innerHTML = '';
                node.classList.add('e-gridchkbox-cell');
                checkWrap.classList.add('e-checkbox-disabled');
                Iif (this.parent.cssClass) {
                    ej2_base_1.addClass([checkWrap], [this.parent.cssClass]);
                }
                node.appendChild(checkWrap);
            }
            if (node.classList.contains('e-summarycell') && !data.key) {
                var uid = node.getAttribute('data-mappinguid');
                column = this.parent.getColumnByUid(uid);
                node.setAttribute('aria-label', innerHtml + this.localizer.getConstant('ColumnHeader') + cell.column.headerText);
            }
            if (this.parent.isFrozenGrid() && (!data || (data && !data.key))) {
                util_1.addStickyColumnPosition(this.parent, column, node);
            }
            return node;
        };
        CellRenderer.prototype.appendHtml = function (node, innerHtml, property) {
            Iif (property === void 0) { property = 'innerHTML'; }
            node["" + property] = innerHtml;
            return node;
        };
        CellRenderer.prototype.setAttributes = function (node, cell, attributes) {
            var column = cell.column;
            this.buildAttributeFromCell(node, cell, column.type === 'checkbox');
            util_1.setStyleAndAttributes(node, attributes);
            util_1.setStyleAndAttributes(node, cell.attributes);
            if (column.customAttributes) {
                util_1.setStyleAndAttributes(node, column.customAttributes);
            }
            if (this.parent.rowRenderingMode === 'Vertical') {
                util_1.setStyleAndAttributes(node, { 'data-cell': column.headerText });
            }
            if (column.textAlign) {
                var alignmentClassMap = { right: 'e-rightalign', left: 'e-leftalign', center: 'e-centeralign', justify: 'e-justifyalign' };
                Eif (alignmentClassMap[column.textAlign.toLowerCase()]) {
                    node.classList.add(alignmentClassMap[column.textAlign.toLowerCase()]);
                }
            }
            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')
                && !(this.parent.allowTextWrap && (this.parent.textWrapSettings.wrapMode === 'Content'
                    || this.parent.textWrapSettings.wrapMode === 'Both'))) {
                if (column.type !== 'checkbox') {
                    node.classList.add('e-ellipsistooltip');
                }
            }
        };
        CellRenderer.prototype.buildAttributeFromCell = function (node, cell, isCheckBoxType) {
            var attr = {};
            var classes = [];
            Iif (cell.colSpan) {
                attr.colSpan = cell.colSpan;
            }
            if (cell.rowSpan) {
                attr.rowSpan = cell.rowSpan;
            }
            if (cell.isTemplate) {
                classes.push('e-templatecell');
            }
            if (cell.column.type === 'rownumber') {
                classes.push(literals.rowNumberCell);
            }
            if (cell.isSelected) {
                classes.push.apply(classes, ['e-selectionbackground', 'e-active']);
                if (isCheckBoxType) {
                    node.querySelector('.e-frame').classList.add('e-check');
                }
            }
            Iif (cell.isColumnSelected) {
                classes.push.apply(classes, ['e-columnselection']);
            }
            if (cell.cellType === enum_1.CellType.Header) {
                attr[literals.ariaColIndex] = cell.colIndex + 1;
            }
            else if (!ej2_base_2.isNullOrUndefined(cell.index)) {
                attr[literals.ariaColIndex] = cell.index + 1;
            }
            if (!cell.visible) {
                classes.push('e-hide');
            }
            attr.class = classes;
            util_1.setStyleAndAttributes(node, attr);
        };
        CellRenderer.prototype.getValue = function (field, data, column) {
            return column.valueAccessor(field, data, column);
        };
        return CellRenderer;
    }());
    exports.CellRenderer = CellRenderer;
});