all files / grid/renderer/ column-freeze-renderer.js

85.36% Statements 484/567
69.12% Branches 235/340
92.54% Functions 62/67
85.28% Lines 481/564
11 statements, 6 functions, 9 branches Ignored     
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 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818          24× 24× 24×   48×       48×                               96× 96× 96× 96× 96× 96× 96× 96× 96× 96× 96× 394× 394× 239×   394× 394×     96× 394×               394× 394× 394× 394× 394×       394×     26×   394×     21×     96×     48× 48× 48× 48× 48× 48× 48× 48× 48× 48× 48×                                         47× 47× 47× 47× 27×   47× 47× 47× 27×   47× 47× 47×                                                                                                                                     52× 52× 52× 52×             48× 48× 48×     28×     17× 17×           17×     24× 17× 17× 14×         24× 24×   24× 17×         24× 17× 17× 14× 14× 14× 14× 14×           39× 32× 32× 29×           36× 36× 36× 36× 22× 22×         24× 24× 17×   24× 21×         14× 14× 14× 14× 14×   14×     17× 17× 17×   17× 83× 61× 61×       24× 24×   24× 24× 24× 24× 24× 116× 49× 49×       21× 21× 21× 21×     21× 21× 21× 21× 21× 105× 77×     28× 28×       21×   127×     24× 24× 24× 24× 24×   24× 17× 17× 14×         24× 24×   24× 17× 17× 14× 14× 14×         24×   38× 38× 31× 17× 17×     14× 14×         24×       14× 14× 14× 14× 14×   14×                             14× 14× 14× 14× 14×   14× 14×       30×   21× 12×         16× 16× 16×     21×   166×                     21× 21×     21×   23× 16×               27× 19× 19× 19× 16×         27×   56× 53×   56× 37×   56×       109× 109× 31×   78× 43×   35× 35×   108×   56×   56× 56×   49×       49×   49×         42× 12×         30× 30× 10× 10× 10×   20× 10× 10× 10× 10×     10× 10× 10× 10×     49× 19× 19×   49×   19× 19×     56× 56× 56×         48× 12×         36× 36× 12× 12×   24× 12× 12×     12× 12×       243× 136×     107×     34×     33×     87× 72×   71×     15×     117×   1231× 1231×   76×        
/* 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", "./freeze-renderer", "../base/constant", "../base/util", "@syncfusion/ej2-inputs", "../base/string-literals"], function (require, exports, ej2_base_1, freeze_renderer_1, events, util_1, ej2_inputs_1, literals) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var ColumnFreezeHeaderRenderer = (function (_super) {
        __extends(ColumnFreezeHeaderRenderer, _super);
        function ColumnFreezeHeaderRenderer(parent, locator) {
            var _this = _super.call(this, parent, locator) || this;
            _this.addEventListener();
            return _this;
        }
        ColumnFreezeHeaderRenderer.prototype.addEventListener = function () {
            this.evtHandlers = [{ event: events.freezeRender, handler: this.refreshFreeze },
                { event: events.refreshFrozenColumns, handler: this.refreshFrozenColumns },
                { event: events.setReorderDestinationElement, handler: this.setReorderElement },
                { event: events.columnVisibilityChanged, handler: this.setVisible }];
            util_1.addRemoveEventListener(this.parent, this.evtHandlers, true, this);
        };
        ColumnFreezeHeaderRenderer.prototype.removeEventListener = function () {
            if (this.parent.isDestroyed) {
                return;
            }
            util_1.addRemoveEventListener(this.parent, this.evtHandlers, false);
        };
        ColumnFreezeHeaderRenderer.prototype.setReorderElement = function (args) {
            this.destEle = args.ele;
        };
        ColumnFreezeHeaderRenderer.prototype.refreshFrozenColumns = function (args) {
            Eif (!args.parent) {
                this.parent.setProperties({ columns: args.columns }, true);
            }
            var isFrozenLeft = util_1.parentsUntil(this.destEle, 'e-frozen-left-header');
            var isFrozenRight = util_1.parentsUntil(this.destEle, 'e-frozen-right-header');
            var left = this.parent.getFrozenLeftColumnsCount();
            var right = this.parent.getFrozenRightColumnsCount();
            args.column.freeze = null;
            Iif (isFrozenLeft) {
                args.column.freeze = 'Left';
            }
            else Iif (isFrozenRight) {
                args.column.freeze = 'Right';
            }
            this.parent.setFrozenCount();
            args.cancel = left !== this.parent.getFrozenLeftColumnsCount() || right !== this.parent.getFrozenRightColumnsCount();
            Eif (args.cancel) {
                this.parent.refreshColumns();
            }
        };
        ColumnFreezeHeaderRenderer.prototype.setWrapHeight = function (fRows, mRows, isModeChg, isContReset, isStackedHdr, frRows) {
            var fRowHgt;
            var mRowHgt;
            var frRowHgt;
            var isWrap = this.parent.allowTextWrap;
            var tBody = this.parent.getHeaderContent().querySelector(literals.tbody);
            var wrapMode = this.parent.textWrapSettings.wrapMode;
            var tHead = this.parent.getHeaderContent().querySelector('thead');
            var height = [];
            var width = [];
            var rightHeight = [];
            for (var i = 0, len = fRows.length; i < len; i++) {
                Eif (!ej2_base_1.isNullOrUndefined(fRows[parseInt(i.toString(), 10)]) && !ej2_base_1.isNullOrUndefined(mRows[parseInt(i.toString(), 10)])) {
                    if (frRows) {
                        rightHeight[parseInt(i.toString(), 10)] = frRows[parseInt(i.toString(), 10)].getBoundingClientRect().height;
                    }
                    width[parseInt(i.toString(), 10)] = mRows[parseInt(i.toString(), 10)].getBoundingClientRect().height;
                    height[parseInt(i.toString(), 10)] = fRows[parseInt(i.toString(), 10)].getBoundingClientRect().height;
                }
            }
            for (var i = 0, len = fRows.length; i < len; i++) {
                Iif (isModeChg && (((wrapMode === 'Content' && tHead.contains(fRows[parseInt(i.toString(), 10)]))
                    || (wrapMode === 'Header' && tBody.contains(fRows[parseInt(i.toString(), 10)]))) || (wrapMode === 'Header' && isContReset)) || isStackedHdr) {
                    if (!ej2_base_1.isNullOrUndefined(frRows) && frRows[parseInt(i.toString(), 10)]) {
                        frRows[parseInt(i.toString(), 10)].style.height = null;
                    }
                    fRows[parseInt(i.toString(), 10)].style.height = null;
                    mRows[parseInt(i.toString(), 10)].style.height = null;
                }
                fRowHgt = height[parseInt(i.toString(), 10)];
                mRowHgt = width[parseInt(i.toString(), 10)];
                frRowHgt = rightHeight[parseInt(i.toString(), 10)] ? rightHeight[parseInt(i.toString(), 10)] : 0;
                var maxHeight = Math.max(fRowHgt, mRowHgt, frRowHgt);
                if (!ej2_base_1.isNullOrUndefined(fRows[parseInt(i.toString(), 10)]) && fRows[parseInt(i.toString(), 10)].childElementCount
                    && ((isWrap && fRowHgt < maxHeight) || (!isWrap && fRowHgt < maxHeight) || (this.parent.allowResizing
                        && this.parent.resizeModule && this.parent.resizeModule.isFrozenColResized === false))) {
                    fRows[parseInt(i.toString(), 10)].style.height = maxHeight + 'px';
                }
                if (mRows && !ej2_base_1.isNullOrUndefined(mRows[parseInt(i.toString(), 10)]) && mRows[parseInt(i.toString(), 10)].childElementCount
                    && ((isWrap && maxHeight > mRowHgt) || (!isWrap && maxHeight > mRowHgt) || (this.parent.allowResizing
                        && this.parent.resizeModule && this.parent.resizeModule.isFrozenColResized === true))) {
                    mRows[parseInt(i.toString(), 10)].style.height = maxHeight + 'px';
                }
                if (frRows && !ej2_base_1.isNullOrUndefined(frRows[parseInt(i.toString(), 10)]) && frRows[parseInt(i.toString(), 10)].childElementCount
                    && ((isWrap && maxHeight > frRowHgt) || (!isWrap && maxHeight > frRowHgt) || (this.parent.allowResizing
                        && this.parent.resizeModule && this.parent.resizeModule.isFrozenColResized === true))) {
                    frRows[parseInt(i.toString(), 10)].style.height = maxHeight + 'px';
                }
            }
            if (isWrap) {
                this.setFrozenHeight();
            }
        };
        ColumnFreezeHeaderRenderer.prototype.refreshHeight = function (obj) {
            var isLeftRight = this.parent.getFrozenMode() === literals.leftRight;
            var fRows;
            var frRows;
            var mRows;
            var frHdr = this.getFrozenRightHeader();
            var fHdr = this.parent.getHeaderContent().querySelector('.' + literals.frozenHeader);
            var cont = this.parent.getContent();
            var mHdr = this.getMovableHeader();
            var hdrClassList = this.parent.getHeaderContent().querySelector('.' + literals.headerContent).classList;
            var wrapMode = this.parent.textWrapSettings.wrapMode;
            if (obj.case === 'textwrap') {
                Eif (wrapMode !== 'Header' || obj.isModeChg) {
                    Eif (isLeftRight) {
                        frRows = cont.querySelector('.e-frozen-right-content').querySelectorAll('tr');
                    }
                    mRows = cont.querySelector('.' + literals.movableContent).querySelectorAll('tr');
                    fRows = cont.querySelector('.' + literals.frozenContent).querySelectorAll('tr');
                    this.setWrapHeight(fRows, mRows, obj.isModeChg, true, false, frRows);
                }
                Iif (wrapMode === 'Content' && this.parent.allowTextWrap) {
                    hdrClassList.add('e-wrap');
                }
                else {
                    hdrClassList.remove('e-wrap');
                }
                Eif (wrapMode === 'Both' || obj.isModeChg) {
                    Eif (isLeftRight) {
                        frRows = frHdr.querySelectorAll('tr');
                    }
                    fRows = fHdr.querySelectorAll('tr');
                    mRows = mHdr.querySelectorAll('tr');
                }
                else {
                    if (isLeftRight) {
                        frRows = frHdr.querySelector(wrapMode === 'Content' ?
                            literals.tbody : 'thead').querySelectorAll('tr');
                    }
                    fRows = fHdr.querySelector(wrapMode === 'Content' ?
                        literals.tbody : 'thead').querySelectorAll('tr');
                    mRows = mHdr.querySelector(wrapMode === 'Content' ?
                        literals.tbody : 'thead').querySelectorAll('tr');
                }
                Eif (!this.parent.getHeaderContent().getElementsByClassName('e-stackedheadercell').length) {
                    this.setWrapHeight(fRows, mRows, obj.isModeChg, false, this.colDepth > 1, frRows);
                }
                this.refreshStackedHdrHgt();
            }
            else Eif (obj.case === 'refreshHeight') {
                mRows = cont.querySelector('.' + literals.movableContent).querySelectorAll('tr');
                fRows = cont.querySelector('.' + literals.frozenContent).querySelectorAll('tr');
                if (isLeftRight) {
                    frRows = cont.querySelector('.e-frozen-right-content').querySelectorAll('tr');
                }
                this.setWrapHeight(fRows, mRows, obj.isModeChg, false, false, frRows);
                Eif (!this.parent.getHeaderContent().getElementsByClassName('e-stackedheadercell').length) {
                    if (isLeftRight) {
                        frRows = frHdr.querySelectorAll('tr');
                    }
                    fRows = fHdr.querySelectorAll('tr');
                    mRows = mHdr.querySelectorAll('tr');
                    this.setWrapHeight(fRows, mRows, obj.isModeChg, false, false, frRows);
                }
            }
        };
        ColumnFreezeHeaderRenderer.prototype.setVisible = function (columns) {
            var gObj = this.parent;
            var displayVal;
            var idx;
            var left = this.parent.getFrozenLeftColumnsCount();
            var right = this.parent.getFrozenRightColumnsCount();
            var movable = this.parent.getMovableColumnsCount();
            for (var c = 0, clen = columns.length; c < clen; c++) {
                var column = columns[parseInt(c.toString(), 10)];
                idx = gObj.getNormalizedColumnIndex(column.uid);
                displayVal = column.visible ? '' : 'none';
                if (column.freeze === 'Left' || column.freeze === 'Right') {
                    if (left && !right) {
                        var leftColGrp = gObj.getHeaderContent().querySelector('.e-frozen-left-header').querySelector(literals.colGroup);
                        ej2_base_1.setStyleAttribute(leftColGrp.children[parseInt(idx.toString(), 10)], { 'display': displayVal });
                    }
                    else if (!left && right) {
                        var rightColGrp = gObj.getHeaderContent().querySelector('.e-frozen-right-header').querySelector(literals.colGroup);
                        ej2_base_1.setStyleAttribute(rightColGrp.children[idx - movable], { 'display': displayVal });
                    }
                }
                else {
                    var mTblColGrp = gObj.getHeaderContent().querySelector('.' + literals.movableHeader).querySelector(literals.colGroup);
                    ej2_base_1.setStyleAttribute(mTblColGrp.children[idx - left], { 'display': displayVal });
                }
            }
            this.refreshUI();
        };
        ColumnFreezeHeaderRenderer.prototype.filterRenderer = function (ele, frozenColumn, total) {
            return _super.prototype.filterRenderer.call(this, ele, frozenColumn, total);
        };
        ColumnFreezeHeaderRenderer.prototype.refreshUI = function () {
            var frTbody;
            var tbody = this.getMovableHeader().querySelector(literals.tbody);
            ej2_base_1.remove(this.getMovableHeader().querySelector('table'));
            if (this.parent.getFrozenMode() === literals.leftRight) {
                frTbody = this.getFrozenRightHeader().querySelector(literals.tbody);
                ej2_base_1.remove(this.getFrozenRightHeader().querySelector('table'));
            }
            _super.prototype.refreshFrozenLeftUI.call(this);
            this.rfshMovable();
            this.getMovableHeader().querySelector(literals.tbody).innerHTML = tbody.innerHTML;
            if (frTbody) {
                this.getFrozenRightHeader().querySelector(literals.tbody).innerHTML = frTbody.innerHTML;
            }
            this.updateColgroup();
            this.widthService.setWidthToColumns();
            this.parent.notify(events.colGroupRefresh, {});
            if (this.parent.allowTextWrap && this.parent.textWrapSettings.wrapMode === 'Header') {
                util_1.wrap([].slice.call(this.getMovableHeader().querySelectorAll('tr.e-columnheader')), true);
            }
            this.parent.updateDefaultCursor();
            var mTbl = this.parent.getContent().querySelector('.' + literals.movableContent).querySelector('.' + literals.table);
            ej2_base_1.remove(mTbl.querySelector(literals.colGroup));
            var mColGroup = (this.getMovableHeader().querySelector(literals.colGroup).cloneNode(true));
            mTbl.insertBefore(mColGroup, mTbl.querySelector(literals.tbody));
            if (frTbody) {
                var frtbl = this.parent.getContent().querySelector('.e-frozen-right-content').querySelector('.' + literals.table);
                ej2_base_1.remove(frtbl.querySelector(literals.colGroup));
                var frtblColGroup = (this.getFrozenRightHeader().querySelector(literals.colGroup).cloneNode(true));
                frtbl.insertBefore(frtblColGroup, frtbl.querySelector(literals.tbody));
                this.getFrozenRightHeader().querySelector('table').style.width = frtbl.style.width;
            }
            this.widthService.refreshFrozenScrollbar();
            this.initializeHeaderDrag();
            this.parent.notify(events.headerRefreshed, { rows: this.rows, args: { isFrozen: false } });
        };
        ColumnFreezeHeaderRenderer.prototype.refreshFreeze = function (obj) {
            var left = this.parent.getFrozenLeftColumnsCount();
            var right = this.parent.getFrozenRightColumnsCount();
            var movable = this.parent.getMovableColumnsCount();
            if (obj.case === 'filter') {
                var filterRow = this.getTable().querySelector('.e-filterbar');
                Eif (this.parent.allowFiltering && filterRow && this.getMovableHeader().querySelector('thead')) {
                    var isDraggable = this.parent.isRowDragable();
                    var index = left ? isDraggable ? left + 1 : left : 0;
                    var total = left + movable + (left && isDraggable ? 1 : 0);
                    this.getMovableHeader().querySelector('thead')
                        .appendChild(this.filterRenderer(filterRow, index, total));
                    if (this.parent.getFrozenMode() === literals.leftRight) {
                        var ele = [].slice.call(this.getMovableHeader().
                            querySelectorAll('thead .e-filterbarcell .e-input'));
                        this.getFrozenRightHeader().querySelector('thead').appendChild(this.filterRenderer(filterRow, index, index + right));
                        this.adjudtFilterBarCell(ele);
                    }
                    var elements = [].slice.call(this.getMovableHeader().
                        querySelectorAll('thead .e-filterbarcell .e-input'));
                    this.adjudtFilterBarCell(elements);
                }
            }
            else Eif (obj.case === 'textwrap' || obj.case === 'refreshHeight') {
                this.refreshHeight(obj);
                this.parent.contentModule.refreshScrollOffset();
            }
        };
        ColumnFreezeHeaderRenderer.prototype.updateFrozenColGroup = function (cols, colGroup) {
            if (cols && cols.visible === false) {
                ej2_base_1.setStyleAttribute(colGroup, { 'display': 'none' });
            }
        };
        ColumnFreezeHeaderRenderer.prototype.adjudtFilterBarCell = function (elements) {
            for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {
                var elem = elements_1[_i];
                var args = {
                    element: elem, floatLabelType: 'Never',
                    properties: {
                        enableRtl: this.parent.enableRtl, showClearButton: true
                    }
                };
                ej2_inputs_1.Input.bindInitialEvent(args);
            }
        };
        ColumnFreezeHeaderRenderer.prototype.renderPanel = function () {
            if (this.parent.getFrozenLeftColumnsCount()) {
                _super.prototype.renderPanel.call(this);
                if (this.parent.getFrozenRightColumnsCount()) {
                    this.renderLeftWithRightFrozenPanel();
                }
            }
            else {
                this.renderRightFrozenPanelAlone();
            }
            this.getPanel().firstChild.style.display = 'flex';
            this.getMovableHeader().style.flex = '1';
        };
        ColumnFreezeHeaderRenderer.prototype.renderTable = function () {
            if (this.parent.getFrozenLeftColumnsCount()) {
                _super.prototype.renderTable.call(this);
            }
            else {
                this.renderFrozenRightTableAlone();
            }
        };
        ColumnFreezeHeaderRenderer.prototype.rfshMovable = function () {
            if (this.parent.getFrozenLeftColumnsCount()) {
                _super.prototype.rfshMovable.call(this);
                if (this.parent.getFrozenRightColumnsCount()) {
                    var rows = this.rows;
                    this.getFrozenRightHeader().appendChild(this.createHeader(undefined, 'frozen-right'));
                    this.refreshStackedHdrHgt();
                    this.parent.notify(events.headerRefreshed, { rows: this.rows, args: { renderFrozenRightContent: true } });
                    this.rows = rows;
                }
            }
            else {
                this.getFrozenRightHeader().appendChild(this.getTable());
                this.getMovableHeader().appendChild(this.createHeader(undefined, 'movable'));
                this.refreshStackedHdrHgt();
                this.addMovableFirstCls();
            }
        };
        ColumnFreezeHeaderRenderer.prototype.refreshStackedHdrHgt = function () {
            if (this.parent.getFrozenLeftColumnsCount()) {
                _super.prototype.refreshStackedHdrHgt.call(this);
                if (this.parent.getFrozenRightColumnsCount()) {
                    this.refreshFrozenRightStackedHdrHgt();
                }
            }
            else {
                this.refreshFrozenRightStackedHdrHgt();
            }
        };
        ColumnFreezeHeaderRenderer.prototype.refreshFrozenRightStackedHdrHgt = function () {
            var fRowSpan;
            var frTr = [].slice.call(this.getFrozenRightHeader().getElementsByClassName('e-columnheader'));
            var mTr = [].slice.call(this.getMovableHeader().getElementsByClassName('e-columnheader'));
            for (var i = 0, len = frTr.length; i < len; i++) {
                fRowSpan = this.getRowSpan(frTr[parseInt(i.toString(), 10)]);
                Iif (fRowSpan.min > 1) {
                    this.updateStackedHdrRowHgt(i, fRowSpan.max, frTr[parseInt(i.toString(), 10)], mTr);
                }
            }
        };
        ColumnFreezeHeaderRenderer.prototype.updateColgroup = function () {
            this.updateMovableColGroup();
            if (this.parent.getFrozenLeftColumnsCount()) {
                this.updateFrozenLeftColGroup();
            }
            if (this.parent.getFrozenRightColumnsCount()) {
                this.updateFrozenRightColGroup();
            }
        };
        ColumnFreezeHeaderRenderer.prototype.renderRightFrozenPanelAlone = function () {
            var mDiv = this.parent.element.querySelector('.' + literals.movableHeader);
            var fRightDiv = this.parent.element.querySelector('.e-frozen-right-header');
            _super.prototype.renderFrozenRightPanel.call(this);
            Eif (ej2_base_1.isNullOrUndefined(fRightDiv)) {
                mDiv = this.parent.createElement('div', { className: literals.movableHeader });
                fRightDiv = this.parent.createElement('div', { className: 'e-frozenheader e-frozen-right-header' });
                this.getPanel().querySelector('.' + literals.headerContent).appendChild(mDiv);
                this.getPanel().querySelector('.' + literals.headerContent).appendChild(fRightDiv);
            }
            _super.prototype.setMovableHeader.call(this, mDiv);
            this.setFrozenRightHeader(fRightDiv);
        };
        ColumnFreezeHeaderRenderer.prototype.renderLeftWithRightFrozenPanel = function () {
            var fRightDiv = this.parent.element.querySelector('.e-frozen-right-header');
            _super.prototype.renderFrozenRightPanel.call(this);
            Eif (ej2_base_1.isNullOrUndefined(fRightDiv)) {
                fRightDiv = this.parent.createElement('div', { className: 'e-frozenheader e-frozen-right-header' });
                this.getPanel().querySelector('.' + literals.headerContent).appendChild(fRightDiv);
            }
            this.setFrozenRightHeader(fRightDiv);
        };
        ColumnFreezeHeaderRenderer.prototype.renderFrozenRightTableAlone = function () {
            _super.prototype.renderFrozenRightTable.call(this);
            this.rfshMovable();
            this.updateColgroup();
            this.initializeHeaderDrag();
            this.initializeHeaderDrop();
            this.parent.notify(events.headerRefreshed, { rows: this.rows, args: { isFrozen: false } });
        };
        ColumnFreezeHeaderRenderer.prototype.updateFrozenLeftColGroup = function () {
            var leftColGroup = this.getFrozenHeader().querySelector(literals.colGroup).children;
            var start = this.parent.isRowDragable() ? 1 : 0;
            var count = this.parent.isRowDragable() ? this.parent.getFrozenLeftColumnsCount() + 1
                : this.parent.getFrozenLeftColumnsCount();
            for (var i = start; i < leftColGroup.length; i++) {
                if (i >= count) {
                    ej2_base_1.remove(leftColGroup[parseInt(i.toString(), 10)]);
                    i--;
                }
            }
        };
        ColumnFreezeHeaderRenderer.prototype.updateMovableColGroup = function () {
            var movableColGroup = this.getMovableHeader().querySelector(literals.colGroup).children;
            if (this.parent.isRowDragable()) {
                ej2_base_1.remove(movableColGroup[0]);
            }
            var length = movableColGroup.length;
            var left = this.parent.getFrozenLeftColumnsCount();
            var movable = this.parent.getMovableColumnsCount();
            var k = 0;
            for (var i = 0; i < length; i++, k++) {
                if (i < left || i >= left + movable) {
                    ej2_base_1.remove(movableColGroup[parseInt(k.toString(), 10)]);
                    k--;
                }
            }
        };
        ColumnFreezeHeaderRenderer.prototype.updateFrozenRightColGroup = function () {
            var isDraggable = this.parent.isRowDragable();
            var rightColumns = this.parent.getFrozenRightColumns();
            var rightColGroup = this.getFrozenRightHeader().querySelector(literals.colGroup).children;
            Iif (this.parent.getFrozenMode() === literals.leftRight && isDraggable) {
                ej2_base_1.remove(rightColGroup[0]);
            }
            var length = rightColGroup.length;
            var left = this.parent.getFrozenLeftColumnsCount();
            var movable = this.parent.getMovableColumnsCount();
            var k = 0;
            for (var i = 0; i < length; i++) {
                if (i < left + movable) {
                    ej2_base_1.remove(rightColGroup[0]);
                }
                else {
                    this.updateFrozenColGroup(rightColumns[parseInt(k.toString(), 10)], rightColGroup[parseInt(k.toString(), 10)]);
                    k++;
                }
            }
        };
        ColumnFreezeHeaderRenderer.prototype.setFrozenRightHeader = function (ele) {
            this.frozenRightHeader = ele;
        };
        ColumnFreezeHeaderRenderer.prototype.getFrozenRightHeader = function () {
            return this.frozenRightHeader;
        };
        return ColumnFreezeHeaderRenderer;
    }(freeze_renderer_1.FreezeRender));
    exports.ColumnFreezeHeaderRenderer = ColumnFreezeHeaderRenderer;
    var ColumnFreezeContentRenderer = (function (_super) {
        __extends(ColumnFreezeContentRenderer, _super);
        function ColumnFreezeContentRenderer(parent, locator) {
            var _this = _super.call(this, parent, locator) || this;
            _this.frzCount = 0;
            _this.isColGroupRefresh = false;
            _this.widthService = locator.getService('widthService');
            return _this;
        }
        ColumnFreezeContentRenderer.prototype.renderPanel = function () {
            if (this.parent.getFrozenLeftColumnsCount()) {
                _super.prototype.renderPanel.call(this);
                if (this.parent.getFrozenRightColumnsCount()) {
                    this.renderFrozenLeftWithRightPanel();
                }
            }
            else {
                this.renderFrozenRightPanelAlone();
            }
            var display = this.parent.enableVirtualization ? '' : 'flex';
            this.getPanel().firstChild.style.display = display;
        };
        ColumnFreezeContentRenderer.prototype.renderTable = function () {
            if (this.parent.getFrozenLeftColumnsCount()) {
                _super.prototype.renderTable.call(this);
                if (this.parent.getFrozenRightColumnsCount()) {
                    this.renderFrozenLeftWithRightTable();
                    var display = !this.parent.getVisibleFrozenRightCount() ? 'none' : '';
                    this.renderHorizontalScrollbar('e-frozenscrollbar e-frozen-right-scrollbar', display, true);
                }
            }
            else {
                this.renderFrozenRightTableAlone();
                var display = !this.parent.getVisibleFrozenRightCount() ? 'none' : '';
                this.renderHorizontalScrollbar('e-frozenscrollbar e-frozen-right-scrollbar', display);
            }
            this.getMovableContent().style.flex = '1';
        };
        ColumnFreezeContentRenderer.prototype.appendScrollbar = function (frozen, movable, isRight) {
            var parent = this.parent.createElement('div', { className: 'e-scrollbar', styles: 'display: flex' });
            if (this.parent.getFrozenLeftColumnsCount()) {
                if (!isRight) {
                    parent.appendChild(frozen);
                    parent.appendChild(movable);
                }
                else {
                    this.parent.getContent().querySelector('.e-scrollbar').appendChild(frozen);
                    return;
                }
            }
            else {
                parent.appendChild(movable);
                parent.appendChild(frozen);
            }
            this.parent.getContent().appendChild(parent);
        };
        ColumnFreezeContentRenderer.prototype.renderFrozenRightPanelAlone = function () {
            this.renderFrozenRigthPanel();
            var mDiv = this.parent.element.querySelector('.' + literals.movableContent);
            var fRightContent = this.parent.element.querySelector('.e-frozen-right-content');
            Eif (ej2_base_1.isNullOrUndefined(fRightContent)) {
                mDiv = this.parent.createElement('div', { className: literals.movableContent });
                fRightContent = this.parent.createElement('div', { className: 'e-frozencontent e-frozen-right-content' });
                this.getPanel().querySelector('.' + literals.content).appendChild(mDiv);
                this.getPanel().querySelector('.' + literals.content).appendChild(fRightContent);
            }
            _super.prototype.setMovableContent.call(this, mDiv);
            this.setFrozenRightContent(fRightContent);
        };
        ColumnFreezeContentRenderer.prototype.renderFrozenLeftWithRightPanel = function () {
            this.renderFrozenRigthPanel();
            var fRightContent = this.parent.element.querySelector('.e-frozen-right-content');
            Eif (ej2_base_1.isNullOrUndefined(fRightContent)) {
                fRightContent = this.parent.createElement('div', { className: 'e-frozencontent e-frozen-right-content' });
                this.getPanel().querySelector('.' + literals.content).appendChild(fRightContent);
            }
            this.setFrozenRightContent(fRightContent);
        };
        ColumnFreezeContentRenderer.prototype.renderFrozenRightTableAlone = function () {
            var mTbl;
            Eif (this.getFrozenRightContent().querySelector('.' + literals.table) == null) {
                _super.prototype.renderFrozenRightTable.call(this);
                this.getFrozenRightContent().appendChild(this.getTable());
                mTbl = this.getTable().cloneNode(true);
                this.getMovableContent().appendChild(mTbl);
            }
            else {
                if (this.parent.frozenRows) {
                    this.parent.getHeaderContent().classList.add('e-frozenhdrcont');
                }
                this.setTable(this.getFrozenRightContent().querySelector('.' + literals.table));
                this.setColGroup(this.getFrozenRightHeaderColGroup());
                mTbl = this.getMovableContent().querySelector('.' + literals.table);
                this.getFrozenRightContent().querySelector('.' + literals.table).appendChild(this.getColGroup());
            }
            Eif (this.getMovableContent().querySelector(literals.colGroup)) {
                ej2_base_1.remove(this.getMovableContent().querySelector(literals.colGroup));
            }
            var colgroup = ((this.parent.getHeaderContent().querySelector('.' + literals.movableHeader)
                .querySelector(literals.colGroup)).cloneNode(true));
            mTbl.insertBefore(colgroup, mTbl.querySelector(literals.tbody));
        };
        ColumnFreezeContentRenderer.prototype.renderFrozenLeftWithRightTable = function () {
            var frozenRight = this.getTable().cloneNode(true);
            this.getFrozenRightContent().appendChild(frozenRight);
            var oldColGroup = this.getFrozenRightContent().querySelector(literals.colGroup);
            Eif (oldColGroup) {
                ej2_base_1.remove(oldColGroup);
            }
            var rightTable = this.getFrozenRightContent().querySelector('.' + literals.table);
            rightTable.insertBefore(this.getFrozenRightHeaderColGroup(), rightTable.querySelector(literals.tbody));
        };
        ColumnFreezeContentRenderer.prototype.renderFrozenRightEmptyRowAlone = function (tbody) {
            _super.prototype.renderFrozenRightEmpty.call(this, tbody);
            this.getMovableContent().querySelector(literals.tbody).innerHTML = '<tr><td></td></tr>';
            ej2_base_1.addClass([this.parent.getMovableContentTbody().querySelector('tr')], ['e-emptyrow']);
            this.getFrozenRightContent().querySelector('.e-emptyrow').querySelector('td').colSpan = this.parent.getVisibleFrozenRightCount();
            if (this.parent.frozenRows) {
                this.parent.getFrozenRightHeaderTbody().innerHTML = '';
                this.parent.getMovableHeaderTbody().innerHTML = '';
            }
        };
        ColumnFreezeContentRenderer.prototype.getFrozenHeader = function (tableName) {
            if (tableName === literals.frozenLeft) {
                return this.parent.getHeaderContent().querySelector('.e-frozen-left-header').querySelector(literals.tbody);
            }
            else if (tableName === 'movable') {
                return this.parent.getHeaderContent().querySelector('.' + literals.movableHeader).querySelector(literals.tbody);
            }
            else {
                return this.parent.getHeaderContent().querySelector('.e-frozen-right-header').querySelector(literals.tbody);
            }
        };
        ColumnFreezeContentRenderer.prototype.renderFrozenLeftWithRightEmptyRow = function () {
            this.getFrozenRightContent().querySelector(literals.tbody).innerHTML = '<tr><td></td></tr>';
            ej2_base_1.addClass([this.getFrozenRightContent().querySelector(literals.tbody).querySelector('tr')], ['e-emptyrow']);
            if (this.parent.frozenRows) {
                this.parent.getHeaderContent().querySelector('.e-frozen-right-header').querySelector(literals.tbody).innerHTML = '';
            }
        };
        ColumnFreezeContentRenderer.prototype.setFrozenRightContent = function (ele) {
            this.frozenRigthContent = ele;
        };
        ColumnFreezeContentRenderer.prototype.getFrozenRightContent = function () {
            return this.frozenRigthContent;
        };
        ColumnFreezeContentRenderer.prototype.getHeaderColGroup = function () {
            var colGroup = this.parent.element.querySelector('.' + literals.gridHeader).querySelector(literals.colGroup).cloneNode(true);
            if (!this.parent.getFrozenLeftColumnsCount()) {
                var right = this.getFrozenRightHeaderColGroup();
                colGroup = right && this.frzCount ? right.cloneNode(true) : colGroup;
                this.frzCount++;
                this.isColGroupRefresh = true;
            }
            return colGroup;
        };
        ColumnFreezeContentRenderer.prototype.getFrozenRightHeaderColGroup = function () {
            var col = this.parent.getHeaderContent().querySelector('.e-frozen-right-header').querySelector(literals.colGroup);
            Iif (!col) {
                col = this.parent.getHeaderContent().querySelector(literals.colGroup);
            }
            return col.cloneNode(true);
        };
        ColumnFreezeContentRenderer.prototype.setColGroup = function (colGroup) {
            if (this.parent.getFrozenLeftColumnsCount()) {
                return _super.prototype.setColGroup.call(this, colGroup);
            }
            else {
                colGroup = !this.isColGroupRefresh ? this.getFrozenRightHeaderColGroup() : colGroup;
                Eif (!ej2_base_1.isNullOrUndefined(colGroup)) {
                    colGroup.id = 'content-' + colGroup.id;
                }
                this.isColGroupRefresh = false;
                Iif (this.frzCount === 2) {
                    this.frzCount = 0;
                }
                return this.colgroup = colGroup;
            }
        };
        ColumnFreezeContentRenderer.prototype.renderEmpty = function (tbody) {
            if (this.parent.getFrozenLeftColumnsCount()) {
                _super.prototype.renderEmpty.call(this, tbody);
                this.getFrozenContent().querySelector('.e-emptyrow').querySelector('td').colSpan = this.parent.getVisibleFrozenLeftCount();
                if (this.parent.getFrozenRightColumnsCount()) {
                    this.renderFrozenLeftWithRightEmptyRow();
                }
            }
            else {
                this.renderFrozenRightEmptyRowAlone(tbody);
            }
            this.parent.notify(events.freezeRender, { case: 'refreshHeight' });
        };
        ColumnFreezeContentRenderer.prototype.setHeightToContent = function (height) {
            if (this.parent.getFrozenRightColumnsCount()) {
                this.getFrozenRightContent().style.height = height.toString() + 'px';
            }
            if (this.parent.getFrozenLeftColumnsCount()) {
                this.getFrozenContent().style.height = height.toString() + 'px';
            }
            this.getMovableContent().style.height = height.toString() + 'px';
        };
        ColumnFreezeContentRenderer.prototype.actionComplete = function (args) {
            _super.prototype.actionComplete.call(this, args);
        };
        ColumnFreezeContentRenderer.prototype.batchAdd = function (args) {
            _super.prototype.batchAdd.call(this, args);
        };
        ColumnFreezeContentRenderer.prototype.getTbody = function (tableName) {
            var tbody;
            if (tableName === literals.frozenLeft) {
                tbody = this.parent.getFrozenLeftContentTbody();
            }
            else if (tableName === 'movable') {
                tbody = this.parent.getMovableContentTbody();
            }
            else Eif (tableName === literals.frozenRight) {
                tbody = this.parent.getFrozenRightContentTbody();
            }
            return tbody;
        };
        ColumnFreezeContentRenderer.prototype.setIsFrozen = function (args, tableName) {
            args.isFrozen = (tableName === literals.frozenLeft || (this.parent.getFrozenMode() === 'Right'
                && tableName === literals.frozenRight));
            args.renderFrozenRightContent = this.parent.getFrozenMode() === literals.leftRight && tableName === literals.frozenRight;
            args.renderMovableContent = tableName === 'movable';
        };
        ColumnFreezeContentRenderer.prototype.appendContent = function (tbody, frag, args, tableName) {
            Iif (!ej2_base_1.isNullOrUndefined(this.parent.rowTemplate) && this.parent.isReact) {
                tbody = frag;
            }
            else {
                tbody.appendChild(frag);
            }
            if (this.parent.getFrozenMode() === 'Left') {
                if (tableName === literals.frozenLeft) {
                    this.isLoaded = false;
                    this.getFrozenContent().querySelector('table').appendChild(tbody);
                    this.refreshContentRows(ej2_base_1.extend({}, args));
                }
                else {
                    this.refreshTbody(tbody);
                    this.isLoaded = true;
                    this.getMovableContent().querySelector('table').appendChild(tbody);
                    this.refreshHeight();
                    this.refreshScrollOffset();
                }
            }
            else if (this.parent.getFrozenMode() === 'Right') {
                if (tableName === 'movable') {
                    this.refreshTbody(tbody);
                    this.isLoaded = true;
                    this.getMovableContent().querySelector('table').appendChild(tbody);
                    this.refreshHeight();
                    this.refreshScrollOffset();
                }
                else {
                    this.isLoaded = false;
                    this.getFrozenRightContent().querySelector('table').appendChild(tbody);
                    this.refreshContentRows(ej2_base_1.extend({}, args));
                }
            }
            else Eif (this.parent.getFrozenMode() === literals.leftRight) {
                if (tableName === literals.frozenLeft) {
                    this.isLoaded = false;
                    this.getFrozenContent().querySelector('table').appendChild(tbody);
                    this.refreshContentRows(ej2_base_1.extend({}, args));
                }
                else if (tableName === 'movable') {
                    this.refreshTbody(tbody);
                    this.isLoaded = false;
                    this.getMovableContent().querySelector('table').appendChild(tbody);
                    this.refreshContentRows(ej2_base_1.extend({}, args));
                }
                else {
                    this.isLoaded = true;
                    this.getFrozenRightContent().querySelector('table').appendChild(tbody);
                    this.refreshHeight();
                    this.refreshScrollOffset();
                }
            }
            if (this.isInitialRender) {
                this.parent.scrollModule.setHeight();
                this.isInitialRender = false;
            }
            this.widthService.refreshFrozenScrollbar();
        };
        ColumnFreezeContentRenderer.prototype.refreshHeight = function () {
            Eif (!this.parent.allowTextWrap) {
                this.parent.notify(events.freezeRender, { case: 'refreshHeight' });
            }
        };
        ColumnFreezeContentRenderer.prototype.splitRows = function (tableName) {
            var left = this.parent.getFrozenLeftColumnsCount();
            var right = this.parent.getFrozenRightColumnsCount();
            if (left && !right) {
                if (tableName === literals.frozenLeft) {
                    this.freezeRows = this.rows;
                    this.freezeRowElements = this.rowElements;
                }
                else {
                    this.movableRows = this.rows;
                }
            }
            else if (!left && right) {
                if (tableName === 'movable') {
                    this.movableRows = this.rows;
                }
                else {
                    this.freezeRows = this.rows;
                    this.freezeRowElements = this.rowElements;
                }
            }
            else Eif (left && right) {
                if (tableName === literals.frozenLeft) {
                    this.freezeRows = this.rows;
                    this.freezeRowElements = this.rowElements;
                }
                else if (tableName === 'movable') {
                    this.movableRows = this.rows;
                    this.movableRowElements = this.rowElements;
                }
                else {
                    this.frozenRightRows = this.rows;
                    this.frozenRightRowElements = this.rowElements;
                }
            }
        };
        ColumnFreezeContentRenderer.prototype.getMovableRowElements = function () {
            if (this.parent.getFrozenMode() !== literals.leftRight) {
                return this.rowElements;
            }
            else {
                return this.movableRowElements;
            }
        };
        ColumnFreezeContentRenderer.prototype.getFrozenRightRowElements = function () {
            if (this.parent.getFrozenMode() !== literals.leftRight) {
                return this.freezeRowElements;
            }
            else {
                return this.frozenRightRowElements;
            }
        };
        ColumnFreezeContentRenderer.prototype.getFrozenRightRows = function () {
            if (this.parent.getFrozenMode() === literals.leftRight) {
                if (this.parent.enableInfiniteScrolling) {
                    return this.rightFreezeRows;
                }
                return this.frozenRightRows;
            }
            else {
                return this.getRows();
            }
        };
        ColumnFreezeContentRenderer.prototype.getFrozenRightRowByIndex = function (index) {
            return !ej2_base_1.isNullOrUndefined(index) ? this.parent.getFrozenRightDataRows()[parseInt(index.toString(), 10)] : undefined;
        };
        ColumnFreezeContentRenderer.prototype.getRows = function () {
            var infiniteRows = this.getInfiniteRows();
            return infiniteRows.length ? infiniteRows : this.freezeRows;
        };
        ColumnFreezeContentRenderer.prototype.getRowElements = function () {
            return this.freezeRowElements;
        };
        return ColumnFreezeContentRenderer;
    }(freeze_renderer_1.FreezeContentRender));
    exports.ColumnFreezeContentRenderer = ColumnFreezeContentRenderer;
});