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

95.05% Statements 173/182
90.32% Branches 140/155
100% Functions 15/15
95.58% Lines 173/181
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   17288× 17288× 17288× 17288× 17288×   202328×   206741× 21737× 167×   21737×       21737×   206741×   198093× 198093× 198093× 465× 465×   465× 465× 465× 465× 465×         465×   465× 465×   465× 465× 465×   465×   197628×   202328×           202328×   202039×   289× 289×             286× 286× 286× 286× 286× 286× 276× 276×       21× 21×     202328× 202328× 202328× 202328× 202328× 1015×   202328× 202328×   202328× 8385×   202328×   202328× 202328× 202328× 4142× 4142×   202328× 202328× 202328× 199419×   2909× 1618× 1618× 963×     655×   1618× 1618× 71×   1618× 1618× 1618×   202328× 510×   202328× 202328× 220× 220× 220× 220× 220× 220×     220×   202328× 2843× 2843× 2843×   202328× 26737×   202328×   199557× 199557× 199557×   202914× 202914× 202914× 202914× 202914×   202914× 1194×   202914× 26525×   202914× 51×   202863×     359× 342×       211859× 211859× 211859× 211859×     211859× 174×   211859× 1297×   211859× 1546× 1546× 254×     211859×     211859× 8944× 8944×   202915× 198235× 198235×   211859× 10114×   211859× 211859×   198093×        
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.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) ? '' : value.toString();
        };
        CellRenderer.prototype.evaluate = function (node, cell, data, attributes, fData, isEdit) {
            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 literals_1 = ['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';
                Iif (isReactCompiler || isReactChild) {
                    var copied = { 'index': attributes[literals_1[0]] };
                    cell.column.getColumnTemplate()(ej2_base_2.extend(copied, dummyData), this.parent, 'columnTemplate', templateID, this.parent["" + str], null, node);
                }
                else {
                    result = cell.column.getColumnTemplate()(ej2_base_2.extend({ 'index': attributes[literals_1[0]] }, dummyData), this.parent, 'template', templateID, this.parent["" + str], undefined, undefined, this.parent['root']);
                }
                Eif (!isReactCompiler && !isReactChild) {
                    util_1.appendChildren(node, result);
                }
                this.parent.notify('template-result', { template: result });
                result = null;
                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);
                }
            }
        };
        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[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);
            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));
            }
            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) && 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('e-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) {
                node.style.textAlign = column.textAlign;
            }
            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 prop = { 'colindex': literals.dataColIndex };
            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.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[prop.colindex] = cell.colIndex;
                attr[literals.ariaColIndex] = cell.colIndex + 1;
            }
            else if (!ej2_base_2.isNullOrUndefined(cell.index)) {
                attr[prop.colindex] = 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;
});