Blazor') < 0) {\n if (this.enableHtmlSanitizer) {\n this.setProperties({ content: SanitizeHtmlHelper.sanitize(this.content) }, true);\n }\n tooltipContent[this.enableHtmlParse ? 'innerHTML' : 'textContent'] = this.content;\n }\n else {\n var templateFunction = compile(this.content);\n var tempArr = templateFunction({}, this, 'content', this.element.id + 'content', undefined, undefined, tooltipContent);\n if (tempArr) {\n append(tempArr, tooltipContent);\n }\n this.renderReactTemplates();\n if (typeof this.content === 'string' && this.content.indexOf('
Blazor') >= 0) {\n this.isBlazorTemplate = true;\n updateBlazorTemplate(this.element.id + 'content', 'Content', this);\n }\n }\n }\n }\n else {\n if (target && !isNullOrUndefined(target.getAttribute('data-content'))) {\n tooltipContent.innerHTML = target.getAttribute('data-content');\n }\n }\n };\n Tooltip.prototype.renderCloseIcon = function () {\n if (!this.isSticky) {\n return;\n }\n var tipClose = this.createElement('div', { className: ICON + ' ' + CLOSE });\n this.tooltipEle.appendChild(tipClose);\n EventHandler.add(tipClose, Browser.touchStartEvent, this.onStickyClose, this);\n };\n Tooltip.prototype.addDescribedBy = function (target, id) {\n var describedby = (target.getAttribute('aria-describedby') || '').split(/\\s+/);\n if (describedby.indexOf(id) < 0) {\n describedby.push(id);\n }\n attributes(target, { 'aria-describedby': describedby.join(' ').trim(), 'data-tooltip-id': id });\n };\n Tooltip.prototype.removeDescribedBy = function (target) {\n var id = target.getAttribute('data-tooltip-id');\n var describedby = (target.getAttribute('aria-describedby') || '').split(/\\s+/);\n var index = describedby.indexOf(id);\n if (index !== -1) {\n describedby.splice(index, 1);\n }\n target.removeAttribute('data-tooltip-id');\n var orgdescribedby = describedby.join(' ').trim();\n if (orgdescribedby) {\n target.setAttribute('aria-describedby', orgdescribedby);\n }\n else {\n target.removeAttribute('aria-describedby');\n }\n };\n Tooltip.prototype.tapHoldHandler = function (evt) {\n clearTimeout(this.autoCloseTimer);\n this.targetHover(evt.originalEvent);\n };\n Tooltip.prototype.touchEndHandler = function (e) {\n var _this = this;\n if (this.isSticky) {\n return;\n }\n var close = function () {\n _this.close();\n };\n this.autoCloseTimer = setTimeout(close, TOUCHEND_HIDE_DELAY);\n };\n Tooltip.prototype.targetClick = function (e) {\n var target;\n if (this.target) {\n target = closest(e.target, this.target);\n }\n else {\n target = this.element;\n }\n if (isNullOrUndefined(target)) {\n return;\n }\n if (target.getAttribute('data-tooltip-id') === null) {\n this.targetHover(e);\n }\n else if (!this.isSticky) {\n this.hideTooltip(this.animation.close, e, target);\n }\n };\n Tooltip.prototype.targetHover = function (e) {\n var target;\n if (this.target) {\n target = closest(e.target, this.target);\n }\n else {\n target = this.element;\n }\n if (isNullOrUndefined(target) || (target.getAttribute('data-tooltip-id') !== null && this.closeDelay === 0)) {\n return;\n }\n var targetList = [].slice.call(document.querySelectorAll('[data-tooltip-id= ' + this.ctrlId + '_content]'));\n for (var _i = 0, targetList_1 = targetList; _i < targetList_1.length; _i++) {\n var target_1 = targetList_1[_i];\n this.restoreElement(target_1);\n }\n this.showTooltip(target, this.animation.open, e);\n };\n Tooltip.prototype.showTooltip = function (target, showAnimation, e) {\n var _this = this;\n clearTimeout(this.showTimer);\n clearTimeout(this.hideTimer);\n this.tooltipEventArgs = {\n type: e ? e.type : null, cancel: false, target: target, event: e ? e : null,\n element: this.tooltipEle, isInteracted: !isNullOrUndefined(e)\n };\n var observeCallback = function (beforeRenderArgs) {\n _this.beforeRenderCallback(beforeRenderArgs, target, e, showAnimation);\n };\n this.trigger('beforeRender', this.tooltipEventArgs, observeCallback.bind(this));\n };\n Tooltip.prototype.beforeRenderCallback = function (beforeRenderArgs, target, e, showAnimation) {\n var isBlazorTooltipRendered = false;\n if (beforeRenderArgs.cancel) {\n this.isHidden = true;\n this.clear();\n }\n else {\n this.isHidden = false;\n if (isNullOrUndefined(this.tooltipEle)) {\n if (this.isServerRender()) {\n this.contentTargetValue = target;\n this.contentEvent = e;\n this.contentAnimation = showAnimation;\n var args = { 'enableTooltip': 'true' };\n // tslint:disable\n this.interopAdaptor.invokeMethodAsync('OnTooltipServerCall', args);\n // tslint:enable\n isBlazorTooltipRendered = true;\n }\n else {\n this.ctrlId = this.element.getAttribute('id') ?\n getUniqueID(this.element.getAttribute('id')) : getUniqueID('tooltip');\n this.tooltipEle = this.createElement('div', {\n className: TOOLTIP_WRAP + ' ' + POPUP_ROOT + ' ' + POPUP_LIB, attrs: {\n role: 'tooltip', 'aria-hidden': 'false', 'id': this.ctrlId + '_content'\n }, styles: 'width:' +\n formatUnit(this.width) + ';height:' + formatUnit(this.height) + ';position:absolute;'\n });\n this.beforeRenderBlazor(target, this);\n }\n if (!isBlazorTooltipRendered) {\n this.afterRenderBlazor(target, e, showAnimation, this);\n }\n }\n else {\n if (this.isServerRender()) {\n addClass([this.tooltipEle], POPUP_OPEN);\n document.body.appendChild(this.tooltipEle);\n this.renderCloseIcon();\n this.renderPopup(target);\n }\n if (target) {\n this.adjustArrow(target, this.position, this.tooltipPositionX, this.tooltipPositionY);\n this.addDescribedBy(target, this.ctrlId + '_content');\n this.renderContent(target);\n PopupAnimation.stop(this.tooltipEle);\n this.reposition(target);\n this.afterRenderBlazor(target, e, showAnimation, this);\n }\n }\n }\n };\n ;\n Tooltip.prototype.contentUpdated = function (args) {\n if (isNullOrUndefined(this.tooltipEle)) {\n if (this.isServerRender()) {\n this.ctrlId = this.element.id;\n this.tooltipEle = document.querySelector('#' + this.ctrlId + '_content');\n if (this.tooltipEle) {\n this.tooltipEle.setAttribute('style', 'width:' + formatUnit(this.width) +\n ';height:' + formatUnit(this.height) + ';position:absolute;');\n this.beforeRenderBlazor(this.contentTargetValue, this);\n this.afterRenderBlazor(this.contentTargetValue, this.contentEvent, this.contentAnimation, this);\n this.contentTargetValue = this.contentEvent = this.contentAnimation = null;\n }\n }\n }\n };\n ;\n Tooltip.prototype.beforeRenderBlazor = function (target, ctrlObj) {\n if (target) {\n if (Browser.isDevice) {\n addClass([ctrlObj.tooltipEle], DEVICE);\n }\n if (ctrlObj.width !== 'auto') {\n ctrlObj.tooltipEle.style.maxWidth = formatUnit(ctrlObj.width);\n }\n if (!(this.isServerRender())) {\n ctrlObj.tooltipEle.appendChild(ctrlObj.createElement('div', { className: CONTENT }));\n }\n document.body.appendChild(ctrlObj.tooltipEle);\n removeClass([ctrlObj.tooltipEle], HIDE_POPUP);\n ctrlObj.addDescribedBy(target, ctrlObj.ctrlId + '_content');\n ctrlObj.renderContent(target);\n addClass([ctrlObj.tooltipEle], POPUP_OPEN);\n if (ctrlObj.showTipPointer) {\n ctrlObj.renderArrow();\n }\n ctrlObj.renderCloseIcon();\n ctrlObj.renderPopup(target);\n ctrlObj.adjustArrow(target, ctrlObj.position, ctrlObj.tooltipPositionX, ctrlObj.tooltipPositionY);\n PopupAnimation.stop(ctrlObj.tooltipEle);\n ctrlObj.reposition(target);\n }\n };\n Tooltip.prototype.afterRenderBlazor = function (target, e, showAnimation, ctrlObj) {\n if (target) {\n removeClass([ctrlObj.tooltipEle], POPUP_OPEN);\n addClass([ctrlObj.tooltipEle], POPUP_CLOSE);\n ctrlObj.tooltipEventArgs = {\n type: e ? e.type : null, cancel: false, target: target, event: e ? e : null,\n element: ctrlObj.tooltipEle, isInteracted: !isNullOrUndefined(e)\n };\n if (ctrlObj.needTemplateReposition() && !ctrlObj.mouseTrail) {\n ctrlObj.tooltipEle.style.display = 'none';\n }\n var observeCallback = function (observedArgs) {\n ctrlObj.beforeOpenCallback(observedArgs, target, showAnimation, e);\n };\n ctrlObj.trigger('beforeOpen', ctrlObj.tooltipEventArgs, observeCallback.bind(ctrlObj));\n }\n };\n Tooltip.prototype.beforeOpenCallback = function (observedArgs, target, showAnimation, e) {\n var _this = this;\n if (observedArgs.cancel) {\n this.isHidden = true;\n this.clear();\n this.restoreElement(target);\n }\n else {\n var openAnimation_1 = {\n name: showAnimation.effect,\n duration: showAnimation.duration,\n delay: showAnimation.delay,\n timingFunction: 'easeOut'\n };\n if (showAnimation.effect === 'None') {\n openAnimation_1 = undefined;\n }\n if (this.openDelay > 0) {\n var show = function () {\n if (_this.mouseTrail) {\n EventHandler.add(target, 'mousemove touchstart mouseenter', _this.onMouseMove, _this);\n }\n if (_this.popupObj) {\n _this.popupObj.show(openAnimation_1, target);\n }\n };\n this.showTimer = setTimeout(show, this.openDelay);\n }\n else {\n if (this.popupObj) {\n this.popupObj.show(openAnimation_1, target);\n }\n }\n }\n if (e) {\n this.wireMouseEvents(e, target);\n }\n };\n Tooltip.prototype.needTemplateReposition = function () {\n // tslint:disable-next-line:no-any\n var tooltip = this;\n return !isNullOrUndefined(tooltip.viewContainerRef)\n && typeof tooltip.viewContainerRef !== 'string'\n || (this.isServerRender()) && this.isBlazorTemplate;\n };\n Tooltip.prototype.checkCollision = function (target, x, y) {\n var elePos = {\n left: x, top: y, position: this.position,\n horizontal: this.tooltipPositionX, vertical: this.tooltipPositionY\n };\n var affectedPos = isCollide(this.tooltipEle, this.checkCollideTarget(), x, y);\n if (affectedPos.length > 0) {\n elePos.horizontal = affectedPos.indexOf('left') >= 0 ? 'Right' : affectedPos.indexOf('right') >= 0 ? 'Left' :\n this.tooltipPositionX;\n elePos.vertical = affectedPos.indexOf('top') >= 0 ? 'Bottom' : affectedPos.indexOf('bottom') >= 0 ? 'Top' :\n this.tooltipPositionY;\n }\n return elePos;\n };\n Tooltip.prototype.collisionFlipFit = function (target, x, y) {\n var elePos = this.checkCollision(target, x, y);\n var newpos = elePos.position;\n if (this.tooltipPositionY !== elePos.vertical) {\n newpos = ((this.position.indexOf('Bottom') === 0 || this.position.indexOf('Top') === 0) ?\n elePos.vertical + this.tooltipPositionX : this.tooltipPositionX + elePos.vertical);\n }\n if (this.tooltipPositionX !== elePos.horizontal) {\n if (newpos.indexOf('Left') === 0) {\n elePos.vertical = (newpos === 'LeftTop' || newpos === 'LeftCenter') ? 'Top' : 'Bottom';\n newpos = (elePos.vertical + 'Left');\n }\n if (newpos.indexOf('Right') === 0) {\n elePos.vertical = (newpos === 'RightTop' || newpos === 'RightCenter') ? 'Top' : 'Bottom';\n newpos = (elePos.vertical + 'Right');\n }\n elePos.horizontal = this.tooltipPositionX;\n }\n this.tooltipEventArgs = {\n type: null, cancel: false, target: target, event: null,\n element: this.tooltipEle, collidedPosition: newpos\n };\n this.trigger('beforeCollision', this.tooltipEventArgs);\n if (elePos.position !== newpos) {\n var pos = calculatePosition(target, elePos.horizontal, elePos.vertical);\n this.adjustArrow(target, newpos, elePos.horizontal, elePos.vertical);\n var offsetPos = this.calculateTooltipOffset(newpos);\n offsetPos.top -= (('TopBottom'.indexOf(this.position.split(/(?=[A-Z])/)[0]) !== -1) &&\n ('TopBottom'.indexOf(newpos.split(/(?=[A-Z])/)[0]) !== -1)) ? (2 * this.offsetY) : 0;\n offsetPos.left -= (('RightLeft'.indexOf(this.position.split(/(?=[A-Z])/)[0]) !== -1) &&\n ('RightLeft'.indexOf(newpos.split(/(?=[A-Z])/)[0]) !== -1)) ? (2 * this.offsetX) : 0;\n elePos.position = newpos;\n elePos.left = pos.left + offsetPos.left;\n elePos.top = pos.top + offsetPos.top;\n }\n else {\n this.adjustArrow(target, newpos, elePos.horizontal, elePos.vertical);\n }\n var eleOffset = { left: elePos.left, top: elePos.top };\n var left = fit(this.tooltipEle, this.checkCollideTarget(), { X: true, Y: false }, eleOffset).left;\n this.tooltipEle.style.display = 'block';\n if (this.showTipPointer && (newpos.indexOf('Bottom') === 0 || newpos.indexOf('Top') === 0)) {\n var arrowEle = this.tooltipEle.querySelector('.' + ARROW_TIP);\n var arrowleft = parseInt(arrowEle.style.left, 10) - (left - elePos.left);\n if (arrowleft < 0) {\n arrowleft = 0;\n }\n else if ((arrowleft + arrowEle.offsetWidth) > this.tooltipEle.clientWidth) {\n arrowleft = this.tooltipEle.clientWidth - arrowEle.offsetWidth;\n }\n arrowEle.style.left = arrowleft.toString() + 'px';\n }\n this.tooltipEle.style.display = '';\n eleOffset.left = left;\n return eleOffset;\n };\n Tooltip.prototype.checkCollideTarget = function () {\n return !this.windowCollision && this.target ? this.element : null;\n };\n Tooltip.prototype.hideTooltip = function (hideAnimation, e, targetElement) {\n var _this = this;\n if (this.closeDelay > 0) {\n clearTimeout(this.hideTimer);\n clearTimeout(this.showTimer);\n var hide = function () {\n if (_this.closeDelay && _this.tooltipEle && _this.isTooltipOpen) {\n return;\n }\n _this.tooltipHide(hideAnimation, e, targetElement);\n };\n this.hideTimer = setTimeout(hide, this.closeDelay);\n }\n else {\n this.tooltipHide(hideAnimation, e, targetElement);\n }\n };\n Tooltip.prototype.tooltipHide = function (hideAnimation, e, targetElement) {\n var _this = this;\n var target;\n if (e) {\n target = this.target ? (targetElement || e.target) : this.element;\n }\n else {\n target = document.querySelector('[data-tooltip-id= ' + this.ctrlId + '_content]');\n }\n this.tooltipEventArgs = {\n type: e ? e.type : null, cancel: false, target: target, event: e ? e : null,\n element: this.tooltipEle, isInteracted: !isNullOrUndefined(e)\n };\n // this line commented for close the tooltip popup element even the target element destroyed in a page.\n //if (isNullOrUndefined(target)) { return; }\n this.trigger('beforeClose', this.tooltipEventArgs, function (observedArgs) {\n if (!observedArgs.cancel) {\n if (_this.isServerRender()) {\n _this.blazorHide(hideAnimation, target);\n }\n else {\n _this.popupHide(hideAnimation, target);\n }\n }\n else {\n _this.isHidden = false;\n }\n });\n };\n /* istanbul ignore next */\n Tooltip.prototype.blazorHide = function (hideAnimation, target) {\n var proxy = this;\n var hide = function () {\n proxy.popupHide(hideAnimation, target);\n };\n if (this.popupObj) {\n this.popupHide(hideAnimation, target);\n }\n else {\n setTimeout(hide, 200);\n }\n };\n Tooltip.prototype.popupHide = function (hideAnimation, target) {\n if (target) {\n this.restoreElement(target);\n }\n this.isHidden = true;\n var closeAnimation = {\n name: hideAnimation.effect,\n duration: hideAnimation.duration,\n delay: hideAnimation.delay,\n timingFunction: 'easeIn'\n };\n if (hideAnimation.effect === 'None') {\n closeAnimation = undefined;\n }\n if (this.popupObj) {\n this.popupObj.hide(closeAnimation);\n }\n };\n Tooltip.prototype.restoreElement = function (target) {\n this.unwireMouseEvents(target);\n if (!isNullOrUndefined(target.getAttribute('data-content'))) {\n target.setAttribute('title', target.getAttribute('data-content'));\n target.removeAttribute('data-content');\n }\n this.removeDescribedBy(target);\n };\n Tooltip.prototype.clear = function () {\n if (this.tooltipEle) {\n removeClass([this.tooltipEle], POPUP_CLOSE);\n addClass([this.tooltipEle], POPUP_OPEN);\n }\n if (this.isHidden) {\n if (this.popupObj) {\n this.popupObj.destroy();\n }\n if (this.isServerRender() && this.tooltipEle) {\n this.tooltipEle.style.display = 'none';\n var args = { 'enableTooltip': 'false' };\n // tslint:disable\n this.interopAdaptor.invokeMethodAsync('OnTooltipServerCall', args);\n // tslint:enable\n remove(this.tooltipEle);\n }\n else if (this.tooltipEle) {\n remove(this.tooltipEle);\n }\n this.tooltipEle = null;\n this.popupObj = null;\n }\n };\n Tooltip.prototype.tooltipHover = function (e) {\n if (this.tooltipEle) {\n this.isTooltipOpen = true;\n }\n };\n Tooltip.prototype.tooltipMouseOut = function (e) {\n this.isTooltipOpen = false;\n this.hideTooltip(this.animation.close, e, this.findTarget());\n };\n Tooltip.prototype.onMouseOut = function (e) {\n var enteredElement = e.relatedTarget;\n // don't close the tooltip only if it is tooltip content element\n if (enteredElement && !this.mouseTrail) {\n var checkForTooltipElement = closest(enteredElement, \".\" + TOOLTIP_WRAP + \".\" + POPUP_LIB + \".\" + POPUP_ROOT);\n if (checkForTooltipElement) {\n EventHandler.add(checkForTooltipElement, 'mouseleave', this.tooltipElementMouseOut, this);\n }\n else {\n this.hideTooltip(this.animation.close, e, this.findTarget());\n if (this.closeDelay === 0) {\n this.clear();\n }\n }\n }\n else {\n this.hideTooltip(this.animation.close, e, this.findTarget());\n this.clear();\n }\n };\n Tooltip.prototype.tooltipElementMouseOut = function (e) {\n this.hideTooltip(this.animation.close, e, this.findTarget());\n EventHandler.remove(this.element, 'mouseleave', this.tooltipElementMouseOut);\n this.clear();\n };\n Tooltip.prototype.onStickyClose = function (e) {\n this.close();\n };\n Tooltip.prototype.onMouseMove = function (event) {\n var eventPageX = 0;\n var eventPageY = 0;\n if (event.type.indexOf('touch') > -1) {\n event.preventDefault();\n eventPageX = event.touches[0].pageX;\n eventPageY = event.touches[0].pageY;\n }\n else {\n eventPageX = event.pageX;\n eventPageY = event.pageY;\n }\n PopupAnimation.stop(this.tooltipEle);\n removeClass([this.tooltipEle], POPUP_CLOSE);\n addClass([this.tooltipEle], POPUP_OPEN);\n this.adjustArrow(event.target, this.position, this.tooltipPositionX, this.tooltipPositionY);\n var pos = this.calculateTooltipOffset(this.position);\n var x = eventPageX + pos.left + this.offsetX;\n var y = eventPageY + pos.top + this.offsetY;\n var elePos = this.checkCollision(event.target, x, y);\n if (this.tooltipPositionX !== elePos.horizontal || this.tooltipPositionY !== elePos.vertical) {\n var newpos = (this.position.indexOf('Bottom') === 0 || this.position.indexOf('Top') === 0) ?\n elePos.vertical + elePos.horizontal : elePos.horizontal + elePos.vertical;\n elePos.position = newpos;\n this.adjustArrow(event.target, elePos.position, elePos.horizontal, elePos.vertical);\n var colpos = this.calculateTooltipOffset(elePos.position);\n elePos.left = eventPageX + colpos.left - this.offsetX;\n elePos.top = eventPageY + colpos.top - this.offsetY;\n }\n this.tooltipEle.style.left = elePos.left + 'px';\n this.tooltipEle.style.top = elePos.top + 'px';\n };\n Tooltip.prototype.keyDown = function (event) {\n if (this.tooltipEle && event.keyCode === 27) {\n this.close();\n }\n };\n Tooltip.prototype.touchEnd = function (e) {\n if (this.tooltipEle && closest(e.target, '.' + ROOT) === null && !this.isSticky) {\n this.close();\n }\n };\n Tooltip.prototype.scrollHandler = function (e) {\n if (this.tooltipEle) {\n if (!(closest(e.target, \".\" + TOOLTIP_WRAP + \".\" + POPUP_LIB + \".\" + POPUP_ROOT))) {\n this.close();\n }\n }\n };\n /**\n * Core method that initializes the control rendering.\n * @private\n */\n Tooltip.prototype.render = function () {\n this.initialize();\n this.wireEvents(this.opensOn);\n this.renderComplete();\n };\n /**\n * Initializes the values of private members.\n * @private\n */\n Tooltip.prototype.preRender = function () {\n this.tipClass = TIP_BOTTOM;\n this.tooltipPositionX = 'Center';\n this.tooltipPositionY = 'Top';\n this.isHidden = true;\n };\n /**\n * Binding events to the Tooltip element.\n * @hidden\n */\n Tooltip.prototype.wireEvents = function (trigger) {\n var triggerList = this.getTriggerList(trigger);\n for (var _i = 0, triggerList_1 = triggerList; _i < triggerList_1.length; _i++) {\n var opensOn = triggerList_1[_i];\n if (opensOn === 'Custom') {\n return;\n }\n if (opensOn === 'Focus') {\n this.wireFocusEvents();\n }\n if (opensOn === 'Click') {\n EventHandler.add(this.element, Browser.touchStartEvent, this.targetClick, this);\n }\n if (opensOn === 'Hover') {\n if (Browser.isDevice) {\n this.touchModule = new Touch(this.element, {\n tapHoldThreshold: TAPHOLD_THRESHOLD,\n tapHold: this.tapHoldHandler.bind(this)\n });\n EventHandler.add(this.element, Browser.touchEndEvent, this.touchEndHandler, this);\n }\n else {\n EventHandler.add(this.element, 'mouseover', this.targetHover, this);\n if (this.isServerRender() && !this.isSticky) {\n EventHandler.add(this.element, 'mouseleave', this.onMouseOut, this);\n }\n }\n }\n }\n EventHandler.add(document, 'touchend', this.touchEnd, this);\n EventHandler.add(document, 'scroll wheel', this.scrollHandler, this);\n EventHandler.add(document, 'keydown', this.keyDown, this);\n };\n Tooltip.prototype.getTriggerList = function (trigger) {\n if (trigger === 'Auto') {\n trigger = (Browser.isDevice) ? 'Hover' : 'Hover Focus';\n }\n return trigger.split(' ');\n };\n Tooltip.prototype.wireFocusEvents = function () {\n if (!isNullOrUndefined(this.target)) {\n var targetList = [].slice.call(this.element.querySelectorAll(this.target));\n for (var _i = 0, targetList_2 = targetList; _i < targetList_2.length; _i++) {\n var target = targetList_2[_i];\n EventHandler.add(target, 'focus', this.targetHover, this);\n }\n }\n else {\n EventHandler.add(this.element, 'focus', this.targetHover, this);\n }\n };\n Tooltip.prototype.wireMouseEvents = function (e, target) {\n if (this.tooltipEle) {\n if (!this.isSticky) {\n if (e.type === 'focus') {\n EventHandler.add(target, 'blur', this.onMouseOut, this);\n }\n if (e.type === 'mouseover') {\n if (!this.isServerRender()) {\n EventHandler.add(target, 'mouseleave', this.onMouseOut, this);\n }\n }\n if (this.closeDelay) {\n EventHandler.add(this.tooltipEle, 'mouseenter', this.tooltipHover, this);\n EventHandler.add(this.tooltipEle, 'mouseleave', this.tooltipMouseOut, this);\n }\n }\n if (this.mouseTrail && this.openDelay === 0) {\n EventHandler.add(target, 'mousemove touchstart mouseenter', this.onMouseMove, this);\n }\n }\n };\n /**\n * Unbinding events from the element on widget destroy.\n * @hidden\n */\n Tooltip.prototype.unwireEvents = function (trigger) {\n var triggerList = this.getTriggerList(trigger);\n for (var _i = 0, triggerList_2 = triggerList; _i < triggerList_2.length; _i++) {\n var opensOn = triggerList_2[_i];\n if (opensOn === 'Custom') {\n return;\n }\n if (opensOn === 'Focus') {\n this.unwireFocusEvents();\n }\n if (opensOn === 'Click') {\n EventHandler.remove(this.element, Browser.touchStartEvent, this.targetClick);\n }\n if (opensOn === 'Hover') {\n if (Browser.isDevice) {\n if (this.touchModule) {\n this.touchModule.destroy();\n }\n EventHandler.remove(this.element, Browser.touchEndEvent, this.touchEndHandler);\n }\n else {\n EventHandler.remove(this.element, 'mouseover', this.targetHover);\n if (this.isServerRender() && !this.isSticky) {\n EventHandler.remove(this.element, 'mouseleave', this.onMouseOut);\n }\n }\n }\n }\n EventHandler.remove(document, 'touchend', this.touchEnd);\n EventHandler.remove(document, 'scroll wheel', this.scrollHandler);\n EventHandler.remove(document, 'keydown', this.keyDown);\n };\n Tooltip.prototype.unwireFocusEvents = function () {\n if (!isNullOrUndefined(this.target)) {\n var targetList = [].slice.call(this.element.querySelectorAll(this.target));\n for (var _i = 0, targetList_3 = targetList; _i < targetList_3.length; _i++) {\n var target = targetList_3[_i];\n EventHandler.remove(target, 'focus', this.targetHover);\n }\n }\n else {\n EventHandler.remove(this.element, 'focus', this.targetHover);\n }\n };\n Tooltip.prototype.unwireMouseEvents = function (target) {\n if (!this.isSticky) {\n var triggerList = this.getTriggerList(this.opensOn);\n for (var _i = 0, triggerList_3 = triggerList; _i < triggerList_3.length; _i++) {\n var opensOn = triggerList_3[_i];\n if (opensOn === 'Focus') {\n EventHandler.remove(target, 'blur', this.onMouseOut);\n }\n if (opensOn === 'Hover' && !Browser.isDevice) {\n if (!this.isServerRender()) {\n EventHandler.remove(target, 'mouseleave', this.onMouseOut);\n }\n }\n }\n if (this.closeDelay) {\n EventHandler.remove(target, 'mouseenter', this.tooltipHover);\n EventHandler.remove(target, 'mouseleave', this.tooltipMouseOut);\n }\n }\n if (this.mouseTrail) {\n EventHandler.remove(target, 'mousemove touchstart mouseenter', this.onMouseMove);\n }\n };\n Tooltip.prototype.findTarget = function () {\n var target = document.querySelector('[data-tooltip-id= ' + this.ctrlId + '_content]');\n return target;\n };\n /**\n * Core method to return the component name.\n * @private\n */\n Tooltip.prototype.getModuleName = function () {\n return 'tooltip';\n };\n /**\n * Returns the properties to be maintained in the persisted state.\n * @private\n */\n Tooltip.prototype.getPersistData = function () {\n return this.addOnPersist([]);\n };\n /**\n * Called internally, if any of the property value changed.\n * @private\n */\n Tooltip.prototype.onPropertyChanged = function (newProp, oldProp) {\n var targetElement = this.findTarget();\n for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {\n var prop = _a[_i];\n switch (prop) {\n case 'width':\n if (this.tooltipEle && targetElement) {\n this.tooltipEle.style.width = this.tooltipEle.style.maxWidth = formatUnit(newProp.width);\n this.reposition(targetElement);\n }\n break;\n case 'height':\n if (this.tooltipEle && targetElement) {\n this.tooltipEle.style.height = formatUnit(newProp.height);\n this.reposition(targetElement);\n }\n break;\n case 'content':\n if (this.tooltipEle) {\n if (this.isServerRender()) {\n this.isBlazorTooltip = true;\n }\n this.renderContent();\n }\n else if (this.isServerRender()) {\n var args = { 'content': newProp.content };\n // tslint:disable\n this.interopAdaptor.invokeMethodAsync('OnTooltipServerCall', args);\n // tslint:enable\n }\n break;\n case 'opensOn':\n this.unwireEvents(oldProp.opensOn);\n this.wireEvents(newProp.opensOn);\n break;\n case 'position':\n this.formatPosition();\n if (this.tooltipEle && targetElement) {\n var arrowInnerELe = this.tooltipEle.querySelector('.' + ARROW_TIP_INNER);\n arrowInnerELe.style.top = arrowInnerELe.style.left = null;\n this.reposition(targetElement);\n }\n break;\n case 'tipPointerPosition':\n if (this.tooltipEle && targetElement) {\n this.reposition(targetElement);\n }\n break;\n case 'offsetX':\n if (this.tooltipEle) {\n var x = newProp.offsetX - oldProp.offsetX;\n this.tooltipEle.style.left = (parseInt(this.tooltipEle.style.left, 10) + (x)).toString() + 'px';\n }\n break;\n case 'offsetY':\n if (this.tooltipEle) {\n var y = newProp.offsetY - oldProp.offsetY;\n this.tooltipEle.style.top = (parseInt(this.tooltipEle.style.top, 10) + (y)).toString() + 'px';\n }\n break;\n case 'cssClass':\n if (this.tooltipEle) {\n if (oldProp.cssClass) {\n removeClass([this.tooltipEle], oldProp.cssClass.split(' '));\n }\n if (newProp.cssClass) {\n addClass([this.tooltipEle], newProp.cssClass.split(' '));\n }\n }\n break;\n case 'enableRtl':\n if (this.tooltipEle) {\n if (this.enableRtl) {\n addClass([this.tooltipEle], RTL);\n }\n else {\n removeClass([this.tooltipEle], RTL);\n }\n }\n break;\n }\n }\n };\n /**\n * It is used to show the Tooltip on the specified target with specific animation settings.\n * @param element Target element where the Tooltip is to be displayed. (It is an optional parameter)\n * @param animation Sets the specific animation, while showing the Tooltip on the screen. (It is an optional parameter)\n * @return {void}\n */\n Tooltip.prototype.open = function (element, animation) {\n if (isNullOrUndefined(animation)) {\n animation = this.animation.open;\n }\n if (isNullOrUndefined(element)) {\n element = this.element;\n }\n if (element.style.display === 'none') {\n return;\n }\n this.showTooltip(element, animation);\n };\n /**\n * It is used to hide the Tooltip with specific animation effect.\n * @param animation Sets the specific animation when hiding Tooltip from the screen. (It is an optional parameter)\n * @return {void}\n */\n Tooltip.prototype.close = function (animation) {\n if (!animation) {\n animation = this.animation.close;\n }\n this.hideTooltip(animation);\n };\n /**\n * It is used to refresh the Tooltip content and its position.\n * @param target Target element where the Tooltip content or position needs to be refreshed.\n * @return {void}\n */\n Tooltip.prototype.refresh = function (target) {\n if (this.tooltipEle) {\n this.renderContent(target);\n }\n if (this.popupObj && target) {\n this.reposition(target);\n }\n };\n /**\n * It is used to destroy the Tooltip component.\n * @method destroy\n * @return {void}\n * @memberof Tooltip\n */\n Tooltip.prototype.destroy = function () {\n if (!this.isServerRender()) {\n _super.prototype.destroy.call(this);\n if (this.tooltipEle) {\n remove(this.tooltipEle);\n }\n }\n if (this.isServerRender() && this.tooltipEle) {\n var placeholder = document.querySelector('#' + this.ctrlId + '_content_placeholder');\n if (placeholder) {\n placeholder.appendChild(this.tooltipEle);\n }\n }\n if (this.popupObj) {\n this.popupObj.destroy();\n }\n removeClass([this.element], ROOT);\n this.unwireEvents(this.opensOn);\n this.unwireMouseEvents(this.element);\n this.tooltipEle = null;\n this.popupObj = null;\n };\n __decorate([\n Property('auto')\n ], Tooltip.prototype, \"width\", void 0);\n __decorate([\n Property('auto')\n ], Tooltip.prototype, \"height\", void 0);\n __decorate([\n Property()\n ], Tooltip.prototype, \"content\", void 0);\n __decorate([\n Property()\n ], Tooltip.prototype, \"target\", void 0);\n __decorate([\n Property('TopCenter')\n ], Tooltip.prototype, \"position\", void 0);\n __decorate([\n Property(0)\n ], Tooltip.prototype, \"offsetX\", void 0);\n __decorate([\n Property(0)\n ], Tooltip.prototype, \"offsetY\", void 0);\n __decorate([\n Property(true)\n ], Tooltip.prototype, \"showTipPointer\", void 0);\n __decorate([\n Property(true)\n ], Tooltip.prototype, \"enableHtmlParse\", void 0);\n __decorate([\n Property(false)\n ], Tooltip.prototype, \"windowCollision\", void 0);\n __decorate([\n Property('Auto')\n ], Tooltip.prototype, \"tipPointerPosition\", void 0);\n __decorate([\n Property('Auto')\n ], Tooltip.prototype, \"opensOn\", void 0);\n __decorate([\n Property(false)\n ], Tooltip.prototype, \"mouseTrail\", void 0);\n __decorate([\n Property(false)\n ], Tooltip.prototype, \"isSticky\", void 0);\n __decorate([\n Complex({}, Animation)\n ], Tooltip.prototype, \"animation\", void 0);\n __decorate([\n Property(0)\n ], Tooltip.prototype, \"openDelay\", void 0);\n __decorate([\n Property(0)\n ], Tooltip.prototype, \"closeDelay\", void 0);\n __decorate([\n Property()\n ], Tooltip.prototype, \"cssClass\", void 0);\n __decorate([\n Property(false)\n ], Tooltip.prototype, \"enableHtmlSanitizer\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"beforeRender\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"beforeOpen\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"afterOpen\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"beforeClose\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"afterClose\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"beforeCollision\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"created\", void 0);\n __decorate([\n Event()\n ], Tooltip.prototype, \"destroyed\", void 0);\n Tooltip = __decorate([\n NotifyPropertyChanges\n ], Tooltip);\n return Tooltip;\n}(Component));\nexport { Tooltip };\n","import { isNullOrUndefined, extend } from '@syncfusion/ej2-base';\nimport { setStyleAttribute, closest as getClosest, remove, isBlazor } from '@syncfusion/ej2-base';\nimport { classList } from '@syncfusion/ej2-base';\nimport { CellType } from '../base/enum';\nimport { RowRenderer } from './row-renderer';\nimport { Cell } from '../models/cell';\nimport { Row } from '../models/row';\nimport * as events from '../base/constant';\nimport { Draggable, Droppable } from '@syncfusion/ej2-base';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { parentsUntil, wrap, measureColumnDepth, appendChildren } from '../base/util';\n/**\n * Content module is used to render grid content\n * @hidden\n */\nvar HeaderRender = /** @class */ (function () {\n /**\n * Constructor for header renderer module\n */\n function HeaderRender(parent, serviceLocator) {\n var _this = this;\n this.frzIdx = 0;\n this.notfrzIdx = 0;\n this.isFirstCol = false;\n this.isReplaceDragEle = true;\n this.helper = function (e) {\n var gObj = _this.parent;\n var target = _this.draggable.currentStateTarget;\n var parentEle = parentsUntil(target, 'e-headercell');\n if (!(gObj.allowReordering || gObj.allowGrouping) || (!isNullOrUndefined(parentEle)\n && parentEle.querySelectorAll('.e-checkselectall').length > 0)) {\n return false;\n }\n var visualElement = _this.parent.createElement('div', { className: 'e-cloneproperties e-dragclone e-headerclone' });\n var element = target.classList.contains('e-headercell') ? target : parentEle;\n if (!element || (!gObj.allowReordering && element.classList.contains('e-stackedheadercell'))) {\n return false;\n }\n var height = element.offsetHeight;\n var headercelldiv = element.querySelector('.e-headercelldiv') || element.querySelector('.e-stackedheadercelldiv');\n var col;\n if (headercelldiv) {\n if (element.querySelector('.e-stackedheadercelldiv')) {\n col = gObj.getStackedHeaderColumnByHeaderText(headercelldiv.innerText.trim(), gObj.columns);\n }\n else {\n col = gObj.getColumnByUid(headercelldiv.getAttribute('e-mappinguid'));\n }\n _this.column = col;\n if (_this.column.lockColumn) {\n return false;\n }\n visualElement.setAttribute('e-mappinguid', _this.column.uid);\n }\n if (col && !isNullOrUndefined(col.headerTemplate)) {\n if (!isNullOrUndefined(col.headerTemplate)) {\n var result = void 0;\n var colIndex = gObj.getColumnIndexByField(col.field);\n result = col.getHeaderTemplate()(extend({ 'index': colIndex }, col), gObj, 'headerTemplate');\n appendChildren(visualElement, result);\n }\n else {\n visualElement.innerHTML = col.headerTemplate;\n }\n }\n else {\n visualElement.innerHTML = headercelldiv ?\n col.headerText : element.firstElementChild.innerHTML;\n }\n visualElement.style.width = element.offsetWidth + 'px';\n visualElement.style.height = element.offsetHeight + 'px';\n visualElement.style.lineHeight = (height - 6).toString() + 'px';\n gObj.element.appendChild(visualElement);\n return visualElement;\n };\n this.dragStart = function (e) {\n var gObj = _this.parent;\n gObj.element.querySelector('.e-gridpopup').style.display = 'none';\n gObj.notify(events.columnDragStart, { target: _this.draggable.currentStateTarget, column: _this.column, event: e.event });\n if (isBlazor()) {\n e.bindEvents(e.dragElement);\n }\n };\n this.drag = function (e) {\n var gObj = _this.parent;\n var target = e.target;\n if (target) {\n var closest = getClosest(target, '.e-grid');\n var cloneElement = _this.parent.element.querySelector('.e-cloneproperties');\n if (!closest || closest.getAttribute('id') !== gObj.element.getAttribute('id')) {\n classList(cloneElement, ['e-notallowedcur'], ['e-defaultcur']);\n if (gObj.allowReordering) {\n gObj.element.querySelector('.e-reorderuparrow').style.display = 'none';\n gObj.element.querySelector('.e-reorderdownarrow').style.display = 'none';\n }\n if (!gObj.groupSettings.allowReordering) {\n return;\n }\n }\n gObj.notify(events.columnDrag, { target: e.target, column: _this.column, event: e.event });\n }\n };\n this.dragStop = function (e) {\n var gObj = _this.parent;\n var cancel;\n gObj.element.querySelector('.e-gridpopup').style.display = 'none';\n if ((!parentsUntil(e.target, 'e-headercell') && !parentsUntil(e.target, 'e-groupdroparea')) ||\n (!gObj.allowReordering && parentsUntil(e.target, 'e-headercell')) ||\n (!e.helper.getAttribute('e-mappinguid') && parentsUntil(e.target, 'e-groupdroparea'))) {\n remove(e.helper);\n cancel = true;\n }\n gObj.notify(events.columnDragStop, { target: e.target, event: e.event, column: _this.column, cancel: cancel });\n };\n this.drop = function (e) {\n var gObj = _this.parent;\n var uid = e.droppedElement.getAttribute('e-mappinguid');\n var closest = getClosest(e.target, '.e-grid');\n remove(e.droppedElement);\n if (closest && closest.getAttribute('id') !== gObj.element.getAttribute('id') ||\n !(gObj.allowReordering || gObj.allowGrouping)) {\n return;\n }\n gObj.notify(events.headerDrop, { target: e.target, uid: uid, droppedElement: e.droppedElement });\n };\n this.parent = parent;\n this.serviceLocator = serviceLocator;\n this.ariaService = this.serviceLocator.getService('ariaService');\n this.widthService = this.serviceLocator.getService('widthService');\n if (this.parent.isDestroyed) {\n return;\n }\n if (!this.parent.enableColumnVirtualization\n && !this.parent.getFrozenLeftColumnsCount() && !this.parent.getFrozenRightColumnsCount()) {\n this.parent.on(events.columnVisibilityChanged, this.setVisible, this);\n }\n this.parent.on(events.columnPositionChanged, this.colPosRefresh, this);\n this.parent.on(events.initialEnd, this.renderCustomToolbar, this);\n if (this.parent.rowRenderingMode === 'Vertical') {\n this.parent.on(events.uiUpdate, this.updateCustomResponsiveToolbar, this);\n }\n }\n /**\n * The function is used to render grid header div\n */\n HeaderRender.prototype.renderPanel = function () {\n var div = this.parent.element.querySelector('.e-gridheader');\n var isRendered = (div != null);\n div = isRendered ? div : this.parent.createElement('div', { className: 'e-gridheader' });\n var innerDiv = isRendered ? div.querySelector('.e-headercontent') :\n this.parent.createElement('div', { className: 'e-headercontent' });\n this.toggleStackClass(div);\n div.appendChild(innerDiv);\n this.setPanel(div);\n if (!isRendered) {\n this.parent.element.appendChild(div);\n }\n };\n /**\n * The function is used to render grid header table\n */\n HeaderRender.prototype.renderTable = function () {\n var headerDiv = this.getPanel();\n headerDiv.appendChild(this.createHeaderTable());\n this.setTable(headerDiv.querySelector('.e-table'));\n if (!this.parent.getFrozenColumns() && !this.parent.getFrozenRightColumnsCount() && !this.parent.getFrozenLeftColumnsCount()) {\n this.initializeHeaderDrag();\n this.initializeHeaderDrop();\n }\n this.parent.notify(events.headerRefreshed, { rows: this.rows, args: { isFrozen: this.parent.isFrozenGrid() } });\n };\n /**\n * Get the header content div element of grid\n * @return {Element}\n */\n HeaderRender.prototype.getPanel = function () {\n return this.headerPanel;\n };\n /**\n * Set the header content div element of grid\n * @param {Element} panel\n */\n HeaderRender.prototype.setPanel = function (panel) {\n this.headerPanel = panel;\n };\n /**\n * Get the header table element of grid\n * @return {Element}\n */\n HeaderRender.prototype.getTable = function () {\n return this.headerTable;\n };\n /**\n * Set the header table element of grid\n * @param {Element} table\n */\n HeaderRender.prototype.setTable = function (table) {\n this.headerTable = table;\n };\n /**\n * Get the header colgroup element\n * @returns {Element}\n */\n HeaderRender.prototype.getColGroup = function () {\n return this.colgroup;\n };\n /**\n * Set the header colgroup element\n * @param {Element} colgroup\n * @returns {Element}\n */\n HeaderRender.prototype.setColGroup = function (colGroup) {\n return this.colgroup = colGroup;\n };\n /**\n * Get the header row element collection.\n * @return {Element[]}\n */\n HeaderRender.prototype.getRows = function () {\n var table = this.getTable();\n return table.tHead.rows;\n };\n /**\n * The function is used to create header table elements\n * @return {Element}\n * @hidden\n */\n HeaderRender.prototype.createHeaderTable = function () {\n var skipDom = isBlazor() && this.parent.frozenRows !== 0;\n var table = this.createTable();\n var innerDiv = this.getPanel().querySelector('.e-headercontent');\n if (!skipDom) {\n innerDiv.appendChild(table);\n }\n return innerDiv;\n };\n /**\n * @hidden\n */\n HeaderRender.prototype.createHeader = function (tableEle, tableName) {\n if (tableEle === void 0) { tableEle = null; }\n var skipDom = isBlazor() && this.parent.frozenRows !== 0;\n var gObj = this.parent;\n var isFrozen = gObj.isFrozenGrid();\n if (!(isBlazor() && !gObj.isJsComponent) && this.getTable() && !isFrozen) {\n remove(this.getTable());\n }\n var columns = gObj.getColumns();\n var innerDiv = this.getPanel().querySelector('.e-headercontent');\n var table = skipDom ? tableEle || innerDiv.querySelector('.e-table') :\n this.parent.createElement('table', { className: 'e-table', attrs: { cellspacing: '0.25px', role: 'grid' } });\n var tblName = tableName ? tableName : gObj.getFrozenLeftCount() ? 'frozen-left' : 'frozen-right';\n var findHeaderRow = this.createHeaderContent(tblName);\n var thead = findHeaderRow.thead;\n var tbody = this.parent.createElement('tbody', { className: this.parent.frozenRows ? '' : 'e-hide' });\n this.caption = this.parent.createElement('caption', { innerHTML: this.parent.element.id + '_header_table', className: 'e-hide' });\n var colGroup = this.parent.createElement('colgroup');\n var rowBody = this.parent.createElement('tr');\n var bodyCell;\n var rows = this.rows = findHeaderRow.rows;\n var rowRenderer = new RowRenderer(this.serviceLocator, CellType.Header, this.parent);\n for (var i = 0, len = rows.length; i < len; i++) {\n for (var j = 0, len_1 = rows[i].cells.length; j < len_1; j++) {\n var cell = rows[i].cells[j];\n bodyCell = this.parent.createElement('td');\n rowBody.appendChild(bodyCell);\n }\n }\n if (gObj.allowFiltering || gObj.allowSorting || gObj.allowGrouping) {\n table.classList.add('e-sortfilter');\n }\n this.updateColGroup(colGroup);\n if (!skipDom) {\n tbody.appendChild(rowBody);\n }\n table.appendChild(this.setColGroup(colGroup));\n table.appendChild(thead);\n if (!skipDom) {\n table.appendChild(tbody);\n }\n table.appendChild(this.caption);\n this.ariaService.setOptions(table, { colcount: gObj.getColumns().length.toString() });\n return table;\n };\n /**\n * @hidden\n */\n HeaderRender.prototype.createTable = function (tableEle) {\n if (tableEle === void 0) { tableEle = null; }\n return this.createHeader(tableEle);\n };\n HeaderRender.prototype.createHeaderContent = function (tableName) {\n var gObj = this.parent;\n var index = 1;\n var frozenMode = gObj.getFrozenMode();\n var columns = gObj.getColumns();\n var thead = this.parent.createElement('thead');\n var colHeader = this.parent.createElement('tr', { className: 'e-columnheader' });\n var rowRenderer = new RowRenderer(this.serviceLocator, CellType.Header, gObj);\n rowRenderer.element = colHeader;\n var rows = [];\n var headerRow;\n this.colDepth = measureColumnDepth(gObj.columns);\n for (var i = 0, len = this.colDepth; i < len; i++) {\n rows[i] = this.generateRow(i);\n rows[i].cells = [];\n }\n if (frozenMode !== 'Right') {\n rows = this.ensureColumns(rows);\n }\n rows = this.getHeaderCells(rows, tableName);\n if (frozenMode === 'Right') {\n index = 0;\n rows = this.ensureColumns(rows);\n }\n var frzCols = this.parent.getFrozenColumns();\n if (this.parent.isRowDragable() && this.parent.isFrozenGrid() && rows[0].cells[index]) {\n var colFreezeMode = rows[0].cells[index].column.getFreezeTableName();\n if (colFreezeMode === 'movable' || (frozenMode === 'Left-Right' && colFreezeMode === 'frozen-right')) {\n if (frozenMode === 'Right') {\n rows[0].cells.pop();\n }\n else {\n rows[0].cells.shift();\n }\n }\n else if (!frzCols && colFreezeMode === 'frozen-left') {\n rows[0].cells[0].column.freeze = colFreezeMode === 'frozen-left' ? 'Left' : 'Right';\n }\n else if (frozenMode === 'Right' && colFreezeMode === 'frozen-right') {\n rows[0].cells[rows[0].cells.length - 1].column.freeze = 'Right';\n }\n }\n for (var i = 0, len = this.colDepth; i < len; i++) {\n headerRow = rowRenderer.render(rows[i], columns);\n if (this.parent.rowHeight && headerRow.querySelector('.e-headercell')) {\n headerRow.style.height = this.parent.rowHeight + 'px';\n }\n thead.appendChild(headerRow);\n }\n var findHeaderRow = {\n thead: thead,\n rows: rows\n };\n return findHeaderRow;\n };\n HeaderRender.prototype.updateColGroup = function (colGroup) {\n var cols = this.parent.getColumns();\n var col;\n var indexes = this.parent.getColumnIndexesInView();\n if (this.parent.enableColumnVirtualization && this.parent.getFrozenColumns()\n && this.parent.contentModule.isXaxis()) {\n cols = extend([], this.parent.getColumns());\n cols.splice(0, this.parent.getFrozenColumns());\n }\n colGroup.id = this.parent.element.id + 'colGroup';\n if (this.parent.allowGrouping) {\n for (var i = 0, len = this.parent.groupSettings.columns.length; i < len; i++) {\n if (this.parent.enableColumnVirtualization && indexes.indexOf(i) === -1) {\n continue;\n }\n col = this.parent.createElement('col', { className: 'e-group-intent' });\n colGroup.appendChild(col);\n }\n }\n if (this.parent.detailTemplate || this.parent.childGrid) {\n col = this.parent.createElement('col', { className: 'e-detail-intent' });\n colGroup.appendChild(col);\n }\n if (this.parent.isRowDragable() && this.parent.getFrozenMode() !== 'Right') {\n col = this.parent.createElement('col', { className: 'e-drag-intent' });\n colGroup.appendChild(col);\n }\n for (var i = 0, len = cols.length; i < len; i++) {\n col = this.parent.createElement('col');\n if (cols[i].visible === false) {\n setStyleAttribute(col, { 'display': 'none' });\n }\n colGroup.appendChild(col);\n }\n if (this.parent.isRowDragable() && this.parent.getFrozenMode() === 'Right') {\n col = this.parent.createElement('col', { className: 'e-drag-intent' });\n colGroup.appendChild(col);\n }\n return colGroup;\n };\n HeaderRender.prototype.ensureColumns = function (rows) {\n //TODO: generate dummy column for group, detail, stacked row here; ensureColumns here\n var gObj = this.parent;\n var indexes = this.parent.getColumnIndexesInView();\n for (var i = 0, len = rows.length; i < len; i++) {\n if (gObj.allowGrouping) {\n for (var c = 0, len_2 = gObj.groupSettings.columns.length; c < len_2; c++) {\n if (this.parent.enableColumnVirtualization && indexes.indexOf(c) === -1) {\n continue;\n }\n rows[i].cells.push(this.generateCell({}, CellType.HeaderIndent));\n }\n }\n if (gObj.detailTemplate || gObj.childGrid) {\n var args = {};\n this.parent.notify(events.detailIndentCellInfo, args);\n rows[i].cells.push(this.generateCell(args, CellType.DetailHeader));\n }\n if (gObj.isRowDragable()) {\n rows[i].cells.push(this.generateCell({}, CellType.RowDragHIcon));\n }\n }\n return rows;\n };\n HeaderRender.prototype.getHeaderCells = function (rows, tableName) {\n var column;\n var thead = this.parent.getHeaderTable() && this.parent.getHeaderTable().querySelector('thead');\n var cols = this.parent.enableColumnVirtualization ?\n this.parent.getColumns(this.parent.enablePersistence) : this.parent.columns;\n this.frzIdx = 0;\n this.notfrzIdx = 0;\n if (this.parent.lockcolPositionCount) {\n for (var i = 0; i < cols.length; i++) {\n this.lockColsRendered = false;\n rows = this.appendCells(cols[i], rows, 0, i === 0, false, i === (cols.length - 1), thead, tableName);\n }\n }\n for (var i = 0, len = cols.length; i < len; i++) {\n this.notfrzIdx = 0;\n this.lockColsRendered = true;\n rows = this.appendCells(cols[i], rows, 0, i === 0, false, i === (len - 1), thead, tableName);\n }\n return rows;\n };\n HeaderRender.prototype.appendCells = function (cols, rows, index, isFirstObj, isFirstCol, isLastCol, isMovable, tableName) {\n var lastCol = isLastCol ? 'e-lastcell' : '';\n var isFrozen = this.parent.isFrozenGrid();\n var isLockColumn = !this.parent.lockcolPositionCount\n || (cols.lockColumn && !this.lockColsRendered) || (!cols.lockColumn && this.lockColsRendered);\n var isFrozenLockColumn = !this.parent.lockcolPositionCount || (cols.lockColumn && !this.lockColsRendered)\n || (!cols.lockColumn && this.lockColsRendered);\n var scrollbar = this.parent.getContent().querySelector('.e-movablescrollbar');\n var left;\n if (isFrozen && scrollbar && this.parent.enableColumnVirtualization) {\n left = scrollbar.scrollLeft;\n }\n if (!cols.columns) {\n if (left && left > 0 && this.parent.contentModule.isXaxis()\n && this.parent.inViewIndexes[0] !== 0 && cols.getFreezeTableName() === 'movable') {\n rows[index].cells.push(this.generateCell(cols, CellType.Header, this.colDepth - index, (isFirstObj ? '' : (isFirstCol ? 'e-firstcell' : '')) + lastCol, index, this.parent.getColumnIndexByUid(cols.uid)));\n }\n else {\n if ((!isFrozen && isLockColumn) || (isFrozen && cols.getFreezeTableName() === tableName && isFrozenLockColumn)) {\n rows[index].cells.push(this.generateCell(cols, CellType.Header, this.colDepth - index, (isFirstObj ? '' : (isFirstCol ? 'e-firstcell' : '')) + lastCol, index, this.parent.getColumnIndexByUid(cols.uid)));\n }\n }\n if (this.parent.lockcolPositionCount) {\n if ((this.frzIdx + this.notfrzIdx < this.parent.frozenColumns) &&\n ((cols.lockColumn && !this.lockColsRendered) || (!cols.lockColumn && this.lockColsRendered))) {\n this.frzIdx++;\n }\n else {\n this.notfrzIdx++;\n }\n }\n else {\n this.frzIdx++;\n }\n }\n else {\n this.isFirstCol = false;\n var colSpan = this.getCellCnt(cols, 0);\n if (colSpan) {\n var stackedLockColsCount = this.getStackedLockColsCount(cols, 0);\n var isStackedLockColumn = this.parent.lockcolPositionCount === 0\n || (!this.lockColsRendered && stackedLockColsCount !== 0)\n || (this.lockColsRendered && (colSpan - stackedLockColsCount) !== 0);\n var isFrozenStack = isFrozen && this.ensureStackedFrozen(cols.columns, tableName, false);\n if ((!isFrozen && isStackedLockColumn) || isFrozenStack) {\n rows[index].cells.push(new Cell({\n cellType: CellType.StackedHeader, column: cols,\n colSpan: this.getColSpan(colSpan, stackedLockColsCount, cols.columns, tableName, isFrozen)\n }));\n }\n }\n if (this.parent.lockcolPositionCount && !this.lockColsRendered) {\n for (var i = 0; i < cols.columns.length; i++) {\n rows = this.appendCells(cols.columns[i], rows, index + 1, isFirstObj, i === 0, i === (cols.columns.length - 1) && isLastCol, isMovable, tableName);\n }\n }\n if (this.lockColsRendered) {\n for (var i = 0, len = cols.columns.length; i < len; i++) {\n var isFirstCol_1 = this.isFirstCol = cols.columns[i].visible && !this.isFirstCol && len !== 1;\n var isLaststackedCol = i === (len - 1);\n rows = this.appendCells(cols.columns[i], rows, index + 1, isFirstObj, isFirstCol_1, isLaststackedCol && isLastCol, isMovable, tableName);\n }\n }\n }\n return rows;\n };\n HeaderRender.prototype.ensureStackedFrozen = function (columns, tableName, isTrue) {\n var length = columns.length;\n for (var i = 0; i < length; i++) {\n if (columns[i].columns) {\n isTrue = this.ensureStackedFrozen(columns[i].columns, tableName, isTrue);\n }\n else if (columns[i].getFreezeTableName() === tableName) {\n isTrue = true;\n break;\n }\n }\n return isTrue;\n };\n HeaderRender.prototype.getStackedLockColsCount = function (col, lockColsCount) {\n if (col.columns) {\n for (var i = 0; i < col.columns.length; i++) {\n lockColsCount = this.getStackedLockColsCount(col.columns[i], lockColsCount);\n }\n }\n else if (col.lockColumn) {\n lockColsCount++;\n }\n return lockColsCount;\n };\n HeaderRender.prototype.getColSpan = function (colSpan, stackedLockColsCount, columns, tableName, isFrozen) {\n if (isFrozen) {\n colSpan = this.getFrozenColSpan(columns, tableName, 0);\n }\n else if (this.parent.lockcolPositionCount) {\n colSpan = !this.lockColsRendered ? stackedLockColsCount : colSpan - stackedLockColsCount;\n }\n return colSpan;\n };\n HeaderRender.prototype.getFrozenColSpan = function (columns, tableName, count) {\n var length = columns.length;\n for (var i = 0; i < length; i++) {\n if (columns[i].columns) {\n count = this.getFrozenColSpan(columns[i].columns, tableName, count);\n }\n else if (columns[i].getFreezeTableName() === tableName) {\n count++;\n }\n }\n return count;\n };\n HeaderRender.prototype.generateRow = function (index) {\n return new Row({});\n };\n HeaderRender.prototype.generateCell = function (column, cellType, rowSpan, className, rowIndex, colIndex) {\n var opt = {\n 'visible': column.visible,\n 'isDataCell': false,\n 'isTemplate': !isNullOrUndefined(column.headerTemplate),\n 'rowID': '',\n 'column': column,\n 'cellType': cellType,\n 'rowSpan': rowSpan,\n 'className': className,\n 'index': rowIndex,\n 'colIndex': colIndex\n };\n if (!opt.rowSpan || opt.rowSpan < 2) {\n delete opt.rowSpan;\n }\n return new Cell(opt);\n };\n /**\n * Function to hide header table column based on visible property\n * @param {Column[]} columns?\n */\n HeaderRender.prototype.setVisible = function (columns) {\n var gObj = this.parent;\n var rows = [].slice.call(this.getRows()); //NodeList -> Array \n var displayVal;\n var idx;\n var className;\n var element;\n var frzCols = gObj.getFrozenColumns();\n for (var c = 0, clen = columns.length; c < clen; c++) {\n var column = columns[c];\n idx = gObj.getNormalizedColumnIndex(column.uid);\n displayVal = column.visible ? '' : 'none';\n if (frzCols) {\n var normalizedfrzCols = this.parent.isRowDragable() ? frzCols + 1 : frzCols;\n if (idx < normalizedfrzCols) {\n if (isBlazor() && gObj.isServerRendered) {\n setStyleAttribute(this.getTable().querySelector('colgroup').children[idx], { 'display': displayVal });\n setStyleAttribute(this.getTable().querySelectorAll('th')[idx], { 'display': displayVal });\n }\n else {\n setStyleAttribute(this.getColGroup().children[idx], { 'display': displayVal });\n }\n }\n else {\n var mTblColGrp = gObj.getHeaderContent().querySelector('.e-movableheader').querySelector('colgroup');\n var mTbl = gObj.getHeaderContent().querySelector('.e-movableheader').querySelector('table');\n setStyleAttribute(mTblColGrp.children[idx - normalizedfrzCols], { 'display': displayVal });\n if (isBlazor() && gObj.isServerRendered) {\n setStyleAttribute(mTbl.querySelectorAll('th')[idx - frzCols], { 'display': displayVal });\n }\n }\n }\n else {\n setStyleAttribute(this.getColGroup().children[idx], { 'display': displayVal });\n }\n }\n this.refreshUI();\n };\n HeaderRender.prototype.colPosRefresh = function () {\n if (isBlazor() && this.parent.isServerRendered && this.parent.frozenRows && this.parent.getFrozenColumns()) {\n this.freezeReorder = true;\n }\n this.refreshUI();\n };\n /**\n * Refresh the header of the Grid.\n * @returns {void}\n */\n HeaderRender.prototype.refreshUI = function () {\n var frzCols = this.parent.isFrozenGrid();\n var isVFTable = this.parent.enableColumnVirtualization && frzCols;\n var setFrozenTable = isBlazor() && this.parent.isServerRendered && this.parent.frozenRows !== 0 && frzCols;\n var headerDiv = this.getPanel();\n this.toggleStackClass(headerDiv);\n var table = this.freezeReorder ? this.headerPanel.querySelector('.e-movableheader').querySelector('.e-table')\n : this.getTable();\n var tableName = this.parent.isFrozenGrid() ? this.parent.getFrozenLeftCount() ? 'frozen-left'\n : 'frozen-right' : undefined;\n if (isVFTable) {\n table = this.parent.contentModule.getVirtualFreezeHeader();\n tableName = this.parent.contentModule.isXaxis() ? 'movable' : tableName;\n }\n if (setFrozenTable && !isVFTable) {\n table = this.freezeReorder ? this.headerPanel.querySelector('.e-movableheader').querySelector('.e-table') :\n this.headerPanel.querySelector('.e-frozenheader').querySelector('.e-table');\n }\n if (table) {\n if (isBlazor() && this.parent.isServerRendered) {\n table.removeChild(table.querySelector('colgroup'));\n table.removeChild(table.querySelector('thead'));\n }\n else {\n remove(table);\n table.removeChild(table.firstChild);\n table.removeChild(table.childNodes[0]);\n }\n var colGroup = this.parent.createElement('colgroup');\n var findHeaderRow = this.createHeaderContent(tableName);\n this.rows = findHeaderRow.rows;\n table.insertBefore(findHeaderRow.thead, table.firstChild);\n this.updateColGroup(colGroup);\n table.insertBefore(this.setColGroup(colGroup), table.firstChild);\n if (!isVFTable && !setFrozenTable) {\n this.setTable(table);\n }\n if (!(isBlazor() && this.parent.isServerRendered)) {\n this.appendContent(table);\n }\n this.parent.notify(events.colGroupRefresh, {});\n this.widthService.setWidthToColumns();\n this.parent.updateDefaultCursor();\n if (!frzCols || (this.parent.enableColumnVirtualization && frzCols)) {\n this.initializeHeaderDrag();\n }\n var rows = [].slice.call(headerDiv.querySelectorAll('tr.e-columnheader'));\n for (var _i = 0, rows_1 = rows; _i < rows_1.length; _i++) {\n var row = rows_1[_i];\n var gCells = [].slice.call(row.querySelectorAll('.e-grouptopleftcell'));\n if (gCells.length) {\n gCells[gCells.length - 1].classList.add('e-lastgrouptopleftcell');\n }\n }\n if (!frzCols) {\n this.parent.notify(events.headerRefreshed, { rows: this.rows, args: { isFrozen: frzCols } });\n }\n if (this.parent.enableColumnVirtualization && parentsUntil(table, 'e-movableheader')) {\n this.parent.notify(events.headerRefreshed, { rows: this.rows, args: { isFrozen: false, isXaxis: true } });\n }\n if (this.parent.allowTextWrap && this.parent.textWrapSettings.wrapMode === 'Header') {\n wrap(rows, true);\n }\n }\n };\n HeaderRender.prototype.toggleStackClass = function (div) {\n var column = this.parent.columns;\n var stackedHdr = column.some(function (column) { return !isNullOrUndefined(column.columns); });\n if (stackedHdr) {\n div.classList.add('e-stackedheader');\n }\n else {\n div.classList.remove('e-stackedheader');\n }\n };\n HeaderRender.prototype.appendContent = function (table) {\n this.getPanel().querySelector('.e-headercontent').appendChild(table);\n };\n HeaderRender.prototype.getCellCnt = function (col, cnt) {\n if (col.columns) {\n for (var i = 0, len = col.columns.length; i < len; i++) {\n cnt = this.getCellCnt(col.columns[i], cnt);\n }\n }\n else {\n if (col.visible) {\n cnt++;\n }\n }\n return cnt;\n };\n HeaderRender.prototype.initializeHeaderDrag = function () {\n var gObj = this.parent;\n if (!(this.parent.allowReordering || (this.parent.allowGrouping && this.parent.groupSettings.showDropArea))) {\n return;\n }\n this.draggable = new Draggable(gObj.getHeaderContent(), {\n dragTarget: '.e-headercell',\n distance: 5,\n helper: this.helper,\n dragStart: this.dragStart,\n drag: this.drag,\n dragStop: this.dragStop,\n abort: '.e-rhandler',\n isReplaceDragEle: this.isReplaceDragEle\n });\n };\n HeaderRender.prototype.initializeHeaderDrop = function () {\n var gObj = this.parent;\n var drop = new Droppable(gObj.getHeaderContent(), {\n accept: '.e-dragclone',\n drop: this.drop\n });\n };\n HeaderRender.prototype.renderCustomToolbar = function () {\n var _this = this;\n var gObj = this.parent;\n if (gObj.rowRenderingMode === 'Vertical' && !gObj.toolbar && (gObj.allowSorting || gObj.allowFiltering)) {\n var div = gObj.createElement('div', { className: 'e-res-toolbar e-toolbar' });\n var toolbarItems = gObj.createElement('div', { className: 'e-toolbar-items' });\n var toolbarLeft = gObj.createElement('div', { className: 'e-toolbar-left' });\n var count = this.parent.allowFiltering && this.parent.allowSorting ? 2 : 1;\n for (var i = 0; i < count; i++) {\n var toolbarItem = gObj.createElement('div', { className: 'e-toolbar-item e-gridresponsiveicons e-icons e-tbtn-align' });\n var cls = count === 1 ? this.parent.allowSorting ? 'sort'\n : 'filter' : i === 1 ? 'sort' : 'filter';\n var button = gObj.createElement('button', { className: 'e-tbar-btn e-control e-btn e-lib e-icon-btn' });\n var span = gObj.createElement('span', { className: 'e-btn-icon e-res' + cls + '-icon e-icons' });\n button.appendChild(span);\n var btnObj = new Button({});\n btnObj.appendTo(button);\n button.onclick = function (e) {\n if (e.target.classList.contains('e-ressort-btn')\n || e.target.classList.contains('e-ressort-icon')) {\n _this.parent.showResponsiveCustomSort();\n }\n else {\n _this.parent.showResponsiveCustomFilter();\n }\n };\n toolbarItem.appendChild(button);\n toolbarLeft.appendChild(toolbarItem);\n }\n toolbarItems.appendChild(toolbarLeft);\n div.appendChild(toolbarItems);\n gObj.element.insertBefore(div, this.parent.element.querySelector('.e-gridheader'));\n }\n };\n HeaderRender.prototype.updateCustomResponsiveToolbar = function (args) {\n var resToolbar = this.parent.element.querySelector('.e-responsive-toolbar');\n if (args.module === 'toolbar') {\n if (resToolbar) {\n remove(resToolbar);\n }\n else {\n this.renderCustomToolbar();\n }\n }\n };\n return HeaderRender;\n}());\nexport { HeaderRender };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { isNullOrUndefined, extend, isBlazor } from '@syncfusion/ej2-base';\nimport { attributes } from '@syncfusion/ej2-base';\nimport { setStyleAndAttributes, appendChildren } from '../base/util';\nimport { CellRenderer } from './cell-renderer';\nimport { AriaService } from '../services/aria-service';\nimport { createCheckBox } from '@syncfusion/ej2-buttons';\nimport { headerCellInfo } from '../base/constant';\n/**\n * HeaderCellRenderer class which responsible for building header cell content.\n * @hidden\n */\nvar HeaderCellRenderer = /** @class */ (function (_super) {\n __extends(HeaderCellRenderer, _super);\n function HeaderCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent\n .createElement('TH', { className: 'e-headercell', attrs: { role: 'columnheader', tabindex: '-1' } });\n _this.ariaService = new AriaService();\n _this.hTxtEle = _this.parent.createElement('span', { className: 'e-headertext' });\n _this.sortEle = _this.parent.createElement('div', { className: 'e-sortfilterdiv e-icons' });\n _this.gui = _this.parent.createElement('div');\n _this.chkAllBox = _this.parent.createElement('input', { className: 'e-checkselectall', attrs: { 'type': 'checkbox' } });\n return _this;\n }\n /**\n * Function to return the wrapper for the TH content.\n * @returns string\n */\n HeaderCellRenderer.prototype.getGui = function () {\n return this.gui.cloneNode();\n };\n /**\n * Function to render the cell content based on Column object.\n * @param {Column} column\n * @param {Object} data\n * @param {Element}\n */\n HeaderCellRenderer.prototype.render = function (cell, data, attributes) {\n var node = this.element.cloneNode();\n var fltrMenuEle = this.parent.createElement('div', { className: 'e-filtermenudiv e-icons e-icon-filter' });\n return this.prepareHeader(cell, node, fltrMenuEle);\n };\n /**\n * Function to refresh the cell content based on Column object.\n * @param {Cell} cell\n * @param {Element} node\n */\n HeaderCellRenderer.prototype.refresh = function (cell, node) {\n this.clean(node);\n var fltrMenuEle = this.parent.createElement('div', { className: 'e-filtermenudiv e-icons e-icon-filter' });\n return this.prepareHeader(cell, node, fltrMenuEle);\n };\n HeaderCellRenderer.prototype.clean = function (node) {\n node.innerHTML = '';\n };\n /* tslint:disable-next-line:max-func-body-length */\n HeaderCellRenderer.prototype.prepareHeader = function (cell, node, fltrMenuEle) {\n var column = cell.column;\n var ariaAttr = {};\n //Prepare innerHtml\n var innerDIV = this.getGui();\n var hValueAccer;\n attributes(innerDIV, {\n 'e-mappinguid': column.uid,\n 'class': 'e-headercelldiv'\n });\n if (!isNullOrUndefined(column.headerValueAccessor)) {\n hValueAccer = this.getValue(column.headerText, column);\n }\n if (column.type !== 'checkbox') {\n var value = column.headerText;\n if (!isNullOrUndefined(hValueAccer)) {\n value = hValueAccer;\n }\n var headerText = this.hTxtEle.cloneNode();\n headerText[column.getDomSetter()] = value;\n innerDIV.appendChild(headerText);\n }\n else {\n column.editType = 'booleanedit';\n var checkAllWrap = createCheckBox(this.parent.createElement, false, { checked: false, label: ' ' });\n checkAllWrap.insertBefore(this.chkAllBox.cloneNode(), checkAllWrap.firstChild);\n innerDIV.appendChild(checkAllWrap);\n innerDIV.classList.add('e-headerchkcelldiv');\n }\n this.buildAttributeFromCell(node, cell);\n this.appendHtml(node, innerDIV);\n node.appendChild(this.sortEle.cloneNode());\n if ((this.parent.allowFiltering && this.parent.filterSettings.type !== 'FilterBar') &&\n (column.allowFiltering && !isNullOrUndefined(column.field)) &&\n !(this.parent.showColumnMenu && column.showColumnMenu)) {\n attributes(fltrMenuEle, {\n 'e-mappinguid': 'e-flmenu-' + column.uid,\n });\n node.classList.add('e-fltr-icon');\n var matchFlColumns = [];\n if (this.parent.filterSettings.columns.length && this.parent.filterSettings.columns.length !== matchFlColumns.length) {\n var foreignColumn = this.parent.getForeignKeyColumns();\n for (var index = 0; index < this.parent.columns.length; index++) {\n for (var count = 0; count < this.parent.filterSettings.columns.length; count++) {\n if (this.parent.filterSettings.columns[count].field === column.field || (foreignColumn.length\n && column.foreignKeyValue === this.parent.filterSettings.columns[count].field)) {\n fltrMenuEle.classList.add('e-filtered');\n matchFlColumns.push(column.field);\n break;\n }\n }\n }\n }\n node.appendChild(fltrMenuEle.cloneNode());\n }\n if (cell.className) {\n node.classList.add(cell.className);\n }\n if (column.customAttributes) {\n setStyleAndAttributes(node, column.customAttributes);\n }\n if (column.allowSorting) {\n ariaAttr.sort = 'none';\n }\n if (column.allowGrouping) {\n ariaAttr.grabbed = false;\n }\n node = this.extendPrepareHeader(column, node);\n var result;\n var gridObj = this.parent;\n var colIndex = gridObj.getColumnIndexByField(column.field);\n if (!isNullOrUndefined(column.headerTemplate)) {\n //need to pass the template id for blazor headertemplate\n var headerTempID = gridObj.element.id + column.uid + 'headerTemplate';\n var str = 'isStringTemplate';\n var col = isBlazor() ? column.toJSON() : column;\n var isReactCompiler = this.parent.isReact && typeof (column.headerTemplate) !== 'string';\n if (isReactCompiler) {\n var copied = { 'index': colIndex };\n node.firstElementChild.innerHTML = '';\n column.getHeaderTemplate()(extend(copied, col), gridObj, 'headerTemplate', headerTempID, this.parent[str], null, node.firstElementChild);\n this.parent.renderTemplates();\n }\n else {\n result = column.getHeaderTemplate()(extend({ 'index': colIndex }, col), gridObj, 'headerTemplate', headerTempID, this.parent[str]);\n node.firstElementChild.innerHTML = '';\n appendChildren(node.firstElementChild, result);\n }\n }\n this.ariaService.setOptions(node, ariaAttr);\n if (!isNullOrUndefined(column.headerTextAlign) || !isNullOrUndefined(column.textAlign)) {\n var alignment = column.headerTextAlign || column.textAlign;\n innerDIV.style.textAlign = alignment;\n if (alignment === 'Right' || alignment === 'Left') {\n node.classList.add(alignment === 'Right' ? 'e-rightalign' : 'e-leftalign');\n }\n else if (alignment === 'Center') {\n node.classList.add('e-centeralign');\n }\n }\n if (column.clipMode === 'Clip' || (!column.clipMode && this.parent.clipMode === 'Clip')) {\n node.classList.add('e-gridclip');\n }\n else if (column.clipMode === 'EllipsisWithTooltip' || (!column.clipMode && this.parent.clipMode === 'EllipsisWithTooltip')) {\n if (column.type !== 'checkbox') {\n node.classList.add('e-ellipsistooltip');\n }\n }\n node.setAttribute('aria-rowspan', (!isNullOrUndefined(cell.rowSpan) ? cell.rowSpan : 1).toString());\n node.setAttribute('aria-colspan', '1');\n this.parent.trigger(headerCellInfo, { cell: cell, node: node });\n return node;\n };\n HeaderCellRenderer.prototype.getValue = function (field, column) {\n return column.headerValueAccessor(field, column);\n };\n HeaderCellRenderer.prototype.extendPrepareHeader = function (column, node) {\n if (this.parent.showColumnMenu && column.showColumnMenu && !isNullOrUndefined(column.field)) {\n var element = (this.parent.createElement('div', { className: 'e-icons e-columnmenu' }));\n var matchFilteredColumns = [];\n if (this.parent.filterSettings.columns.length && this.parent.filterSettings.columns.length !== matchFilteredColumns.length) {\n for (var i = 0; i < this.parent.columns.length; i++) {\n for (var j = 0; j < this.parent.filterSettings.columns.length; j++) {\n if (this.parent.filterSettings.columns[j].field === column.field) {\n element.classList.add('e-filtered');\n matchFilteredColumns.push(column.field);\n break;\n }\n }\n }\n }\n node.classList.add('e-fltr-icon');\n node.appendChild(element);\n }\n if (this.parent.allowResizing) {\n var handler = this.parent.createElement('div');\n handler.className = column.allowResizing ? 'e-rhandler e-rcursor' : 'e-rsuppress';\n node.appendChild(handler);\n }\n return node;\n };\n /**\n * Function to specifies how the result content to be placed in the cell.\n * @param {Element} node\n * @param {string|Element} innerHtml\n * @returns Element\n */\n HeaderCellRenderer.prototype.appendHtml = function (node, innerHtml) {\n node.appendChild(innerHtml);\n return node;\n };\n return HeaderCellRenderer;\n}(CellRenderer));\nexport { HeaderCellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { CellRenderer } from './cell-renderer';\nimport { headerCellInfo } from '../base/constant';\nimport { setStyleAndAttributes, appendChildren } from '../base/util';\n/**\n * StackedHeaderCellRenderer class which responsible for building stacked header cell content.\n * @hidden\n */\nvar StackedHeaderCellRenderer = /** @class */ (function (_super) {\n __extends(StackedHeaderCellRenderer, _super);\n function StackedHeaderCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TH', {\n className: 'e-headercell e-stackedheadercell', attrs: {\n role: 'columnheader',\n tabindex: '-1'\n }\n });\n return _this;\n }\n /**\n * Function to render the cell content based on Column object.\n * @param {Column} column\n * @param {Object} data\n * @param {Element}\n */\n StackedHeaderCellRenderer.prototype.render = function (cell, data, attributes) {\n var node = this.element.cloneNode();\n var div = this.parent.createElement('div', {\n className: 'e-stackedheadercelldiv',\n attrs: { 'e-mappinguid': cell.column.uid }\n });\n var column = cell.column;\n node.appendChild(div);\n if (!isNullOrUndefined(column.headerTemplate)) {\n appendChildren(div, column.getHeaderTemplate()(column, this.parent, 'headerTemplate'));\n }\n else {\n this.appendHtml(div, column.headerText, column.getDomSetter());\n }\n if (cell.column.toolTip) {\n node.setAttribute('title', cell.column.toolTip);\n }\n if (column.clipMode === 'Clip' || (!column.clipMode && this.parent.clipMode === 'Clip')) {\n node.classList.add('e-gridclip');\n }\n else if (column.clipMode === 'EllipsisWithTooltip' || (!column.clipMode && this.parent.clipMode === 'EllipsisWithTooltip')) {\n node.classList.add('e-ellipsistooltip');\n }\n if (!isNullOrUndefined(cell.column.textAlign)) {\n div.style.textAlign = cell.column.textAlign;\n }\n if (cell.column.customAttributes) {\n setStyleAndAttributes(node, cell.column.customAttributes);\n }\n node.setAttribute('colspan', cell.colSpan.toString());\n node.setAttribute('aria-colspan', cell.colSpan.toString());\n node.setAttribute('aria-rowspan', '1');\n if (this.parent.allowResizing) {\n var handler = this.parent.createElement('div');\n handler.className = cell.column.allowResizing ? 'e-rhandler e-rcursor' : 'e-rsuppress';\n node.appendChild(handler);\n }\n this.parent.trigger(headerCellInfo, { cell: cell, node: node });\n return node;\n };\n return StackedHeaderCellRenderer;\n}(CellRenderer));\nexport { StackedHeaderCellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { setStyleAndAttributes } from '../base/util';\nimport { CellRenderer } from './cell-renderer';\n/**\n * IndentCellRenderer class which responsible for building group indent cell.\n * @hidden\n */\nvar IndentCellRenderer = /** @class */ (function (_super) {\n __extends(IndentCellRenderer, _super);\n function IndentCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TD', { className: 'e-indentcell' });\n return _this;\n }\n /**\n * Function to render the indent cell\n * @param {Cell} cell\n * @param {Object} data\n */\n IndentCellRenderer.prototype.render = function (cell, data) {\n var node = this.element.cloneNode();\n setStyleAndAttributes(node, cell.attributes);\n return node;\n };\n return IndentCellRenderer;\n}(CellRenderer));\nexport { IndentCellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { isNullOrUndefined, isBlazor } from '@syncfusion/ej2-base';\nimport { CellRenderer } from './cell-renderer';\nimport { appendChildren, templateCompiler } from '../base/util';\n/**\n * GroupCaptionCellRenderer class which responsible for building group caption cell.\n * @hidden\n */\nvar GroupCaptionCellRenderer = /** @class */ (function (_super) {\n __extends(GroupCaptionCellRenderer, _super);\n function GroupCaptionCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent\n .createElement('TD', { className: 'e-groupcaption',\n attrs: { id: _this.parent.element.id + 'captioncell', role: 'gridcell', tabindex: '-1' } });\n return _this;\n }\n /**\n * Function to render the cell content based on Column object.\n * @param {Cell} cell\n * @param {Object} data\n */\n GroupCaptionCellRenderer.prototype.render = function (cell, data) {\n var node = this.element.cloneNode();\n var gObj = this.parent;\n var result;\n var helper = {};\n var fKeyValue;\n data.headerText = cell.column.headerText;\n if (cell.isForeignKey) {\n fKeyValue = this.format(cell.column, cell.column.valueAccessor('foreignKey', data, cell.column));\n }\n var value = cell.isForeignKey ? fKeyValue : cell.column.enableGroupByFormat ? data.key :\n this.format(cell.column, cell.column.valueAccessor('key', data, cell.column));\n if (!isNullOrUndefined(gObj.groupSettings.captionTemplate)) {\n var isReactCompiler = this.parent.isReact && typeof (gObj.groupSettings.captionTemplate) !== 'string';\n if (isBlazor()) {\n var tempID = gObj.element.id + 'captionTemplate';\n result = templateCompiler(gObj.groupSettings.captionTemplate)(data, null, null, tempID);\n }\n else {\n if (isReactCompiler) {\n var tempID = gObj.element.id + 'captionTemplate';\n templateCompiler(gObj.groupSettings.captionTemplate)(data, this.parent, 'captionTemplate', tempID, null, null, node);\n this.parent.renderTemplates();\n }\n else if (this.parent.isVue) {\n result = templateCompiler(gObj.groupSettings.captionTemplate)(data, this.parent);\n }\n else {\n result = templateCompiler(gObj.groupSettings.captionTemplate)(data);\n }\n }\n if (!isReactCompiler) {\n appendChildren(node, result);\n }\n }\n else {\n if (gObj.groupSettings.enableLazyLoading) {\n node.innerHTML = cell.column.headerText + ': ' + value;\n }\n else {\n node.innerHTML = cell.column.headerText + ': ' + value + ' - ' + data.count + ' ' +\n (data.count < 2 ? this.localizer.getConstant('Item') : this.localizer.getConstant('Items'));\n }\n }\n node.setAttribute('colspan', cell.colSpan.toString());\n node.setAttribute('aria-label', node.innerHTML + ' is groupcaption cell');\n node.setAttribute('title', node.innerHTML);\n return node;\n };\n return GroupCaptionCellRenderer;\n}(CellRenderer));\nexport { GroupCaptionCellRenderer };\n/**\n * GroupCaptionEmptyCellRenderer class which responsible for building group caption empty cell.\n * @hidden\n */\nvar GroupCaptionEmptyCellRenderer = /** @class */ (function (_super) {\n __extends(GroupCaptionEmptyCellRenderer, _super);\n function GroupCaptionEmptyCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TD', { className: 'e-groupcaption' });\n return _this;\n }\n /**\n * Function to render the cell content based on Column object.\n * @param {Cell} cell\n * @param {Object} data\n */\n GroupCaptionEmptyCellRenderer.prototype.render = function (cell, data) {\n var node = this.element.cloneNode();\n node.innerHTML = ' ';\n node.setAttribute('colspan', cell.colSpan.toString());\n return node;\n };\n return GroupCaptionEmptyCellRenderer;\n}(CellRenderer));\nexport { GroupCaptionEmptyCellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { IndentCellRenderer } from './indent-cell-renderer';\n/**\n * ExpandCellRenderer class which responsible for building group expand cell.\n * @hidden\n */\nvar ExpandCellRenderer = /** @class */ (function (_super) {\n __extends(ExpandCellRenderer, _super);\n function ExpandCellRenderer() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /**\n * Function to render the expand cell\n * @param {Cell} cell\n * @param {Object} data\n * @param {{ [x: string]: string }} attr\n * @param {boolean} isExpand\n */\n ExpandCellRenderer.prototype.render = function (cell, data, attr, isExpand) {\n var node = this.element.cloneNode();\n node.className = isExpand ? 'e-recordplusexpand' : 'e-recordpluscollapse';\n node.setAttribute('ej-mappingname', data.field);\n node.setAttribute('ej-mappingvalue', data.key);\n node.setAttribute('aria-expanded', isExpand ? 'true' : 'false');\n node.setAttribute('tabindex', '-1');\n node.appendChild(this.parent.createElement('div', {\n className: isExpand ? 'e-icons e-gdiagonaldown e-icon-gdownarrow' : 'e-icons e-gnextforward e-icon-grightarrow'\n }));\n return node;\n };\n return ExpandCellRenderer;\n}(IndentCellRenderer));\nexport { ExpandCellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { CellRenderer } from './cell-renderer';\n/**\n * HeaderIndentCellRenderer class which responsible for building header indent cell.\n * @hidden\n */\nvar HeaderIndentCellRenderer = /** @class */ (function (_super) {\n __extends(HeaderIndentCellRenderer, _super);\n function HeaderIndentCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TH', { className: 'e-grouptopleftcell' });\n return _this;\n }\n /**\n * Function to render the indent cell\n * @param {Cell} cell\n * @param {Object} data\n */\n HeaderIndentCellRenderer.prototype.render = function (cell, data) {\n var node = this.element.cloneNode();\n node.appendChild(this.parent.createElement('div', { className: 'e-headercelldiv e-emptycell', innerHTML: '' }));\n return node;\n };\n return HeaderIndentCellRenderer;\n}(CellRenderer));\nexport { HeaderIndentCellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { CellRenderer } from './cell-renderer';\n/**\n * DetailHeaderIndentCellRenderer class which responsible for building detail header indent cell.\n * @hidden\n */\nvar DetailHeaderIndentCellRenderer = /** @class */ (function (_super) {\n __extends(DetailHeaderIndentCellRenderer, _super);\n function DetailHeaderIndentCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TH', { className: 'e-detailheadercell' });\n return _this;\n }\n /**\n * Function to render the detail indent cell\n * @param {Cell} cell\n * @param {Object} data\n */\n DetailHeaderIndentCellRenderer.prototype.render = function (cell, data) {\n var node = this.element.cloneNode();\n node.appendChild(this.parent.createElement('div', { className: 'e-emptycell' }));\n return node;\n };\n return DetailHeaderIndentCellRenderer;\n}(CellRenderer));\nexport { DetailHeaderIndentCellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { CellRenderer } from './cell-renderer';\n/**\n * ExpandCellRenderer class which responsible for building group expand cell.\n * @hidden\n */\nvar DetailExpandCellRenderer = /** @class */ (function (_super) {\n __extends(DetailExpandCellRenderer, _super);\n function DetailExpandCellRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TD', {\n className: 'e-detailrowcollapse',\n attrs: { 'aria-expanded': 'false', role: 'gridcell', tabindex: '-1' }\n });\n return _this;\n }\n /**\n * Function to render the detail expand cell\n */\n DetailExpandCellRenderer.prototype.render = function (cell, data, attributes) {\n var node = this.element.cloneNode();\n if (attributes && !isNullOrUndefined(attributes['class'])) {\n node.className = '';\n node.className = attributes['class'];\n node.appendChild(this.parent.createElement('div', { className: 'e-icons e-dtdiagonaldown e-icon-gdownarrow' }));\n }\n else {\n node.appendChild(this.parent.createElement('div', { className: 'e-icons e-dtdiagonalright e-icon-grightarrow' }));\n }\n return node;\n };\n return DetailExpandCellRenderer;\n}(CellRenderer));\nexport { DetailExpandCellRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { CellRenderer } from './cell-renderer';\n/**\n * ExpandCellRenderer class which responsible for building group expand cell.\n * @hidden\n */\nvar RowDragDropRenderer = /** @class */ (function (_super) {\n __extends(RowDragDropRenderer, _super);\n function RowDragDropRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TD', {\n className: 'e-rowdragdrop',\n attrs: { role: 'gridcell', tabindex: '-1' }\n });\n return _this;\n }\n /**\n * Function to render the detail expand cell\n */\n RowDragDropRenderer.prototype.render = function (cell, data) {\n var nodeElement = this.element.cloneNode();\n nodeElement.appendChild(this.parent.createElement('div', {\n className: 'e-icons e-rowcelldrag e-dtdiagonalright e-icon-rowdragicon'\n }));\n if (cell.isSelected) {\n nodeElement.classList.add('e-selectionbackground');\n nodeElement.classList.add('e-active');\n }\n return nodeElement;\n };\n return RowDragDropRenderer;\n}(CellRenderer));\nexport { RowDragDropRenderer };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nimport { createElement } from '@syncfusion/ej2-base';\nimport { CellRenderer } from './cell-renderer';\n/**\n * DetailHeaderIndentCellRenderer class which responsible for building detail header indent cell.\n * @hidden\n */\nvar RowDragDropHeaderRenderer = /** @class */ (function (_super) {\n __extends(RowDragDropHeaderRenderer, _super);\n function RowDragDropHeaderRenderer() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.element = _this.parent.createElement('TH', { className: 'e-rowdragheader' });\n return _this;\n }\n /**\n * Function to render the detail indent cell\n * @param {Cell} cell\n * @param {Object} data\n */\n RowDragDropHeaderRenderer.prototype.render = function (cell, data) {\n var node = this.element.cloneNode();\n node.appendChild(createElement('div', { className: 'e-emptycell' }));\n return node;\n };\n return RowDragDropHeaderRenderer;\n}(CellRenderer));\nexport { RowDragDropHeaderRenderer };\n","import { remove, resetBlazorTemplate, updateBlazorTemplate, blazorTemplates, isBlazor } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, extend } from '@syncfusion/ej2-base';\nimport { DataManager, Query, Deferred, Predicate, DataUtil } from '@syncfusion/ej2-data';\nimport { ValueFormatter } from '../services/value-formatter';\nimport { RenderType, CellType } from '../base/enum';\nimport { Data } from '../actions/data';\nimport { Column } from '../models/column';\nimport { Row } from '../models/row';\nimport { Cell } from '../models/cell';\nimport * as events from '../base/constant';\nimport { prepareColumns, setFormatter, isGroupAdaptive, getDatePredicate, getObject } from '../base/util';\nimport { ContentRender } from '../renderer/content-renderer';\nimport { HeaderRender } from '../renderer/header-renderer';\nimport { CellRenderer } from '../renderer/cell-renderer';\nimport { HeaderCellRenderer } from '../renderer/header-cell-renderer';\nimport { StackedHeaderCellRenderer } from '../renderer/stacked-cell-renderer';\nimport { IndentCellRenderer } from '../renderer/indent-cell-renderer';\nimport { GroupCaptionCellRenderer, GroupCaptionEmptyCellRenderer } from '../renderer/caption-cell-renderer';\nimport { ExpandCellRenderer } from '../renderer/expand-cell-renderer';\nimport { HeaderIndentCellRenderer } from '../renderer/header-indent-renderer';\nimport { DetailHeaderIndentCellRenderer } from '../renderer/detail-header-indent-renderer';\nimport { DetailExpandCellRenderer } from '../renderer/detail-expand-cell-renderer';\nimport { RowDragDropRenderer } from './row-drag-drop-renderer';\nimport { RowDragDropHeaderRenderer } from '../renderer/row-drag-header-indent-render';\n/**\n * Content module is used to render grid content\n * @hidden\n */\nvar Render = /** @class */ (function () {\n /**\n * Constructor for render module\n */\n function Render(parent, locator) {\n this.emptyGrid = false;\n this.counter = 0;\n this.parent = parent;\n this.locator = locator;\n this.data = new Data(parent, locator);\n this.l10n = locator.getService('localization');\n this.ariaService = this.locator.getService('ariaService');\n this.renderer = this.locator.getService('rendererFactory');\n this.addEventListener();\n }\n /**\n * To initialize grid header, content and footer rendering\n */\n Render.prototype.render = function () {\n var gObj = this.parent;\n var isServerRendered = 'isServerRendered';\n this.headerRenderer = this.renderer.getRenderer(RenderType.Header);\n this.contentRenderer = this.renderer.getRenderer(RenderType.Content);\n this.headerRenderer.renderPanel();\n this.contentRenderer.renderPanel();\n if (gObj.getColumns().length) {\n this.isLayoutRendered = true;\n this.headerRenderer.renderTable();\n this.contentRenderer.renderTable();\n this.emptyRow(false);\n }\n this.parent.scrollModule.setWidth();\n this.parent.scrollModule.setHeight();\n if (this.parent.height !== 'auto') {\n this.parent.scrollModule.setPadding();\n }\n if (!(isBlazor() && this.parent[isServerRendered])) {\n this.refreshDataManager();\n }\n };\n /**\n * Refresh the entire Grid.\n * @return {void}\n */\n Render.prototype.refresh = function (e) {\n var _this = this;\n if (e === void 0) { e = { requestType: 'refresh' }; }\n var gObj = this.parent;\n var preventUpdate = 'preventUpdate';\n gObj.notify(e.requestType + \"-begin\", e);\n if (isBlazor()) {\n this.resetTemplates();\n }\n if (isBlazor() && gObj.isServerRendered) {\n var bulkChanges = 'bulkChanges';\n if (gObj[bulkChanges].dataSource) {\n delete gObj[bulkChanges].dataSource;\n }\n gObj.notify('blazor-action-begin', e);\n if (e.requestType === 'filtering') {\n var columns = 'columns';\n e[columns] = null;\n }\n if (e.requestType === 'sorting') {\n var target = 'target';\n e[target] = null;\n }\n if (gObj.editSettings.mode === 'Batch' && !gObj.isEdit) {\n gObj.notify('closebatch', {});\n }\n }\n var tempPreventUpdate = this.parent[preventUpdate];\n gObj.trigger(events.actionBegin, e, function (args) {\n if (args === void 0) { args = { requestType: 'refresh' }; }\n if (args.requestType === 'delete' && isBlazor() && !gObj.isJsComponent) {\n var data = 'data';\n if (isNullOrUndefined(gObj.commandDelIndex)) {\n args[data] = gObj.getSelectedRecords();\n }\n else {\n var tempSelectedRecord = args[data];\n args[data] = {};\n args[data][0] = tempSelectedRecord;\n }\n }\n if (args.cancel) {\n gObj.notify(events.cancelBegin, args);\n return;\n }\n if (isBlazor() && gObj.editSettings.mode === 'Normal' && gObj.isEdit && e.requestType !== 'infiniteScroll') {\n gObj.notify('closeinline', {});\n }\n if (args.requestType === 'delete' && gObj.allowPaging) {\n var dataLength = args.data.length;\n var count = gObj.pageSettings.totalRecordsCount - dataLength;\n var currentViewData = gObj.getCurrentViewRecords().length;\n if (!(currentViewData - dataLength) && count && currentViewData !== dataLength) {\n gObj.prevPageMoving = true;\n gObj.setProperties({\n pageSettings: {\n totalRecordsCount: count, currentPage: Math.ceil(count / gObj.pageSettings.pageSize)\n }\n }, true);\n gObj.pagerModule.pagerObj.totalRecordsCount = count;\n }\n }\n if (isBlazor() && _this.parent.isServerRendered) {\n if (tempPreventUpdate) {\n var bulkChanges = 'bulkChanges';\n gObj[bulkChanges] = {};\n return;\n }\n if (e.requestType === 'refresh') {\n _this.parent.notify('updateaction', args);\n }\n if (args.requestType !== 'virtualscroll') {\n _this.parent.showSpinner();\n }\n if (args.requestType === 'delete' || args.requestType === 'save') {\n _this.parent.notify(events.addDeleteAction, args);\n _this.parent.notify('add-delete-success', args);\n }\n else {\n _this.parent.allowServerDataBinding = true;\n _this.parent.serverDataBind();\n _this.parent.allowServerDataBinding = false;\n }\n }\n else if (args.requestType === 'reorder' && _this.parent.dataSource && 'result' in _this.parent.dataSource) {\n _this.contentRenderer.refreshContentRows(args);\n }\n else if ((args.requestType === 'paging' || args.requestType === 'columnstate' || args.requestType === 'reorder')\n && _this.parent.groupSettings.enableLazyLoading && _this.parent.groupSettings.columns.length\n && _this.parent.contentModule.getGroupCache()[_this.parent.pageSettings.currentPage]) {\n _this.contentRenderer.refreshContentRows(args);\n }\n else {\n _this.refreshDataManager(args);\n }\n });\n };\n /**\n * @hidden\n */\n Render.prototype.resetTemplates = function () {\n var gObj = this.parent;\n var gridColumns = gObj.getColumns();\n if (gObj.detailTemplate) {\n var detailTemplateID = gObj.element.id + 'detailTemplate';\n blazorTemplates[detailTemplateID] = [];\n resetBlazorTemplate(detailTemplateID, 'DetailTemplate');\n }\n if (gObj.groupSettings.captionTemplate) {\n resetBlazorTemplate(gObj.element.id + 'captionTemplate', 'CaptionTemplate');\n }\n if (gObj.rowTemplate) {\n resetBlazorTemplate(gObj.element.id + 'rowTemplate', 'RowTemplate');\n }\n if (gObj.toolbarTemplate) {\n resetBlazorTemplate(gObj.element.id + 'toolbarTemplate', 'ToolbarTemplate');\n }\n if (gObj.pageSettings.template) {\n resetBlazorTemplate(gObj.element.id + '_template', 'pageSettings');\n }\n for (var i = 0; i < gridColumns.length; i++) {\n if (gridColumns[i].template) {\n blazorTemplates[gObj.element.id + gridColumns[i].uid] = [];\n resetBlazorTemplate(gObj.element.id + gridColumns[i].uid, 'Template');\n }\n if (gridColumns[i].headerTemplate) {\n resetBlazorTemplate(gObj.element.id + gridColumns[i].uid + 'headerTemplate', 'HeaderTemplate');\n }\n if (gridColumns[i].filterTemplate) {\n resetBlazorTemplate(gObj.element.id + gridColumns[i].uid + 'filterTemplate', 'FilterTemplate');\n }\n }\n var guid = 'guid';\n for (var k = 0; k < gObj.aggregates.length; k++) {\n for (var j = 0; j < gObj.aggregates[k].columns.length; j++) {\n if (gObj.aggregates[k].columns[j].footerTemplate) {\n var tempID = gObj.element.id + gObj.aggregates[k].columns[j][guid] + 'footerTemplate';\n resetBlazorTemplate(tempID, 'FooterTemplate');\n }\n if (gObj.aggregates[k].columns[j].groupFooterTemplate) {\n var tempID = gObj.element.id + gObj.aggregates[k].columns[j][guid] + 'groupFooterTemplate';\n resetBlazorTemplate(tempID, 'GroupFooterTemplate');\n }\n if (gObj.aggregates[k].columns[j].groupCaptionTemplate) {\n var tempID = gObj.element.id + gObj.aggregates[k].columns[j][guid] + 'groupCaptionTemplate';\n resetBlazorTemplate(tempID, 'GroupCaptionTemplate');\n }\n }\n }\n };\n Render.prototype.refreshComplete = function (e) {\n if (isBlazor() && !this.parent.isJsComponent) {\n e.rows = null;\n }\n this.parent.trigger(events.actionComplete, e);\n };\n /**\n * The function is used to refresh the dataManager\n * @return {void}\n */\n Render.prototype.refreshDataManager = function (args) {\n var _this = this;\n if (args === void 0) { args = {}; }\n if (args.requestType !== 'virtualscroll') {\n this.parent.showSpinner();\n }\n this.parent.notify(events.resetInfiniteBlocks, args);\n this.emptyGrid = false;\n var dataManager;\n var isFActon = this.isNeedForeignAction();\n this.ariaService.setBusy(this.parent.getContent().querySelector('.e-content'), true);\n if (isFActon) {\n var deffered = new Deferred();\n dataManager = this.getFData(deffered, args);\n }\n if (!dataManager) {\n dataManager = this.data.getData(args, this.data.generateQuery().requiresCount());\n }\n else {\n dataManager = dataManager.then(function (e) {\n var query = _this.data.generateQuery().requiresCount();\n if (_this.emptyGrid) {\n var def = new Deferred();\n def.resolve({ result: [], count: 0 });\n return def.promise;\n }\n return _this.data.getData(args, query);\n });\n }\n if (this.parent.getForeignKeyColumns().length && (!isFActon || this.parent.searchSettings.key.length)) {\n var deffered_1 = new Deferred();\n dataManager = dataManager.then(function (e) {\n _this.parent.notify(events.getForeignKeyData, { dataManager: dataManager, result: e, promise: deffered_1, action: args });\n return deffered_1.promise;\n });\n }\n if (this.parent.groupSettings.disablePageWiseAggregates && this.parent.groupSettings.columns.length) {\n dataManager = dataManager.then(function (e) { return _this.validateGroupRecords(e); });\n }\n dataManager.then(function (e) { return _this.dataManagerSuccess(e, args); })\n .catch(function (e) { return _this.dataManagerFailure(e, args); });\n };\n Render.prototype.getFData = function (deferred, args) {\n this.parent.notify(events.getForeignKeyData, { isComplex: true, promise: deferred, action: args });\n return deferred.promise;\n };\n Render.prototype.isNeedForeignAction = function () {\n var gObj = this.parent;\n return !!((gObj.allowFiltering && gObj.filterSettings.columns.length) ||\n (gObj.searchSettings.key.length)) && this.foreignKey(this.parent.getForeignKeyColumns());\n };\n Render.prototype.foreignKey = function (columns) {\n var _this = this;\n return columns.some(function (col) {\n var fbool = false;\n fbool = _this.parent.filterSettings.columns.some(function (value) {\n return col.uid === value.uid;\n });\n return !!(fbool || _this.parent.searchSettings.key.length);\n });\n };\n Render.prototype.sendBulkRequest = function (args) {\n var _this = this;\n args.requestType = 'batchsave';\n var promise = this.data.saveChanges(args.changes, this.parent.getPrimaryKeyFieldNames()[0], args.original);\n if (isBlazor() && !this.parent.isJsComponent) {\n promise.then(function (e) {\n _this.parent.notify('editsuccess', args);\n }).catch(function (e) {\n var error = 'error';\n var message = 'message';\n if (!isNullOrUndefined(e[error]) && !isNullOrUndefined(e[error][message])) {\n e[error] = e[error][message];\n }\n _this.parent.trigger(events.actionFailure, e);\n });\n }\n else {\n var query_1 = this.data.generateQuery().requiresCount();\n if (this.data.dataManager.dataSource.offline) {\n this.refreshDataManager({ requestType: 'batchsave' });\n return;\n }\n else {\n promise.then(function (e) {\n _this.data.getData(args, query_1)\n .then(function (e) { return _this.dmSuccess(e, args); })\n .catch(function (e) { return _this.dmFailure(e, args); });\n })\n .catch(function (e) { return _this.dmFailure(e, args); });\n }\n }\n };\n Render.prototype.dmSuccess = function (e, args) {\n this.dataManagerSuccess(e, args);\n };\n Render.prototype.dmFailure = function (e, args) {\n this.dataManagerFailure(e, args);\n };\n /**\n * Render empty row to Grid which is used at the time to represent to no records.\n * @return {void}\n * @hidden\n */\n Render.prototype.renderEmptyRow = function () {\n this.emptyRow(true);\n };\n Render.prototype.emptyRow = function (isTrigger) {\n var gObj = this.parent;\n var tbody = this.contentRenderer.getTable().querySelector('tbody');\n var tr;\n if (!isNullOrUndefined(tbody)) {\n remove(tbody);\n }\n tbody = this.parent.createElement('tbody');\n var spanCount = 0;\n if (gObj.detailTemplate || gObj.childGrid) {\n ++spanCount;\n }\n tr = this.parent.createElement('tr', { className: 'e-emptyrow' });\n tr.appendChild(this.parent.createElement('td', {\n innerHTML: this.l10n.getConstant('EmptyRecord'),\n attrs: { colspan: (gObj.getColumns().length + spanCount).toString() }\n }));\n tbody.appendChild(tr);\n this.contentRenderer.renderEmpty(tbody);\n if (isTrigger) {\n this.parent.trigger(events.dataBound, {});\n this.parent.notify(events.onEmpty, { rows: [new Row({ isDataRow: true, cells: [new Cell({ isDataCell: true, visible: true })] })] });\n }\n };\n Render.prototype.dynamicColumnChange = function () {\n if (this.parent.getCurrentViewRecords().length) {\n this.updateColumnType(this.parent.getCurrentViewRecords()[0]);\n }\n };\n Render.prototype.updateColumnType = function (record) {\n var columns = this.parent.getColumns();\n var value;\n var cFormat = 'customFormat';\n var equalTo = 'equalTo';\n var data = record && record.items ? record.items[0] : record;\n var fmtr = this.locator.getService('valueFormatter');\n for (var i = 0, len = columns.length; i < len; i++) {\n value = getObject(columns[i].field || '', data);\n if (!isNullOrUndefined(columns[i][cFormat])) {\n columns[i].format = columns[i][cFormat];\n }\n if (!isNullOrUndefined(columns[i].validationRules) && !isNullOrUndefined(columns[i].validationRules[equalTo])) {\n columns[i].validationRules[equalTo][0] = this.parent.element.id + columns[i].validationRules[equalTo][0];\n }\n if (columns[i].isForeignColumn() && columns[i].columnData) {\n value = getObject(columns[i].foreignKeyValue || '', columns[i].columnData[0]);\n }\n if (!isNullOrUndefined(value)) {\n this.isColTypeDef = true;\n if (!columns[i].type || (isBlazor() && this.parent.isServerRendered && columns[i].type === 'none')) {\n columns[i].type = value.getDay ? (value.getHours() > 0 || value.getMinutes() > 0 ||\n value.getSeconds() > 0 || value.getMilliseconds() > 0 ? 'datetime' : 'date') : typeof (value);\n }\n }\n else {\n columns[i].type = columns[i].type || (isBlazor() && this.parent.isServerRendered ? 'none' : null);\n }\n var valueFormatter = new ValueFormatter();\n if (columns[i].format && (columns[i].format.skeleton || columns[i].format.format)) {\n columns[i].setFormatter(valueFormatter.getFormatFunction(extend({}, columns[i].format)));\n columns[i].setParser(valueFormatter.getParserFunction(columns[i].format));\n }\n if (typeof (columns[i].format) === 'string') {\n var isServerRendered = 'isServerRendered';\n var isServerDateMap = this.parent[isServerRendered] || this.parent.printModule.isPrintGrid();\n setFormatter(this.locator, columns[i], isServerDateMap);\n }\n else if (!columns[i].format && columns[i].type === 'number') {\n columns[i].setParser(fmtr.getParserFunction({ format: 'n2' }));\n }\n }\n };\n /** @hidden */\n // tslint:disable-next-line:max-func-body-length\n Render.prototype.dataManagerSuccess = function (e, args) {\n var _this = this;\n var gObj = this.parent;\n this.contentRenderer = this.renderer.getRenderer(RenderType.Content);\n this.headerRenderer = this.renderer.getRenderer(RenderType.Header);\n e.actionArgs = args;\n var isInfiniteDelete = this.parent.enableInfiniteScrolling && !this.parent.infiniteScrollSettings.enableCache\n && (args.requestType === 'delete' || (args.requestType === 'save' && this.parent.infiniteScrollModule.requestType === 'add'));\n // tslint:disable-next-line:max-func-body-length\n gObj.trigger(events.beforeDataBound, e, function (dataArgs) {\n if (dataArgs.cancel) {\n return;\n }\n dataArgs.result = isNullOrUndefined(dataArgs.result) ? [] : dataArgs.result;\n var len = Object.keys(dataArgs.result).length;\n if (_this.parent.isDestroyed) {\n return;\n }\n if ((!gObj.getColumns().length && !len) && !(gObj.columns.length && gObj.columns[0] instanceof Column)) {\n gObj.hideSpinner();\n return;\n }\n if (_this.isInfiniteEnd(args) && !len) {\n _this.parent.notify(events.infiniteEditHandler, { e: args, result: e.result, count: e.count, agg: e.aggregates });\n return;\n }\n _this.parent.isEdit = false;\n _this.parent.notify(events.editReset, {});\n _this.parent.notify(events.tooltipDestroy, {});\n _this.contentRenderer.prevCurrentView = _this.parent.currentViewData.slice();\n gObj.currentViewData = dataArgs.result;\n gObj.notify(events.refreshInfiniteCurrentViewData, { args: args, data: dataArgs.result });\n if (isBlazor() && gObj.filterSettings.type === 'FilterBar'\n && (isNullOrUndefined(gObj.currentViewData) ||\n (!isNullOrUndefined(gObj.currentViewData) && !gObj.currentViewData.length))) {\n var gridColumns = gObj.getColumns();\n for (var i = 0; i < gridColumns.length; i++) {\n if (gridColumns[i].filterTemplate) {\n var tempID = gObj.element.id + gridColumns[i].uid + 'filterTemplate';\n resetBlazorTemplate(tempID, 'FilterTemplate');\n var fieldName = gridColumns[i].field;\n var filteredColumns = gObj.filterSettings.columns;\n for (var k = 0; k < filteredColumns.length; k++) {\n if (fieldName === filteredColumns[k].field) {\n blazorTemplates[tempID][0][fieldName] = filteredColumns[k].value;\n }\n }\n updateBlazorTemplate(tempID, 'FilterTemplate', gridColumns[i], false);\n }\n }\n }\n if (!len && dataArgs.count && gObj.allowPaging && args && args.requestType !== 'delete') {\n if (_this.parent.groupSettings.enableLazyLoading\n && (args.requestType === 'grouping' || args.requestType === 'ungrouping')) {\n _this.parent.notify(events.groupComplete, args);\n }\n gObj.prevPageMoving = true;\n gObj.pageSettings.totalRecordsCount = dataArgs.count;\n if (args.requestType !== 'paging') {\n gObj.pageSettings.currentPage = Math.ceil(dataArgs.count / gObj.pageSettings.pageSize);\n }\n gObj.dataBind();\n return;\n }\n if ((!gObj.getColumns().length && len || !_this.isLayoutRendered) && !isGroupAdaptive(gObj)) {\n _this.updatesOnInitialRender(dataArgs);\n }\n if (!_this.isColTypeDef && gObj.getCurrentViewRecords()) {\n if (_this.data.dataManager.dataSource.offline && gObj.dataSource.length) {\n _this.updateColumnType(gObj.dataSource[0]);\n }\n else {\n _this.updateColumnType(gObj.getCurrentViewRecords()[0]);\n }\n }\n if (!_this.parent.isInitialLoad && _this.parent.groupSettings.disablePageWiseAggregates &&\n !_this.parent.groupSettings.columns.length) {\n dataArgs.result = _this.parent.dataSource instanceof Array ? _this.parent.dataSource : _this.parent.currentViewData;\n }\n _this.parent.notify(events.dataReady, extend({ count: dataArgs.count, result: dataArgs.result, aggregates: dataArgs.aggregates }, args));\n if ((gObj.groupSettings.columns.length || (args && args.requestType === 'ungrouping'))\n && (args && args.requestType !== 'filtering')) {\n _this.headerRenderer.refreshUI();\n }\n if (len) {\n if (isGroupAdaptive(gObj)) {\n var content = 'content';\n args.scrollTop = { top: _this.contentRenderer[content].scrollTop };\n }\n if (!isInfiniteDelete) {\n if (_this.parent.enableImmutableMode) {\n _this.contentRenderer.immutableModeRendering(args);\n }\n else {\n _this.contentRenderer.refreshContentRows(args);\n }\n }\n else {\n _this.parent.notify(events.infiniteEditHandler, { e: args, result: e.result, count: e.count, agg: e.aggregates });\n }\n }\n else {\n if (!gObj.getColumns().length) {\n gObj.element.innerHTML = '';\n alert(_this.l10n.getConstant('EmptyDataSourceError')); //ToDO: change this alert as dialog\n return;\n }\n _this.contentRenderer.setRowElements([]);\n _this.contentRenderer.setRowObjects([]);\n _this.ariaService.setBusy(_this.parent.getContent().querySelector('.e-content'), false);\n _this.renderEmptyRow();\n if (args) {\n var action = (args.requestType || '').toLowerCase() + '-complete';\n _this.parent.notify(action, args);\n if (args.requestType === 'batchsave') {\n args.cancel = false;\n args.rows = [];\n args.isFrozen = _this.parent.getFrozenColumns() !== 0 && !args.isFrozen;\n _this.parent.trigger(events.actionComplete, args);\n }\n }\n _this.parent.hideSpinner();\n }\n _this.parent.notify(events.toolbarRefresh, {});\n _this.setRowCount(_this.parent.getCurrentViewRecords().length);\n _this.parent.getDataModule().isQueryInvokedFromData = false;\n });\n };\n /** @hidden */\n Render.prototype.dataManagerFailure = function (e, args) {\n this.ariaService.setOptions(this.parent.getContent().querySelector('.e-content'), { busy: false, invalid: true });\n this.setRowCount(1);\n this.parent.trigger(events.actionFailure, { error: e });\n this.parent.hideSpinner();\n if (args.requestType === 'save' || args.requestType === 'delete'\n || args.name === 'bulk-save') {\n return;\n }\n this.parent.currentViewData = [];\n this.renderEmptyRow();\n this.parent.log('actionfailure', { error: e });\n };\n Render.prototype.setRowCount = function (dataRowCount) {\n var gObj = this.parent;\n this.ariaService.setOptions(this.parent.getHeaderTable(), {\n rowcount: dataRowCount ? dataRowCount.toString() : '1'\n });\n };\n Render.prototype.isInfiniteEnd = function (args) {\n return this.parent.enableInfiniteScrolling && !this.parent.infiniteScrollSettings.enableCache && args.requestType === 'delete';\n };\n Render.prototype.updatesOnInitialRender = function (e) {\n this.isLayoutRendered = true;\n if (this.parent.columns.length < 1) {\n this.buildColumns(e.result[0]);\n }\n prepareColumns(this.parent.columns, null, this.parent);\n this.headerRenderer.renderTable();\n this.contentRenderer.renderTable();\n this.parent.isAutoGen = true;\n this.parent.notify(events.autoCol, {});\n };\n Render.prototype.iterateComplexColumns = function (obj, field, split) {\n var keys = Object.keys(obj);\n for (var i = 0; i < keys.length; i++) {\n var childKeys = typeof obj[keys[i]] === 'object' && obj[keys[i]] && !(obj[keys[i]] instanceof Date) ?\n Object.keys(obj[keys[i]]) : [];\n if (childKeys.length) {\n this.iterateComplexColumns(obj[keys[i]], field + (keys[i] + '.'), split);\n }\n else {\n split[this.counter] = field + keys[i];\n this.counter++;\n }\n }\n };\n Render.prototype.buildColumns = function (record) {\n var cols = [];\n var complexCols = {};\n this.iterateComplexColumns(record, '', complexCols);\n var columns = Object.keys(complexCols).filter(function (e) { return complexCols[e] !== 'BlazId'; }).\n map(function (field) { return complexCols[field]; });\n for (var i = 0, len = columns.length; i < len; i++) {\n cols[i] = { 'field': columns[i] };\n if (this.parent.enableColumnVirtualization) {\n cols[i].width = !isNullOrUndefined(cols[i].width) ? cols[i].width : 200;\n }\n }\n this.parent.setProperties({ 'columns': cols }, true);\n };\n Render.prototype.instantiateRenderer = function () {\n this.renderer.addRenderer(RenderType.Header, new HeaderRender(this.parent, this.locator));\n this.renderer.addRenderer(RenderType.Content, new ContentRender(this.parent, this.locator));\n var cellrender = this.locator.getService('cellRendererFactory');\n cellrender.addCellRenderer(CellType.Header, new HeaderCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.Data, new CellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.StackedHeader, new StackedHeaderCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.Indent, new IndentCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.GroupCaption, new GroupCaptionCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.GroupCaptionEmpty, new GroupCaptionEmptyCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.Expand, new ExpandCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.HeaderIndent, new HeaderIndentCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.StackedHeader, new StackedHeaderCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.DetailHeader, new DetailHeaderIndentCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.RowDragHIcon, new RowDragDropHeaderRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.DetailExpand, new DetailExpandCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.DetailFooterIntent, new IndentCellRenderer(this.parent, this.locator));\n cellrender.addCellRenderer(CellType.RowDragIcon, new RowDragDropRenderer(this.parent, this.locator));\n };\n Render.prototype.addEventListener = function () {\n var _this = this;\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.initialLoad, this.instantiateRenderer, this);\n this.parent.on('refreshdataSource', this.dataManagerSuccess, this);\n this.parent.on(events.modelChanged, this.refresh, this);\n this.parent.on(events.refreshComplete, this.refreshComplete, this);\n this.parent.on(events.bulkSave, this.sendBulkRequest, this);\n this.parent.on(events.showEmptyGrid, function () { _this.emptyGrid = true; }, this);\n this.parent.on(events.autoCol, this.dynamicColumnChange, this);\n };\n /** @hidden */\n Render.prototype.validateGroupRecords = function (e) {\n var _this = this;\n var index = e.result.length - 1;\n if (index < 0) {\n return Promise.resolve(e);\n }\n var group0 = e.result[0];\n var groupN = e.result[index];\n var predicate = [];\n var addWhere = function (input) {\n var groups = [group0, groupN];\n for (var i = 0; i < groups.length; i++) {\n predicate.push(new Predicate('field', '==', groups[i].field).and(_this.getPredicate('key', 'equal', groups[i].key)));\n }\n input.where(Predicate.or(predicate));\n };\n var query = new Query();\n addWhere(query);\n var curDm = new DataManager(e.result);\n var curFilter = curDm.executeLocal(query);\n var newQuery = this.data.generateQuery(true);\n var rPredicate = [];\n if (this.data.isRemote() || isBlazor()) {\n var groups = [group0, groupN];\n for (var i = 0; i < groups.length; i++) {\n rPredicate.push(this.getPredicate(groups[i].field, 'equal', groups[i].key));\n }\n newQuery.where(Predicate.or(rPredicate));\n }\n else {\n addWhere(newQuery);\n }\n var deferred = new Deferred();\n this.data.getData({}, newQuery).then(function (r) {\n _this.updateGroupInfo(curFilter, r.result);\n deferred.resolve(e);\n }).catch(function (e) { return deferred.reject(e); });\n return deferred.promise;\n };\n Render.prototype.getPredicate = function (key, operator, value) {\n if (value instanceof Date) {\n return getDatePredicate({ field: key, operator: operator, value: value });\n }\n return new Predicate(key, operator, value);\n };\n Render.prototype.updateGroupInfo = function (current, untouched) {\n var dm = new DataManager(untouched);\n var elements = current;\n for (var i = 0; i < elements.length; i++) {\n var uGroup = dm.executeLocal(new Query()\n .where(new Predicate('field', '==', elements[i].field).and(this.getPredicate('key', 'equal', elements[i].key))))[0];\n elements[i].count = uGroup.count;\n var itemGroup = elements[i].items;\n var uGroupItem = uGroup.items;\n if (itemGroup.GroupGuid) {\n elements[i].items = this.updateGroupInfo(elements[i].items, uGroup.items);\n }\n var rows = this.parent.aggregates;\n for (var j = 0; j < rows.length; j++) {\n var row = rows[j];\n for (var k = 0; k < row.columns.length; k++) {\n var types = row.columns[k].type instanceof Array ? (row.columns[k].type) :\n [(row.columns[k].type)];\n for (var l = 0; l < types.length; l++) {\n var key = row.columns[k].field + ' - ' + types[l].toLowerCase();\n var data = itemGroup.level ? uGroupItem.records : uGroup.items;\n var context = this.parent;\n if (types[l] === 'Custom') {\n var data_1 = itemGroup.level ? uGroupItem : uGroup;\n elements[i].aggregates[key] = row.columns[k].customAggregate ?\n row.columns[k].customAggregate\n .call(context, data_1, row.columns[k]) : '';\n }\n else {\n elements[i].aggregates[key] = DataUtil.aggregates[types[l].toLowerCase()](data, row.columns[k].field);\n }\n }\n }\n }\n }\n return current;\n };\n return Render;\n}());\nexport { Render };\n","import { isNullOrUndefined, getEnumValue } from '@syncfusion/ej2-base';\nimport { CellType } from '../base/enum';\n/**\n * CellRendererFactory\n * @hidden\n */\nvar CellRendererFactory = /** @class */ (function () {\n function CellRendererFactory() {\n this.cellRenderMap = {};\n }\n CellRendererFactory.prototype.addCellRenderer = function (name, type) {\n name = typeof name === 'string' ? name : getEnumValue(CellType, name);\n if (isNullOrUndefined(this.cellRenderMap[name])) {\n this.cellRenderMap[name] = type;\n }\n };\n CellRendererFactory.prototype.getCellRenderer = function (name) {\n name = typeof name === 'string' ? name : getEnumValue(CellType, name);\n if (isNullOrUndefined(this.cellRenderMap[name])) {\n throw \"The cellRenderer \" + name + \" is not found\";\n }\n else {\n return this.cellRenderMap[name];\n }\n };\n return CellRendererFactory;\n}());\nexport { CellRendererFactory };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { ResponsiveDialogRenderer } from '../renderer/responsive-dialog-renderer';\n/**\n * ServiceLocator\n * @hidden\n */\nvar ServiceLocator = /** @class */ (function () {\n function ServiceLocator() {\n this.services = {};\n }\n ServiceLocator.prototype.register = function (name, type) {\n if (isNullOrUndefined(this.services[name])) {\n this.services[name] = type;\n }\n };\n ServiceLocator.prototype.getService = function (name) {\n if (isNullOrUndefined(this.services[name])) {\n throw \"The service \" + name + \" is not registered\";\n }\n return this.services[name];\n };\n ServiceLocator.prototype.registerAdaptiveService = function (type, isAdaptiveUI, action) {\n if (isAdaptiveUI) {\n type.responsiveDialogRenderer = new ResponsiveDialogRenderer(type.parent, type.serviceLocator);\n type.responsiveDialogRenderer.action = action;\n }\n else {\n if (type.responsiveDialogRenderer) {\n type.responsiveDialogRenderer.removeEventListener();\n type.responsiveDialogRenderer = undefined;\n }\n }\n };\n return ServiceLocator;\n}());\nexport { ServiceLocator };\n","import { isNullOrUndefined, getEnumValue } from '@syncfusion/ej2-base';\nimport { RenderType } from '../base/enum';\n/**\n * RendererFactory\n * @hidden\n */\nvar RendererFactory = /** @class */ (function () {\n function RendererFactory() {\n this.rendererMap = {};\n }\n RendererFactory.prototype.addRenderer = function (name, type) {\n var rName = getEnumValue(RenderType, name);\n if (isNullOrUndefined(this.rendererMap[rName])) {\n this.rendererMap[rName] = type;\n }\n };\n RendererFactory.prototype.getRenderer = function (name) {\n var rName = getEnumValue(RenderType, name);\n if (isNullOrUndefined(this.rendererMap[rName])) {\n throw \"The renderer \" + rName + \" is not found\";\n }\n else {\n return this.rendererMap[rName];\n }\n };\n return RendererFactory;\n}());\nexport { RendererFactory };\n","import { isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { formatUnit } from '@syncfusion/ej2-base';\nimport { columnWidthChanged, preventFrozenScrollRefresh } from '../base/constant';\nimport { Column } from '../models/column';\nimport { parentsUntil, ispercentageWidth, getScrollBarWidth } from '../base/util';\n/**\n * ColumnWidthService\n * @hidden\n */\nvar ColumnWidthService = /** @class */ (function () {\n function ColumnWidthService(parent) {\n this.parent = parent;\n }\n ColumnWidthService.prototype.setWidthToColumns = function () {\n var i = 0;\n var indexes = this.parent.getColumnIndexesInView();\n var wFlag = true;\n var totalColumnsWidth = 0;\n if (this.parent.allowGrouping) {\n for (var len = this.parent.groupSettings.columns.length; i < len; i++) {\n if (this.parent.enableColumnVirtualization && indexes.indexOf(i) === -1) {\n wFlag = false;\n continue;\n }\n this.setColumnWidth(new Column({ width: '30px' }), i);\n }\n }\n if (this.parent.detailTemplate || this.parent.childGrid) {\n this.setColumnWidth(new Column({ width: '30px' }), i);\n i++;\n }\n if (this.parent.isRowDragable() && this.parent.getFrozenMode() !== 'Right') {\n this.setColumnWidth(new Column({ width: '30px' }), i);\n i++;\n }\n var columns = this.parent.getColumns();\n for (var j = 0; j < columns.length; j++) {\n this.setColumnWidth(columns[j], wFlag && this.parent.enableColumnVirtualization ? undefined : j + i);\n }\n if (this.parent.isRowDragable() && this.parent.getFrozenMode() === 'Right') {\n this.setColumnWidth(new Column({ width: '30px' }), columns.length);\n }\n totalColumnsWidth = this.getTableWidth(this.parent.getColumns());\n if (this.parent.width !== 'auto' && this.parent.width.toString().indexOf('%') === -1) {\n this.setMinwidthBycalculation(totalColumnsWidth);\n }\n };\n ColumnWidthService.prototype.setMinwidthBycalculation = function (tWidth) {\n var difference = 0;\n var collection = this.parent.getColumns().filter(function (a) {\n return isNullOrUndefined(a.width) || a.width === 'auto';\n });\n if (collection.length) {\n if (!isNullOrUndefined(this.parent.width) && this.parent.width !== 'auto' &&\n typeof (this.parent.width) === 'string' && this.parent.width.indexOf('%') === -1) {\n difference = (typeof this.parent.width === 'string' ? parseInt(this.parent.width, 10) : this.parent.width) - tWidth;\n }\n else {\n difference = this.parent.element.getBoundingClientRect().width - tWidth;\n }\n var tmWidth = 0;\n for (var _i = 0, collection_1 = collection; _i < collection_1.length; _i++) {\n var cols = collection_1[_i];\n tmWidth += !isNullOrUndefined(cols.minWidth) ?\n ((typeof cols.minWidth === 'string' ? parseInt(cols.minWidth, 10) : cols.minWidth)) : 0;\n }\n for (var i = 0; i < collection.length; i++) {\n if (tWidth === 0 && this.parent.allowResizing && this.isWidthUndefined() && (i !== collection.length - 1)) {\n this.setUndefinedColumnWidth(collection);\n }\n if (tWidth !== 0 && difference < tmWidth) {\n this.setWidth(collection[i].minWidth, this.parent.getColumnIndexByField(collection[i].field));\n }\n else if (tWidth !== 0 && difference > tmWidth) {\n this.setWidth('', this.parent.getColumnIndexByField(collection[i].field) + this.parent.getIndentCount(), true);\n }\n }\n }\n };\n ColumnWidthService.prototype.setUndefinedColumnWidth = function (collection) {\n for (var k = 0; k < collection.length; k++) {\n if (k !== collection.length - 1) {\n collection[k].width = 200;\n this.setWidth(200, this.parent.getColumnIndexByField(collection[k].field));\n }\n }\n };\n ColumnWidthService.prototype.setColumnWidth = function (column, index, module) {\n if (this.parent.getColumns().length < 1) {\n return;\n }\n var columnIndex = isNullOrUndefined(index) ? this.parent.getNormalizedColumnIndex(column.uid) : index;\n var cWidth = this.getWidth(column);\n var tgridWidth = this.getTableWidth(this.parent.getColumns());\n if (cWidth !== null) {\n this.setWidth(cWidth, columnIndex);\n if (this.parent.width !== 'auto' && this.parent.width.toString().indexOf('%') === -1) {\n this.setMinwidthBycalculation(tgridWidth);\n }\n if ((this.parent.allowResizing && module === 'resize') || (this.parent.getFrozenColumns() && this.parent.allowResizing)) {\n this.setWidthToTable();\n }\n this.parent.notify(columnWidthChanged, { index: columnIndex, width: cWidth, column: column, module: module });\n }\n };\n ColumnWidthService.prototype.setWidth = function (width, index, clear) {\n if (this.parent.groupSettings.columns.length > index && ispercentageWidth(this.parent)) {\n var elementWidth = this.parent.element.offsetWidth;\n width = (30 / elementWidth * 100).toFixed(1) + '%';\n }\n var header = this.parent.getHeaderTable();\n var content = this.parent.getContentTable();\n var fWidth = formatUnit(width);\n var headerCol;\n var frzCols = this.parent.getFrozenColumns();\n var isDraggable = this.parent.isRowDragable();\n frzCols = frzCols && isDraggable ? frzCols + 1 : frzCols;\n var mHdr = this.parent.getHeaderContent().querySelector('.e-movableheader');\n var mCont = this.parent.getContent().querySelector('.e-movablecontent');\n var freezeLeft = this.parent.getFrozenLeftColumnsCount();\n var freezeRight = this.parent.getFrozenRightColumnsCount();\n var movableCount = this.parent.getMovableColumnsCount();\n var isColFrozen = freezeLeft !== 0 || freezeRight !== 0;\n if (frzCols && index >= frzCols && mHdr && mHdr.querySelector('colgroup')) {\n headerCol = mHdr.querySelector('colgroup').children[index - frzCols];\n }\n else if (this.parent.enableColumnVirtualization && frzCols && this.parent.contentModule.isXaxis()\n && mHdr.scrollLeft > 0) {\n var colGroup = mHdr.querySelector('colgroup');\n headerCol = colGroup.children[(colGroup.children.length - 1) - index];\n }\n else if (isColFrozen) {\n var target = void 0;\n if (freezeLeft && !freezeRight) {\n index = isDraggable ? index - 1 : index;\n target = index < freezeLeft ? header : mHdr;\n }\n else if (!freezeLeft && freezeRight) {\n target = index >= movableCount ? header : mHdr;\n }\n else if (freezeLeft && freezeRight) {\n index = isDraggable ? index - 1 : index;\n var frHdr = this.parent.getFrozenRightHeader();\n target = index < freezeLeft ? header : index < (freezeLeft + movableCount) ? mHdr : frHdr;\n }\n headerCol = this.getColumnLevelFrozenColgroup(index, freezeLeft, movableCount, target);\n if (!headerCol) {\n return;\n }\n }\n else {\n headerCol = header.querySelector('colgroup').children[index];\n }\n if (headerCol && !clear) {\n headerCol.style.width = fWidth;\n }\n else if (headerCol && clear) {\n headerCol.style.width = '';\n }\n var contentCol;\n if (frzCols && index >= frzCols) {\n contentCol = this.parent.getContent().querySelector('.e-movablecontent')\n .querySelector('colgroup').children[index - frzCols];\n }\n else if (this.parent.enableColumnVirtualization && frzCols && this.parent.contentModule.isXaxis()\n && mCont.scrollLeft > 0) {\n var colGroup = this.parent.getContent().querySelector('.e-movablecontent')\n .querySelector('colgroup');\n contentCol = colGroup.children[(colGroup.children.length - 1) - index];\n }\n else if (isColFrozen) {\n var target = void 0;\n if (freezeLeft && !freezeRight) {\n target = index < freezeLeft ? content : mCont;\n }\n if (!freezeLeft && freezeRight) {\n target = index >= movableCount ? content : mCont;\n }\n if (freezeLeft && freezeRight) {\n var frCont = this.parent.getContent().querySelector('.e-frozen-right-content');\n target = index < freezeLeft ? content : index < (freezeLeft + movableCount) ? mCont : frCont;\n }\n contentCol = this.getColumnLevelFrozenColgroup(index, freezeLeft, movableCount, target);\n }\n else {\n contentCol = content.querySelector('colgroup').children[index];\n }\n if (contentCol && !clear) {\n contentCol.style.width = fWidth;\n }\n else if (contentCol && clear) {\n contentCol.style.width = '';\n }\n var edit = this.parent.element.querySelectorAll('.e-table.e-inline-edit');\n var editTableCol = [];\n for (var i = 0; i < edit.length; i++) {\n if (parentsUntil(edit[i], 'e-grid').id === this.parent.element.id) {\n for (var j = 0; j < edit[i].querySelector('colgroup').children.length; j++) {\n editTableCol.push(edit[i].querySelector('colgroup').children[j]);\n }\n }\n }\n if (edit.length && editTableCol.length) {\n editTableCol[index].style.width = fWidth;\n }\n if (this.parent.isFrozenGrid()) {\n this.refreshFrozenScrollbar();\n }\n };\n ColumnWidthService.prototype.getColumnLevelFrozenColgroup = function (index, left, movable, ele) {\n if (!ele || !ele.querySelector('colgroup')) {\n return null;\n }\n var columns = this.parent.getColumns();\n var isDrag = this.parent.isRowDragable();\n var frzMode = this.parent.getFrozenMode();\n var headerCol;\n var colGroup = [].slice.call(ele.querySelector('colgroup').children);\n if (frzMode === 'Right' && isDrag && index === (movable + this.parent.getFrozenRightColumnsCount())) {\n headerCol = colGroup[colGroup.length - 1];\n }\n else if (isDrag && index === -1) {\n headerCol = colGroup[0];\n }\n else if (columns[index].freeze === 'Left') {\n headerCol = colGroup[isDrag ? (index + 1) : index];\n }\n else if (columns[index].freeze === 'Right') {\n headerCol = colGroup[index - (left + movable)];\n }\n else {\n headerCol = colGroup[index - left];\n }\n return headerCol;\n };\n /** @hidden */\n ColumnWidthService.prototype.refreshFrozenScrollbar = function () {\n var args = { cancel: false };\n this.parent.notify(preventFrozenScrollRefresh, args);\n if (args.cancel) {\n return;\n }\n var scrollWidth = getScrollBarWidth();\n var frozenScrollbar = this.parent.element.querySelector('.e-frozenscrollbar');\n var movableScrollbar = this.parent.element.querySelector('.e-movablescrollbar');\n var frozencontent = this.parent.getContent().querySelector('.e-frozencontent');\n var movableContent = this.parent.getContent().querySelector('.e-movablecontent');\n var frozenWidth = frozencontent.firstElementChild.getBoundingClientRect().width;\n var movableWidth = movableContent.firstElementChild.getBoundingClientRect().width;\n if (this.parent.getFrozenMode() === 'Right') {\n frozenWidth = frozenWidth + scrollWidth;\n }\n frozenScrollbar.style.width = frozenWidth + 'px';\n if (this.parent.getFrozenMode() === 'Left-Right') {\n var frozenRightScrollbar = this.parent.element.querySelector('.e-frozen-right-scrollbar');\n var frozenRightWidth = this.parent.getContent().querySelector('.e-frozen-right-content')\n .firstElementChild.getBoundingClientRect().width;\n if (this.parent.height !== 'auto') {\n frozenRightWidth = frozenRightWidth + scrollWidth;\n }\n frozenRightScrollbar.style.width = frozenRightWidth + 'px';\n }\n else {\n if (this.parent.enableColumnVirtualization) {\n var placeHolder = this.parent.getMovableVirtualContent().querySelector('.e-virtualtrack');\n if (placeHolder) {\n movableWidth = placeHolder.scrollWidth;\n }\n }\n if (this.parent.getFrozenMode() !== 'Right' && this.parent.height !== 'auto') {\n movableWidth = movableWidth + scrollWidth;\n }\n }\n movableScrollbar.firstElementChild.style.width = movableWidth + 'px';\n };\n ColumnWidthService.prototype.getSiblingsHeight = function (element) {\n var previous = this.getHeightFromDirection(element, 'previous');\n var next = this.getHeightFromDirection(element, 'next');\n return previous + next;\n };\n ColumnWidthService.prototype.getHeightFromDirection = function (element, direction) {\n var sibling = element[direction + 'ElementSibling'];\n var result = 0;\n var classList = ['e-gridheader', 'e-gridfooter', 'e-groupdroparea', 'e-gridpager', 'e-toolbar'];\n while (sibling) {\n if (classList.some(function (value) { return sibling.classList.contains(value); })) {\n result += sibling.offsetHeight;\n }\n sibling = sibling[direction + 'ElementSibling'];\n }\n return result;\n };\n ColumnWidthService.prototype.isWidthUndefined = function () {\n var isWidUndefCount = this.parent.getColumns().filter(function (col) {\n return isNullOrUndefined(col.width) && isNullOrUndefined(col.minWidth);\n }).length;\n return (this.parent.getColumns().length === isWidUndefCount);\n };\n ColumnWidthService.prototype.getWidth = function (column) {\n if (isNullOrUndefined(column.width) && this.parent.allowResizing\n && isNullOrUndefined(column.minWidth) && !this.isWidthUndefined()) {\n column.width = 200;\n }\n if (this.parent.isFrozenGrid() && isNullOrUndefined(column.width) &&\n (column.getFreezeTableName() === 'frozen-left' || column.getFreezeTableName() === 'frozen-right')) {\n column.width = 200;\n }\n if (!column.width) {\n return null;\n }\n var width = parseInt(column.width.toString(), 10);\n if (column.minWidth && width < parseInt(column.minWidth.toString(), 10)) {\n return column.minWidth;\n }\n else if ((column.maxWidth && width > parseInt(column.maxWidth.toString(), 10))) {\n return column.maxWidth;\n }\n else {\n return column.width;\n }\n };\n ColumnWidthService.prototype.getTableWidth = function (columns) {\n var tWidth = 0;\n for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {\n var column = columns_1[_i];\n var cWidth = this.getWidth(column);\n if (column.width === 'auto') {\n cWidth = 0;\n }\n if (column.visible !== false && cWidth !== null) {\n tWidth += parseInt(cWidth.toString(), 10);\n }\n }\n return tWidth;\n };\n ColumnWidthService.prototype.calcMovableOrFreezeColWidth = function (tableType) {\n var columns = this.parent.getColumns().slice();\n var left = this.parent.getFrozenLeftColumnsCount() || this.parent.getFrozenColumns();\n var movable = this.parent.getMovableColumnsCount();\n var right = this.parent.getFrozenRightColumnsCount();\n if (tableType === 'movable') {\n if (right) {\n columns.splice(left + movable, columns.length);\n }\n if (left) {\n columns.splice(0, left);\n }\n }\n else if (tableType === 'freeze-left') {\n columns.splice(left, columns.length);\n }\n else if (tableType === 'freeze-right') {\n columns.splice(0, left + movable);\n }\n return formatUnit(this.getTableWidth(columns));\n };\n ColumnWidthService.prototype.setWidthToFrozenRightTable = function () {\n var freezeWidth = this.calcMovableOrFreezeColWidth('freeze-right');\n freezeWidth = this.isAutoResize() ? '100%' : freezeWidth;\n var headerTbl = this.parent.getHeaderContent().querySelector('.e-frozen-right-header').querySelector('.e-table');\n var cntTbl = this.parent.getContent().querySelector('.e-frozen-right-content').querySelector('.e-table');\n headerTbl.style.width = freezeWidth;\n cntTbl.style.width = freezeWidth;\n };\n ColumnWidthService.prototype.setWidthToFrozenLeftTable = function () {\n var freezeWidth = this.calcMovableOrFreezeColWidth('freeze-left');\n freezeWidth = this.isAutoResize() ? '100%' : freezeWidth;\n this.parent.getHeaderTable().style.width = freezeWidth;\n this.parent.getContentTable().style.width = freezeWidth;\n };\n ColumnWidthService.prototype.setWidthToMovableTable = function () {\n var movableWidth = '';\n var isColUndefined = this.parent.getColumns().filter(function (a) { return isNullOrUndefined(a.width); }).length >= 1;\n var isWidthAuto = this.parent.getColumns().filter(function (a) { return (a.width === 'auto'); }).length >= 1;\n if (typeof this.parent.width === 'number' && !isColUndefined && !isWidthAuto) {\n movableWidth = formatUnit(this.parent.width - parseInt(this.calcMovableOrFreezeColWidth('freeze').split('px')[0], 10) - 5);\n }\n else if (!isColUndefined && !isWidthAuto) {\n movableWidth = this.calcMovableOrFreezeColWidth('movable');\n }\n movableWidth = this.isAutoResize() ? '100%' : movableWidth;\n if (this.parent.getHeaderContent().querySelector('.e-movableheader').firstElementChild) {\n this.parent.getHeaderContent().querySelector('.e-movableheader').firstElementChild.style.width\n = movableWidth;\n }\n this.parent.getContent().querySelector('.e-movablecontent').firstElementChild.style.width =\n movableWidth;\n };\n ColumnWidthService.prototype.setWidthToFrozenEditTable = function () {\n var freezeWidth = this.calcMovableOrFreezeColWidth('freeze');\n freezeWidth = this.isAutoResize() ? '100%' : freezeWidth;\n this.parent.element.querySelectorAll('.e-table.e-inline-edit')[0].style.width = freezeWidth;\n };\n ColumnWidthService.prototype.setWidthToMovableEditTable = function () {\n var movableWidth = this.calcMovableOrFreezeColWidth('movable');\n movableWidth = this.isAutoResize() ? '100%' : movableWidth;\n this.parent.element.querySelectorAll('.e-table.e-inline-edit')[1].style.width = movableWidth;\n };\n ColumnWidthService.prototype.setWidthToTable = function () {\n var tWidth = formatUnit(this.getTableWidth(this.parent.getColumns()));\n if (this.parent.isFrozenGrid()) {\n if (this.parent.getFrozenColumns() || this.parent.getFrozenLeftColumnsCount()) {\n this.setWidthToFrozenLeftTable();\n }\n this.setWidthToMovableTable();\n if (this.parent.getFrozenRightColumnsCount()) {\n this.setWidthToFrozenRightTable();\n }\n }\n else {\n if (this.parent.detailTemplate || this.parent.childGrid) {\n this.setColumnWidth(new Column({ width: '30px' }));\n }\n tWidth = this.isAutoResize() ? '100%' : tWidth;\n this.parent.getHeaderTable().style.width = tWidth;\n this.parent.getContentTable().style.width = tWidth;\n }\n var edit = this.parent.element.querySelector('.e-table.e-inline-edit');\n if (edit && this.parent.getFrozenColumns()) {\n this.setWidthToFrozenEditTable();\n this.setWidthToMovableEditTable();\n }\n else if (edit) {\n edit.style.width = tWidth;\n }\n };\n ColumnWidthService.prototype.isAutoResize = function () {\n return this.parent.allowResizing && this.parent.resizeSettings.mode === 'Auto';\n };\n return ColumnWidthService;\n}());\nexport { ColumnWidthService };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty } from '@syncfusion/ej2-base';\n/**\n * Configures the paging behavior of the Grid.\n */\nvar PageSettings = /** @class */ (function (_super) {\n __extends(PageSettings, _super);\n function PageSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(12)\n ], PageSettings.prototype, \"pageSize\", void 0);\n __decorate([\n Property(8)\n ], PageSettings.prototype, \"pageCount\", void 0);\n __decorate([\n Property(1)\n ], PageSettings.prototype, \"currentPage\", void 0);\n __decorate([\n Property()\n ], PageSettings.prototype, \"totalRecordsCount\", void 0);\n __decorate([\n Property(false)\n ], PageSettings.prototype, \"enableQueryString\", void 0);\n __decorate([\n Property(false)\n ], PageSettings.prototype, \"pageSizes\", void 0);\n __decorate([\n Property(null)\n ], PageSettings.prototype, \"template\", void 0);\n return PageSettings;\n}(ChildProperty));\nexport { PageSettings };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Property, ChildProperty } from '@syncfusion/ej2-base';\n/**\n * Configures the column chooser behavior of the Grid.\n */\nvar ColumnChooserSettings = /** @class */ (function (_super) {\n __extends(ColumnChooserSettings, _super);\n function ColumnChooserSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('startsWith')\n ], ColumnChooserSettings.prototype, \"operator\", void 0);\n return ColumnChooserSettings;\n}(ChildProperty));\nexport { ColumnChooserSettings };\n","var __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nimport { Browser, EventHandler, createElement, isBlazor } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, isUndefined, addClass, removeClass } from '@syncfusion/ej2-base';\nimport { remove, closest, select } from '@syncfusion/ej2-base';\nimport { Query } from '@syncfusion/ej2-data';\nimport { setCssInGridPopUp, getPosition, isGroupAdaptive, addRemoveActiveClasses, removeAddCboxClasses } from '../base/util';\nimport { getCellsByTableName, getCellByColAndRowIndex, parentsUntil, gridActionHandler } from '../base/util';\nimport * as events from '../base/constant';\nimport { RenderType } from '../base/enum';\nimport { iterateExtend, setChecked } from '../base/util';\n/**\n * The `Selection` module is used to handle cell and row selection.\n */\nvar Selection = /** @class */ (function () {\n /**\n * Constructor for the Grid selection module\n * @hidden\n */\n function Selection(parent, selectionSettings, locator) {\n //Internal letiables \n /**\n * @hidden\n */\n this.selectedRowIndexes = [];\n /**\n * @hidden\n */\n this.selectedRowCellIndexes = [];\n /**\n * @hidden\n */\n this.selectedRecords = [];\n /**\n * @hidden\n */\n this.preventFocus = false;\n /**\n * @hidden\n */\n this.selectedColumnsIndexes = [];\n this.checkBoxState = false;\n this.isMultiShiftRequest = false;\n this.isMultiCtrlRequest = false;\n this.enableSelectMultiTouch = false;\n this.clearRowCheck = false;\n this.selectRowCheck = false;\n this.selectedRowState = {};\n this.totalRecordsCount = 0;\n this.chkAllCollec = [];\n this.isCheckedOnAdd = false;\n this.persistSelectedData = [];\n this.needColumnSelection = false;\n this.isCancelDeSelect = false;\n this.isPreventCellSelect = false;\n this.disableUI = false;\n this.isPersisted = false;\n this.cmdKeyPressed = false;\n this.cellselected = false;\n this.isMultiSelection = false;\n this.isAddRowsToSelection = false;\n this.initialRowSelection = false;\n this.isPrevRowSelection = false;\n /**\n * @hidden\n */\n this.autoFillRLselection = true;\n this.parent = parent;\n this.selectionSettings = selectionSettings;\n this.factory = locator.getService('rendererFactory');\n this.focus = locator.getService('focus');\n this.addEventListener();\n this.wireEvents();\n }\n Selection.prototype.initializeSelection = function () {\n this.parent.log('selection_key_missing');\n this.render();\n };\n /**\n * The function used to trigger onActionBegin\n * @return {void}\n * @hidden\n */\n Selection.prototype.onActionBegin = function (args, type) {\n this.parent.trigger(type, this.fDataUpdate(args));\n };\n Selection.prototype.fDataUpdate = function (args) {\n if (!this.isMultiSelection && (!isNullOrUndefined(args.cellIndex) || !isNullOrUndefined(args.rowIndex))) {\n var rowObj = this.getRowObj(isNullOrUndefined(args.rowIndex) ? isNullOrUndefined(args.cellIndex) ?\n this.currentIndex : args.cellIndex.rowIndex : args.rowIndex);\n args.foreignKeyData = rowObj.foreignKeyData;\n }\n return args;\n };\n /**\n * The function used to trigger onActionComplete\n * @return {void}\n * @hidden\n */\n Selection.prototype.onActionComplete = function (args, type) {\n this.parent.trigger(type, this.fDataUpdate(args));\n this.isMultiSelection = false;\n };\n /**\n * For internal use only - Get the module name.\n * @private\n */\n Selection.prototype.getModuleName = function () {\n return 'selection';\n };\n /**\n * To destroy the selection\n * @return {void}\n * @hidden\n */\n Selection.prototype.destroy = function () {\n var gridElement = this.parent.element;\n if (!gridElement || (!gridElement.querySelector('.e-gridheader') && !gridElement.querySelector('.e-gridcontent'))) {\n return;\n }\n this.hidePopUp();\n this.clearSelection();\n this.removeEventListener();\n this.unWireEvents();\n EventHandler.remove(this.parent.getContent(), 'mousedown', this.mouseDownHandler);\n EventHandler.remove(this.parent.getHeaderContent(), 'mousedown', this.mouseDownHandler);\n };\n Selection.prototype.isEditing = function () {\n return (this.parent.editSettings.mode === 'Normal' || (this.parent.editSettings.mode === 'Batch' && this.parent.editModule &&\n this.parent.editModule.formObj && !this.parent.editModule.formObj.validate())) &&\n this.parent.isEdit && !this.parent.isPersistSelection;\n };\n Selection.prototype.getSelectedMovableRow = function (index) {\n var gObj = this.parent;\n if (gObj.isFrozenGrid() && this.parent.getContent().querySelector('.e-movablecontent')) {\n return gObj.getMovableRowByIndex(index);\n }\n return null;\n };\n Selection.prototype.getSelectedFrozenRightRow = function (index) {\n var gObj = this.parent;\n if (gObj.isFrozenGrid() && gObj.getFrozenMode() === 'Left-Right' && gObj.getFrozenRightContent()) {\n return gObj.getFrozenRightRowByIndex(index);\n }\n return null;\n };\n Selection.prototype.getCurrentBatchRecordChanges = function () {\n var gObj = this.parent;\n var added = 'addedRecords';\n var deleted = 'deletedRecords';\n if (gObj.editSettings.mode === 'Batch' && gObj.editModule) {\n var currentRecords = iterateExtend(this.parent.getCurrentViewRecords());\n currentRecords = gObj.editSettings.newRowPosition === 'Bottom' ?\n currentRecords.concat(this.parent.editModule.getBatchChanges()[added]) :\n this.parent.editModule.getBatchChanges()[added].concat(currentRecords);\n var deletedRecords = this.parent.editModule.getBatchChanges()[deleted];\n var primaryKey = this.parent.getPrimaryKeyFieldNames()[0];\n for (var i = 0; i < (deletedRecords.length); i++) {\n for (var j = 0; j < currentRecords.length; j++) {\n if (deletedRecords[i][primaryKey] === currentRecords[j][primaryKey]) {\n currentRecords.splice(j, 1);\n break;\n }\n }\n }\n return currentRecords;\n }\n else {\n return gObj.getCurrentViewRecords();\n }\n };\n /**\n * Selects a row by the given index.\n * @param {number} index - Defines the row index.\n * @param {boolean} isToggle - If set to true, then it toggles the selection.\n * @return {void}\n */\n Selection.prototype.selectRow = function (index, isToggle) {\n if (this.selectedRowIndexes.length && this.selectionSettings.enableSimpleMultiRowSelection) {\n this.addRowsToSelection([index]);\n return;\n }\n var gObj = this.parent;\n var selectedRow = gObj.getRowByIndex(index);\n var selectedMovableRow = this.getSelectedMovableRow(index);\n var selectedFrozenRightRow = this.getSelectedFrozenRightRow(index);\n var selectData;\n var isRemoved = false;\n if (gObj.enableVirtualization && index > -1) {\n this.parent.notify(events.selectVirtualRow, { selectedIndex: index });\n var frozenData = gObj.isFrozenGrid() ? gObj.contentModule.getRowObjectByIndex(index)\n : null;\n if (selectedRow && (gObj.getRowObjectFromUID(selectedRow.getAttribute('data-uid')) || frozenData)) {\n selectData = frozenData ? frozenData : gObj.getRowObjectFromUID(selectedRow.getAttribute('data-uid')).data;\n }\n else {\n var prevSelectedData = this.parent.getSelectedRecords();\n if (prevSelectedData.length > 0) {\n this.clearRowSelection();\n }\n return;\n }\n }\n else {\n selectData = this.getCurrentBatchRecordChanges()[index];\n }\n if (!this.isRowType() || !selectedRow || this.isEditing()) {\n // if (this.isEditing()) {\n // gObj.selectedRowIndex = index;\n // }\n return;\n }\n var isRowSelected = selectedRow.hasAttribute('aria-selected');\n this.activeTarget();\n isToggle = !isToggle ? isToggle :\n !this.selectedRowIndexes.length ? false :\n (this.selectedRowIndexes.length === 1 ? (index === this.selectedRowIndexes[0]) : false);\n var args;\n var can = 'cancel';\n if (!isToggle) {\n var isHybrid = 'isHybrid';\n if (!isBlazor() || this.parent.isJsComponent || this.parent[isHybrid]) {\n args = {\n data: selectData, rowIndex: index, isCtrlPressed: this.isMultiCtrlRequest,\n isShiftPressed: this.isMultiShiftRequest, row: selectedRow,\n previousRow: gObj.getRowByIndex(this.prevRowIndex),\n previousRowIndex: this.prevRowIndex, target: this.actualTarget, cancel: false, isInteracted: this.isInteracted,\n isHeaderCheckboxClicked: this.isHeaderCheckboxClicked\n };\n args = this.addMovableArgs(args, selectedMovableRow, selectedFrozenRightRow);\n }\n else {\n args = {\n data: selectData, rowIndex: index, isCtrlPressed: this.isMultiCtrlRequest,\n isShiftPressed: this.isMultiShiftRequest, previousRowIndex: this.prevRowIndex,\n cancel: false, isInteracted: this.isInteracted, isHeaderCheckboxClicked: this.isHeaderCheckboxClicked\n };\n }\n this.parent.trigger(events.rowSelecting, this.fDataUpdate(args), this.rowSelectingCallBack(args, isToggle, index, selectData, isRemoved, isRowSelected, can));\n }\n else {\n this.rowSelectingCallBack(args, isToggle, index, selectData, isRemoved, isRowSelected, can)(args);\n }\n };\n Selection.prototype.rowSelectingCallBack = function (args, isToggle, index, selectData, isRemoved, isRowSelected, can) {\n var _this = this;\n return function (args) {\n if (!isNullOrUndefined(args) && args[can] === true) {\n _this.disableInteracted();\n return;\n }\n _this.index = index;\n _this.toggle = isToggle;\n _this.data = selectData;\n _this.removed = isRemoved;\n if (isRowSelected && _this.selectionSettings.persistSelection && !(_this.selectionSettings.checkboxMode === 'ResetOnRowClick')) {\n _this.clearSelectedRow(index);\n _this.selectRowCallBack();\n }\n else if (!isRowSelected && _this.selectionSettings.persistSelection &&\n _this.selectionSettings.checkboxMode !== 'ResetOnRowClick') {\n _this.selectRowCallBack();\n }\n if (_this.selectionSettings.checkboxMode === 'ResetOnRowClick') {\n _this.clearSelection();\n }\n if (!_this.selectionSettings.persistSelection || _this.selectionSettings.checkboxMode === 'ResetOnRowClick' ||\n (!_this.parent.isCheckBoxSelection && _this.selectionSettings.persistSelection)) {\n _this.selectRowCheck = true;\n _this.clearRow();\n }\n };\n };\n Selection.prototype.selectRowCallBack = function () {\n var gObj = this.parent;\n var args;\n var index = this.index;\n var isToggle = this.toggle;\n var selectData = this.data;\n var isRemoved = this.removed;\n var selectedRow = gObj.getRowByIndex(index);\n var selectedMovableRow = this.getSelectedMovableRow(index);\n var selectedFrozenRightRow = this.getSelectedFrozenRightRow(index);\n if (!isToggle && !isRemoved) {\n if (this.selectedRowIndexes.indexOf(index) <= -1) {\n this.updateRowSelection(selectedRow, index);\n this.selectMovableRow(selectedMovableRow, selectedFrozenRightRow, index);\n }\n this.selectRowIndex(index);\n }\n if (!isToggle) {\n var isHybrid = 'isHybrid';\n if (!isBlazor() || this.parent.isJsComponent || this.parent[isHybrid]) {\n args = {\n data: selectData, rowIndex: index,\n row: selectedRow, previousRow: gObj.getRowByIndex(this.prevRowIndex),\n previousRowIndex: this.prevRowIndex, target: this.actualTarget, isInteracted: this.isInteracted,\n isHeaderCheckBoxClicked: this.isHeaderCheckboxClicked\n };\n args = this.addMovableArgs(args, selectedMovableRow, selectedFrozenRightRow);\n }\n else {\n args = {\n data: selectData, rowIndex: index,\n row: selectedRow, previousRow: gObj.getRowByIndex(this.prevRowIndex),\n previousRowIndex: this.prevRowIndex, isInteracted: this.isInteracted,\n isHeaderCheckBoxClicked: this.isHeaderCheckboxClicked\n };\n }\n this.onActionComplete(args, events.rowSelected);\n }\n if (isBlazor() && this.parent.isServerRendered && this.parent.enableVirtualization) {\n var interopAdaptor = 'interopAdaptor';\n var invokeMethodAsync = 'invokeMethodAsync';\n this.parent[interopAdaptor][invokeMethodAsync]('MaintainSelection', true, 'normal', [index]);\n }\n this.isInteracted = false;\n this.updateRowProps(index);\n };\n Selection.prototype.selectMovableRow = function (selectedMovableRow, selectedFrozenRightRow, index) {\n if (this.parent.isFrozenGrid()) {\n this.updateRowSelection(selectedMovableRow, index);\n if (this.parent.getFrozenMode() === 'Left-Right' && selectedFrozenRightRow) {\n this.updateRowSelection(selectedFrozenRightRow, index);\n }\n }\n };\n Selection.prototype.addMovableArgs = function (targetObj, mRow, frRow) {\n if (this.parent.isFrozenGrid()) {\n var mObj = { mRow: mRow, previousMovRow: this.parent.getMovableRows()[this.prevRowIndex] };\n var frozenRightRow = 'frozenRightRow';\n var previousFrozenRightRow = 'previousFrozenRightRow';\n if (this.parent.getFrozenMode() === 'Left-Right' && frRow) {\n mObj[frozenRightRow] = frRow;\n mObj[previousFrozenRightRow] = this.parent.getFrozenRightDataRows()[this.prevRowIndex];\n }\n targetObj = __assign({}, targetObj, mObj);\n }\n return targetObj;\n };\n /**\n * Selects a range of rows from start and end row indexes.\n * @param {number} startIndex - Specifies the start row index.\n * @param {number} endIndex - Specifies the end row index.\n * @return {void}\n */\n Selection.prototype.selectRowsByRange = function (startIndex, endIndex) {\n this.selectRows(this.getCollectionFromIndexes(startIndex, endIndex));\n this.selectRowIndex(endIndex);\n };\n /**\n * Selects a collection of rows by index.\n * @param {number[]} rowIndexes - Specifies an array of row indexes.\n * @return {void}\n */\n Selection.prototype.selectRows = function (rowIndexes) {\n var _this = this;\n var gObj = this.parent;\n var rowIndex = !this.isSingleSel() ? rowIndexes[0] : rowIndexes[rowIndexes.length - 1];\n this.isMultiSelection = true;\n var selectedRows = [];\n var foreignKeyData = [];\n var selectedMovableRow = this.getSelectedMovableRow(rowIndex);\n var selectedFrozenRightRow = this.getSelectedFrozenRightRow(rowIndex);\n var can = 'cancel';\n var selectedData = [];\n if (!this.isRowType() || this.isEditing()) {\n return;\n }\n for (var i = 0, len = rowIndexes.length; i < len; i++) {\n var currentRow = this.parent.getDataRows()[rowIndexes[i]];\n var rowObj = this.getRowObj(currentRow);\n if (rowObj) {\n selectedData.push(rowObj.data);\n selectedRows.push(currentRow);\n foreignKeyData.push(rowObj.foreignKeyData);\n }\n }\n var isHybrid = 'isHybrid';\n this.activeTarget();\n var args;\n if (!isBlazor() || this.parent.isJsComponent || this.parent[isHybrid]) {\n args = {\n cancel: false,\n rowIndexes: rowIndexes, row: selectedRows, rowIndex: rowIndex, target: this.actualTarget,\n prevRow: gObj.getRows()[this.prevRowIndex], previousRowIndex: this.prevRowIndex,\n isInteracted: this.isInteracted, isCtrlPressed: this.isMultiCtrlRequest, isShiftPressed: this.isMultiShiftRequest,\n data: selectedData, isHeaderCheckboxClicked: this.isHeaderCheckboxClicked, foreignKeyData: foreignKeyData\n };\n args = this.addMovableArgs(args, selectedMovableRow, selectedFrozenRightRow);\n }\n else {\n args = {\n cancel: false,\n rowIndexes: rowIndexes, rowIndex: rowIndex, previousRowIndex: this.prevRowIndex,\n isCtrlPressed: this.isMultiCtrlRequest, isShiftPressed: this.isMultiShiftRequest,\n data: selectedData, isHeaderCheckboxClicked: this.isHeaderCheckboxClicked, foreignKeyData: foreignKeyData\n };\n }\n this.parent.trigger(events.rowSelecting, this.fDataUpdate(args), function (args) {\n if (!isNullOrUndefined(args) && args[can] === true) {\n _this.disableInteracted();\n return;\n }\n _this.clearRow();\n _this.selectRowIndex(rowIndexes.slice(-1)[0]);\n var selectRowFn = function (index) {\n _this.updateRowSelection(gObj.getRowByIndex(index), index);\n if (gObj.isFrozenGrid()) {\n var rightEle = _this.parent.getFrozenMode() === 'Left-Right' ? gObj.getFrozenRightRowByIndex(index)\n : undefined;\n _this.selectMovableRow(gObj.getMovableRowByIndex(index), rightEle, index);\n }\n _this.updateRowProps(rowIndex);\n };\n if (!_this.isSingleSel()) {\n for (var _i = 0, rowIndexes_1 = rowIndexes; _i < rowIndexes_1.length; _i++) {\n var rowIdx = rowIndexes_1[_i];\n selectRowFn(rowIdx);\n }\n }\n else {\n selectRowFn(rowIndex);\n }\n var isHybrid = 'isHybrid';\n if (!isBlazor() || _this.parent.isJsComponent || _this.parent[isHybrid]) {\n args = {\n rowIndexes: rowIndexes, row: selectedRows, rowIndex: rowIndex, target: _this.actualTarget,\n prevRow: gObj.getRows()[_this.prevRowIndex], previousRowIndex: _this.prevRowIndex,\n data: isBlazor() ? selectedData : _this.getSelectedRecords(), isInteracted: _this.isInteracted,\n isHeaderCheckboxClicked: _this.isHeaderCheckboxClicked, foreignKeyData: foreignKeyData\n };\n args = _this.addMovableArgs(args, selectedMovableRow, selectedFrozenRightRow);\n }\n else {\n args = {\n rowIndexes: rowIndexes, rowIndex: rowIndex, previousRowIndex: _this.prevRowIndex,\n row: selectedRows, prevRow: gObj.getRows()[_this.prevRowIndex],\n data: isBlazor() ? selectedData : _this.getSelectedRecords(), isInteracted: _this.isInteracted,\n isHeaderCheckboxClicked: _this.isHeaderCheckboxClicked, foreignKeyData: foreignKeyData\n };\n }\n if (_this.isRowSelected) {\n _this.onActionComplete(args, events.rowSelected);\n }\n _this.isInteracted = false;\n });\n };\n /**\n * Select rows with existing row selection by passing row indexes.\n * @param {number} startIndex - Specifies the row indexes.\n * @return {void}\n * @hidden\n */\n // tslint:disable-next-line:max-func-body-length\n Selection.prototype.addRowsToSelection = function (rowIndexes) {\n var gObj = this.parent;\n var can = 'cancel';\n var target = this.target;\n this.isMultiSelection = true;\n var indexes = gObj.getSelectedRowIndexes().concat(rowIndexes);\n var selectedRow = !this.isSingleSel() ? gObj.getRowByIndex(rowIndexes[0]) :\n gObj.getRowByIndex(rowIndexes[rowIndexes.length - 1]);\n var selectedMovableRow = !this.isSingleSel() ? this.getSelectedMovableRow(rowIndexes[0]) :\n this.getSelectedMovableRow(rowIndexes[rowIndexes.length - 1]);\n var selectedFrozenRightRow = !this.isSingleSel() ? this.getSelectedFrozenRightRow(rowIndexes[0]) :\n this.getSelectedFrozenRightRow(rowIndexes[rowIndexes.length - 1]);\n if ((!this.isRowType() || this.isEditing()) && !this.selectionSettings.checkboxOnly) {\n return;\n }\n var args;\n var checkboxColumn = this.parent.getColumns().filter(function (col) { return col.type === 'checkbox'; });\n for (var _i = 0, rowIndexes_2 = rowIndexes; _i < rowIndexes_2.length; _i++) {\n var rowIndex = rowIndexes_2[_i];\n var rowObj = this.getRowObj(rowIndex);\n var isUnSelected = this.selectedRowIndexes.indexOf(rowIndex) > -1;\n this.selectRowIndex(rowIndex);\n if (isUnSelected && ((checkboxColumn.length ? true : this.selectionSettings.enableToggle) || this.isMultiCtrlRequest)) {\n this.isAddRowsToSelection = true;\n this.rowDeselect(events.rowDeselecting, [rowIndex], [rowObj.data], [selectedRow], [rowObj.foreignKeyData], target);\n if (this.isCancelDeSelect) {\n return;\n }\n this.selectedRowIndexes.splice(this.selectedRowIndexes.indexOf(rowIndex), 1);\n this.selectedRecords.splice(this.selectedRecords.indexOf(selectedRow), 1);\n selectedRow.removeAttribute('aria-selected');\n this.addRemoveClassesForRow(selectedRow, false, null, 'e-selectionbackground', 'e-active');\n if (selectedMovableRow) {\n this.selectedRecords.splice(this.selectedRecords.indexOf(selectedMovableRow), 1);\n selectedMovableRow.removeAttribute('aria-selected');\n this.addRemoveClassesForRow(selectedMovableRow, false, null, 'e-selectionbackground', 'e-active');\n }\n if (selectedFrozenRightRow) {\n this.selectedRecords.splice(this.selectedRecords.indexOf(selectedFrozenRightRow), 1);\n selectedFrozenRightRow.removeAttribute('aria-selected');\n this.addRemoveClassesForRow(selectedFrozenRightRow, false, null, 'e-selectionbackground', 'e-active');\n }\n this.rowDeselect(events.rowDeselected, [rowIndex], [rowObj.data], [selectedRow], [rowObj.foreignKeyData], target, [selectedMovableRow], undefined, [selectedFrozenRightRow]);\n this.isInteracted = false;\n this.isMultiSelection = false;\n this.isAddRowsToSelection = false;\n }\n else {\n var isHybrid = 'isHybrid';\n this.activeTarget();\n if (!isBlazor() || this.parent.isJsComponent || this.parent[isHybrid]) {\n args = {\n cancel: false,\n data: rowObj.data, rowIndex: rowIndex, row: selectedRow, target: this.actualTarget,\n prevRow: gObj.getRows()[this.prevRowIndex], previousRowIndex: this.prevRowIndex,\n isCtrlPressed: this.isMultiCtrlRequest, isShiftPressed: this.isMultiShiftRequest,\n foreignKeyData: rowObj.foreignKeyData, isInteracted: this.isInteracted,\n isHeaderCheckboxClicked: this.isHeaderCheckboxClicked, rowIndexes: indexes\n };\n args = this.addMovableArgs(args, selectedMovableRow, selectedFrozenRightRow);\n }\n else {\n args = {\n cancel: false,\n data: rowObj.data, rowIndex: rowIndex, previousRowIndex: this.prevRowIndex,\n isCtrlPressed: this.isMultiCtrlRequest, isShiftPressed: this.isMultiShiftRequest,\n foreignKeyData: rowObj.foreignKeyData, isInteracted: this.isInteracted,\n isHeaderCheckboxClicked: this.isHeaderCheckboxClicked, rowIndexes: indexes\n };\n }\n this.parent.trigger(events.rowSelecting, this.fDataUpdate(args));\n if (!isNullOrUndefined(args) && args[can] === true) {\n this.disableInteracted();\n return;\n }\n if (this.isSingleSel()) {\n this.clearRow();\n }\n this.updateRowSelection(selectedRow, rowIndex);\n this.selectMovableRow(selectedMovableRow, selectedFrozenRightRow, rowIndex);\n }\n if (!isUnSelected) {\n var isHybrid = 'isHybrid';\n if (!isBlazor() || this.parent.isJsComponent || this.parent[isHybrid]) {\n args = {\n data: rowObj.data, rowIndex: rowIndex, row: selectedRow, target: this.actualTarget,\n prevRow: gObj.getRows()[this.prevRowIndex], previousRowIndex: this.prevRowIndex,\n foreignKeyData: rowObj.foreignKeyData, isInteracted: this.isInteracted,\n isHeaderCheckboxClicked: this.isHeaderCheckboxClicked, rowIndexes: indexes\n };\n args = this.addMovableArgs(args, selectedMovableRow, selectedFrozenRightRow);\n }\n else {\n args = {\n data: rowObj.data, rowIndex: rowIndex, previousRowIndex: this.prevRowIndex,\n row: selectedRow, prevRow: gObj.getRows()[this.prevRowIndex],\n foreignKeyData: rowObj.foreignKeyData, isInteracted: this.isInteracted,\n isHeaderCheckboxClicked: this.isHeaderCheckboxClicked, rowIndexes: indexes\n };\n }\n this.onActionComplete(args, events.rowSelected);\n }\n this.isInteracted = false;\n this.updateRowProps(rowIndex);\n if (this.isSingleSel()) {\n break;\n }\n }\n };\n Selection.prototype.getCollectionFromIndexes = function (startIndex, endIndex) {\n var indexes = [];\n var _a = (startIndex <= endIndex) ?\n { i: startIndex, max: endIndex } : { i: endIndex, max: startIndex }, i = _a.i, max = _a.max;\n for (; i <= max; i++) {\n indexes.push(i);\n }\n if (startIndex > endIndex) {\n indexes.reverse();\n }\n return indexes;\n };\n Selection.prototype.clearRow = function () {\n this.clearRowCheck = true;\n this.clearRowSelection();\n };\n Selection.prototype.clearRowCallBack = function () {\n if (this.isCancelDeSelect && this.parent.checkAllRows !== 'Check') {\n return;\n }\n this.selectedRowIndexes = [];\n this.selectedRecords = [];\n this.selectRowIndex(-1);\n if (this.isSingleSel() && this.parent.isPersistSelection) {\n this.selectedRowState = {};\n }\n };\n Selection.prototype.clearSelectedRow = function (index) {\n if (this.toggle) {\n var selectedEle = this.parent.getRowByIndex(index);\n if (!this.disableUI) {\n selectedEle.removeAttribute('aria-selected');\n this.addRemoveClassesForRow(selectedEle, false, true, 'e-selectionbackground', 'e-active');\n }\n this.removed = true;\n this.updatePersistCollection(selectedEle, false);\n this.updateCheckBoxes(selectedEle);\n this.selectedRowIndexes.splice(this.selectedRowIndexes.indexOf(index), 1);\n this.selectedRecords.splice(this.selectedRecords.indexOf(this.parent.getRowByIndex(index)), 1);\n }\n };\n Selection.prototype.updateRowProps = function (startIndex) {\n this.prevRowIndex = startIndex;\n this.isRowSelected = this.selectedRowIndexes.length && true;\n };\n Selection.prototype.updatePersistCollection = function (selectedRow, chkState) {\n var _this = this;\n if ((this.parent.isPersistSelection || this.parent.selectionSettings.persistSelection &&\n this.parent.getPrimaryKeyFieldNames().length > 0) && !isNullOrUndefined(selectedRow)) {\n if (!this.parent.isPersistSelection) {\n this.ensureCheckboxFieldSelection();\n }\n var rowObj = this.getRowObj(selectedRow);\n var pKey_1 = rowObj.data ? rowObj.data[this.primaryKey] : null;\n if (pKey_1 === null) {\n return;\n }\n rowObj.isSelected = chkState;\n if (chkState) {\n this.selectedRowState[pKey_1] = chkState;\n if (!this.persistSelectedData.some(function (data) { return data[_this.primaryKey] === pKey_1; })) {\n this.persistSelectedData.push(rowObj.data);\n }\n }\n else {\n this.updatePersistDelete(pKey_1);\n }\n }\n };\n Selection.prototype.updatePersistDelete = function (pKey) {\n var _this = this;\n delete (this.selectedRowState[pKey]);\n var index;\n var isPresent = this.persistSelectedData.some(function (data, i) {\n index = i;\n return data[_this.primaryKey] === pKey;\n });\n if (isPresent) {\n this.persistSelectedData.splice(index, 1);\n }\n };\n Selection.prototype.updateCheckBoxes = function (row, chkState, rowIndex) {\n if (!isNullOrUndefined(row)) {\n var chkBox = row.querySelector('.e-checkselect');\n if (!isNullOrUndefined(chkBox)) {\n removeAddCboxClasses(chkBox.nextElementSibling, chkState);\n setChecked(chkBox, chkState);\n if (isNullOrUndefined(this.checkedTarget) || (!isNullOrUndefined(this.checkedTarget)\n && !this.checkedTarget.classList.contains('e-checkselectall'))) {\n this.setCheckAllState(rowIndex);\n }\n }\n }\n };\n Selection.prototype.updateRowSelection = function (selectedRow, startIndex) {\n if (!selectedRow) {\n return;\n }\n this.selectedRowIndexes.push(startIndex);\n var len = this.selectedRowIndexes.length;\n if (this.parent.isFrozenGrid() && len > 1) {\n if ((this.selectedRowIndexes[len - 2] === this.selectedRowIndexes[len - 1])) {\n this.selectedRowIndexes.pop();\n }\n }\n this.selectedRecords.push(selectedRow);\n selectedRow.setAttribute('aria-selected', 'true');\n this.updatePersistCollection(selectedRow, true);\n this.updateCheckBoxes(selectedRow, true);\n this.addRemoveClassesForRow(selectedRow, true, null, 'e-selectionbackground', 'e-active');\n if (!this.preventFocus) {\n var target = this.focus.getPrevIndexes().cellIndex ?\n selectedRow.cells[this.focus.getPrevIndexes().cellIndex] :\n selectedRow.querySelector('.e-selectionbackground:not(.e-hide):not(.e-detailrowcollapse):not(.e-detailrowexpand)');\n if (this.parent.contextMenuModule && this.mouseButton === 2) {\n target = this.parent.contextMenuModule.cell;\n }\n if (!target) {\n return;\n }\n this.focus.onClick({ target: target }, true);\n }\n };\n /**\n * Deselects the currently selected rows and cells.\n * @return {void}\n */\n Selection.prototype.clearSelection = function () {\n if (!this.parent.isPersistSelection || (this.parent.isPersistSelection && !this.parent.isEdit) ||\n (!isNullOrUndefined(this.checkedTarget) && this.checkedTarget.classList.contains('e-checkselectall'))) {\n var span = this.parent.element.querySelector('.e-gridpopup').querySelector('span');\n if (span.classList.contains('e-rowselect')) {\n span.classList.remove('e-spanclicked');\n }\n if (this.parent.isPersistSelection) {\n this.persistSelectedData = [];\n this.selectedRowState = {};\n }\n this.clearRowSelection();\n this.clearCellSelection();\n this.clearColumnSelection();\n this.prevRowIndex = undefined;\n this.enableSelectMultiTouch = false;\n this.isInteracted = false;\n }\n };\n /**\n * Deselects the currently selected rows.\n * @return {void}\n */\n // tslint:disable-next-line:max-func-body-length\n Selection.prototype.clearRowSelection = function () {\n var _this = this;\n if (this.isRowSelected) {\n var gObj = this.parent;\n var rows_1 = this.parent.getDataRows();\n var data_1 = [];\n var row_1 = [];\n var mRow_1 = [];\n var fRightRow_1 = [];\n var rowIndex_1 = [];\n var foreignKeyData_1 = [];\n var target_1 = this.target;\n var currentViewData = this.parent.getCurrentViewRecords();\n for (var i = 0, len = this.selectedRowIndexes.length; i < len; i++) {\n var currentRow = this.parent.editSettings.mode === 'Batch' ?\n this.parent.getRows()[this.selectedRowIndexes[i]]\n : this.parent.getDataRows()[this.selectedRowIndexes[i]];\n var rowObj = this.getRowObj(currentRow);\n if (rowObj) {\n data_1.push(rowObj.data);\n row_1.push(currentRow);\n rowIndex_1.push(this.selectedRowIndexes[i]);\n foreignKeyData_1.push(rowObj.foreignKeyData);\n }\n if (gObj.isFrozenGrid()) {\n mRow_1.push(gObj.getMovableRows()[this.selectedRowIndexes[i]]);\n if (gObj.getFrozenMode() === 'Left-Right') {\n fRightRow_1.push(gObj.getFrozenRightRows()[this.selectedRowIndexes[i]]);\n }\n }\n }\n if (this.selectionSettings.persistSelection && this.selectionSettings.checkboxMode !== 'ResetOnRowClick') {\n this.isRowClicked = this.checkSelectAllClicked ? true : false;\n }\n this.rowDeselect(events.rowDeselecting, rowIndex_1, data_1, row_1, foreignKeyData_1, target_1, mRow_1, function () {\n if (_this.isCancelDeSelect && (_this.isRowClicked || _this.checkSelectAllClicked || (_this.isInteracted &&\n !_this.parent.isPersistSelection))) {\n if (_this.parent.isPersistSelection) {\n if (_this.getCheckAllStatus(_this.parent.element.querySelector('.e-checkselectall')) === 'Intermediate') {\n for (var i = 0; i < _this.selectedRecords.length; i++) {\n _this.updatePersistCollection(_this.selectedRecords[i], true);\n }\n }\n else {\n _this.parent.checkAllRows = 'Check';\n _this.updatePersistSelectedData(true);\n }\n }\n if (_this.clearRowCheck) {\n _this.clearRowCallBack();\n _this.clearRowCheck = false;\n if (_this.selectRowCheck) {\n _this.selectRowCallBack();\n _this.selectRowCheck = false;\n }\n }\n return;\n }\n var element = [].slice.call(rows_1.filter(function (record) { return record.hasAttribute('aria-selected'); }));\n for (var j = 0; j < element.length; j++) {\n if (!_this.disableUI || isBlazor()) {\n element[j].removeAttribute('aria-selected');\n _this.addRemoveClassesForRow(element[j], false, true, 'e-selectionbackground', 'e-active');\n }\n // tslint:disable-next-line:align\n if (!_this.isPrevRowSelection) {\n _this.updatePersistCollection(element[j], false);\n }\n _this.updateCheckBoxes(element[j]);\n }\n if (isBlazor() && _this.parent.isServerRendered && _this.parent.enableVirtualization) {\n _this.getRenderer().setSelection(null, false, true);\n }\n for (var i = 0, len = _this.selectedRowIndexes.length; i < len; i++) {\n var movableRow = _this.getSelectedMovableRow(_this.selectedRowIndexes[i]);\n if (movableRow) {\n if (!_this.disableUI || isBlazor()) {\n movableRow.removeAttribute('aria-selected');\n _this.addRemoveClassesForRow(movableRow, false, true, 'e-selectionbackground', 'e-active');\n }\n _this.updateCheckBoxes(movableRow);\n if (!_this.isPrevRowSelection) {\n _this.updatePersistCollection(movableRow, false);\n }\n }\n var frRow = _this.getSelectedFrozenRightRow(_this.selectedRowIndexes[i]);\n if (frRow) {\n if (!_this.disableUI) {\n frRow.removeAttribute('aria-selected');\n _this.addRemoveClassesForRow(frRow, false, true, 'e-selectionbackground', 'e-active');\n }\n _this.updateCheckBoxes(frRow);\n if (!_this.isPrevRowSelection) {\n _this.updatePersistCollection(frRow, false);\n }\n }\n }\n _this.selectedRowIndexes = [];\n _this.selectedRecords = [];\n _this.isRowSelected = false;\n _this.selectRowIndex(-1);\n _this.isPrevRowSelection = false;\n _this.rowDeselect(events.rowDeselected, rowIndex_1, data_1, row_1, foreignKeyData_1, target_1, mRow_1, undefined, fRightRow_1);\n if (_this.clearRowCheck) {\n _this.clearRowCallBack();\n _this.clearRowCheck = false;\n if (_this.selectRowCheck) {\n _this.selectRowCallBack();\n _this.selectRowCheck = false;\n }\n }\n }, fRightRow_1);\n }\n else {\n if (this.clearRowCheck) {\n this.clearRowCallBack();\n this.clearRowCheck = false;\n if (this.selectRowCheck) {\n this.selectRowCallBack();\n this.selectRowCheck = false;\n }\n }\n }\n };\n Selection.prototype.rowDeselect = function (type, rowIndex, data, row, foreignKeyData, target, mRow, rowDeselectCallBack, frozenRightRow) {\n var _this = this;\n if ((this.selectionSettings.persistSelection && (this.isRowClicked || this.checkSelectAllClicked)) ||\n !this.selectionSettings.persistSelection) {\n var cancl_1 = 'cancel';\n var rowDeselectObj = {\n rowIndex: rowIndex[0], data: this.selectionSettings.persistSelection && this.parent.checkAllRows === 'Uncheck'\n && this.selectionSettings.checkboxMode !== 'ResetOnRowClick' ?\n this.persistSelectedData : data, foreignKeyData: foreignKeyData,\n cancel: false, isInteracted: this.isInteracted, isHeaderCheckboxClicked: this.isHeaderCheckboxClicked\n };\n if (type === 'rowDeselected') {\n delete rowDeselectObj.cancel;\n }\n var isHybrid = 'isHybrid';\n if (!isBlazor() || this.parent.isJsComponent || this.parent[isHybrid]) {\n var rowInString = 'row';\n var target_2 = 'target';\n var rowidx = 'rowIndex';\n var rowidxex = 'rowIndexes';\n var data_2 = 'data';\n var foreignKey = 'foreignKeyData';\n rowDeselectObj[rowInString] = row;\n rowDeselectObj[target_2] = this.actualTarget;\n var isHeaderCheckBxClick = this.actualTarget && !isNullOrUndefined(closest(this.actualTarget, 'thead'));\n if (isHeaderCheckBxClick || rowIndex.length > 1) {\n rowDeselectObj[rowidx] = rowIndex[0];\n rowDeselectObj[rowidxex] = rowIndex;\n }\n else if (rowIndex.length === 1) {\n rowDeselectObj[data_2] = rowDeselectObj[data_2][0];\n rowDeselectObj[rowInString] = rowDeselectObj[rowInString][0];\n rowDeselectObj[foreignKey] = rowDeselectObj[foreignKey][0];\n if (this.isAddRowsToSelection) {\n rowDeselectObj[rowidxex] = rowIndex;\n }\n }\n }\n else {\n var rowIndex_2 = 'rowIndex';\n var data_3 = 'data';\n rowDeselectObj[rowIndex_2] = rowDeselectObj[rowIndex_2][rowDeselectObj[rowIndex_2].length - 1];\n rowDeselectObj[data_3] = rowDeselectObj[data_3][rowDeselectObj[data_3].length - 1];\n }\n this.parent.trigger(type, (!isBlazor() || this.parent.isJsComponent) && this.parent.isFrozenGrid() ? __assign({}, rowDeselectObj, { mRow: mRow, frozenRightRow: frozenRightRow }) : rowDeselectObj, function (args) {\n _this.isCancelDeSelect = args[cancl_1];\n if (!_this.isCancelDeSelect || (!_this.isRowClicked && !_this.isInteracted && !_this.checkSelectAllClicked)) {\n _this.updatePersistCollection(row[0], false);\n _this.updateCheckBoxes(row[0], undefined, rowIndex[0]);\n if (mRow) {\n _this.updateCheckBoxes(mRow[0], undefined, rowIndex[0]);\n }\n if (frozenRightRow) {\n _this.updateCheckBoxes(frozenRightRow[0], undefined, rowIndex[0]);\n }\n }\n if (rowDeselectCallBack !== undefined) {\n rowDeselectCallBack();\n }\n });\n }\n else if (this.selectionSettings.persistSelection && !this.isInteracted) {\n if (rowDeselectCallBack !== undefined) {\n rowDeselectCallBack();\n }\n }\n };\n Selection.prototype.getRowObj = function (row) {\n if (row === void 0) { row = this.currentIndex; }\n if (isNullOrUndefined(row)) {\n return {};\n }\n if (typeof row === 'number') {\n row = this.parent.getRowByIndex(row);\n }\n if (row) {\n return this.parent.getRowObjectFromUID(row.getAttribute('data-uid')) || {};\n }\n return {};\n };\n Selection.prototype.getSelectedMovableCell = function (cellIndex) {\n var gObj = this.parent;\n var col = gObj.getColumnByIndex(cellIndex.cellIndex);\n var frzCols = gObj.isFrozenGrid();\n if (frzCols) {\n if (col.getFreezeTableName() === 'movable') {\n return gObj.getMovableCellFromIndex(cellIndex.rowIndex, this.getColIndex(cellIndex.rowIndex, cellIndex.cellIndex));\n }\n return null;\n }\n return null;\n };\n /**\n * Selects a cell by the given index.\n * @param {IIndex} cellIndex - Defines the row and column indexes.\n * @param {boolean} isToggle - If set to true, then it toggles the selection.\n * @return {void}\n */\n Selection.prototype.selectCell = function (cellIndex, isToggle) {\n if (!this.isCellType()) {\n return;\n }\n var gObj = this.parent;\n var selectedCell = this.getSelectedMovableCell(cellIndex);\n var args;\n if (!selectedCell) {\n selectedCell = gObj.getCellFromIndex(cellIndex.rowIndex, this.getColIndex(cellIndex.rowIndex, cellIndex.cellIndex));\n }\n var selectedTable;\n var cIdx;\n this.currentIndex = cellIndex.rowIndex;\n var selectedData = this.getCurrentBatchRecordChanges()[this.currentIndex];\n if (!this.isCellType() || !selectedCell || this.isEditing()) {\n return;\n }\n var isCellSelected = selectedCell.classList.contains('e-cellselectionbackground');\n isToggle = !isToggle ? isToggle : (!isUndefined(this.prevCIdxs) &&\n cellIndex.rowIndex === this.prevCIdxs.rowIndex && cellIndex.cellIndex === this.prevCIdxs.cellIndex &&\n isCellSelected);\n if (!isToggle) {\n args = {\n data: selectedData, cellIndex: cellIndex,\n isCtrlPressed: this.isMultiCtrlRequest, isShiftPressed: this.isMultiShiftRequest,\n previousRowCell: this.prevECIdxs ?\n this.getCellIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) : undefined,\n cancel: false\n };\n if (!isBlazor() || this.parent.isJsComponent) {\n var currentCell = 'currentCell';\n args[currentCell] = selectedCell;\n var previousRowCellIndex = 'previousRowCellIndex';\n args[previousRowCellIndex] = this.prevECIdxs;\n }\n this.parent.trigger(events.cellSelecting, this.fDataUpdate(args), this.successCallBack(args, isToggle, cellIndex, selectedCell, selectedData));\n this.cellselected = true;\n }\n else {\n this.successCallBack(args, isToggle, cellIndex, selectedCell, selectedData)(args);\n }\n };\n Selection.prototype.successCallBack = function (cellSelectingArgs, isToggle, cellIndex, selectedCell, selectedData) {\n var _this = this;\n return function (cellSelectingArgs) {\n var cncl = 'cancel';\n var currentCell = 'currentCell';\n if (!isNullOrUndefined(cellSelectingArgs) && cellSelectingArgs[cncl] === true) {\n return;\n }\n if (!isToggle) {\n cellSelectingArgs[currentCell] = cellSelectingArgs[currentCell] ? cellSelectingArgs[currentCell] : selectedCell;\n }\n _this.clearCell();\n if (!isToggle) {\n _this.updateCellSelection(selectedCell, cellIndex.rowIndex, cellIndex.cellIndex);\n }\n if (!isToggle) {\n var args = void 0;\n var isHybrid = 'isHybrid';\n if (!isBlazor() || _this.parent.isJsComponent || _this.parent[isHybrid]) {\n args = {\n data: selectedData, cellIndex: cellIndex, currentCell: selectedCell,\n selectedRowCellIndex: _this.selectedRowCellIndexes,\n previousRowCell: _this.prevECIdxs ?\n _this.getCellIndex(_this.prevECIdxs.rowIndex, _this.prevECIdxs.cellIndex) : undefined\n };\n var previousRowCellIndex = 'previousRowCellIndex';\n args[previousRowCellIndex] = _this.prevECIdxs;\n }\n else {\n args = { data: selectedData, cellIndex: cellIndex, selectedRowCellIndex: _this.selectedRowCellIndexes };\n }\n _this.updateCellProps(cellIndex, cellIndex);\n _this.onActionComplete(args, events.cellSelected);\n }\n };\n };\n Selection.prototype.getCellIndex = function (rIdx, cIdx) {\n return (this.parent.getFrozenColumns() ? (cIdx >= this.parent.getFrozenColumns() ? this.parent.getMovableCellFromIndex(rIdx, cIdx)\n : this.parent.getCellFromIndex(rIdx, cIdx)) : this.parent.getCellFromIndex(rIdx, cIdx));\n };\n /**\n * Selects a range of cells from start and end indexes.\n * @param {IIndex} startIndex - Specifies the row and column's start index.\n * @param {IIndex} endIndex - Specifies the row and column's end index.\n * @return {void}\n */\n Selection.prototype.selectCellsByRange = function (startIndex, endIndex) {\n var _this = this;\n if (!this.isCellType()) {\n return;\n }\n var gObj = this.parent;\n var selectedCell = this.getSelectedMovableCell(startIndex);\n var frzCols = gObj.getFrozenColumns();\n if (!selectedCell) {\n selectedCell = gObj.getCellFromIndex(startIndex.rowIndex, startIndex.cellIndex);\n }\n var min;\n var max;\n var stIndex = startIndex;\n var edIndex = endIndex = endIndex ? endIndex : startIndex;\n var cellIndexes;\n this.currentIndex = startIndex.rowIndex;\n var cncl = 'cancel';\n var selectedData = this.getCurrentBatchRecordChanges()[this.currentIndex];\n if (this.isSingleSel() || !this.isCellType() || this.isEditing()) {\n return;\n }\n var args = {\n data: selectedData, cellIndex: startIndex, currentCell: selectedCell,\n isCtrlPressed: this.isMultiCtrlRequest, isShiftPressed: this.isMultiShiftRequest,\n previousRowCell: this.prevECIdxs ? this.getCellIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) : undefined\n };\n if (!isBlazor()) {\n var previousRowCellIndex = 'previousRowCellIndex';\n args[previousRowCellIndex] = this.prevECIdxs;\n }\n this.parent.trigger(events.cellSelecting, this.fDataUpdate(args), function (cellSelectingArgs) {\n if (!isNullOrUndefined(cellSelectingArgs) && cellSelectingArgs[cncl] === true) {\n return;\n }\n _this.clearCell();\n if (startIndex.rowIndex > endIndex.rowIndex) {\n var temp = startIndex;\n startIndex = endIndex;\n endIndex = temp;\n }\n for (var i = startIndex.rowIndex; i <= endIndex.rowIndex; i++) {\n if (_this.selectionSettings.cellSelectionMode.indexOf('Box') < 0) {\n min = i === startIndex.rowIndex ? (startIndex.cellIndex) : 0;\n max = i === endIndex.rowIndex ? (endIndex.cellIndex) : _this.getLastColIndex(i);\n }\n else {\n min = startIndex.cellIndex;\n max = endIndex.cellIndex;\n }\n cellIndexes = [];\n for (var j = min < max ? min : max, len = min > max ? min : max; j <= len; j++) {\n if (frzCols) {\n if (j < frzCols) {\n selectedCell = gObj.getCellFromIndex(i, j);\n }\n else {\n selectedCell = gObj.getMovableCellFromIndex(i, j);\n }\n }\n else {\n selectedCell = gObj.getCellFromIndex(i, j);\n }\n if (!selectedCell) {\n continue;\n }\n cellIndexes.push(j);\n _this.updateCellSelection(selectedCell);\n _this.addAttribute(selectedCell);\n }\n _this.selectedRowCellIndexes.push({ rowIndex: i, cellIndexes: cellIndexes });\n }\n var cellSelectedArgs;\n var isHybrid = 'isHybrid';\n if (!isBlazor() || _this.parent.isJsComponent || _this.parent[isHybrid]) {\n cellSelectedArgs = {\n data: selectedData, cellIndex: edIndex, currentCell: gObj.getCellFromIndex(edIndex.rowIndex, edIndex.cellIndex),\n selectedRowCellIndex: _this.selectedRowCellIndexes,\n previousRowCell: _this.prevECIdxs ? _this.getCellIndex(_this.prevECIdxs.rowIndex, _this.prevECIdxs.cellIndex) : undefined\n };\n var previousRowCellIndex = 'previousRowCellIndex';\n cellSelectedArgs[previousRowCellIndex] = _this.prevECIdxs;\n }\n else {\n cellSelectedArgs = { data: selectedData, cellIndex: edIndex, selectedRowCellIndex: _this.selectedRowCellIndexes };\n }\n if (!_this.isDragged) {\n _this.onActionComplete(cellSelectedArgs, events.cellSelected);\n _this.cellselected = true;\n }\n _this.updateCellProps(stIndex, edIndex);\n });\n };\n /**\n * Selects a collection of cells by row and column indexes.\n * @param {ISelectedCell[]} rowCellIndexes - Specifies the row and column indexes.\n * @return {void}\n */\n Selection.prototype.selectCells = function (rowCellIndexes) {\n if (!this.isCellType()) {\n return;\n }\n var gObj = this.parent;\n var selectedCell = this.getSelectedMovableCell(rowCellIndexes[0]);\n var frzCols = gObj.getFrozenColumns();\n if (!selectedCell) {\n selectedCell = gObj.getCellFromIndex(rowCellIndexes[0].rowIndex, rowCellIndexes[0].cellIndexes[0]);\n }\n this.currentIndex = rowCellIndexes[0].rowIndex;\n var selectedData = this.getCurrentBatchRecordChanges()[this.currentIndex];\n if (this.isSingleSel() || !this.isCellType() || this.isEditing()) {\n return;\n }\n var cellSelectArgs;\n var isHybrid = 'isHybrid';\n if (!isBlazor() || this.parent.isJsComponent || this.parent[isHybrid]) {\n cellSelectArgs = {\n data: selectedData, cellIndex: rowCellIndexes[0].cellIndexes[0],\n currentCell: selectedCell, isCtrlPressed: this.isMultiCtrlRequest,\n isShiftPressed: this.isMultiShiftRequest,\n previousRowCell: this.prevECIdxs ? this.getCellIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) : undefined\n };\n var previousRowCellIndex = 'previousRowCellIndex';\n cellSelectArgs[previousRowCellIndex] = this.prevECIdxs;\n }\n else {\n cellSelectArgs = {\n data: selectedData, cellIndex: rowCellIndexes[0].cellIndexes[0],\n isCtrlPressed: this.isMultiCtrlRequest, isShiftPressed: this.isMultiShiftRequest\n };\n }\n this.onActionBegin(cellSelectArgs, events.cellSelecting);\n for (var i = 0, len = rowCellIndexes.length; i < len; i++) {\n for (var j = 0, cellLen = rowCellIndexes[i].cellIndexes.length; j < cellLen; j++) {\n if (frzCols) {\n if (rowCellIndexes[i].cellIndexes[j] < frzCols) {\n selectedCell = gObj.getCellFromIndex(rowCellIndexes[i].rowIndex, rowCellIndexes[i].cellIndexes[j]);\n }\n else {\n selectedCell = gObj.getMovableCellFromIndex(rowCellIndexes[i].rowIndex, rowCellIndexes[i].cellIndexes[j]);\n }\n }\n else {\n selectedCell = gObj.getCellFromIndex(rowCellIndexes[i].rowIndex, rowCellIndexes[i].cellIndexes[j]);\n }\n if (!selectedCell) {\n continue;\n }\n this.updateCellSelection(selectedCell);\n this.addAttribute(selectedCell);\n this.addRowCellIndex({ rowIndex: rowCellIndexes[i].rowIndex, cellIndex: rowCellIndexes[i].cellIndexes[j] });\n }\n }\n this.updateCellProps({ rowIndex: rowCellIndexes[0].rowIndex, cellIndex: rowCellIndexes[0].cellIndexes[0] }, { rowIndex: rowCellIndexes[0].rowIndex, cellIndex: rowCellIndexes[0].cellIndexes[0] });\n var cellSelectedArgs;\n if (!isBlazor() || this.parent.isJsComponent || this.parent[isHybrid]) {\n cellSelectedArgs = {\n data: selectedData, cellIndex: rowCellIndexes[0].cellIndexes[0],\n currentCell: selectedCell, selectedRowCellIndex: this.selectedRowCellIndexes,\n previousRowCell: this.prevECIdxs ? this.getCellIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) : undefined\n };\n var previousRowCellIndex = 'previousRowCellIndex';\n cellSelectedArgs[previousRowCellIndex] = this.prevECIdxs;\n }\n else {\n cellSelectedArgs = { data: selectedData, cellIndex: rowCellIndexes[0].cellIndexes[0],\n selectedRowCellIndex: this.selectedRowCellIndexes };\n }\n this.onActionComplete(cellSelectedArgs, events.cellSelected);\n };\n /**\n * Select cells with existing cell selection by passing row and column index.\n * @param {IIndex} startIndex - Defines the collection of row and column index.\n * @return {void}\n * @hidden\n */\n // tslint:disable-next-line:max-func-body-length\n Selection.prototype.addCellsToSelection = function (cellIndexes) {\n if (!this.isCellType()) {\n return;\n }\n var gObj = this.parent;\n var selectedCell;\n var index;\n this.currentIndex = cellIndexes[0].rowIndex;\n var cncl = 'cancel';\n var selectedData = this.getCurrentBatchRecordChanges()[this.currentIndex];\n var isHybrid = 'isHybrid';\n var left = gObj.getFrozenLeftCount();\n var movable = gObj.getMovableColumnsCount();\n if (this.isSingleSel() || !this.isCellType() || this.isEditing()) {\n return;\n }\n this.hideAutoFill();\n var col = gObj.getColumnByIndex(cellIndexes[0].cellIndex);\n var rowObj;\n gridActionHandler(this.parent, function (tableName, rows) {\n rowObj = rows[cellIndexes[0].rowIndex];\n }, [\n !col.getFreezeTableName() || col.getFreezeTableName() === 'frozen-left' ? gObj.getRowsObject() : [],\n col.getFreezeTableName() === 'movable' ? gObj.getMovableRowsObject() : [],\n col.getFreezeTableName() === 'frozen-right' ? gObj.getFrozenRightRowsObject() : []\n ]);\n var foreignKeyData = [];\n for (var _i = 0, cellIndexes_1 = cellIndexes; _i < cellIndexes_1.length; _i++) {\n var cellIndex = cellIndexes_1[_i];\n for (var i = 0, len = this.selectedRowCellIndexes.length; i < len; i++) {\n if (this.selectedRowCellIndexes[i].rowIndex === cellIndex.rowIndex) {\n index = i;\n break;\n }\n }\n selectedCell = this.getSelectedMovableCell(cellIndex);\n if (!selectedCell) {\n selectedCell = gObj.getCellFromIndex(cellIndex.rowIndex, this.getColIndex(cellIndex.rowIndex, cellIndex.cellIndex));\n }\n var idx = col.getFreezeTableName() === 'movable' ? cellIndex.cellIndex - left\n : col.getFreezeTableName() === 'frozen-right' ? cellIndex.cellIndex - (left + movable) : cellIndex.cellIndex;\n foreignKeyData.push(rowObj.cells[idx].foreignKeyData);\n var args = void 0;\n if (!isBlazor() || this.parent.isJsComponent || this.parent[isHybrid]) {\n args = {\n cancel: false, data: selectedData, cellIndex: cellIndexes[0],\n isShiftPressed: this.isMultiShiftRequest,\n currentCell: selectedCell, isCtrlPressed: this.isMultiCtrlRequest,\n previousRowCell: this.prevECIdxs ?\n gObj.getCellFromIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) : undefined,\n };\n var previousRowCellIndex = 'previousRowCellIndex';\n args[previousRowCellIndex] = this.prevECIdxs;\n }\n else {\n args = {\n cancel: false, data: selectedData, cellIndex: cellIndexes[0],\n isShiftPressed: this.isMultiShiftRequest, isCtrlPressed: this.isMultiCtrlRequest\n };\n }\n var isUnSelected = index > -1;\n if (isUnSelected) {\n var selectedCellIdx = this.selectedRowCellIndexes[index].cellIndexes;\n if (selectedCellIdx.indexOf(cellIndex.cellIndex) > -1) {\n this.cellDeselect(events.cellDeselecting, [{ rowIndex: cellIndex.rowIndex, cellIndexes: [cellIndex.cellIndex] }], selectedData, [selectedCell], foreignKeyData);\n selectedCellIdx.splice(selectedCellIdx.indexOf(cellIndex.cellIndex), 1);\n if (selectedCellIdx.length === 0) {\n this.selectedRowCellIndexes.splice(index, 1);\n }\n selectedCell.classList.remove('e-cellselectionbackground');\n selectedCell.removeAttribute('aria-selected');\n this.cellDeselect(events.cellDeselected, [{ rowIndex: cellIndex.rowIndex, cellIndexes: [cellIndex.cellIndex] }], selectedData, [selectedCell], foreignKeyData);\n }\n else {\n isUnSelected = false;\n this.onActionBegin(args, events.cellSelecting);\n this.addRowCellIndex({ rowIndex: cellIndex.rowIndex, cellIndex: cellIndex.cellIndex });\n this.updateCellSelection(selectedCell);\n this.addAttribute(selectedCell);\n }\n }\n else {\n this.onActionBegin(args, events.cellSelecting);\n if (!isNullOrUndefined(args) && args[cncl] === true) {\n return;\n }\n this.updateCellSelection(selectedCell, cellIndex.rowIndex, cellIndex.cellIndex);\n }\n if (!isUnSelected) {\n var cellSelectedArgs = void 0;\n if (!isBlazor() || this.parent.isJsComponent || this.parent[isHybrid]) {\n cellSelectedArgs = {\n data: selectedData, cellIndex: cellIndexes[0], currentCell: selectedCell,\n previousRowCell: this.prevECIdxs ? this.getCellIndex(this.prevECIdxs.rowIndex, this.prevECIdxs.cellIndex) :\n undefined, selectedRowCellIndex: this.selectedRowCellIndexes\n };\n var previousRowCellIndex = 'previousRowCellIndex';\n cellSelectedArgs[previousRowCellIndex] = this.prevECIdxs;\n }\n else {\n cellSelectedArgs = { data: selectedData, cellIndex: cellIndexes[0], selectedRowCellIndex: this.selectedRowCellIndexes };\n }\n this.onActionComplete(cellSelectedArgs, events.cellSelected);\n this.cellselected = true;\n }\n this.updateCellProps(cellIndex, cellIndex);\n }\n };\n Selection.prototype.getColIndex = function (rowIndex, index) {\n var frzCols = this.parent.isFrozenGrid();\n var col = this.parent.getColumnByIndex(index);\n var cells = getCellsByTableName(this.parent, col, rowIndex);\n if (cells) {\n for (var m = 0; m < cells.length; m++) {\n var colIndex = parseInt(cells[m].getAttribute('aria-colindex'), 10);\n if (colIndex === index) {\n if (frzCols) {\n if (col.getFreezeTableName() === 'movable') {\n m += this.parent.getFrozenLeftCount();\n }\n else if (col.getFreezeTableName() === 'frozen-right') {\n m += (this.parent.getFrozenLeftColumnsCount() + this.parent.getMovableColumnsCount());\n }\n }\n return m;\n }\n }\n }\n return -1;\n };\n Selection.prototype.getLastColIndex = function (rowIndex) {\n var cells = this.parent.getFrozenColumns() ? this.parent.getMovableDataRows()[rowIndex].querySelectorAll('td.e-rowcell')\n : this.parent.getDataRows()[rowIndex].querySelectorAll('td.e-rowcell');\n return parseInt(cells[cells.length - 1].getAttribute('aria-colindex'), 10);\n };\n Selection.prototype.clearCell = function () {\n this.clearCellSelection();\n };\n Selection.prototype.cellDeselect = function (type, cellIndexes, data, cells, foreignKeyData) {\n var cancl = 'cancel';\n if (cells[0] && cells[0].classList.contains('e-gridchkbox')) {\n this.updateCheckBoxes(closest(cells[0], 'tr'));\n }\n var args = {\n cells: cells, data: data, cellIndexes: cellIndexes, foreignKeyData: foreignKeyData, cancel: false\n };\n this.parent.trigger(type, args);\n this.isPreventCellSelect = args[cancl];\n };\n Selection.prototype.updateCellSelection = function (selectedCell, rowIndex, cellIndex) {\n if (!isNullOrUndefined(rowIndex)) {\n this.addRowCellIndex({ rowIndex: rowIndex, cellIndex: cellIndex });\n }\n selectedCell.classList.add('e-cellselectionbackground');\n if (selectedCell.classList.contains('e-gridchkbox')) {\n this.updateCheckBoxes(closest(selectedCell, 'tr'), true);\n }\n this.addAttribute(selectedCell);\n };\n Selection.prototype.addAttribute = function (cell) {\n this.target = cell;\n if (!isNullOrUndefined(cell)) {\n cell.setAttribute('aria-selected', 'true');\n if (!this.preventFocus) {\n this.focus.onClick({ target: cell }, true);\n }\n }\n };\n Selection.prototype.updateCellProps = function (startIndex, endIndex) {\n this.prevCIdxs = startIndex;\n this.prevECIdxs = endIndex;\n this.isCellSelected = this.selectedRowCellIndexes.length && true;\n };\n Selection.prototype.addRowCellIndex = function (rowCellIndex) {\n var isRowAvail;\n var index;\n for (var i = 0, len = this.selectedRowCellIndexes.length; i < len; i++) {\n if (this.selectedRowCellIndexes[i].rowIndex === rowCellIndex.rowIndex) {\n isRowAvail = true;\n index = i;\n break;\n }\n }\n if (isRowAvail) {\n if (this.selectedRowCellIndexes[index].cellIndexes.indexOf(rowCellIndex.cellIndex) < 0) {\n this.selectedRowCellIndexes[index].cellIndexes.push(rowCellIndex.cellIndex);\n }\n }\n else {\n this.selectedRowCellIndexes.push({ rowIndex: rowCellIndex.rowIndex, cellIndexes: [rowCellIndex.cellIndex] });\n }\n };\n /**\n * Deselects the currently selected cells.\n * @return {void}\n */\n Selection.prototype.clearCellSelection = function () {\n if (this.isCellSelected) {\n var gObj = this.parent;\n var selectedCells = this.getSelectedCellsElement();\n var rowCell = this.selectedRowCellIndexes;\n var data = [];\n var cells = [];\n var foreignKeyData = [];\n var currentViewData = this.getCurrentBatchRecordChanges();\n var selectedTable = void 0;\n var frzCols = gObj.isFrozenGrid();\n this.hideAutoFill();\n for (var i = 0, len = rowCell.length; i < len; i++) {\n data.push(currentViewData[rowCell[i].rowIndex]);\n var rowObj = this.getRowObj(rowCell[i].rowIndex);\n for (var j = 0, cLen = rowCell[i].cellIndexes.length; j < cLen; j++) {\n if (frzCols) {\n var col = gObj.getColumnByIndex(rowCell[i].cellIndexes[j]);\n cells.push(getCellByColAndRowIndex(this.parent, col, rowCell[i].rowIndex, rowCell[i].cellIndexes[j]));\n }\n else {\n if (rowObj.cells) {\n foreignKeyData.push(rowObj.cells[rowCell[i].cellIndexes[j]].foreignKeyData);\n }\n cells.push(gObj.getCellFromIndex(rowCell[i].rowIndex, rowCell[i].cellIndexes[j]));\n }\n }\n }\n this.cellDeselect(events.cellDeselecting, rowCell, data, cells, foreignKeyData);\n if (this.isPreventCellSelect === true) {\n return;\n }\n for (var i = 0, len = selectedCells.length; i < len; i++) {\n selectedCells[i].classList.remove('e-cellselectionbackground');\n selectedCells[i].removeAttribute('aria-selected');\n }\n if (this.bdrElement) {\n this.showHideBorders('none');\n }\n this.selectedRowCellIndexes = [];\n this.isCellSelected = false;\n if (!this.isDragged && this.cellselected) {\n this.cellDeselect(events.cellDeselected, rowCell, data, cells, foreignKeyData);\n }\n }\n };\n Selection.prototype.getSelectedCellsElement = function () {\n var gObj = this.parent;\n var rows = gObj.getDataRows();\n var mRows;\n if (gObj.isFrozenGrid()) {\n mRows = gObj.getMovableDataRows();\n rows = gObj.addMovableRows(rows, mRows);\n if (gObj.getFrozenMode() === 'Left-Right') {\n rows = gObj.addMovableRows(rows, gObj.getFrozenRightDataRows());\n }\n }\n var cells = [];\n for (var i = 0, len = rows.length; i < len; i++) {\n cells = cells.concat([].slice.call(rows[i].querySelectorAll('.e-cellselectionbackground')));\n }\n return cells;\n };\n Selection.prototype.mouseMoveHandler = function (e) {\n e.preventDefault();\n var gBRect = this.parent.element.getBoundingClientRect();\n var x1 = this.x;\n var y1 = this.y;\n var position = getPosition(e);\n var x2 = position.x - gBRect.left;\n var y2 = position.y - gBRect.top;\n var tmp;\n var target = closest(e.target, 'tr');\n this.isDragged = true;\n if (!this.isCellDrag) {\n if (!target) {\n target = closest(document.elementFromPoint(this.parent.element.offsetLeft + 2, e.clientY), 'tr');\n }\n if (x1 > x2) {\n tmp = x2;\n x2 = x1;\n x1 = tmp;\n }\n if (y1 > y2) {\n tmp = y2;\n y2 = y1;\n y1 = tmp;\n }\n this.element.style.left = x1 + 'px';\n this.element.style.top = y1 + 'px';\n this.element.style.width = x2 - x1 + 'px';\n this.element.style.height = y2 - y1 + 'px';\n }\n if (target && !e.ctrlKey && !e.shiftKey) {\n var rowIndex = parseInt(target.getAttribute('aria-rowindex'), 10);\n if (!this.isCellDrag) {\n this.hideAutoFill();\n this.selectRowsByRange(this.startDIndex, rowIndex);\n }\n else {\n var td = parentsUntil(e.target, 'e-rowcell');\n if (td) {\n this.startAFCell = this.startCell;\n this.endAFCell = parentsUntil(e.target, 'e-rowcell');\n this.selectLikeExcel(e, rowIndex, parseInt(td.getAttribute('aria-colindex'), 10));\n }\n }\n }\n };\n Selection.prototype.selectLikeExcel = function (e, rowIndex, cellIndex) {\n if (!this.isAutoFillSel) {\n this.clearCellSelection();\n this.selectCellsByRange({ rowIndex: this.startDIndex, cellIndex: this.startDCellIndex }, { rowIndex: rowIndex, cellIndex: cellIndex });\n this.drawBorders();\n }\n else { //Autofill\n this.showAFBorders();\n this.selectLikeAutoFill(e);\n }\n };\n Selection.prototype.drawBorders = function () {\n if (this.selectionSettings.cellSelectionMode === 'BoxWithBorder' && this.selectedRowCellIndexes.length && !this.parent.isEdit) {\n this.parent.element.classList.add('e-enabledboxbdr');\n if (!this.bdrElement) {\n this.createBorders();\n }\n this.positionBorders();\n }\n else {\n this.showHideBorders('none');\n }\n };\n Selection.prototype.isLastCell = function (cell) {\n var cells = [].slice.call(cell.parentElement.querySelectorAll('.e-rowcell:not(.e-hide)'));\n return cells[cells.length - 1] === cell;\n };\n Selection.prototype.isLastRow = function (cell) {\n var rows = [].slice.call(closest(cell, 'tbody').querySelectorAll('.e-row:not(.e-hiddenrow)'));\n return cell.parentElement === rows[rows.length - 1];\n };\n Selection.prototype.isFirstRow = function (cell) {\n var rows = [].slice.call(closest(cell, 'tbody').querySelectorAll('.e-row:not(.e-hiddenrow)'));\n return cell.parentElement === rows[0];\n };\n Selection.prototype.isFirstCell = function (cell) {\n var cells = [].slice.call(cell.parentElement.querySelectorAll('.e-rowcell:not(.e-hide)'));\n return cells[0] === cell;\n };\n Selection.prototype.setBorders = function (parentEle, border, bdrStr) {\n var cells = [].slice.call(parentEle.querySelectorAll('.e-cellselectionbackground')).\n filter(function (ele) { return ele.style.display === ''; });\n if (cells.length) {\n var isFrozen = this.parent.isFrozenGrid();\n var start = cells[0];\n var end = cells[cells.length - 1];\n var stOff = start.getBoundingClientRect();\n var endOff = end.getBoundingClientRect();\n var parentOff = start.offsetParent.getBoundingClientRect();\n var rowHeight = this.isLastRow(end) && (bdrStr === '1' || bdrStr === '2' || bdrStr === '5') ? 2 : 0;\n var topOffSet = this.parent.frozenRows && (bdrStr === '1' || bdrStr === '2') &&\n this.isFirstRow(start) ? 1.5 : 0;\n var leftOffset = isFrozen && (bdrStr === '2' || bdrStr === '4') && this.isFirstCell(start) ? 1 : 0;\n var rightOffset = ((this.parent.getFrozenMode() === 'Right' && (bdrStr === '1' || bdrStr === '3'))\n || (this.parent.getFrozenMode() === 'Left-Right' && (bdrStr === '5' || bdrStr === '6')))\n && this.isFirstCell(start) ? 1 : 0;\n if (this.parent.enableRtl) {\n border.style.right = parentOff.right - stOff.right - leftOffset + 'px';\n border.style.width = stOff.right - endOff.left + leftOffset + 1 + 'px';\n }\n else {\n border.style.left = stOff.left - parentOff.left - leftOffset - rightOffset + 'px';\n border.style.width = endOff.right - stOff.left + leftOffset - rightOffset + 1 + 'px';\n }\n border.style.top = stOff.top - parentOff.top - topOffSet + 'px';\n border.style.height = endOff.top - stOff.top > 0 ?\n (endOff.top - parentOff.top + endOff.height + 1) - (stOff.top - parentOff.top) - rowHeight + topOffSet + 'px' :\n endOff.height + topOffSet - rowHeight + 1 + 'px';\n this.selectDirection += bdrStr;\n }\n else {\n border.style.display = 'none';\n }\n };\n Selection.prototype.positionBorders = function () {\n this.updateStartEndCells();\n if (!this.startCell || !this.bdrElement || !this.selectedRowCellIndexes.length) {\n return;\n }\n this.selectDirection = '';\n this.showHideBorders('');\n this.setBorders(this.parent.getContentTable(), this.bdrElement, '1');\n if (this.parent.isFrozenGrid()) {\n this.setBorders(this.parent.contentModule.getMovableContent(), this.mcBdrElement, '2');\n if (this.parent.getFrozenMode() === 'Left-Right') {\n this.setBorders(this.parent.contentModule.getFrozenRightContent(), this.frcBdrElement, '5');\n }\n }\n if (this.parent.frozenRows) {\n this.setBorders(this.parent.getHeaderTable(), this.fhBdrElement, '3');\n if (this.parent.isFrozenGrid()) {\n this.setBorders(this.parent.headerModule.getMovableHeader(), this.mhBdrElement, '4');\n if (this.parent.getFrozenMode() === 'Left-Right') {\n this.setBorders(this.parent.headerModule.getFrozenRightHeader(), this.frhBdrElement, '6');\n }\n }\n }\n this.applyBorders(this.selectDirection);\n };\n Selection.prototype.applyBothFrozenBorders = function (str) {\n var rtl = this.parent.enableRtl;\n switch (str.length) {\n case 6:\n {\n this.bdrElement.style.borderWidth = rtl ? '0 2px 2px 0' : '0 0 2px 2px';\n this.mcBdrElement.style.borderWidth = '0 0 2px 0';\n this.fhBdrElement.style.borderWidth = rtl ? '2px 2px 0 0' : '2px 0 0 2px';\n this.mhBdrElement.style.borderWidth = '2px 0 0 0';\n this.frcBdrElement.style.borderWidth = rtl ? '0 0 2px 2px' : '0 2px 2px 0';\n this.frhBdrElement.style.borderWidth = rtl ? '2px 0 0 2px' : '2px 2px 0 0';\n }\n break;\n case 4:\n {\n if (str.includes('1') && str.includes('2') && str.includes('3') && str.includes('4')) {\n this.bdrElement.style.borderWidth = rtl ? '0 2px 2px 0' : '0 0 2px 2px';\n this.mcBdrElement.style.borderWidth = rtl ? '0 0 2px 2px' : '0 2px 2px 0';\n this.fhBdrElement.style.borderWidth = rtl ? '2px 2px 0 0' : '2px 0 0 2px';\n this.mhBdrElement.style.borderWidth = rtl ? '2px 0 0 2px' : '2px 2px 0 0';\n }\n if (str.includes('2') && str.includes('4') && str.includes('5') && str.includes('6')) {\n this.mcBdrElement.style.borderWidth = rtl ? '0 2px 2px 0' : '0 0 2px 2px';\n this.mhBdrElement.style.borderWidth = rtl ? '2px 2px 0 0' : '2px 0 0 2px';\n this.frcBdrElement.style.borderWidth = rtl ? '0 0 2px 2px' : '0 2px 2px 0';\n this.frhBdrElement.style.borderWidth = rtl ? '2px 0 0 2px' : '2px 2px 0 0';\n }\n }\n break;\n case 3:\n {\n this.bdrElement.style.borderWidth = rtl ? '2px 2px 2px 0' : '2px 0 2px 2px';\n this.mcBdrElement.style.borderWidth = '2p 0 2px 0';\n this.frcBdrElement.style.borderWidth = rtl ? '2px 0 2px 2px' : '2px 2px 2px 0';\n if (this.parent.frozenRows) {\n this.fhBdrElement.style.borderWidth = rtl ? '2px 2px 2px 0' : '2px 0 2px 2px';\n this.mhBdrElement.style.borderWidth = '2px 0 2px 0';\n this.frcBdrElement.style.borderWidth = rtl ? '2px 0 2px 2px' : '2px 2px 2px 0';\n }\n }\n break;\n case 2:\n {\n if (str.includes('1')) {\n this.mcBdrElement.style.borderWidth = rtl ? '2px 0 2px 2px' : '2px 2px 2px 0';\n if (this.parent.frozenRows) {\n this.fhBdrElement.style.borderWidth = '2px 2px 0 2px';\n }\n }\n if (str.includes('2')) {\n this.bdrElement.style.borderWidth = rtl ? '2px 2px 2px 0' : '2px 0 2px 2px';\n this.frcBdrElement.style.borderWidth = rtl ? '2px 0 2px 2px' : '2px 2px 2px 0';\n if (this.parent.frozenRows) {\n this.mhBdrElement.style.borderWidth = '2px 2px 0 2px';\n }\n }\n if (str.includes('3')) {\n this.mhBdrElement.style.borderWidth = rtl ? '2px 0 2px 2px' : '2px 2px 2px 0';\n this.bdrElement.style.borderWidth = '0 2px 2px 2px';\n }\n if (str.includes('4')) {\n this.fhBdrElement.style.borderWidth = rtl ? '2px 2px 2px 0' : '2px 0 2px 2px';\n this.frhBdrElement.style.borderWidth = rtl ? '2px 0 2px 2px' : '2px 2px 2px 0';\n this.mcBdrElement.style.borderWidth = '0 2px 2px 2px';\n }\n if (str.includes('5')) {\n this.mcBdrElement.style.borderWidth = rtl ? '2px 2px 2px 0' : '2px 0 2px 2px';\n if (this.parent.frozenRows) {\n this.frhBdrElement.style.borderWidth = '2px 2px 0 2px';\n }\n }\n if (str.includes('6')) {\n this.mhBdrElement.style.borderWidth = rtl ? '2px 2px 2px 0' : '2px 0 2px 2px';\n this.frcBdrElement.style.borderWidth = '0 2px 2px 2px';\n }\n }\n break;\n default:\n this.bdrElement.style.borderWidth = '2px';\n this.mcBdrElement.style.borderWidth = '2px';\n this.frcBdrElement.style.borderWidth = '2px';\n if (this.parent.frozenRows) {\n this.fhBdrElement.style.borderWidth = '2px';\n this.mhBdrElement.style.borderWidth = '2px';\n this.frhBdrElement.style.borderWidth = '2px';\n }\n break;\n }\n };\n Selection.prototype.applyBorders = function (str) {\n var rtl = this.parent.enableRtl;\n if (this.parent.getFrozenMode() === 'Left-Right') {\n this.applyBothFrozenBorders(str);\n }\n else {\n switch (str.length) {\n case 4:\n {\n if (this.parent.getFrozenMode() === 'Right') {\n this.bdrElement.style.borderWidth = rtl ? '0 0 2px 2px' : '0 2px 2px 0';\n this.mcBdrElement.style.borderWidth = rtl ? '0 2px 2px 0' : '0 0 2px 2px';\n this.fhBdrElement.style.borderWidth = rtl ? '2px 0 0 2px' : '2px 2px 0 0';\n this.mhBdrElement.style.borderWidth = rtl ? '2px 2px 0 0' : '2px 0 0 2px';\n }\n else {\n this.bdrElement.style.borderWidth = rtl ? '0 2px 2px 0' : '0 0 2px 2px';\n this.mcBdrElement.style.borderWidth = rtl ? '0 0 2px 2px' : '0 2px 2px 0';\n this.fhBdrElement.style.borderWidth = rtl ? '2px 2px 0 0' : '2px 0 0 2px';\n this.mhBdrElement.style.borderWidth = rtl ? '2px 0 0 2px' : '2px 2px 0 0';\n }\n }\n break;\n case 2:\n {\n if (this.parent.getFrozenMode() === 'Right') {\n this.bdrElement.style.borderWidth = str.includes('2') ? rtl ? '2px 0 2px 2px'\n : '2px 2px 2px 0' : '0 2px 2px 2px';\n this.mcBdrElement.style.borderWidth = str.includes('1') ? rtl ? '2px 2px 2px 0'\n : '2px 0 2px 2px' : '0 2px 2px 2px';\n if (this.parent.frozenRows) {\n this.fhBdrElement.style.borderWidth = str.includes('1') ? '2px 2px 0 2px'\n : rtl ? '2px 0 2px 2px' : '2px 2px 2px 0';\n this.mhBdrElement.style.borderWidth = str.includes('2') ? '2px 2px 0 2px'\n : rtl ? '2px 2px 2px 0' : '2px 0 2px 2px';\n }\n }\n else {\n this.bdrElement.style.borderWidth = str.includes('2') ? rtl ? '2px 2px 2px 0'\n : '2px 0 2px 2px' : '0 2px 2px 2px';\n if (this.parent.isFrozenGrid()) {\n this.mcBdrElement.style.borderWidth = str.includes('1') ? rtl ? '2px 0 2px 2px'\n : '2px 2px 2px 0' : '0 2px 2px 2px';\n }\n if (this.parent.frozenRows) {\n this.fhBdrElement.style.borderWidth = str.includes('1') ? '2px 2px 0 2px'\n : rtl ? '2px 2px 2px 0' : '2px 0 2px 2px';\n if (this.parent.isFrozenGrid()) {\n this.mhBdrElement.style.borderWidth = str.includes('2') ? '2px 2px 0 2px'\n : rtl ? '2px 0 2px 2px' : '2px 2px 2px 0';\n }\n }\n }\n }\n break;\n default:\n this.bdrElement.style.borderWidth = '2px';\n if (this.parent.isFrozenGrid()) {\n this.mcBdrElement.style.borderWidth = '2px';\n }\n if (this.parent.frozenRows) {\n this.fhBdrElement.style.borderWidth = '2px';\n if (this.parent.isFrozenGrid()) {\n this.mhBdrElement.style.borderWidth = '2px';\n }\n }\n break;\n }\n }\n };\n Selection.prototype.createBorders = function () {\n if (!this.bdrElement) {\n this.bdrElement = this.parent.getContentTable().parentElement.appendChild(createElement('div', {\n className: 'e-xlsel', id: this.parent.element.id + '_bdr',\n styles: 'width: 2px; border-width: 0;'\n }));\n if (this.parent.isFrozenGrid()) {\n this.mcBdrElement = this.parent.contentModule.getMovableContent().appendChild(createElement('div', {\n className: 'e-xlsel', id: this.parent.element.id + '_mcbdr',\n styles: 'height: 2px; border-width: 0;'\n }));\n if (this.parent.getFrozenMode() === 'Left-Right') {\n this.frcBdrElement = this.parent.contentModule.getFrozenRightContent().appendChild(createElement('div', {\n className: 'e-xlsel', id: this.parent.element.id + '_frcbdr',\n styles: 'height: 2px; border-width: 0;'\n }));\n }\n }\n if (this.parent.frozenRows) {\n this.fhBdrElement = this.parent.getHeaderTable().parentElement.appendChild(createElement('div', { className: 'e-xlsel', id: this.parent.element.id + '_fhbdr', styles: 'height: 2px;' }));\n }\n if (this.parent.frozenRows && this.parent.isFrozenGrid()) {\n this.mhBdrElement = this.parent.headerModule.getMovableHeader().appendChild(createElement('div', { className: 'e-xlsel', id: this.parent.element.id + '_mhbdr', styles: 'height: 2px;' }));\n if (this.parent.getFrozenMode() === 'Left-Right') {\n this.frhBdrElement = this.parent.headerModule.getFrozenRightHeader().appendChild(createElement('div', { className: 'e-xlsel', id: this.parent.element.id + '_frhbdr', styles: 'height: 2px;' }));\n }\n }\n }\n };\n Selection.prototype.showHideBorders = function (display) {\n if (this.bdrElement) {\n this.bdrElement.style.display = display;\n if (this.parent.isFrozenGrid()) {\n this.mcBdrElement.style.display = display;\n if (this.parent.getFrozenMode() === 'Left-Right') {\n this.frcBdrElement.style.display = display;\n }\n }\n if (this.parent.frozenRows) {\n this.fhBdrElement.style.display = display;\n }\n if (this.parent.frozenRows && this.parent.isFrozenGrid()) {\n this.mhBdrElement.style.display = display;\n if (this.parent.getFrozenMode() === 'Left-Right') {\n this.frhBdrElement.style.display = display;\n }\n }\n }\n };\n Selection.prototype.drawAFBorders = function () {\n if (!this.bdrAFBottom) {\n this.createAFBorders();\n }\n this.positionAFBorders();\n };\n Selection.prototype.positionAFBorders = function () {\n if (!this.startCell || !this.bdrAFLeft) {\n return;\n }\n var stOff = this.startAFCell.getBoundingClientRect();\n var endOff = this.endAFCell.getBoundingClientRect();\n var top = endOff.top - stOff.top > 0 ? 1 : 0;\n var firstCellTop = endOff.top - stOff.top >= 0 && (parentsUntil(this.startAFCell, 'e-movablecontent') ||\n parentsUntil(this.startAFCell, 'e-frozencontent')) && this.isFirstRow(this.startAFCell) ? 1.5 : 0;\n var firstCellLeft = (parentsUntil(this.startAFCell, 'e-movablecontent') ||\n parentsUntil(this.startAFCell, 'e-movableheader')) && this.isFirstCell(this.startAFCell) ? 1 : 0;\n var rowHeight = this.isLastRow(this.endAFCell) && (parentsUntil(this.endAFCell, 'e-movablecontent') ||\n parentsUntil(this.endAFCell, 'e-frozencontent')) ? 2 : 0;\n var parentOff = this.startAFCell.offsetParent.getBoundingClientRect();\n var parentRect = this.parent.element.getBoundingClientRect();\n var sTop = this.startAFCell.offsetParent.parentElement.scrollTop;\n var sLeft = this.startAFCell.offsetParent.parentElement.scrollLeft;\n var scrollTop = sTop - this.startAFCell.offsetTop;\n var scrollLeft = sLeft - this.startAFCell.offsetLeft;\n var totalHeight = this.parent.element.clientHeight;\n var totalWidth = this.parent.element.clientWidth;\n scrollTop = scrollTop > 0 ? Math.floor(scrollTop) - 1 : 0;\n scrollLeft = scrollLeft > 0 ? scrollLeft : 0;\n var left = stOff.left - parentRect.left;\n if (!this.parent.enableRtl) {\n this.bdrAFLeft.style.left = left - firstCellLeft + scrollLeft - 1 + 'px';\n this.bdrAFRight.style.left = endOff.left - parentRect.left - 2 + endOff.width + 'px';\n this.bdrAFRight.style.width = totalWidth <= parseInt(this.bdrAFRight.style.left, 10) ? '0px' : '2px';\n this.bdrAFTop.style.left = left + scrollLeft - 0.5 + 'px';\n this.bdrAFTop.style.width = parseInt(this.bdrAFRight.style.left, 10) - parseInt(this.bdrAFLeft.style.left, 10)\n - firstCellLeft + 1 + 'px';\n if (totalWidth <= (parseInt(this.bdrAFTop.style.width, 10) + parseInt(this.bdrAFTop.style.left, 10))) {\n var leftRemove = (parseInt(this.bdrAFTop.style.width, 10) + parseInt(this.bdrAFTop.style.left, 10)) - totalWidth;\n this.bdrAFTop.style.width = parseInt(this.bdrAFTop.style.width, 10) - leftRemove + 'px';\n }\n }\n else {\n var scrolloffSet = (parentsUntil(this.startAFCell, 'e-movablecontent') ||\n parentsUntil(this.startAFCell, 'e-movableheader')) ? stOff.right -\n this.startAFCell.offsetParent.parentElement.getBoundingClientRect().width -\n parentRect.left : 0;\n this.bdrAFLeft.style.right = parentRect.right - endOff.right - 2 + endOff.width + 'px';\n this.bdrAFLeft.style.width = totalWidth <= parseInt(this.bdrAFLeft.style.right, 10) ? '0px' : '2px';\n this.bdrAFRight.style.right = parentRect.right - stOff.right - firstCellLeft + scrolloffSet - 1 + 'px';\n this.bdrAFTop.style.left = endOff.left - parentRect.left - 0.5 + 'px';\n this.bdrAFTop.style.width = parseInt(this.bdrAFLeft.style.right, 10) - parseInt(this.bdrAFRight.style.right, 10)\n - firstCellLeft + 1 + 'px';\n if (parseInt(this.bdrAFTop.style.left, 10) < 0) {\n this.bdrAFTop.style.width = parseInt(this.bdrAFTop.style.width, 10) + parseInt(this.bdrAFTop.style.left, 10) + 'px';\n this.bdrAFTop.style.left = '0px';\n }\n }\n this.bdrAFLeft.style.top = stOff.top - parentRect.top - firstCellTop + scrollTop + 'px';\n this.bdrAFLeft.style.height = endOff.top - stOff.top > 0 ?\n (endOff.top - parentOff.top + endOff.height + 1) - (stOff.top - parentOff.top) + firstCellTop - rowHeight - scrollTop + 'px' :\n endOff.height + firstCellTop - rowHeight - scrollTop + 'px';\n this.bdrAFRight.style.top = this.bdrAFLeft.style.top;\n this.bdrAFRight.style.height = parseInt(this.bdrAFLeft.style.height, 10) + 'px';\n this.bdrAFTop.style.top = this.bdrAFRight.style.top;\n this.bdrAFBottom.style.left = this.bdrAFTop.style.left;\n this.bdrAFBottom.style.top = parseFloat(this.bdrAFLeft.style.top) + parseFloat(this.bdrAFLeft.style.height) - top - 1 + 'px';\n this.bdrAFBottom.style.width = totalHeight <= parseFloat(this.bdrAFBottom.style.top) ? '0px' : this.bdrAFTop.style.width;\n if (totalHeight <= (parseInt(this.bdrAFLeft.style.height, 10) + parseInt(this.bdrAFLeft.style.top, 10))) {\n var topRemove = parseInt(this.bdrAFLeft.style.height, 10) + parseInt(this.bdrAFLeft.style.top, 10) - totalHeight;\n this.bdrAFLeft.style.height = parseInt(this.bdrAFLeft.style.height, 10) - topRemove + 'px';\n this.bdrAFRight.style.height = parseInt(this.bdrAFLeft.style.height, 10) + 'px';\n }\n };\n Selection.prototype.createAFBorders = function () {\n if (!this.bdrAFLeft) {\n this.bdrAFLeft = this.parent.element.appendChild(createElement('div', { className: 'e-xlselaf', id: this.parent.element.id + '_bdrafleft', styles: 'width: 2px;' }));\n this.bdrAFRight = this.parent.element.appendChild(createElement('div', { className: 'e-xlselaf', id: this.parent.element.id + '_bdrafright', styles: 'width: 2px;' }));\n this.bdrAFBottom = this.parent.element.appendChild(createElement('div', { className: 'e-xlselaf', id: this.parent.element.id + '_bdrafbottom', styles: 'height: 2px;' }));\n this.bdrAFTop = this.parent.element.appendChild(createElement('div', { className: 'e-xlselaf', id: this.parent.element.id + '_bdraftop', styles: 'height: 2px;' }));\n }\n };\n Selection.prototype.showAFBorders = function () {\n if (this.bdrAFLeft) {\n this.bdrAFLeft.style.display = '';\n this.bdrAFRight.style.display = '';\n this.bdrAFBottom.style.display = '';\n this.bdrAFTop.style.display = '';\n }\n };\n Selection.prototype.hideAFBorders = function () {\n if (this.bdrAFLeft) {\n this.bdrAFLeft.style.display = 'none';\n this.bdrAFRight.style.display = 'none';\n this.bdrAFBottom.style.display = 'none';\n this.bdrAFTop.style.display = 'none';\n }\n };\n Selection.prototype.updateValue = function (rIdx, cIdx, cell) {\n var args = this.createBeforeAutoFill(rIdx, cIdx, cell);\n if (!args.cancel) {\n var col = this.parent.getColumnByIndex(cIdx);\n if (this.parent.editModule && cell) {\n if (col.type === 'number') {\n this.parent.editModule.updateCell(rIdx, col.field, parseInt(args.value, 10));\n }\n else {\n this.parent.editModule.updateCell(rIdx, col.field, args.value);\n }\n }\n }\n };\n Selection.prototype.createBeforeAutoFill = function (rowIndex, colIndex, cell) {\n var col = this.parent.getColumnByIndex(colIndex);\n var args = {\n column: col,\n value: cell.innerText\n };\n this.parent.trigger(events.beforeAutoFill, args);\n return args;\n };\n Selection.prototype.getAutoFillCells = function (rowIndex, startCellIdx) {\n var cls = '.e-cellselectionbackground';\n var cells = [].slice.call(this.parent.getDataRows()[rowIndex].querySelectorAll(cls));\n if (this.parent.isFrozenGrid()) {\n cells = cells.concat([].slice.call(this.parent.getMovableDataRows()[rowIndex].querySelectorAll(cls)));\n if (this.parent.getFrozenMode() === 'Left-Right') {\n cells = cells.concat([].slice.call(this.parent.getFrozenRightDataRows()[rowIndex].querySelectorAll(cls)));\n }\n }\n return cells;\n };\n /* tslint:disable-next-line:max-func-body-length */\n Selection.prototype.selectLikeAutoFill = function (e, isApply) {\n var startrowIdx = parseInt(parentsUntil(this.startAFCell, 'e-row').getAttribute('aria-rowindex'), 10);\n var startCellIdx = parseInt(this.startAFCell.getAttribute('aria-colindex'), 10);\n var endrowIdx = parseInt(parentsUntil(this.endAFCell, 'e-row').getAttribute('aria-rowindex'), 10);\n var endCellIdx = parseInt(this.endAFCell.getAttribute('aria-colindex'), 10);\n var rowLen = this.selectedRowCellIndexes.length - 1;\n var colLen = this.selectedRowCellIndexes[0].cellIndexes.length - 1;\n var col;\n switch (true) { //direction \n case !isApply && this.endAFCell.classList.contains('e-cellselectionbackground') &&\n !!parentsUntil(e.target, 'e-rowcell'):\n this.startAFCell = this.parent.getCellFromIndex(startrowIdx, startCellIdx);\n this.endAFCell = this.parent.getCellFromIndex(startrowIdx + rowLen, startCellIdx + colLen);\n this.drawAFBorders();\n break;\n case this.autoFillRLselection && startCellIdx + colLen < endCellIdx && //right\n endCellIdx - startCellIdx - colLen + 1 > endrowIdx - startrowIdx - rowLen // right bottom\n && endCellIdx - startCellIdx - colLen + 1 > startrowIdx - endrowIdx: //right top\n this.endAFCell = this.parent.getCellFromIndex(startrowIdx + rowLen, endCellIdx);\n endrowIdx = parseInt(parentsUntil(this.endAFCell, 'e-row').getAttribute('aria-rowindex'), 10);\n endCellIdx = parseInt(this.endAFCell.getAttribute('aria-colindex'), 10);\n if (!isApply) {\n this.drawAFBorders();\n }\n else {\n var cellIdx = parseInt(this.endCell.getAttribute('aria-colindex'), 10);\n for (var i = startrowIdx; i <= endrowIdx; i++) {\n var cells = this.getAutoFillCells(i, startCellIdx);\n var c = 0;\n for (var j = cellIdx + 1; j <= endCellIdx; j++) {\n if (c > colLen) {\n c = 0;\n }\n this.updateValue(i, j, cells[c]);\n c++;\n }\n }\n this.selectCellsByRange({ rowIndex: startrowIdx, cellIndex: this.startCellIndex }, { rowIndex: endrowIdx, cellIndex: endCellIdx });\n }\n break;\n case this.autoFillRLselection && startCellIdx > endCellIdx && // left\n startCellIdx - endCellIdx + 1 > endrowIdx - startrowIdx - rowLen && //left top\n startCellIdx - endCellIdx + 1 > startrowIdx - endrowIdx: // left bottom\n this.startAFCell = this.parent.getCellFromIndex(startrowIdx, endCellIdx);\n this.endAFCell = this.endCell;\n if (!isApply) {\n this.drawAFBorders();\n }\n else {\n for (var i = startrowIdx; i <= startrowIdx + rowLen; i++) {\n var cells = this.getAutoFillCells(i, startCellIdx);\n cells.reverse();\n var c = 0;\n for (var j = this.startCellIndex - 1; j >= endCellIdx; j--) {\n if (c > colLen) {\n c = 0;\n }\n this.updateValue(i, j, cells[c]);\n c++;\n }\n }\n this.selectCellsByRange({ rowIndex: startrowIdx, cellIndex: endCellIdx }, { rowIndex: startrowIdx + rowLen, cellIndex: this.startCellIndex + colLen });\n }\n break;\n case startrowIdx > endrowIdx: //up\n this.startAFCell = this.parent.getCellFromIndex(endrowIdx, startCellIdx);\n this.endAFCell = this.endCell;\n if (!isApply) {\n this.drawAFBorders();\n }\n else {\n var trIdx = parseInt(this.endCell.parentElement.getAttribute('aria-rowindex'), 10);\n var r = trIdx;\n for (var i = startrowIdx - 1; i >= endrowIdx; i--) {\n if (r === this.startIndex - 1) {\n r = trIdx;\n }\n var cells = this.getAutoFillCells(r, startCellIdx);\n var c = 0;\n r--;\n for (var j = this.startCellIndex; j <= this.startCellIndex + colLen; j++) {\n this.updateValue(i, j, cells[c]);\n c++;\n }\n }\n this.selectCellsByRange({ rowIndex: endrowIdx, cellIndex: startCellIdx + colLen }, { rowIndex: startrowIdx + rowLen, cellIndex: startCellIdx });\n }\n break;\n default: //down\n this.endAFCell = this.parent.getCellFromIndex(endrowIdx, startCellIdx + colLen);\n if (!isApply) {\n this.drawAFBorders();\n }\n else {\n var trIdx = parseInt(this.endCell.parentElement.getAttribute('aria-rowindex'), 10);\n var r = this.startIndex;\n for (var i = trIdx + 1; i <= endrowIdx; i++) {\n if (r === trIdx + 1) {\n r = this.startIndex;\n }\n var cells = this.getAutoFillCells(r, startCellIdx);\n r++;\n var c = 0;\n for (var m = this.startCellIndex; m <= this.startCellIndex + colLen; m++) {\n this.updateValue(i, m, cells[c]);\n c++;\n }\n }\n this.selectCellsByRange({ rowIndex: trIdx - rowLen, cellIndex: startCellIdx }, { rowIndex: endrowIdx, cellIndex: startCellIdx + colLen });\n }\n break;\n }\n };\n Selection.prototype.mouseUpHandler = function (e) {\n document.body.classList.remove('e-disableuserselect');\n if (this.element) {\n remove(this.element);\n }\n if (this.isDragged && this.selectedRowCellIndexes.length === 1 && this.selectedRowCellIndexes[0].cellIndexes.length === 1) {\n this.mUPTarget = parentsUntil(e.target, 'e-rowcell');\n }\n else {\n this.mUPTarget = null;\n }\n if (this.isDragged && !this.isAutoFillSel && this.selectionSettings.mode === 'Cell') {\n var target = e.target;\n var rowIndex = parseInt(target.parentElement.getAttribute('aria-rowindex'), 10);\n var cellIndex = parseInt(target.getAttribute('aria-colindex'), 10);\n this.isDragged = false;\n this.clearCellSelection();\n this.selectCellsByRange({ rowIndex: this.startDIndex, cellIndex: this.startDCellIndex }, { rowIndex: rowIndex, cellIndex: cellIndex });\n }\n this.isDragged = false;\n this.updateAutoFillPosition();\n if (this.isAutoFillSel) {\n var lastCell = parentsUntil(e.target, 'e-rowcell');\n this.endAFCell = lastCell ? lastCell : this.endCell === this.endAFCell ? this.startAFCell : this.endAFCell;\n this.startAFCell = this.startCell;\n this.updateStartCellsIndex();\n this.selectLikeAutoFill(e, true);\n this.updateAutoFillPosition();\n this.hideAFBorders();\n this.positionBorders();\n this.isAutoFillSel = false;\n }\n EventHandler.remove(this.parent.getContent(), 'mousemove', this.mouseMoveHandler);\n if (this.parent.frozenRows) {\n EventHandler.remove(this.parent.getHeaderContent(), 'mousemove', this.mouseMoveHandler);\n }\n EventHandler.remove(document, 'mouseup', this.mouseUpHandler);\n };\n Selection.prototype.hideAutoFill = function () {\n if (this.autofill) {\n this.autofill.style.display = 'none';\n }\n };\n /**\n * @hidden\n */\n Selection.prototype.updateAutoFillPosition = function () {\n if (this.parent.enableAutoFill && !this.parent.isEdit &&\n this.selectionSettings.cellSelectionMode.indexOf('Box') > -1 && !this.isRowType() && !this.isSingleSel()\n && this.selectedRowCellIndexes.length) {\n var index = parseInt(this.target.getAttribute('aria-colindex'), 10);\n var rindex = parseInt(this.target.getAttribute('index'), 10);\n var rowIndex = this.selectedRowCellIndexes[this.selectedRowCellIndexes.length - 1].rowIndex;\n var cells = this.getAutoFillCells(rowIndex, index).filter(function (ele) { return ele.style.display === ''; });\n var col = this.parent.getColumnByIndex(index);\n var isFrozenCol = col.getFreezeTableName() === 'movable';\n var isFrozenRow = rindex < this.parent.frozenRows;\n var isFrozenRight = this.parent.getFrozenMode() === 'Left-Right' && col.getFreezeTableName() === 'frozen-right';\n if (!select('#' + this.parent.element.id + '_autofill', parentsUntil(this.target, 'e-table'))) {\n if (select('#' + this.parent.element.id + '_autofill', this.parent.element)) {\n select('#' + this.parent.element.id + '_autofill', this.parent.element).remove();\n }\n this.autofill = createElement('div', { className: 'e-autofill', id: this.parent.element.id + '_autofill' });\n this.autofill.style.display = 'none';\n !isFrozenRow ? !isFrozenCol ? this.parent.getContentTable().parentElement.appendChild(this.autofill) :\n this.parent.contentModule.getMovableContent().appendChild(this.autofill) :\n !isFrozenCol ? this.parent.getHeaderTable().parentElement.appendChild(this.autofill) :\n this.parent.headerModule.getMovableHeader().appendChild(this.autofill);\n if (isFrozenRight) {\n isFrozenRow ? this.parent.getFrozenRightHeader().appendChild(this.autofill)\n : this.parent.getFrozenRightContent().appendChild(this.autofill);\n }\n }\n var cell = cells[cells.length - 1];\n if (cell && cell.offsetParent) {\n var clientRect = cell.getBoundingClientRect();\n var parentOff = cell.offsetParent.getBoundingClientRect();\n var colWidth = this.isLastCell(cell) ? 4 : 0;\n var rowHeight = this.isLastRow(cell) ? 3 : 0;\n if (!this.parent.enableRtl) {\n this.autofill.style.left = clientRect.left - parentOff.left + clientRect.width - 4 - colWidth + 'px';\n }\n else {\n this.autofill.style.right = parentOff.right - clientRect.right + clientRect.width - 4 - colWidth + 'px';\n }\n this.autofill.style.top = clientRect.top - parentOff.top + clientRect.height - 5 - rowHeight + 'px';\n }\n this.autofill.style.display = '';\n }\n else {\n this.hideAutoFill();\n }\n };\n Selection.prototype.mouseDownHandler = function (e) {\n this.mouseButton = e.button;\n var target = e.target;\n var gObj = this.parent;\n var isDrag;\n var gridElement = parentsUntil(target, 'e-grid');\n if (gridElement && gridElement.id !== gObj.element.id || parentsUntil(target, 'e-headercontent') && !this.parent.frozenRows ||\n parentsUntil(target, 'e-editedbatchcell') || parentsUntil(target, 'e-editedrow')) {\n return;\n }\n if (e.shiftKey || e.ctrlKey) {\n e.preventDefault();\n }\n if (parentsUntil(target, 'e-rowcell') && !e.shiftKey && !e.ctrlKey) {\n if (gObj.selectionSettings.cellSelectionMode.indexOf('Box') > -1 && !this.isRowType() && !this.isSingleSel()) {\n this.isCellDrag = true;\n isDrag = true;\n }\n else if (gObj.allowRowDragAndDrop && !gObj.isEdit) {\n if (!this.isRowType() || this.isSingleSel() || closest(target, 'td').classList.contains('e-selectionbackground')) {\n this.isDragged = false;\n return;\n }\n isDrag = true;\n this.element = this.parent.createElement('div', { className: 'e-griddragarea' });\n gObj.getContent().appendChild(this.element);\n }\n if (isDrag) {\n this.enableDrag(e, true);\n }\n }\n this.updateStartEndCells();\n if (target.classList.contains('e-autofill') || target.classList.contains('e-xlsel')) {\n this.isCellDrag = true;\n this.isAutoFillSel = true;\n this.enableDrag(e);\n }\n };\n Selection.prototype.updateStartEndCells = function () {\n var cells = [].slice.call(this.parent.element.querySelectorAll('.e-cellselectionbackground'));\n this.startCell = cells[0];\n this.endCell = cells[cells.length - 1];\n if (this.startCell) {\n this.startIndex = parseInt(this.startCell.parentElement.getAttribute('aria-rowindex'), 10);\n this.startCellIndex = parseInt(parentsUntil(this.startCell, 'e-rowcell').getAttribute('aria-colindex'), 10);\n }\n };\n Selection.prototype.updateStartCellsIndex = function () {\n if (this.startCell) {\n this.startIndex = parseInt(this.startCell.parentElement.getAttribute('aria-rowindex'), 10);\n this.startCellIndex = parseInt(parentsUntil(this.startCell, 'e-rowcell').getAttribute('aria-colindex'), 10);\n }\n };\n Selection.prototype.enableDrag = function (e, isUpdate) {\n var gObj = this.parent;\n if (isUpdate) {\n var tr = closest(e.target, 'tr');\n this.startDIndex = parseInt(tr.getAttribute('aria-rowindex'), 10);\n this.startDCellIndex = parseInt(parentsUntil(e.target, 'e-rowcell').getAttribute('aria-colindex'), 10);\n }\n document.body.classList.add('e-disableuserselect');\n var gBRect = gObj.element.getBoundingClientRect();\n var postion = getPosition(e);\n this.x = postion.x - gBRect.left;\n this.y = postion.y - gBRect.top;\n EventHandler.add(gObj.getContent(), 'mousemove', this.mouseMoveHandler, this);\n if (this.parent.frozenRows) {\n EventHandler.add(gObj.getHeaderContent(), 'mousemove', this.mouseMoveHandler, this);\n }\n EventHandler.add(document, 'mouseup', this.mouseUpHandler, this);\n };\n Selection.prototype.clearSelAfterRefresh = function (e) {\n var isInfiniteScroll = this.parent.enableInfiniteScrolling && e.requestType === 'infiniteScroll';\n if (e.requestType !== 'virtualscroll' && !this.parent.isPersistSelection && !isInfiniteScroll) {\n this.clearSelection();\n }\n };\n /**\n * @hidden\n */\n Selection.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.uiUpdate, this.enableAfterRender, this);\n this.parent.on(events.initialEnd, this.initializeSelection, this);\n this.parent.on(events.rowSelectionComplete, this.onActionComplete, this);\n this.parent.on(events.cellSelectionComplete, this.onActionComplete, this);\n this.parent.on(events.inBoundModelChanged, this.onPropertyChanged, this);\n this.parent.on(events.cellFocused, this.onCellFocused, this);\n this.parent.on(events.beforeFragAppend, this.clearSelAfterRefresh, this);\n this.parent.on(events.columnPositionChanged, this.columnPositionChanged, this);\n this.parent.on(events.contentReady, this.initialEnd, this);\n this.actionBeginFunction = this.actionBegin.bind(this);\n this.actionCompleteFunction = this.actionComplete.bind(this);\n this.parent.addEventListener(events.actionBegin, this.actionBeginFunction);\n this.parent.addEventListener(events.actionComplete, this.actionCompleteFunction);\n this.parent.on(events.rowsRemoved, this.rowsRemoved, this);\n this.parent.on(events.headerRefreshed, this.refreshHeader, this);\n this.addEventListener_checkbox();\n };\n /**\n * @hidden\n */\n Selection.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.uiUpdate, this.enableAfterRender);\n this.parent.off(events.initialEnd, this.initializeSelection);\n this.parent.off(events.rowSelectionComplete, this.onActionComplete);\n this.parent.off(events.cellSelectionComplete, this.onActionComplete);\n this.parent.off(events.inBoundModelChanged, this.onPropertyChanged);\n this.parent.off(events.cellFocused, this.onCellFocused);\n this.parent.off(events.beforeFragAppend, this.clearSelAfterRefresh);\n this.parent.off(events.columnPositionChanged, this.columnPositionChanged);\n this.parent.removeEventListener(events.actionBegin, this.actionBeginFunction);\n this.parent.removeEventListener(events.actionComplete, this.actionCompleteFunction);\n this.parent.off(events.rowsRemoved, this.rowsRemoved);\n this.parent.off(events.headerRefreshed, this.refreshHeader);\n this.removeEventListener_checkbox();\n };\n Selection.prototype.wireEvents = function () {\n this.isMacOS = navigator.userAgent.indexOf('Mac OS') !== -1;\n if (this.isMacOS) {\n EventHandler.add(this.parent.element, 'keydown', this.keyDownHandler, this);\n EventHandler.add(this.parent.element, 'keyup', this.keyUpHandler, this);\n }\n };\n Selection.prototype.unWireEvents = function () {\n if (this.isMacOS) {\n EventHandler.remove(this.parent.element, 'keydown', this.keyDownHandler);\n EventHandler.remove(this.parent.element, 'keyup', this.keyUpHandler);\n }\n };\n Selection.prototype.columnPositionChanged = function () {\n if (!this.parent.isPersistSelection) {\n this.clearSelection();\n }\n };\n Selection.prototype.refreshHeader = function () {\n this.setCheckAllState();\n };\n Selection.prototype.rowsRemoved = function (e) {\n for (var i = 0; i < e.records.length; i++) {\n delete (this.selectedRowState[e.records[i][this.primaryKey]]);\n --this.totalRecordsCount;\n }\n this.setCheckAllState();\n };\n ;\n Selection.prototype.beforeFragAppend = function (e) {\n if (e.requestType !== 'virtualscroll' && !this.parent.isPersistSelection) {\n this.clearSelection();\n }\n };\n ;\n Selection.prototype.getCheckAllBox = function () {\n return this.parent.getHeaderContent().querySelector('.e-checkselectall');\n };\n Selection.prototype.enableAfterRender = function (e) {\n if (e.module === this.getModuleName() && e.enable) {\n this.render();\n this.initPerisistSelection();\n }\n };\n Selection.prototype.render = function (e) {\n EventHandler.add(this.parent.getContent(), 'mousedown', this.mouseDownHandler, this);\n EventHandler.add(this.parent.getHeaderContent(), 'mousedown', this.mouseDownHandler, this);\n };\n Selection.prototype.onPropertyChanged = function (e) {\n if (e.module !== this.getModuleName()) {\n return;\n }\n var gObj = this.parent;\n if (!isNullOrUndefined(e.properties.type) && this.selectionSettings.type === 'Single') {\n if (this.selectedRowCellIndexes.length > 1) {\n this.clearCellSelection();\n this.prevCIdxs = undefined;\n }\n if (this.selectedRowIndexes.length > 1) {\n this.clearRowSelection();\n this.prevRowIndex = undefined;\n }\n if (this.selectedColumnsIndexes.length > 1) {\n this.clearColumnSelection();\n this.prevColIndex = undefined;\n }\n this.enableSelectMultiTouch = false;\n this.hidePopUp();\n }\n if (!isNullOrUndefined(e.properties.mode) ||\n !isNullOrUndefined(e.properties.cellSelectionMode)) {\n this.clearSelection();\n this.prevRowIndex = undefined;\n this.prevCIdxs = undefined;\n this.prevColIndex = undefined;\n }\n this.isPersisted = true;\n this.checkBoxSelectionChanged();\n this.isPersisted = false;\n this.initPerisistSelection();\n var checkboxColumn = this.parent.getColumns().filter(function (col) { return col.type === 'checkbox'; });\n if (checkboxColumn.length) {\n gObj.isCheckBoxSelection = !(this.selectionSettings.checkboxMode === 'ResetOnRowClick');\n }\n this.drawBorders();\n };\n Selection.prototype.hidePopUp = function () {\n if (this.parent.element.querySelector('.e-gridpopup').querySelectorAll('.e-rowselect').length) {\n this.parent.element.querySelector('.e-gridpopup').style.display = 'none';\n }\n };\n Selection.prototype.initialEnd = function (e) {\n var isFrozen = this.parent.isFrozenGrid();\n var isLeftRightFrozen = this.parent.getFrozenMode() === 'Left-Right';\n if (!isFrozen || (isFrozen && (!isLeftRightFrozen && !e.args.isFrozen)\n || (isLeftRightFrozen && e.args.renderFrozenRightContent))) {\n this.parent.off(events.contentReady, this.initialEnd);\n this.selectRow(this.parent.selectedRowIndex);\n }\n };\n Selection.prototype.checkBoxSelectionChanged = function () {\n this.parent.off(events.contentReady, this.checkBoxSelectionChanged);\n var gobj = this.parent;\n var checkboxColumn = gobj.getColumns().filter(function (col) { return col.type === 'checkbox'; });\n if (checkboxColumn.length > 0) {\n gobj.isCheckBoxSelection = true;\n this.chkField = checkboxColumn[0].field;\n this.totalRecordsCount = this.parent.pageSettings.totalRecordsCount;\n if (isNullOrUndefined(this.totalRecordsCount)) {\n this.totalRecordsCount = this.getCurrentBatchRecordChanges().length;\n }\n if (this.isSingleSel()) {\n gobj.selectionSettings.type = 'Multiple';\n gobj.dataBind();\n }\n else {\n this.initPerisistSelection();\n }\n }\n if (!gobj.isCheckBoxSelection && !this.isPersisted) {\n this.chkField = null;\n this.initPerisistSelection();\n }\n };\n Selection.prototype.initPerisistSelection = function () {\n var gobj = this.parent;\n if (this.parent.selectionSettings.persistSelection && this.parent.getPrimaryKeyFieldNames().length > 0) {\n gobj.isPersistSelection = true;\n this.ensureCheckboxFieldSelection();\n }\n else if (this.parent.getPrimaryKeyFieldNames().length > 0) {\n gobj.isPersistSelection = false;\n this.ensureCheckboxFieldSelection();\n }\n else {\n gobj.isPersistSelection = false;\n this.selectedRowState = {};\n }\n };\n Selection.prototype.ensureCheckboxFieldSelection = function () {\n var gobj = this.parent;\n this.primaryKey = this.parent.getPrimaryKeyFieldNames()[0];\n if (!gobj.enableVirtualization && this.chkField\n && ((gobj.isPersistSelection && Object.keys(this.selectedRowState).length === 0) ||\n !gobj.isPersistSelection)) {\n var data = this.parent.getDataModule();\n var query = new Query().where(this.chkField, 'equal', true);\n if (!query.params) {\n query.params = this.parent.query.params;\n }\n var dataManager = data.getData({}, query);\n var proxy_1 = this;\n this.parent.showSpinner();\n dataManager.then(function (e) {\n proxy_1.dataSuccess(e.result);\n proxy_1.refreshPersistSelection();\n proxy_1.parent.hideSpinner();\n });\n }\n };\n Selection.prototype.dataSuccess = function (res) {\n for (var i = 0; i < res.length; i++) {\n if (isNullOrUndefined(this.selectedRowState[res[i][this.primaryKey]]) && res[i][this.chkField]) {\n this.selectedRowState[res[i][this.primaryKey]] = res[i][this.chkField];\n }\n }\n this.persistSelectedData = res;\n };\n Selection.prototype.setRowSelection = function (state) {\n if (!this.parent.getDataModule().isRemote() && !isBlazor()) {\n if (state) {\n if (this.parent.groupSettings.columns.length) {\n for (var _i = 0, _a = this.getData().records; _i < _a.length; _i++) {\n var data = _a[_i];\n this.selectedRowState[data[this.primaryKey]] = true;\n }\n }\n else {\n for (var _b = 0, _c = this.getData(); _b < _c.length; _b++) {\n var data = _c[_b];\n this.selectedRowState[data[this.primaryKey]] = true;\n }\n }\n }\n else {\n this.selectedRowState = {};\n }\n // (this.getData()).forEach(function (data) {\n // this.selectedRowState[data[this.primaryKey]] = true;\n // })\n }\n };\n Selection.prototype.getData = function () {\n return this.parent.getDataModule().dataManager.executeLocal(this.parent.getDataModule().generateQuery(true));\n };\n Selection.prototype.refreshPersistSelection = function () {\n var rows = this.parent.getRows();\n if (this.parent.isCheckBoxSelection && this.parent.isFrozenGrid()) {\n var mtbody = this.parent.getMovableContentTbody();\n if (mtbody.querySelector('.e-checkselect')) {\n rows = this.parent.getMovableRows();\n }\n if (this.parent.getFrozenMode() === 'Left-Right') {\n var frtbody = this.parent.getFrozenRightContentTbody();\n if (frtbody.querySelector('.e-checkselect')) {\n rows = this.parent.getFrozenRightRows();\n }\n }\n }\n this.totalRecordsCount = this.parent.pageSettings.totalRecordsCount;\n if (rows !== null && rows.length > 0 && (this.parent.isPersistSelection || this.chkField)) {\n var indexes = [];\n for (var j = 0; j < rows.length; j++) {\n var rowObj = this.getRowObj(rows[j]);\n var pKey = rowObj ? rowObj.data ? rowObj.data[this.primaryKey] : null : null;\n if (pKey === null) {\n return;\n }\n var checkState = void 0;\n var chkBox = rows[j].querySelector('.e-checkselect');\n if (this.selectedRowState[pKey] || (this.parent.checkAllRows === 'Check' &&\n this.totalRecordsCount === Object.keys(this.selectedRowState).length && this.chkAllCollec.indexOf(pKey) < 0)\n || (this.parent.checkAllRows === 'Uncheck' && this.chkAllCollec.indexOf(pKey) > 0)\n || (this.parent.checkAllRows === 'Intermediate' && !isNullOrUndefined(this.chkField) && rowObj.data[this.chkField])) {\n indexes.push(parseInt(rows[j].getAttribute('aria-rowindex'), 10));\n checkState = true;\n }\n else {\n checkState = false;\n if (this.checkedTarget !== chkBox && this.parent.isCheckBoxSelection) {\n removeAddCboxClasses(chkBox.nextElementSibling, checkState);\n }\n }\n this.updatePersistCollection(rows[j], checkState);\n }\n this.isSingleSel() && indexes.length > 0 ? this.selectRow(indexes[0], true) : this.selectRows(indexes);\n }\n if (this.parent.isCheckBoxSelection && this.getCurrentBatchRecordChanges().length > 0) {\n this.setCheckAllState();\n }\n };\n Selection.prototype.actionBegin = function (e) {\n if (e.requestType === 'save' && this.parent.isPersistSelection) {\n var editChkBox = this.parent.element.querySelector('.e-edit-checkselect');\n if (!isNullOrUndefined(editChkBox)) {\n var row = closest(editChkBox, '.e-editedrow');\n if (row) {\n if (this.parent.editSettings.mode === 'Dialog') {\n row = this.parent.element.querySelector('.e-dlgeditrow');\n }\n var rowObj = this.getRowObj(row);\n if (!rowObj) {\n return;\n }\n this.selectedRowState[rowObj.data[this.primaryKey]] = rowObj.isSelected = editChkBox.checked;\n }\n else {\n this.isCheckedOnAdd = editChkBox.checked;\n }\n }\n }\n };\n Selection.prototype.actionComplete = function (e) {\n if (e.requestType === 'save' && this.parent.isPersistSelection) {\n if (e.action === 'add' && this.isCheckedOnAdd) {\n var rowObj = this.parent.getRowObjectFromUID(this.parent.getRows()[e.selectedRow].getAttribute('data-uid'));\n this.selectedRowState[rowObj.data[this.primaryKey]] = rowObj.isSelected = this.isCheckedOnAdd;\n }\n this.refreshPersistSelection();\n }\n if (e.requestType === 'delete' && this.parent.isPersistSelection) {\n var records = [];\n if (!isBlazor()) {\n records = e.data;\n }\n else {\n records = this.getSelectedRecords();\n }\n var data = records.slice();\n for (var i = 0; i < data.length; i++) {\n if (!isNullOrUndefined(data[i][this.primaryKey])) {\n this.updatePersistDelete(data[i][this.primaryKey]);\n }\n }\n this.setCheckAllState();\n this.totalRecordsCount = this.parent.pageSettings.totalRecordsCount;\n }\n if (e.requestType === 'paging') {\n this.prevRowIndex = undefined;\n this.prevCIdxs = undefined;\n this.prevECIdxs = undefined;\n }\n };\n Selection.prototype.onDataBound = function () {\n if (!this.parent.enableVirtualization && this.parent.isPersistSelection) {\n if (this.selectedRecords.length) {\n this.isPrevRowSelection = true;\n }\n this.refreshPersistSelection();\n }\n if (this.parent.enableVirtualization) {\n this.setCheckAllState();\n }\n if (this.parent.isCheckBoxSelection && !this.initialRowSelection) {\n var totalRecords = this.parent.getRowsObject();\n var indexes = [];\n for (var i = 0; i < totalRecords.length; i++) {\n if (totalRecords[i].isSelected) {\n indexes.push(i);\n }\n }\n if (indexes.length) {\n this.selectRows(indexes);\n }\n this.initialRowSelection = true;\n }\n };\n Selection.prototype.updatePersistSelectedData = function (checkState) {\n if (this.parent.isPersistSelection) {\n var rows = this.parent.getRows();\n for (var i = 0; i < rows.length; i++) {\n this.updatePersistCollection(rows[i], checkState);\n }\n if (this.parent.checkAllRows === 'Uncheck') {\n this.setRowSelection(false);\n this.persistSelectedData = this.parent.getDataModule().isRemote() ? this.persistSelectedData : [];\n }\n else if (this.parent.checkAllRows === 'Check') {\n this.setRowSelection(true);\n this.persistSelectedData = (!this.parent.getDataModule().isRemote() && !isBlazor()) ?\n this.parent.groupSettings.columns.length ? this.getData().records.slice() :\n this.getData().slice() : this.persistSelectedData;\n }\n }\n };\n Selection.prototype.checkSelectAllAction = function (checkState) {\n var cRenderer = this.getRenderer();\n var editForm = this.parent.element.querySelector('.e-gridform');\n this.checkedTarget = this.getCheckAllBox();\n if (checkState && this.getCurrentBatchRecordChanges().length) {\n this.parent.checkAllRows = 'Check';\n this.updatePersistSelectedData(checkState);\n if (isBlazor() && this.parent.enableVirtualization &&\n !isNullOrUndefined(this.parent.contentModule.currentInfo.endIndex)) {\n this.selectRowsByRange(this.parent.contentModule.currentInfo.startIndex, this.parent.contentModule.currentInfo.endIndex);\n }\n else {\n this.selectRowsByRange(cRenderer.getVirtualRowIndex(0), cRenderer.getVirtualRowIndex(this.getCurrentBatchRecordChanges().length - 1));\n }\n }\n else {\n this.parent.checkAllRows = 'Uncheck';\n this.updatePersistSelectedData(checkState);\n this.clearSelection();\n }\n this.chkAllCollec = [];\n if (!isNullOrUndefined(editForm)) {\n var editChkBox = editForm.querySelector('.e-edit-checkselect');\n if (!isNullOrUndefined(editChkBox)) {\n removeAddCboxClasses(editChkBox.nextElementSibling, checkState);\n }\n }\n };\n Selection.prototype.checkSelectAll = function (checkBox) {\n var _this = this;\n var stateStr = this.getCheckAllStatus(checkBox);\n var state = stateStr === 'Check';\n this.isHeaderCheckboxClicked = true;\n if (stateStr === 'Intermediate') {\n state = this.getCurrentBatchRecordChanges().some(function (data) {\n return data[_this.primaryKey] in _this.selectedRowState;\n });\n }\n if (this.parent.isPersistSelection && this.parent.allowPaging) {\n this.totalRecordsCount = this.parent.pageSettings.totalRecordsCount;\n }\n this.checkSelectAllAction(!state);\n if (isBlazor() && this.parent.isServerRendered && this.parent.enableVirtualization) {\n var interopAdaptor = 'interopAdaptor';\n var invokeMethodAsync = 'invokeMethodAsync';\n this.parent[interopAdaptor][invokeMethodAsync]('MaintainSelection', !state, 'checkbox', null);\n this.checkBoxState = !state;\n if (!state) {\n var values = 'values';\n var vgenerator = 'vgenerator';\n var rowCache = this.parent.contentModule[vgenerator].rowCache;\n Object[values](rowCache).forEach(function (x) { return x.isSelected = true; });\n for (var i = 0; i < Object.keys(rowCache).length; i++) {\n if (this.parent.selectionModule.selectedRowIndexes.indexOf(Number(Object.keys(rowCache)[i])) === -1) {\n this.parent.selectionModule.selectedRowIndexes.push(Number(Object.keys(rowCache)[i]));\n }\n }\n }\n }\n this.target = null;\n if (this.getCurrentBatchRecordChanges().length > 0) {\n this.setCheckAllState();\n }\n this.triggerChkChangeEvent(checkBox, !state);\n };\n Selection.prototype.getCheckAllStatus = function (ele) {\n var classes = ele ? ele.nextElementSibling.classList :\n this.getCheckAllBox().nextElementSibling.classList;\n var status;\n if (classes.contains('e-check')) {\n status = 'Check';\n }\n else if (classes.contains('e-uncheck')) {\n status = 'Uncheck';\n }\n else if (classes.contains('e-stop')) {\n status = 'Intermediate';\n }\n else {\n status = 'None';\n }\n return status;\n };\n Selection.prototype.checkSelect = function (checkBox) {\n var target = closest(this.checkedTarget, '.e-rowcell');\n var checkObj = checkBox;\n var gObj = this.parent;\n this.isMultiCtrlRequest = true;\n var rIndex = 0;\n this.isHeaderCheckboxClicked = false;\n if (isGroupAdaptive(gObj)) {\n var uid = target.parentElement.getAttribute('data-uid');\n rIndex = gObj.getRows().map(function (m) { return m.getAttribute('data-uid'); }).indexOf(uid);\n }\n else {\n rIndex = parseInt(target.parentElement.getAttribute('aria-rowindex'), 10);\n }\n if (this.parent.isPersistSelection && this.parent.element.querySelectorAll('.e-addedrow').length > 0 &&\n this.parent.editSettings.newRowPosition === 'Top') {\n ++rIndex;\n }\n this.rowCellSelectionHandler(rIndex, parseInt(target.getAttribute('aria-colindex'), 10));\n this.moveIntoUncheckCollection(closest(target, '.e-row'));\n this.setCheckAllState();\n this.isMultiCtrlRequest = false;\n this.triggerChkChangeEvent(checkBox, checkBox.nextElementSibling.classList.contains('e-check'));\n };\n Selection.prototype.moveIntoUncheckCollection = function (row) {\n if (this.parent.checkAllRows === 'Check' || this.parent.checkAllRows === 'Uncheck') {\n var rowObj = this.getRowObj(row);\n var pKey = rowObj && rowObj.data ? rowObj.data[this.primaryKey] : null;\n if (!pKey) {\n return;\n }\n if (this.chkAllCollec.indexOf(pKey) < 0) {\n this.chkAllCollec.push(pKey);\n }\n else {\n this.chkAllCollec.splice(this.chkAllCollec.indexOf(pKey), 1);\n }\n }\n };\n Selection.prototype.triggerChkChangeEvent = function (checkBox, checkState) {\n this.parent.trigger(events.checkBoxChange, {\n checked: checkState, selectedRowIndexes: this.parent.getSelectedRowIndexes(),\n target: checkBox\n });\n if (!this.parent.isEdit) {\n this.checkedTarget = null;\n }\n };\n Selection.prototype.updateSelectedRowIndex = function (index) {\n if (this.parent.isCheckBoxSelection && (this.parent.enableVirtualization || this.parent.enableInfiniteScrolling)\n && !this.parent.getDataModule().isRemote()\n && !(isBlazor() && this.parent.isServerRendered)) {\n if (this.parent.checkAllRows === 'Check') {\n this.selectedRowIndexes = [];\n var dataLength = this.getData().length;\n for (var data = 0; data < dataLength; data++) {\n this.selectedRowIndexes.push(data);\n }\n }\n else if (this.parent.checkAllRows === 'Uncheck') {\n this.selectedRowIndexes = [];\n }\n else {\n if (index && this.parent.getRowByIndex(index).getAttribute('aria-selected') === 'false') {\n var selectedVal = this.selectedRowIndexes.indexOf(index);\n this.selectedRowIndexes.splice(selectedVal, 1);\n }\n }\n }\n };\n ;\n Selection.prototype.setCheckAllState = function (index, isInteraction) {\n if (this.parent.isCheckBoxSelection || this.parent.selectionSettings.checkboxMode === 'ResetOnRowClick') {\n var checkToSelectAll = void 0;\n var isServerRenderedVirtualization = isBlazor() && this.parent.isServerRendered && this.parent.enableVirtualization;\n if (isServerRenderedVirtualization) {\n var values = 'values';\n var vgenerator = 'vgenerator';\n checkToSelectAll = !Object[values](this.parent.contentModule[vgenerator].rowCache).\n filter(function (x) { return x.isSelected === undefined || x.isSelected === false; }).length &&\n Object[values](this.parent.contentModule[vgenerator].rowCache).\n filter(function (x) { return x.isSelected; }).length === this.selectedRowIndexes.length;\n }\n var checkedLen = Object.keys(this.selectedRowState).length;\n if (!this.parent.isPersistSelection && !(isServerRenderedVirtualization)) {\n checkedLen = this.selectedRowIndexes.length;\n this.totalRecordsCount = this.getCurrentBatchRecordChanges().length;\n }\n var input = this.getCheckAllBox();\n if (input) {\n var spanEle = input.nextElementSibling;\n removeClass([spanEle], ['e-check', 'e-stop', 'e-uncheck']);\n setChecked(input, false);\n input.indeterminate = false;\n if (checkToSelectAll || checkedLen === this.totalRecordsCount && this.totalRecordsCount\n || ((this.parent.enableVirtualization || this.parent.enableInfiniteScrolling)\n && !this.parent.allowPaging && !this.parent.getDataModule().isRemote()\n && !(isBlazor() && this.parent.isServerRendered)\n && checkedLen === this.getData().length)) {\n addClass([spanEle], ['e-check']);\n setChecked(input, true);\n if (isInteraction) {\n this.getRenderer().setSelection(null, true, true);\n }\n this.parent.checkAllRows = 'Check';\n }\n else if (isServerRenderedVirtualization && !this.selectedRowIndexes.length ||\n checkedLen === 0 && !isServerRenderedVirtualization || this.getCurrentBatchRecordChanges().length === 0) {\n addClass([spanEle], ['e-uncheck']);\n if (isInteraction) {\n this.getRenderer().setSelection(null, false, true);\n }\n this.parent.checkAllRows = 'Uncheck';\n if (checkedLen === 0 && this.getCurrentBatchRecordChanges().length === 0) {\n addClass([spanEle.parentElement], ['e-checkbox-disabled']);\n }\n else {\n removeClass([spanEle.parentElement], ['e-checkbox-disabled']);\n }\n }\n else {\n addClass([spanEle], ['e-stop']);\n this.parent.checkAllRows = 'Intermediate';\n input.indeterminate = true;\n }\n if ((this.parent.enableVirtualization || this.parent.enableInfiniteScrolling)\n && !this.parent.allowPaging && !this.parent.getDataModule().isRemote()) {\n this.updateSelectedRowIndex(index);\n }\n }\n }\n };\n Selection.prototype.keyDownHandler = function (e) {\n // Below are keyCode for command key in MAC OS. Safari/Chrome(91-Left command, 93-Right Command), Opera(17), FireFox(224)\n if ((((Browser.info.name === 'chrome') || (Browser.info.name === 'safari')) && (e.keyCode === 91 || e.keyCode === 93)) ||\n (Browser.info.name === 'opera' && e.keyCode === 17) || (Browser.info.name === 'mozilla' && e.keyCode === 224)) {\n this.cmdKeyPressed = true;\n }\n };\n Selection.prototype.keyUpHandler = function (e) {\n if ((((Browser.info.name === 'chrome') || (Browser.info.name === 'safari')) && (e.keyCode === 91 || e.keyCode === 93)) ||\n (Browser.info.name === 'opera' && e.keyCode === 17) || (Browser.info.name === 'mozilla' && e.keyCode === 224)) {\n this.cmdKeyPressed = false;\n }\n };\n Selection.prototype.clickHandler = function (e) {\n var target = e.target;\n this.actualTarget = target;\n if (parentsUntil(target, 'e-row') || parentsUntil(target, 'e-headerchkcelldiv') ||\n (this.selectionSettings.allowColumnSelection && target.classList.contains('e-headercell'))) {\n this.isInteracted = true;\n }\n this.isMultiCtrlRequest = e.ctrlKey || this.enableSelectMultiTouch ||\n (this.isMacOS && this.cmdKeyPressed);\n this.isMultiShiftRequest = e.shiftKey;\n this.popUpClickHandler(e);\n var chkSelect = false;\n this.preventFocus = true;\n var checkBox;\n var checkWrap = parentsUntil(target, 'e-checkbox-wrapper');\n this.checkSelectAllClicked = checkWrap && checkWrap.querySelectorAll('.e-checkselectall') ||\n (this.selectionSettings.persistSelection && parentsUntil(target, 'e-row')) ? true : false;\n if (checkWrap && checkWrap.querySelectorAll('.e-checkselect,.e-checkselectall').length > 0) {\n checkBox = checkWrap.querySelector('input[type=\"checkbox\"]');\n chkSelect = true;\n }\n this.drawBorders();\n this.updateAutoFillPosition();\n target = parentsUntil(target, 'e-rowcell');\n if ((target && target.parentElement.classList.contains('e-row') && !this.parent.selectionSettings.checkboxOnly) || chkSelect) {\n if (this.parent.isCheckBoxSelection) {\n this.isMultiCtrlRequest = true;\n }\n this.target = target;\n if (!isNullOrUndefined(checkBox)) {\n this.checkedTarget = checkBox;\n if (checkBox.classList.contains('e-checkselectall')) {\n this.checkSelectAll(checkBox);\n }\n else {\n this.checkSelect(checkBox);\n }\n }\n else {\n var gObj = this.parent;\n var rIndex = 0;\n if (isGroupAdaptive(gObj)) {\n var uid = target.parentElement.getAttribute('data-uid');\n rIndex = gObj.getRows().map(function (m) { return m.getAttribute('data-uid'); }).indexOf(uid);\n }\n else {\n rIndex = parseInt(target.parentElement.getAttribute('aria-rowindex'), 10);\n }\n if (this.parent.isPersistSelection && this.parent.element.querySelectorAll('.e-addedrow').length > 0) {\n ++rIndex;\n }\n if (!this.mUPTarget || !this.mUPTarget.isEqualNode(target)) {\n this.rowCellSelectionHandler(rIndex, parseInt(target.getAttribute('aria-colindex'), 10));\n }\n this.parent.hoverFrozenRows(e);\n if (this.parent.isCheckBoxSelection) {\n this.moveIntoUncheckCollection(closest(target, '.e-row'));\n this.setCheckAllState();\n }\n }\n if (!this.parent.isCheckBoxSelection && Browser.isDevice && !this.isSingleSel()) {\n this.showPopup(e);\n }\n }\n else if (e.target.classList.contains('e-headercell') &&\n !e.target.classList.contains('e-stackedheadercell')) {\n var uid = e.target.querySelector('.e-headercelldiv').getAttribute('e-mappinguid');\n this.headerSelectionHandler(this.parent.getColumnIndexByUid(uid));\n }\n this.isMultiCtrlRequest = false;\n this.isMultiShiftRequest = false;\n if (isNullOrUndefined(closest(e.target, '.e-unboundcell'))) {\n this.preventFocus = false;\n }\n };\n Selection.prototype.popUpClickHandler = function (e) {\n var target = e.target;\n if (closest(target, '.e-headercell') || e.target.classList.contains('e-rowcell') ||\n closest(target, '.e-gridpopup')) {\n if (target.classList.contains('e-rowselect')) {\n if (!target.classList.contains('e-spanclicked')) {\n target.classList.add('e-spanclicked');\n this.enableSelectMultiTouch = true;\n }\n else {\n target.classList.remove('e-spanclicked');\n this.enableSelectMultiTouch = false;\n this.parent.element.querySelector('.e-gridpopup').style.display = 'none';\n }\n }\n }\n else {\n this.parent.element.querySelector('.e-gridpopup').style.display = 'none';\n }\n };\n Selection.prototype.showPopup = function (e) {\n if (!this.selectionSettings.enableSimpleMultiRowSelection) {\n setCssInGridPopUp(this.parent.element.querySelector('.e-gridpopup'), e, 'e-rowselect e-icons e-icon-rowselect' +\n (!this.isSingleSel() && (this.selectedRecords.length > (this.parent.getFrozenColumns() ? 2 : 1)\n || this.selectedRowCellIndexes.length > 1) ? ' e-spanclicked' : ''));\n }\n };\n Selection.prototype.rowCellSelectionHandler = function (rowIndex, cellIndex) {\n var gObj = this.parent;\n if ((!this.isMultiCtrlRequest && !this.isMultiShiftRequest) || this.isSingleSel()) {\n if (!this.isDragged) {\n this.selectRow(rowIndex, this.selectionSettings.enableToggle);\n }\n this.selectCell({ rowIndex: rowIndex, cellIndex: cellIndex }, this.selectionSettings.enableToggle);\n if (this.selectedRowCellIndexes.length) {\n this.updateAutoFillPosition();\n }\n this.drawBorders();\n }\n else if (this.isMultiShiftRequest) {\n if (this.parent.isCheckBoxSelection || (!this.parent.isCheckBoxSelection &&\n !closest(this.target, '.e-rowcell').classList.contains('e-gridchkbox'))) {\n this.selectRowsByRange(isUndefined(this.prevRowIndex) ? rowIndex : this.prevRowIndex, rowIndex);\n }\n else {\n this.addRowsToSelection([rowIndex]);\n }\n this.selectCellsByRange(isUndefined(this.prevCIdxs) ? { rowIndex: rowIndex, cellIndex: cellIndex } : this.prevCIdxs, { rowIndex: rowIndex, cellIndex: cellIndex });\n this.updateAutoFillPosition();\n this.drawBorders();\n }\n else {\n this.addRowsToSelection([rowIndex]);\n if (isBlazor() && this.parent.enableVirtualization && this.parent.isServerRendered) {\n var rowIndexes = this.parent.getSelectedRowIndexes();\n var interopAdaptor = 'interopAdaptor';\n var invokeMethodAsync = 'invokeMethodAsync';\n this.parent[interopAdaptor][invokeMethodAsync]('MaintainSelection', true, 'normal', rowIndexes);\n }\n this.addCellsToSelection([{ rowIndex: rowIndex, cellIndex: cellIndex }]);\n this.showHideBorders('none');\n }\n this.isDragged = false;\n };\n /* tslint:disable-next-line:max-func-body-length */\n Selection.prototype.onCellFocused = function (e) {\n if (this.parent.frozenRows && e.container.isHeader && e.byKey) {\n if (e.keyArgs.action === 'upArrow') {\n if (this.parent.allowFiltering) {\n e.isJump = e.element.tagName === 'INPUT' ? true : false;\n }\n else {\n e.isJump = e.element.tagName === 'TH' ? true : false;\n }\n }\n else {\n if (e.keyArgs.action === 'downArrow') {\n var rIdx = Number(e.element.parentElement.getAttribute('aria-rowindex'));\n e.isJump = rIdx === 0 ? true : false;\n }\n else {\n if (e.keyArgs.action === 'ctrlHome') {\n e.isJump = true;\n }\n }\n }\n }\n var clear = this.parent.isFrozenGrid() ? (((e.container.isHeader && e.element.tagName !== 'TD' && e.isJump &&\n !this.selectionSettings.allowColumnSelection) ||\n ((e.container.isContent || e.element.tagName === 'TD') && !(e.container.isSelectable || e.element.tagName === 'TD')))\n && !(e.byKey && e.keyArgs.action === 'space')) : ((e.container.isHeader && e.isJump) ||\n (e.container.isContent && !e.container.isSelectable)) && !(e.byKey && e.keyArgs.action === 'space')\n && !(e.element.classList.contains('e-detailrowexpand') || e.element.classList.contains('e-detailrowcollapse'));\n var headerAction = (e.container.isHeader && e.element.tagName !== 'TD' && !closest(e.element, '.e-rowcell'))\n && !(e.byKey && e.keyArgs.action === 'space');\n if (!e.byKey || clear) {\n if (clear && !this.parent.isCheckBoxSelection) {\n this.clearSelection();\n }\n return;\n }\n var _a = e.container.isContent ? e.container.indexes : e.indexes, rowIndex = _a[0], cellIndex = _a[1];\n var prev = this.focus.getPrevIndexes();\n if (this.parent.frozenRows) {\n if (e.container.isHeader && (e.element.tagName === 'TD' || closest(e.element, '.e-rowcell'))) {\n var thLen = this.parent.getHeaderTable().querySelector('thead').childElementCount;\n rowIndex -= thLen;\n prev.rowIndex = !isNullOrUndefined(prev.rowIndex) ? prev.rowIndex - thLen : null;\n }\n else {\n rowIndex += this.parent.frozenRows;\n prev.rowIndex = prev.rowIndex === 0 || !isNullOrUndefined(prev.rowIndex) ? prev.rowIndex + this.parent.frozenRows : null;\n }\n }\n if (this.parent.isFrozenGrid()) {\n var cIdx = Number(e.element.getAttribute('aria-colindex'));\n var selectedIndexes = this.parent.getSelectedRowCellIndexes();\n if (selectedIndexes.length && prev.cellIndex === 0) {\n prev.cellIndex = selectedIndexes[selectedIndexes.length - 1].cellIndexes[0];\n }\n prev.cellIndex = !isNullOrUndefined(prev.cellIndex) ? (prev.cellIndex === cellIndex ? cIdx : cIdx - 1) : null;\n cellIndex = cIdx;\n }\n if ((headerAction || (['ctrlPlusA', 'escape'].indexOf(e.keyArgs.action) === -1 &&\n e.keyArgs.action !== 'space' && rowIndex === prev.rowIndex && cellIndex === prev.cellIndex)) &&\n !this.selectionSettings.allowColumnSelection) {\n return;\n }\n this.preventFocus = true;\n var columnIndex = this.getKeyColIndex(e);\n if (this.needColumnSelection) {\n cellIndex = columnIndex;\n }\n switch (e.keyArgs.action) {\n case 'downArrow':\n case 'upArrow':\n case 'enter':\n case 'shiftEnter':\n this.target = e.element;\n this.applyDownUpKey(rowIndex, cellIndex);\n break;\n case 'rightArrow':\n case 'leftArrow':\n this.applyRightLeftKey(rowIndex, cellIndex);\n break;\n case 'shiftDown':\n case 'shiftUp':\n this.shiftDownKey(rowIndex, cellIndex);\n break;\n case 'shiftLeft':\n case 'shiftRight':\n this.applyShiftLeftRightKey(rowIndex, cellIndex);\n break;\n case 'home':\n case 'end':\n cellIndex = e.keyArgs.action === 'end' ? this.getLastColIndex(rowIndex) : 0;\n this.applyHomeEndKey(rowIndex, cellIndex);\n break;\n case 'ctrlHome':\n case 'ctrlEnd':\n this.applyCtrlHomeEndKey(rowIndex, cellIndex);\n break;\n case 'escape':\n this.clearSelection();\n break;\n case 'ctrlPlusA':\n this.ctrlPlusA();\n break;\n case 'space':\n this.applySpaceSelection(e.element);\n break;\n case 'tab':\n if (this.parent.editSettings.allowNextRowEdit) {\n this.selectRow(rowIndex);\n }\n break;\n }\n this.needColumnSelection = false;\n this.preventFocus = false;\n this.positionBorders();\n this.updateAutoFillPosition();\n };\n Selection.prototype.getKeyColIndex = function (e) {\n var uid;\n var index = null;\n var stackedHeader = e.element.querySelector('.e-stackedheadercelldiv');\n if (this.selectionSettings.allowColumnSelection && parentsUntil(e.element, 'e-columnheader')) {\n this.needColumnSelection = e.container.isHeader ? true : false;\n if (stackedHeader) {\n if (e.keyArgs.action === 'rightArrow' || e.keyArgs.action === 'leftArrow') {\n return index;\n }\n uid = stackedHeader.getAttribute('e-mappinguid');\n var innerColumn = this.getstackedColumns(this.parent.getColumnByUid(uid).columns);\n var lastIndex = this.parent.getColumnIndexByUid(innerColumn[innerColumn.length - 1].uid);\n var firstIndex = this.parent.getColumnIndexByUid(innerColumn[0].uid);\n index = this.prevColIndex >= lastIndex ? firstIndex : lastIndex;\n }\n else {\n index = this.parent.getColumnIndexByUid(e.element\n .querySelector('.e-headercelldiv').getAttribute('e-mappinguid'));\n }\n }\n return index;\n };\n /**\n * Apply ctrl + A key selection\n * @return {void}\n * @hidden\n */\n Selection.prototype.ctrlPlusA = function () {\n if (this.isRowType() && !this.isSingleSel()) {\n this.selectRowsByRange(0, this.getCurrentBatchRecordChanges().length - 1);\n }\n if (this.isCellType() && !this.isSingleSel()) {\n this.selectCellsByRange({ rowIndex: 0, cellIndex: 0 }, { rowIndex: this.parent.getRows().length - 1, cellIndex: this.parent.getColumns().length - 1 });\n }\n };\n Selection.prototype.applySpaceSelection = function (target) {\n if (target.classList.contains('e-checkselectall')) {\n this.checkedTarget = target;\n this.checkSelectAll(this.checkedTarget);\n }\n else {\n if (target.classList.contains('e-checkselect')) {\n this.checkedTarget = target;\n this.checkSelect(this.checkedTarget);\n }\n }\n };\n Selection.prototype.applyDownUpKey = function (rowIndex, cellIndex) {\n var gObj = this.parent;\n if (this.parent.isCheckBoxSelection && this.parent.checkAllRows === 'Check' && !this.selectionSettings.persistSelection) {\n this.checkSelectAllAction(false);\n this.checkedTarget = null;\n }\n if (this.isRowType()) {\n if (this.parent.frozenRows) {\n this.selectRow(rowIndex, true);\n this.applyUpDown(gObj.selectedRowIndex);\n }\n else {\n this.selectRow(rowIndex, true);\n this.applyUpDown(gObj.selectedRowIndex);\n }\n }\n if (this.isCellType()) {\n this.selectCell({ rowIndex: rowIndex, cellIndex: cellIndex }, true);\n }\n if (this.selectionSettings.allowColumnSelection && this.needColumnSelection) {\n this.selectColumn(cellIndex);\n }\n };\n Selection.prototype.applyUpDown = function (rowIndex) {\n if (rowIndex < 0) {\n return;\n }\n if (!this.target) {\n this.target = this.parent.getRows()[0].children[this.parent.groupSettings.columns.length || 0];\n }\n var cIndex = parseInt(this.target.getAttribute('aria-colindex'), 10);\n var frzCols = this.parent.getFrozenColumns();\n if (frzCols) {\n if (cIndex >= frzCols) {\n this.target =\n this.contentRenderer.getMovableRowByIndex(rowIndex).querySelectorAll('.e-rowcell')[cIndex - frzCols];\n }\n else {\n this.target = this.contentRenderer.getRowByIndex(rowIndex).querySelectorAll('.e-rowcell')[cIndex];\n }\n }\n else {\n this.target = this.contentRenderer.getRowByIndex(rowIndex).querySelectorAll('.e-rowcell')[cIndex];\n }\n this.addAttribute(this.target);\n };\n Selection.prototype.applyRightLeftKey = function (rowIndex, cellIndex) {\n var gObj = this.parent;\n if (this.selectionSettings.allowColumnSelection && this.needColumnSelection) {\n this.selectColumn(cellIndex);\n }\n else if (this.isCellType()) {\n this.selectCell({ rowIndex: rowIndex, cellIndex: cellIndex }, true);\n this.addAttribute(this.target);\n }\n };\n Selection.prototype.applyHomeEndKey = function (rowIndex, cellIndex) {\n if (this.isCellType()) {\n this.selectCell({ rowIndex: rowIndex, cellIndex: cellIndex }, true);\n }\n else {\n this.addAttribute(this.parent.getCellFromIndex(rowIndex, cellIndex));\n }\n };\n /**\n * Apply shift+down key selection\n * @return {void}\n * @hidden\n */\n Selection.prototype.shiftDownKey = function (rowIndex, cellIndex) {\n var gObj = this.parent;\n this.isMultiShiftRequest = true;\n if (this.isRowType() && !this.isSingleSel()) {\n if (!isUndefined(this.prevRowIndex)) {\n this.selectRowsByRange(this.prevRowIndex, rowIndex);\n this.applyUpDown(rowIndex);\n }\n else {\n this.selectRow(0, true);\n }\n }\n if (this.isCellType() && !this.isSingleSel()) {\n this.selectCellsByRange(this.prevCIdxs || { rowIndex: 0, cellIndex: 0 }, { rowIndex: rowIndex, cellIndex: cellIndex });\n }\n this.isMultiShiftRequest = false;\n };\n Selection.prototype.applyShiftLeftRightKey = function (rowIndex, cellIndex) {\n var gObj = this.parent;\n this.isMultiShiftRequest = true;\n if (this.selectionSettings.allowColumnSelection && this.needColumnSelection) {\n this.selectColumnsByRange(this.prevColIndex, cellIndex);\n }\n else {\n this.selectCellsByRange(this.prevCIdxs, { rowIndex: rowIndex, cellIndex: cellIndex });\n }\n this.isMultiShiftRequest = false;\n };\n Selection.prototype.getstackedColumns = function (column) {\n var innerColumnIndexes = [];\n for (var i = 0, len = column.length; i < len; i++) {\n if (column[i].columns) {\n this.getstackedColumns(column[i].columns);\n }\n else {\n innerColumnIndexes.push(column[i]);\n }\n }\n return innerColumnIndexes;\n };\n Selection.prototype.applyCtrlHomeEndKey = function (rowIndex, cellIndex) {\n if (this.isRowType()) {\n this.selectRow(rowIndex, true);\n this.addAttribute(this.parent.getCellFromIndex(rowIndex, cellIndex));\n }\n if (this.isCellType()) {\n this.selectCell({ rowIndex: rowIndex, cellIndex: cellIndex }, true);\n }\n };\n Selection.prototype.addRemoveClassesForRow = function (row, isAdd, clearAll) {\n var args = [];\n for (var _i = 3; _i < arguments.length; _i++) {\n args[_i - 3] = arguments[_i];\n }\n if (row) {\n var cells = [].slice.call(row.querySelectorAll('.e-rowcell'));\n var detailIndentCell = row.querySelector('.e-detailrowcollapse') || row.querySelector('.e-detailrowexpand');\n var dragdropIndentCell = row.querySelector('.e-rowdragdrop');\n if (detailIndentCell) {\n cells.push(detailIndentCell);\n }\n if (dragdropIndentCell) {\n cells.push(dragdropIndentCell);\n }\n addRemoveActiveClasses.apply(void 0, [cells, isAdd].concat(args));\n }\n this.getRenderer().setSelection(row ? row.getAttribute('data-uid') : null, isAdd, clearAll);\n };\n Selection.prototype.isRowType = function () {\n return this.selectionSettings.mode === 'Row' || this.selectionSettings.mode === 'Both';\n };\n Selection.prototype.isCellType = function () {\n return this.selectionSettings.mode === 'Cell' || this.selectionSettings.mode === 'Both';\n };\n Selection.prototype.isSingleSel = function () {\n return this.selectionSettings.type === 'Single';\n };\n Selection.prototype.getRenderer = function () {\n if (isNullOrUndefined(this.contentRenderer)) {\n this.contentRenderer = this.factory.getRenderer(RenderType.Content);\n }\n return this.contentRenderer;\n };\n /**\n * Gets the collection of selected records.\n * @return {Object[]}\n */\n Selection.prototype.getSelectedRecords = function () {\n var selectedData = [];\n if (!this.selectionSettings.persistSelection) {\n selectedData = this.parent.getRowsObject().filter(function (row) { return row.isSelected; })\n .map(function (m) { return m.data; });\n }\n else {\n selectedData = this.persistSelectedData;\n }\n return selectedData;\n };\n /**\n * Select the column by passing start column index\n * @param {number} startIndex\n */\n Selection.prototype.selectColumn = function (index) {\n var gObj = this.parent;\n if (isNullOrUndefined(gObj.getColumns()[index])) {\n return;\n }\n var column = gObj.getColumnByIndex(index);\n var selectedCol = gObj.getColumnHeaderByUid(column.uid);\n var isColSelected = selectedCol.classList.contains('e-columnselection');\n if ((!gObj.selectionSettings.allowColumnSelection)) {\n return;\n }\n var isMultiColumns = this.selectedColumnsIndexes.length > 1 &&\n this.selectedColumnsIndexes.indexOf(index) > -1;\n this.clearColDependency();\n if (!isColSelected || !this.selectionSettings.enableToggle || isMultiColumns) {\n var args = {\n columnIndex: index, headerCell: selectedCol,\n column: column,\n cancel: false, target: this.actualTarget,\n isInteracted: this.isInteracted, previousColumnIndex: this.prevColIndex,\n isCtrlPressed: this.isMultiCtrlRequest, isShiftPressed: this.isMultiShiftRequest\n };\n this.onActionBegin(args, events.columnSelecting);\n if (args.cancel) {\n this.disableInteracted();\n return;\n }\n if (!(gObj.selectionSettings.enableToggle && index === this.prevColIndex && isColSelected) || isMultiColumns) {\n this.updateColSelection(selectedCol, index);\n }\n var selectedArgs = {\n columnIndex: index, headerCell: selectedCol,\n column: column,\n target: this.actualTarget,\n isInteracted: this.isInteracted, previousColumnIndex: this.prevColIndex\n };\n this.onActionComplete(selectedArgs, events.columnSelected);\n }\n this.updateColProps(index);\n };\n /**\n * Select the columns by passing start and end column index\n * @param {number} startIndex\n * @param {number} endIndex\n */\n Selection.prototype.selectColumnsByRange = function (startIndex, endIndex) {\n var gObj = this.parent;\n if (isNullOrUndefined(gObj.getColumns()[startIndex])) {\n return;\n }\n var indexes = [];\n if (gObj.selectionSettings.type === 'Single' || isNullOrUndefined(endIndex)) {\n indexes[0] = startIndex;\n }\n else {\n var min = startIndex < endIndex;\n for (var i = startIndex; min ? i <= endIndex : i >= endIndex; min ? i++ : i--) {\n indexes.push(i);\n }\n }\n this.selectColumns(indexes);\n };\n /**\n * Select the columns by passing column indexes\n * @param {number[]} columnIndexes\n */\n Selection.prototype.selectColumns = function (columnIndexes) {\n var gObj = this.parent;\n var selectedCol = this.getselectedCols();\n if (gObj.selectionSettings.type === 'Single') {\n columnIndexes = [columnIndexes[0]];\n }\n if (!gObj.selectionSettings.allowColumnSelection) {\n return;\n }\n this.clearColDependency();\n var selectingArgs = {\n columnIndex: columnIndexes[0], headerCell: selectedCol,\n columnIndexes: columnIndexes,\n column: gObj.getColumnByIndex(columnIndexes[0]),\n cancel: false, target: this.actualTarget,\n isInteracted: this.isInteracted, previousColumnIndex: this.prevColIndex,\n isCtrlPressed: this.isMultiCtrlRequest, isShiftPressed: this.isMultiShiftRequest\n };\n this.onActionBegin(selectingArgs, events.columnSelecting);\n if (selectingArgs.cancel) {\n this.disableInteracted();\n return;\n }\n for (var i = 0, len = columnIndexes.length; i < len; i++) {\n this.updateColSelection(gObj.getColumnHeaderByUid(gObj.getColumnByIndex(columnIndexes[i]).uid), columnIndexes[i]);\n }\n selectedCol = this.getselectedCols();\n var selectedArgs = {\n columnIndex: columnIndexes[0], headerCell: selectedCol,\n columnIndexes: columnIndexes,\n column: gObj.getColumnByIndex(columnIndexes[0]),\n target: this.actualTarget,\n isInteracted: this.isInteracted, previousColumnIndex: this.prevColIndex\n };\n this.onActionComplete(selectedArgs, events.columnSelected);\n this.updateColProps(columnIndexes[0]);\n };\n /**\n * Select the column with existing column by passing column index\n * @param {number} startIndex\n */\n Selection.prototype.selectColumnWithExisting = function (startIndex) {\n var gObj = this.parent;\n if (isNullOrUndefined(gObj.getColumns()[startIndex])) {\n return;\n }\n var frzCols = gObj.getFrozenColumns();\n var isFreeze = frzCols && startIndex >= frzCols;\n var newCol = gObj.getColumnHeaderByUid(gObj.getColumnByIndex(startIndex).uid);\n var selectedCol = this.getselectedCols();\n if (gObj.selectionSettings.type === 'Single') {\n this.clearColDependency();\n }\n if (!gObj.selectionSettings.allowColumnSelection) {\n return;\n }\n var rows = !isFreeze ? gObj.getDataRows() : gObj.getMovableRows();\n if (this.selectedColumnsIndexes.indexOf(startIndex) > -1) {\n this.clearColumnSelection(startIndex);\n }\n else {\n var selectingArgs = {\n columnIndex: startIndex, headerCell: selectedCol,\n columnIndexes: this.selectedColumnsIndexes,\n column: gObj.getColumnByIndex(startIndex),\n cancel: false, target: this.actualTarget,\n isInteracted: this.isInteracted, previousColumnIndex: this.prevColIndex,\n isCtrlPressed: this.isMultiCtrlRequest, isShiftPressed: this.isMultiShiftRequest\n };\n this.onActionBegin(selectingArgs, events.columnSelecting);\n if (selectingArgs.cancel) {\n this.disableInteracted();\n return;\n }\n this.updateColSelection(newCol, startIndex);\n selectedCol = this.getselectedCols();\n var selectedArgs = {\n columnIndex: startIndex, headerCell: selectedCol,\n column: gObj.getColumnByIndex(startIndex),\n columnIndexes: this.selectedColumnsIndexes,\n target: this.actualTarget,\n isInteracted: this.isInteracted, previousColumnIndex: this.prevColIndex\n };\n this.onActionComplete(selectedArgs, events.columnSelected);\n }\n this.updateColProps(startIndex);\n };\n /**\n * Clear the column selection\n */\n Selection.prototype.clearColumnSelection = function (clearIndex) {\n if (this.isColumnSelected) {\n var gObj = this.parent;\n if (!isNullOrUndefined(clearIndex) && this.selectedColumnsIndexes.indexOf(clearIndex) === -1) {\n return;\n }\n var index = !isNullOrUndefined(clearIndex) ? clearIndex :\n this.selectedColumnsIndexes[this.selectedColumnsIndexes.length - 1];\n var col = gObj.getColumnByIndex(index);\n var selectedCol = void 0;\n var column = gObj.getColumnByIndex(index);\n if (col.getFreezeTableName() === 'frozen-right') {\n selectedCol = gObj.getFrozenRightColumnHeaderByIndex(index);\n }\n else if (col.getFreezeTableName() === 'movable') {\n selectedCol = gObj.getMovableColumnHeaderByIndex(index);\n }\n else {\n selectedCol = gObj.getColumnHeaderByUid(column.uid);\n }\n var deselectedArgs = {\n columnIndex: index, headerCell: selectedCol,\n columnIndexes: this.selectedColumnsIndexes,\n column: column,\n cancel: false, target: this.actualTarget,\n isInteracted: this.isInteracted\n };\n var isCanceled = this.columnDeselect(deselectedArgs, events.columnDeselecting);\n if (isCanceled) {\n this.disableInteracted();\n return;\n }\n var selectedHeader = !isNullOrUndefined(clearIndex) ? [selectedCol] :\n [].slice.call(gObj.getHeaderContent().querySelectorAll('.e-columnselection'));\n var selectedCells = this.getSelectedColumnCells(clearIndex);\n for (var i = 0, len = selectedHeader.length; i < len; i++) {\n addRemoveActiveClasses([selectedHeader[i]], false, 'e-columnselection');\n }\n for (var i = 0, len = selectedCells.length; i < len; i++) {\n addRemoveActiveClasses([selectedCells[i]], false, 'e-columnselection');\n }\n if (!isNullOrUndefined(clearIndex)) {\n this.selectedColumnsIndexes.splice(this.selectedColumnsIndexes.indexOf(clearIndex), 1);\n this.parent.getColumns()[clearIndex].isSelected = false;\n }\n else {\n this.columnDeselect(deselectedArgs, events.columnDeselected);\n this.selectedColumnsIndexes = [];\n this.isColumnSelected = false;\n this.parent.getColumns().filter(function (col) { return col.isSelected = false; });\n }\n }\n };\n Selection.prototype.getselectedCols = function () {\n var gObj = this.parent;\n var selectedCol;\n if (this.selectedColumnsIndexes.length > 1) {\n selectedCol = [];\n for (var i = 0; i < this.selectedColumnsIndexes.length; i++) {\n (selectedCol).push(gObj.getColumnHeaderByUid(gObj.getColumnByIndex(this.selectedColumnsIndexes[i]).uid));\n }\n }\n else {\n selectedCol = gObj.getColumnHeaderByUid(gObj.getColumnByIndex(this.selectedColumnsIndexes[0]).uid);\n }\n return selectedCol;\n };\n Selection.prototype.getSelectedColumnCells = function (clearIndex) {\n var gObj = this.parent;\n var isRowTemplate = !isNullOrUndefined(this.parent.rowTemplate);\n var rows = isRowTemplate ? gObj.getRows() : gObj.getDataRows();\n var movableRows;\n var frRows;\n if (gObj.isFrozenGrid() && gObj.getContent().querySelector('.e-movablecontent')) {\n movableRows = isRowTemplate ? gObj.getMovableRows() : gObj.getMovableDataRows();\n rows = gObj.addMovableRows(rows, movableRows);\n if (gObj.getFrozenMode() === 'Left-Right') {\n frRows = isRowTemplate ? gObj.getFrozenRightRows() : gObj.getFrozenRightDataRows();\n rows = gObj.addMovableRows(rows, frRows);\n }\n }\n var seletedcells = [];\n var selectionString = !isNullOrUndefined(clearIndex) ? '[aria-colindex=\"' + clearIndex + '\"]' : '.e-columnselection';\n for (var i = 0, len = rows.length; i < len; i++) {\n seletedcells = seletedcells.concat([].slice.call(rows[i].querySelectorAll(selectionString)));\n }\n return seletedcells;\n };\n Selection.prototype.columnDeselect = function (args, event) {\n if (event === 'columnDeselected') {\n delete args.cancel;\n }\n this.onActionComplete(args, event);\n return args.cancel;\n };\n Selection.prototype.updateColProps = function (startIndex) {\n this.prevColIndex = startIndex;\n this.isColumnSelected = this.selectedColumnsIndexes.length && true;\n };\n Selection.prototype.clearColDependency = function () {\n this.clearColumnSelection();\n this.selectedColumnsIndexes = [];\n };\n Selection.prototype.updateColSelection = function (selectedCol, startIndex) {\n if (isNullOrUndefined(this.parent.getColumns()[startIndex])) {\n return;\n }\n var left = this.parent.getFrozenLeftCount();\n var movable = this.parent.getMovableColumnsCount();\n var col = this.parent.getColumnByIndex(startIndex);\n var isRowTemplate = !isNullOrUndefined(this.parent.rowTemplate);\n var rows;\n this.selectedColumnsIndexes.push(startIndex);\n this.parent.getColumns()[startIndex].isSelected = true;\n if (col.getFreezeTableName() === 'frozen-right') {\n startIndex = startIndex - (left + movable);\n rows = isRowTemplate ? this.parent.getFrozenRightRows() : this.parent.getFrozenRightDataRows();\n }\n else if (col.getFreezeTableName() === 'movable') {\n startIndex = startIndex - left;\n rows = isRowTemplate ? this.parent.getMovableRows() : this.parent.getMovableDataRows();\n }\n else {\n startIndex = startIndex + this.parent.getIndentCount();\n rows = isRowTemplate ? this.parent.getRows() : this.parent.getDataRows();\n }\n addRemoveActiveClasses([selectedCol], true, 'e-columnselection');\n for (var j = 0, len = rows.length; j < len; j++) {\n if (rows[j].classList.contains('e-row')) {\n if ((rows[j].classList.contains('e-editedrow') || rows[j].classList.contains('e-addedrow')) &&\n this.parent.editSettings.mode === 'Normal' && !isNullOrUndefined(rows[j].querySelector('tr').childNodes[startIndex])) {\n addRemoveActiveClasses([rows[j].querySelector('tr').childNodes[startIndex]], true, 'e-columnselection');\n }\n else if (!isNullOrUndefined(rows[j].childNodes[startIndex])) {\n addRemoveActiveClasses([rows[j].childNodes[startIndex]], true, 'e-columnselection');\n }\n }\n }\n };\n Selection.prototype.headerSelectionHandler = function (colIndex) {\n if ((!this.isMultiCtrlRequest && !this.isMultiShiftRequest) || this.isSingleSel()) {\n this.selectColumn(colIndex);\n }\n else if (this.isMultiShiftRequest) {\n this.selectColumnsByRange(isUndefined(this.prevColIndex) ? colIndex : this.prevColIndex, colIndex);\n }\n else {\n this.selectColumnWithExisting(colIndex);\n }\n };\n Selection.prototype.addEventListener_checkbox = function () {\n var _this = this;\n this.parent.on(events.dataReady, this.dataReady, this);\n this.onDataBoundFunction = this.onDataBound.bind(this);\n this.parent.addEventListener(events.dataBound, this.onDataBoundFunction);\n this.parent.on(events.contentReady, this.checkBoxSelectionChanged, this);\n this.parent.on(events.beforeRefreshOnDataChange, this.initPerisistSelection, this);\n this.parent.on(events.onEmpty, this.setCheckAllForEmptyGrid, this);\n this.actionCompleteFunc = this.actionCompleteHandler.bind(this);\n this.parent.addEventListener(events.actionComplete, this.actionCompleteFunc);\n this.parent.on(events.click, this.clickHandler, this);\n this.resizeEndFn = function () {\n _this.updateAutoFillPosition();\n _this.drawBorders();\n };\n this.resizeEndFn.bind(this);\n this.parent.addEventListener(events.resizeStop, this.resizeEndFn);\n };\n Selection.prototype.removeEventListener_checkbox = function () {\n this.parent.off(events.dataReady, this.dataReady);\n this.parent.removeEventListener(events.dataBound, this.onDataBoundFunction);\n this.parent.removeEventListener(events.actionComplete, this.actionCompleteFunc);\n this.parent.off(events.onEmpty, this.setCheckAllForEmptyGrid);\n this.parent.off(events.click, this.clickHandler);\n this.parent.off(events.beforeRefreshOnDataChange, this.initPerisistSelection);\n };\n Selection.prototype.setCheckAllForEmptyGrid = function () {\n var checkAllBox = this.getCheckAllBox();\n if (checkAllBox) {\n this.parent.isCheckBoxSelection = true;\n var spanEle = checkAllBox.nextElementSibling;\n removeClass([spanEle], ['e-check', 'e-stop', 'e-uncheck']);\n }\n };\n Selection.prototype.dataReady = function (e) {\n this.isHeaderCheckboxClicked = false;\n var isInfinitecroll = this.parent.enableInfiniteScrolling && e.requestType === 'infiniteScroll';\n if (e.requestType !== 'virtualscroll' && !this.parent.isPersistSelection && !isInfinitecroll) {\n this.disableUI = !this.parent.enableImmutableMode;\n this.clearSelection();\n this.setCheckAllState();\n this.disableUI = false;\n }\n };\n Selection.prototype.actionCompleteHandler = function (e) {\n if (e.requestType === 'save' && this.parent.isPersistSelection) {\n this.refreshPersistSelection();\n }\n };\n Selection.prototype.selectRowIndex = function (index) {\n this.parent.isSelectedRowIndexUpdating = true;\n this.parent.selectedRowIndex = index;\n };\n Selection.prototype.disableInteracted = function () {\n this.isInteracted = false;\n };\n Selection.prototype.activeTarget = function () {\n this.actualTarget = this.isInteracted ? this.actualTarget : null;\n };\n return Selection;\n}());\nexport { Selection };\n","import { extend, isNullOrUndefined, isBlazor } from '@syncfusion/ej2-base';\nimport * as events from '../base/constant';\nimport { isActionPrevent } from '../base/util';\n/**\n * The `Search` module is used to handle search action.\n */\nvar Search = /** @class */ (function () {\n /**\n * Constructor for Grid search module.\n * @hidden\n */\n function Search(parent) {\n this.parent = parent;\n this.addEventListener();\n }\n /**\n * Searches Grid records by given key.\n *\n * > You can customize the default search action by using [`searchSettings`](grid/#searchsettings/).\n * @param {string} searchString - Defines the key.\n * @return {void}\n */\n Search.prototype.search = function (searchString) {\n var gObj = this.parent;\n searchString = isNullOrUndefined(searchString) ? '' : searchString;\n if (isActionPrevent(gObj)) {\n gObj.notify(events.preventBatch, { instance: this, handler: this.search, arg1: searchString });\n return;\n }\n if (searchString !== gObj.searchSettings.key) {\n gObj.searchSettings.key = searchString.toString();\n gObj.dataBind();\n }\n else if (this.refreshSearch) {\n gObj.refresh();\n }\n };\n /**\n * @hidden\n */\n Search.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.inBoundModelChanged, this.onPropertyChanged, this);\n this.parent.on(events.searchComplete, this.onSearchComplete, this);\n this.parent.on(events.destroy, this.destroy, this);\n this.actionCompleteFunc = this.onActionComplete.bind(this);\n this.parent.addEventListener(events.actionComplete, this.actionCompleteFunc);\n this.parent.on(events.cancelBegin, this.cancelBeginEvent, this);\n };\n /**\n * @hidden\n */\n Search.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.inBoundModelChanged, this.onPropertyChanged);\n this.parent.off(events.searchComplete, this.onSearchComplete);\n this.parent.off(events.destroy, this.destroy);\n this.parent.removeEventListener(events.actionComplete, this.actionCompleteFunc);\n this.parent.off(events.cancelBegin, this.cancelBeginEvent);\n };\n /**\n * To destroy the print\n * @return {void}\n * @hidden\n */\n Search.prototype.destroy = function () {\n this.removeEventListener();\n };\n /**\n * @hidden\n */\n Search.prototype.onPropertyChanged = function (e) {\n if (e.module !== this.getModuleName()) {\n return;\n }\n if (!isNullOrUndefined(e.properties.key)) {\n this.parent.notify(events.modelChanged, {\n requestType: 'searching', type: events.actionBegin, searchString: this.parent.searchSettings.key\n });\n }\n else {\n this.parent.notify(events.modelChanged, {\n requestType: 'searching', type: events.actionBegin\n });\n }\n };\n /**\n * The function used to trigger onActionComplete\n * @return {void}\n * @hidden\n */\n Search.prototype.onSearchComplete = function (e) {\n if (isBlazor() && !this.parent.isJsComponent) {\n e.rows = null;\n }\n this.parent.trigger(events.actionComplete, extend(e, {\n searchString: this.parent.searchSettings.key, requestType: 'searching', type: events.actionComplete\n }));\n };\n Search.prototype.onActionComplete = function (e) {\n this.refreshSearch = e.requestType !== 'searching';\n };\n Search.prototype.cancelBeginEvent = function (e) {\n if (e.requestType === 'searching') {\n this.parent.setProperties({ searchSettings: { key: '' } }, true);\n }\n };\n /**\n * For internal use only - Get the module name.\n * @private\n */\n Search.prototype.getModuleName = function () {\n return 'search';\n };\n return Search;\n}());\nexport { Search };\n","import { isNullOrUndefined, isBlazor } from '@syncfusion/ej2-base';\nimport { iterateArrayOrObject, isGroupAdaptive } from '../base/util';\nimport * as events from '../base/constant';\n/**\n * The `ShowHide` module is used to control column visibility.\n */\nvar ShowHide = /** @class */ (function () {\n /**\n * Constructor for the show hide module.\n * @hidden\n */\n function ShowHide(parent) {\n this.parent = parent;\n }\n /**\n * Shows a column by column name.\n * @param {string|string[]} columnName - Defines a single or collection of column names to show.\n * @param {string} showBy - Defines the column key either as field name or header text.\n * @return {void}\n */\n ShowHide.prototype.show = function (columnName, showBy) {\n var keys = this.getToggleFields(columnName);\n var columns = this.getColumns(keys, showBy);\n this.parent.notify(events.tooltipDestroy, { module: 'edit' });\n for (var i = 0; i < columns.length; i++) {\n columns[i].visible = true;\n }\n this.setVisible(columns);\n };\n /**\n * Hides a column by column name.\n * @param {string|string[]} columnName - Defines a single or collection of column names to hide.\n * @param {string} hideBy - Defines the column key either as field name or header text.\n * @return {void}\n */\n ShowHide.prototype.hide = function (columnName, hideBy) {\n var keys = this.getToggleFields(columnName);\n var columns = this.getColumns(keys, hideBy);\n this.parent.notify(events.tooltipDestroy, { module: 'edit' });\n for (var i = 0; i < columns.length; i++) {\n columns[i].visible = false;\n }\n this.setVisible(columns);\n };\n ShowHide.prototype.getToggleFields = function (key) {\n var finalized = [];\n if (typeof key === 'string') {\n finalized = [key];\n }\n else {\n finalized = key;\n }\n return finalized;\n };\n ShowHide.prototype.getColumns = function (keys, getKeyBy) {\n var _this = this;\n var columns = iterateArrayOrObject(keys, function (key, index) {\n return iterateArrayOrObject(_this.parent.columnModel, function (item, index) {\n if (item[getKeyBy] === key) {\n return item;\n }\n return undefined;\n })[0];\n });\n return columns;\n };\n /**\n * Shows or hides columns by given column collection.\n * @private\n * @param {Column[]} columns - Specifies the columns.\n * @return {void}\n */\n ShowHide.prototype.setVisible = function (columns, changedStateColumns) {\n var _this = this;\n if (changedStateColumns === void 0) { changedStateColumns = []; }\n changedStateColumns = (changedStateColumns.length > 0) ? changedStateColumns :\n isBlazor() ? (JSON.parse(JSON.stringify(columns))) : columns;\n var args = {\n requestType: 'columnstate',\n cancel: false,\n columns: changedStateColumns\n };\n var cancel = 'cancel';\n this.parent.trigger(events.actionBegin, args, function (showHideArgs) {\n var currentViewCols = _this.parent.getColumns();\n columns = isNullOrUndefined(columns) ? currentViewCols : columns;\n if (showHideArgs[cancel]) {\n _this.parent.notify(events.resetColumns, { showHideArgs: showHideArgs });\n if (columns.length > 0) {\n columns[0].visible = true;\n }\n return;\n }\n if (isGroupAdaptive(_this.parent)) {\n _this.parent.contentModule.emptyVcRows();\n }\n if (_this.parent.allowSelection && _this.parent.getSelectedRecords().length &&\n !_this.parent.selectionSettings.persistSelection) {\n _this.parent.clearSelection();\n }\n if (_this.parent.enableColumnVirtualization) {\n var colsInCurrentView = columns.filter(function (col1) { return (currentViewCols.some(function (col2) { return col1.field === col2.field; })); });\n if (colsInCurrentView.length) {\n _this.parent.notify(events.columnVisibilityChanged, columns);\n }\n }\n else {\n _this.parent.notify(events.columnVisibilityChanged, columns);\n }\n var params = {\n requestType: 'columnstate',\n columns: changedStateColumns\n };\n _this.parent.trigger(events.actionComplete, params);\n if (_this.parent.columnQueryMode !== 'All') {\n _this.parent.refresh();\n }\n });\n };\n return ShowHide;\n}());\nexport { ShowHide };\n","import { Browser, EventHandler } from '@syncfusion/ej2-base';\nimport { addClass, removeClass } from '@syncfusion/ej2-base';\nimport { formatUnit, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport { getScrollBarWidth, getUpdateUsingRaf } from '../base/util';\nimport { scroll, contentReady, uiUpdate, onEmpty, headerRefreshed, textWrapRefresh, virtualScrollEdit, infiniteScrollHandler, closeFilterDialog } from '../base/constant';\nimport { lazyLoadScrollHandler, checkScrollReset } from '../base/constant';\nimport { ColumnWidthService } from '../services/width-controller';\n/**\n * The `Scroll` module is used to handle scrolling behaviour.\n */\nvar Scroll = /** @class */ (function () {\n /**\n * Constructor for the Grid scrolling.\n * @hidden\n */\n function Scroll(parent) {\n this.lastScrollTop = 0;\n //To maintain scroll state on grid actions.\n this.previousValues = { top: 0, left: 0 };\n this.oneTimeReady = true;\n this.parent = parent;\n this.widthService = new ColumnWidthService(parent);\n this.addEventListener();\n }\n /**\n * For internal use only - Get the module name.\n * @private\n */\n Scroll.prototype.getModuleName = function () {\n return 'scroll';\n };\n /**\n * @hidden\n */\n Scroll.prototype.setWidth = function (uiupdate) {\n this.parent.element.style.width = formatUnit(this.parent.width);\n if (uiupdate) {\n this.widthService.setWidthToColumns();\n }\n if (this.parent.toolbarModule && this.parent.toolbarModule.toolbar &&\n this.parent.toolbarModule.toolbar.element) {\n this.parent.toolbarModule.toolbar.refreshOverflow();\n }\n };\n /**\n * @hidden\n */\n Scroll.prototype.setHeight = function () {\n var mHdrHeight = 0;\n var content = this.parent.getContent().querySelector('.e-content');\n var height = this.parent.height;\n if (this.parent.isFrozenGrid() && this.parent.height !== 'auto' && this.parent.height.toString().indexOf('%') < 0) {\n height = parseInt(height, 10) - Scroll.getScrollBarWidth();\n }\n if (!this.parent.enableVirtualization && this.parent.frozenRows && this.parent.height !== 'auto') {\n var tbody = this.parent.getHeaderContent().querySelector('tbody');\n mHdrHeight = tbody ? tbody.offsetHeight : 0;\n if (tbody && mHdrHeight) {\n var add = tbody.querySelectorAll('.e-addedrow').length;\n var height_1 = add * this.parent.getRowHeight();\n mHdrHeight -= height_1;\n }\n content.style.height = formatUnit(height - mHdrHeight);\n }\n else {\n content.style.height = formatUnit(height);\n }\n this.ensureOverflow(content);\n if (this.parent.isFrozenGrid()) {\n this.refresh();\n }\n };\n /**\n * @hidden\n */\n Scroll.prototype.setPadding = function () {\n var content = this.parent.getHeaderContent();\n var scrollWidth = Scroll.getScrollBarWidth() - this.getThreshold();\n var cssProps = this.getCssProperties();\n var padding = this.parent.getFrozenMode() === 'Right' || this.parent.getFrozenMode() === 'Left-Right' ? '0.5px' : '1px';\n content.querySelector('.e-headercontent').style[cssProps.border] = scrollWidth > 0 ? padding : '0px';\n content.style[cssProps.padding] = scrollWidth > 0 ? scrollWidth + 'px' : '0px';\n };\n /**\n * @hidden\n */\n Scroll.prototype.removePadding = function (rtl) {\n var cssProps = this.getCssProperties(rtl);\n var hDiv = this.parent.getHeaderContent().querySelector('.e-headercontent');\n hDiv.style[cssProps.border] = '';\n hDiv.parentElement.style[cssProps.padding] = '';\n var footerDiv = this.parent.getFooterContent();\n if (footerDiv && footerDiv.classList.contains('e-footerpadding')) {\n footerDiv.classList.remove('e-footerpadding');\n }\n };\n /**\n * Refresh makes the Grid adoptable with the height of parent container.\n *\n * > The [`height`](grid/#height/) must be set to 100%.\n * @return\n */\n Scroll.prototype.refresh = function () {\n if (this.parent.height !== '100%') {\n return;\n }\n var content = this.parent.getContent();\n this.parent.element.style.height = '100%';\n var height = this.widthService.getSiblingsHeight(content);\n content.style.height = 'calc(100% - ' + height + 'px)'; //Set the height to the '.e-gridcontent';\n if (this.parent.isFrozenGrid()) {\n content.firstElementChild.style.height = 'calc(100% - ' + getScrollBarWidth() + 'px)';\n }\n };\n Scroll.prototype.getThreshold = function () {\n /* Some browsers places the scroller outside the content,\n * hence the padding should be adjusted.*/\n var appName = Browser.info.name;\n if (appName === 'mozilla') {\n return 0.5;\n }\n return 1;\n };\n /**\n * @hidden\n */\n Scroll.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(onEmpty, this.wireEvents, this);\n this.parent.on(contentReady, this.wireEvents, this);\n this.parent.on(uiUpdate, this.onPropertyChanged, this);\n this.parent.on(textWrapRefresh, this.wireEvents, this);\n this.parent.on(headerRefreshed, this.setScrollLeft, this);\n };\n /**\n * @hidden\n */\n Scroll.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(onEmpty, this.wireEvents);\n this.parent.off(contentReady, this.wireEvents);\n this.parent.off(uiUpdate, this.onPropertyChanged);\n this.parent.off(textWrapRefresh, this.wireEvents);\n this.parent.off(headerRefreshed, this.setScrollLeft);\n };\n Scroll.prototype.setScrollLeft = function () {\n if (this.parent.isFrozenGrid()) {\n this.parent.headerModule.getMovableHeader().scrollLeft = this.previousValues.left;\n }\n else {\n this.parent.getHeaderContent().querySelector('.e-headercontent').scrollLeft = this.previousValues.left;\n }\n };\n Scroll.prototype.onFrozenContentScroll = function () {\n var _this = this;\n return function (e) {\n if (_this.content.querySelector('tbody') === null || _this.parent.isPreventScrollEvent) {\n return;\n }\n if (!isNullOrUndefined(_this.parent.infiniteScrollModule) && _this.parent.enableInfiniteScrolling) {\n _this.parent.notify(infiniteScrollHandler, e);\n }\n _this.previousValues.top = e.target.scrollTop;\n };\n };\n Scroll.prototype.onContentScroll = function (scrollTarget) {\n var _this = this;\n var element = scrollTarget;\n var isHeader = element.classList.contains('e-headercontent');\n return function (e) {\n if (_this.content.querySelector('tbody') === null || _this.parent.isPreventScrollEvent) {\n return;\n }\n var target = e.target;\n var left = target.scrollLeft;\n if (!isNullOrUndefined(_this.parent.infiniteScrollModule) && _this.parent.enableInfiniteScrolling) {\n _this.parent.notify(infiniteScrollHandler, { target: e.target, isLeft: _this.previousValues.left !== left });\n }\n if (_this.parent.groupSettings.columns.length && _this.parent.groupSettings.enableLazyLoading) {\n var isDown = _this.previousValues.top < _this.parent.getContent().firstElementChild.scrollTop;\n _this.parent.notify(lazyLoadScrollHandler, { scrollDown: isDown });\n }\n _this.parent.notify(virtualScrollEdit, {});\n var sLimit = target.scrollWidth;\n var isFooter = target.classList.contains('e-summarycontent');\n if (_this.previousValues.left === left) {\n _this.previousValues.top = !isHeader ? _this.previousValues.top : target.scrollTop;\n return;\n }\n _this.parent.notify(closeFilterDialog, e);\n element.scrollLeft = left;\n if (isFooter) {\n _this.header.scrollLeft = left;\n }\n _this.previousValues.left = left;\n _this.parent.notify(scroll, { left: left });\n };\n };\n Scroll.prototype.onCustomScrollbarScroll = function (mCont, mHdr) {\n var _this = this;\n var content = mCont;\n var header = mHdr;\n return function (e) {\n if (_this.content.querySelector('tbody') === null) {\n return;\n }\n var target = e.target;\n var left = target.scrollLeft;\n if (_this.previousValues.left === left) {\n return;\n }\n content.scrollLeft = left;\n header.scrollLeft = left;\n _this.previousValues.left = left;\n _this.parent.notify(scroll, { left: left });\n if (_this.parent.isDestroyed) {\n return;\n }\n };\n };\n Scroll.prototype.onTouchScroll = function (scrollTarget) {\n var _this = this;\n var element = scrollTarget;\n return function (e) {\n if (e.pointerType === 'mouse') {\n return;\n }\n var isFrozen = _this.parent.isFrozenGrid();\n var pageXY = _this.getPointXY(e);\n var left = element.scrollLeft + (_this.pageXY.x - pageXY.x);\n var mHdr = isFrozen ?\n _this.parent.getHeaderContent().querySelector('.e-movableheader') :\n _this.parent.getHeaderContent().querySelector('.e-headercontent');\n var mCont = isFrozen ?\n _this.parent.getContent().querySelector('.e-movablecontent') :\n _this.parent.getContent().querySelector('.e-content');\n if (_this.previousValues.left === left || (left < 0 || (mHdr.scrollWidth - mHdr.clientWidth) < left)) {\n return;\n }\n e.preventDefault();\n mHdr.scrollLeft = left;\n mCont.scrollLeft = left;\n if (isFrozen) {\n var scrollBar = _this.parent.getContent().querySelector('.e-movablescrollbar');\n scrollBar.scrollLeft = left;\n }\n _this.pageXY.x = pageXY.x;\n _this.previousValues.left = left;\n };\n };\n Scroll.prototype.setPageXY = function () {\n var _this = this;\n return function (e) {\n if (e.pointerType === 'mouse') {\n return;\n }\n _this.pageXY = _this.getPointXY(e);\n };\n };\n Scroll.prototype.getPointXY = function (e) {\n var pageXY = { x: 0, y: 0 };\n if (e.touches && e.touches.length) {\n pageXY.x = e.touches[0].pageX;\n pageXY.y = e.touches[0].pageY;\n }\n else {\n pageXY.x = e.pageX;\n pageXY.y = e.pageY;\n }\n return pageXY;\n };\n Scroll.prototype.wireEvents = function () {\n var _this = this;\n if (this.oneTimeReady) {\n var frzCols = this.parent.isFrozenGrid();\n this.content = this.parent.getContent().querySelector('.e-content');\n this.header = this.parent.getHeaderContent().querySelector('.e-headercontent');\n var mCont = this.content.querySelector('.e-movablecontent');\n var fCont = this.content.querySelector('.e-frozencontent');\n var mHdr = this.header.querySelector('.e-movableheader');\n var mScrollBar = this.parent.getContent().querySelector('.e-movablescrollbar');\n if (this.parent.frozenRows) {\n EventHandler.add(frzCols ? mHdr : this.header, 'touchstart pointerdown', this.setPageXY(), this);\n EventHandler.add(frzCols ? mHdr : this.header, 'touchmove pointermove', this.onTouchScroll(frzCols ? mCont : this.content), this);\n }\n if (this.parent.isFrozenGrid()) {\n EventHandler.add(mScrollBar, 'scroll', this.onCustomScrollbarScroll(mCont, mHdr), this);\n EventHandler.add(mCont, 'scroll', this.onCustomScrollbarScroll(mScrollBar, mHdr), this);\n EventHandler.add(mHdr, 'scroll', this.onCustomScrollbarScroll(mScrollBar, mCont), this);\n EventHandler.add(this.content, 'scroll', this.onFrozenContentScroll(), this);\n EventHandler.add(mHdr, 'touchstart pointerdown', this.setPageXY(), this);\n EventHandler.add(mHdr, 'touchmove pointermove', this.onTouchScroll(mCont), this);\n EventHandler.add(mCont, 'touchstart pointerdown', this.setPageXY(), this);\n EventHandler.add(mCont, 'touchmove pointermove', this.onTouchScroll(mHdr), this);\n }\n else {\n EventHandler.add(this.content, 'scroll', this.onContentScroll(this.header), this);\n EventHandler.add(this.header, 'scroll', this.onContentScroll(this.content), this);\n }\n if (this.parent.aggregates.length) {\n EventHandler.add(this.parent.getFooterContent().firstChild, 'scroll', this.onContentScroll(this.content), this);\n }\n this.refresh();\n this.oneTimeReady = false;\n }\n var table = this.parent.getContentTable();\n var sLeft;\n var sHeight;\n var clientHeight;\n getUpdateUsingRaf(function () {\n sLeft = _this.header.scrollLeft;\n sHeight = table.scrollHeight;\n clientHeight = _this.parent.getContent().clientHeight;\n }, function () {\n var args = { cancel: false };\n _this.parent.notify(checkScrollReset, args);\n if (!_this.parent.enableVirtualization && !_this.parent.enableInfiniteScrolling) {\n if (sHeight < clientHeight) {\n addClass(table.querySelectorAll('tr:last-child td'), 'e-lastrowcell');\n if (_this.parent.isFrozenGrid()) {\n addClass(_this.parent.getContent().querySelector('.e-movablecontent').querySelectorAll('tr:last-child td'), 'e-lastrowcell');\n }\n }\n if (!args.cancel) {\n if ((_this.parent.frozenRows > 0 || _this.parent.isFrozenGrid()) && _this.header.querySelector('.e-movableheader')) {\n _this.header.querySelector('.e-movableheader').scrollLeft = _this.previousValues.left;\n }\n else {\n _this.header.scrollLeft = _this.previousValues.left;\n }\n _this.content.scrollLeft = _this.previousValues.left;\n _this.content.scrollTop = _this.previousValues.top;\n }\n }\n if (!_this.parent.enableColumnVirtualization) {\n _this.content.scrollLeft = sLeft;\n }\n if (_this.parent.isFrozenGrid() && _this.header.querySelector('.e-movableheader')) {\n _this.header.querySelector('.e-movableheader').scrollLeft =\n _this.content.querySelector('.e-movablecontent').scrollLeft;\n }\n });\n this.parent.isPreventScrollEvent = false;\n };\n /**\n * @hidden\n */\n Scroll.prototype.getCssProperties = function (rtl) {\n var css = {};\n var enableRtl = isNullOrUndefined(rtl) ? this.parent.enableRtl : rtl;\n css.border = enableRtl ? 'borderLeftWidth' : 'borderRightWidth';\n css.padding = enableRtl ? 'paddingLeft' : 'paddingRight';\n return css;\n };\n Scroll.prototype.ensureOverflow = function (content) {\n content.style.overflowY = this.parent.height === 'auto' ? 'auto' : 'scroll';\n };\n Scroll.prototype.onPropertyChanged = function (e) {\n if (e.module !== this.getModuleName()) {\n return;\n }\n this.setPadding();\n this.oneTimeReady = true;\n if (this.parent.height === 'auto') {\n this.removePadding();\n }\n this.wireEvents();\n this.setHeight();\n var width = 'width';\n this.setWidth(!isNullOrUndefined(e.properties[width]));\n };\n /**\n * @hidden\n */\n Scroll.prototype.destroy = function () {\n var gridElement = this.parent.element;\n if (!gridElement || (!gridElement.querySelector('.e-gridheader') && !gridElement.querySelector('.e-gridcontent'))) {\n return;\n }\n this.removeEventListener();\n //Remove padding\n this.removePadding();\n var cont = this.parent.getContent().querySelector('.e-content');\n removeClass([this.parent.getHeaderContent().querySelector('.e-headercontent')], 'e-headercontent');\n removeClass([cont], 'e-content');\n //Remove height\n cont.style.height = '';\n //Remove width\n this.parent.element.style.width = '';\n //Remove Dom event\n EventHandler.remove(cont, 'scroll', this.onContentScroll);\n };\n /**\n * Function to get the scrollbar width of the browser.\n * @return {number}\n * @hidden\n */\n Scroll.getScrollBarWidth = function () {\n return getScrollBarWidth();\n };\n return Scroll;\n}());\nexport { Scroll };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { compile } from '@syncfusion/ej2-base';\nimport { getEnumValue } from '@syncfusion/ej2-base';\nimport { CellType } from '../base/enum';\nimport { Property, Collection, ChildProperty } from '@syncfusion/ej2-base';\n/**\n * Configures the Grid's aggregate column.\n */\nvar AggregateColumn = /** @class */ (function (_super) {\n __extends(AggregateColumn, _super);\n function AggregateColumn() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.templateFn = {};\n return _this;\n }\n /**\n * @hidden\n */\n AggregateColumn.prototype.setFormatter = function (value) {\n this.formatFn = value;\n };\n /**\n * @hidden\n */\n AggregateColumn.prototype.getFormatter = function () {\n return this.formatFn;\n };\n /**\n * @hidden\n */\n AggregateColumn.prototype.setTemplate = function (helper) {\n if (helper === void 0) { helper = {}; }\n if (this.footerTemplate !== undefined) {\n this.templateFn[getEnumValue(CellType, CellType.Summary)] = { fn: compile(this.footerTemplate, helper),\n property: 'footerTemplate' };\n }\n if (this.groupFooterTemplate !== undefined) {\n this.templateFn[getEnumValue(CellType, CellType.GroupSummary)] = { fn: compile(this.groupFooterTemplate, helper),\n property: 'groupFooterTemplate' };\n }\n if (this.groupCaptionTemplate !== undefined) {\n this.templateFn[getEnumValue(CellType, CellType.CaptionSummary)] = { fn: compile(this.groupCaptionTemplate, helper),\n property: 'groupCaptionTemplate' };\n }\n };\n /**\n * @hidden\n */\n AggregateColumn.prototype.getTemplate = function (type) {\n return this.templateFn[getEnumValue(CellType, type)];\n };\n /**\n * @hidden\n */\n AggregateColumn.prototype.setPropertiesSilent = function (prop) {\n this.setProperties(prop, true);\n };\n __decorate([\n Property()\n ], AggregateColumn.prototype, \"type\", void 0);\n __decorate([\n Property()\n ], AggregateColumn.prototype, \"field\", void 0);\n __decorate([\n Property()\n ], AggregateColumn.prototype, \"columnName\", void 0);\n __decorate([\n Property()\n ], AggregateColumn.prototype, \"format\", void 0);\n __decorate([\n Property()\n ], AggregateColumn.prototype, \"footerTemplate\", void 0);\n __decorate([\n Property()\n ], AggregateColumn.prototype, \"groupFooterTemplate\", void 0);\n __decorate([\n Property()\n ], AggregateColumn.prototype, \"groupCaptionTemplate\", void 0);\n __decorate([\n Property()\n ], AggregateColumn.prototype, \"customAggregate\", void 0);\n return AggregateColumn;\n}(ChildProperty));\nexport { AggregateColumn };\n/**\n * Configures the aggregate rows.\n */\nvar AggregateRow = /** @class */ (function (_super) {\n __extends(AggregateRow, _super);\n function AggregateRow() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Collection([], AggregateColumn)\n ], AggregateRow.prototype, \"columns\", void 0);\n return AggregateRow;\n}(ChildProperty));\nexport { AggregateRow };\n","import { Browser, remove, EventHandler, isUndefined, closest, classList, isBlazor } from '@syncfusion/ej2-base';\nimport { parentsUntil } from '../base/util';\nimport * as events from '../base/constant';\n/**\n * The `Clipboard` module is used to handle clipboard copy action.\n */\nvar Clipboard = /** @class */ (function () {\n /**\n * Constructor for the Grid clipboard module\n * @hidden\n */\n function Clipboard(parent) {\n this.copyContent = '';\n this.isSelect = false;\n this.parent = parent;\n this.addEventListener();\n }\n /**\n * @hidden\n */\n Clipboard.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on(events.contentReady, this.initialEnd, this);\n this.parent.on(events.keyPressed, this.keyDownHandler, this);\n this.parent.on(events.click, this.clickHandler, this);\n EventHandler.add(this.parent.element, 'keydown', this.pasteHandler, this);\n };\n /**\n * @hidden\n */\n Clipboard.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off(events.keyPressed, this.keyDownHandler);\n this.parent.off(events.contentReady, this.initialEnd);\n this.parent.off(events.click, this.clickHandler);\n EventHandler.remove(this.parent.element, 'keydown', this.pasteHandler);\n };\n Clipboard.prototype.clickHandler = function (e) {\n var target = e.target;\n target = parentsUntil(target, 'e-rowcell');\n };\n Clipboard.prototype.pasteHandler = function (e) {\n var _this = this;\n var grid = this.parent;\n var isMacLike = /(Mac)/i.test(navigator.platform);\n if (e.keyCode === 86 && (e.ctrlKey || (isMacLike && e.metaKey)) && !grid.isEdit) {\n var target = closest(document.activeElement, '.e-rowcell');\n if (!target || !grid.editSettings.allowEditing || grid.editSettings.mode !== 'Batch' ||\n grid.selectionSettings.mode !== 'Cell' || grid.selectionSettings.cellSelectionMode === 'Flow') {\n return;\n }\n this.activeElement = document.activeElement;\n this.clipBoardTextArea.value = '';\n var x_1 = window.scrollX;\n var y_1 = window.scrollY;\n this.clipBoardTextArea.focus();\n setTimeout(function () {\n _this.activeElement.focus();\n window.scrollTo(x_1, y_1);\n _this.paste(_this.clipBoardTextArea.value, _this.parent.getSelectedRowCellIndexes()[0].rowIndex, _this.parent.getSelectedRowCellIndexes()[0].cellIndexes[0]);\n }, 10);\n }\n };\n /**\n * Paste data from clipboard to selected cells.\n * @param {boolean} data - Specifies the date for paste.\n * @param {boolean} rowIndex - Specifies the row index.\n * @param {boolean} colIndex - Specifies the column index.\n */\n Clipboard.prototype.paste = function (data, rowIndex, colIndex) {\n var grid = this.parent;\n var cIdx = colIndex;\n var rIdx = rowIndex;\n var col;\n var value;\n var isAvail;\n if (!grid.editSettings.allowEditing || grid.editSettings.mode !== 'Batch' ||\n grid.selectionSettings.mode !== 'Cell' || grid.selectionSettings.cellSelectionMode === 'Flow') {\n return;\n }\n var rows = data.split('\\n');\n var cols;\n var dataRows = grid.getDataRows();\n var mRows;\n var frRows;\n var isFrozen = this.parent.isFrozenGrid();\n if (isFrozen) {\n mRows = grid.getMovableDataRows();\n if (grid.getFrozenRightColumnsCount()) {\n frRows = grid.getFrozenRightDataRows();\n }\n }\n for (var r = 0; r < rows.length; r++) {\n cols = rows[r].split('\\t');\n cIdx = colIndex;\n if ((r === rows.length - 1 && rows[r] === '') || isUndefined(grid.getRowByIndex(rIdx))) {\n cIdx++;\n break;\n }\n for (var c = 0; c < cols.length; c++) {\n isAvail = grid.getCellFromIndex(rIdx, cIdx);\n if (isFrozen) {\n var fTr = dataRows[rIdx];\n var mTr = mRows[rIdx];\n isAvail = !fTr.querySelector('[aria-colindex=\"' + cIdx + '\"]') ?\n mTr.querySelector('[aria-colindex=\"' + cIdx + '\"]') : true;\n if (frRows && !isAvail) {\n var frTr = frRows[rIdx];\n isAvail = frTr.querySelector('[aria-colindex=\"' + cIdx + '\"]');\n }\n }\n if (!isAvail) {\n cIdx++;\n break;\n }\n col = grid.getColumnByIndex(cIdx);\n value = col.getParser() ? col.getParser()(cols[c]) : cols[c];\n if (col.allowEditing && !col.isPrimaryKey && !col.template) {\n var args = {\n column: col,\n data: value,\n rowIndex: rIdx\n };\n this.parent.trigger(events.beforePaste, args);\n rIdx = args.rowIndex;\n if (!args.cancel) {\n if (grid.editModule) {\n if (col.type === 'number') {\n this.parent.editModule.updateCell(rIdx, col.field, parseFloat(args.data));\n }\n else {\n grid.editModule.updateCell(rIdx, col.field, args.data);\n }\n }\n }\n }\n cIdx++;\n }\n rIdx++;\n }\n grid.selectionModule.selectCellsByRange({ rowIndex: rowIndex, cellIndex: colIndex }, { rowIndex: rIdx - 1, cellIndex: cIdx - 1 });\n var cell = this.parent.getCellFromIndex(rIdx - 1, cIdx - 1);\n if (cell) {\n classList(cell, ['e-focus', 'e-focused'], []);\n }\n };\n Clipboard.prototype.initialEnd = function () {\n this.parent.off(events.contentReady, this.initialEnd);\n this.clipBoardTextArea = this.parent.createElement('textarea', {\n className: 'e-clipboard',\n styles: 'opacity: 0',\n attrs: { tabindex: '-1', 'aria-label': 'clipboard' }\n });\n this.parent.element.appendChild(this.clipBoardTextArea);\n };\n Clipboard.prototype.keyDownHandler = function (e) {\n if (e.action === 'ctrlPlusC') {\n this.copy();\n }\n else if (e.action === 'ctrlShiftPlusH') {\n this.copy(true);\n }\n };\n Clipboard.prototype.setCopyData = function (withHeader) {\n if (window.getSelection().toString() === '') {\n var isFrozen = this.parent.isFrozenGrid();\n this.clipBoardTextArea.value = this.copyContent = '';\n var mRows = void 0;\n var frRows = void 0;\n var rows = this.parent.getRows();\n if (isFrozen) {\n mRows = this.parent.getMovableDataRows();\n if (this.parent.getFrozenMode() === 'Left-Right') {\n frRows = this.parent.getFrozenRightRows();\n }\n }\n if (this.parent.selectionSettings.mode !== 'Cell') {\n var selectedIndexes = this.parent.getSelectedRowIndexes().sort(function (a, b) { return a - b; });\n if (withHeader) {\n var headerTextArray = [];\n for (var i = 0; i < this.parent.getVisibleColumns().length; i++) {\n headerTextArray[i] = this.parent.getVisibleColumns()[i].headerText;\n }\n this.getCopyData(headerTextArray, false, '\\t', withHeader);\n this.copyContent += '\\n';\n }\n for (var i = 0; i < selectedIndexes.length; i++) {\n if (i > 0) {\n this.copyContent += '\\n';\n }\n var cells = [].slice.call(rows[selectedIndexes[i]].\n querySelectorAll('.e-rowcell:not(.e-hide)'));\n if (isFrozen) {\n cells.push.apply(cells, [].slice.call(mRows[selectedIndexes[i]].querySelectorAll('.e-rowcell:not(.e-hide)')));\n if (frRows) {\n cells.push.apply(cells, [].slice.call(frRows[selectedIndexes[i]].querySelectorAll('.e-rowcell:not(.e-hide)')));\n }\n }\n this.getCopyData(cells, false, '\\t', withHeader);\n }\n }\n else {\n var obj = this.checkBoxSelection();\n if (obj.status) {\n if (withHeader) {\n var headers = [];\n for (var i = 0; i < obj.colIndexes.length; i++) {\n headers.push(this.parent.getColumnHeaderByIndex(obj.colIndexes[i]));\n }\n this.getCopyData(headers, false, '\\t', withHeader);\n this.copyContent += '\\n';\n }\n for (var i = 0; i < obj.rowIndexes.length; i++) {\n if (i > 0) {\n this.copyContent += '\\n';\n }\n var cells = [].slice.call(rows[obj.rowIndexes[i]].\n querySelectorAll('.e-cellselectionbackground'));\n if (isFrozen) {\n cells.push.apply(cells, [].slice.call(mRows[obj.rowIndexes[i]]\n .querySelectorAll('.e-cellselectionbackground')));\n if (frRows) {\n cells.push.apply(cells, [].slice.call(frRows[obj.rowIndexes[i]]\n .querySelectorAll('.e-cellselectionbackground')));\n }\n }\n this.getCopyData(cells, false, '\\t', withHeader);\n }\n }\n else {\n this.getCopyData([].slice.call(this.parent.element.querySelectorAll('.e-cellselectionbackground')), true, '\\n', withHeader);\n }\n }\n var args = {\n data: this.copyContent,\n cancel: false,\n };\n this.parent.trigger(events.beforeCopy, args);\n if (args.cancel) {\n return;\n }\n this.clipBoardTextArea.value = this.copyContent = args.data;\n if (!Browser.userAgent.match(/ipad|ipod|iphone/i)) {\n this.clipBoardTextArea.select();\n }\n else {\n this.clipBoardTextArea.setSelectionRange(0, this.clipBoardTextArea.value.length);\n }\n this.isSelect = true;\n }\n };\n Clipboard.prototype.getCopyData = function (cells, isCell, splitKey, withHeader) {\n var isElement = typeof cells[0] !== 'string';\n for (var j = 0; j < cells.length; j++) {\n if (withHeader && isCell) {\n this.copyContent += this.parent.getColumns()[parseInt(cells[j].getAttribute('aria-colindex'), 10)].headerText + '\\n';\n }\n if (isElement) {\n if (!cells[j].classList.contains('e-hide')) {\n if (isBlazor()) {\n if ((!cells[j].classList.contains('e-gridchkbox')) &&\n Object.keys(cells[j].querySelectorAll('.e-check')).length) {\n this.copyContent += true;\n }\n else if ((!cells[j].classList.contains('e-gridchkbox')) &&\n Object.keys(cells[j].querySelectorAll('.e-uncheck')).length) {\n this.copyContent += false;\n }\n else {\n this.copyContent += cells[j].innerText;\n }\n }\n else {\n this.copyContent += cells[j].innerText;\n }\n }\n }\n else {\n this.copyContent += cells[j];\n }\n if (j < cells.length - 1) {\n this.copyContent += splitKey;\n }\n }\n };\n /**\n * Copy selected rows or cells data into clipboard.\n * @param {boolean} withHeader - Specifies whether the column header data need to be copied or not.\n */\n Clipboard.prototype.copy = function (withHeader) {\n if (document.queryCommandSupported('copy')) {\n this.setCopyData(withHeader);\n document.execCommand('copy');\n this.clipBoardTextArea.blur();\n }\n if (this.isSelect) {\n window.getSelection().removeAllRanges();\n this.isSelect = false;\n }\n };\n /**\n * For internal use only - Get the module name.\n * @private\n */\n Clipboard.prototype.getModuleName = function () {\n return 'clipboard';\n };\n /**\n * To destroy the clipboard\n * @return {void}\n * @hidden\n */\n Clipboard.prototype.destroy = function () {\n this.removeEventListener();\n if (this.clipBoardTextArea) {\n remove(this.clipBoardTextArea);\n }\n };\n Clipboard.prototype.checkBoxSelection = function () {\n var gridObj = this.parent;\n var obj = { status: false };\n if (gridObj.selectionSettings.mode === 'Cell') {\n var rowCellIndxes = gridObj.getSelectedRowCellIndexes();\n var str = void 0;\n var isBox = void 0;\n var rowIndexes = [];\n var i = void 0;\n for (i = 0; i < rowCellIndxes.length; i++) {\n if (rowCellIndxes[i].cellIndexes.length) {\n rowIndexes.push(rowCellIndxes[i].rowIndex);\n }\n if (rowCellIndxes[i].cellIndexes.length) {\n if (!str) {\n str = JSON.stringify(rowCellIndxes[i].cellIndexes.sort());\n }\n if (str !== JSON.stringify(rowCellIndxes[i].cellIndexes.sort())) {\n break;\n }\n }\n }\n rowIndexes.sort(function (a, b) { return a - b; });\n if (i === rowCellIndxes.length && rowIndexes[rowIndexes.length - 1] - rowIndexes[0] === rowIndexes.length - 1) {\n obj = { status: true, rowIndexes: rowIndexes, colIndexes: rowCellIndxes[0].cellIndexes };\n }\n }\n return obj;\n };\n return Clipboard;\n}());\nexport { Clipboard };\n","import { Observer, isBlazor, isNullOrUndefined } from '@syncfusion/ej2-base';\nimport * as events from '../base/constant';\nimport { Row } from '../models/row';\nimport { AriaService } from '../services/aria-service';\nimport { Cell } from '../models/cell';\nimport { CellType } from '../base/enum';\nimport { DataUtil } from '@syncfusion/ej2-data';\nexport var gridObserver = new Observer();\n/**\n * BlazorAction is used for performing Blazor related Grid Actions.\n * @hidden\n */\nvar BlazorAction = /** @class */ (function () {\n function BlazorAction(parent) {\n this.aria = new AriaService();\n this.actionArgs = {};\n this.virtualHeight = 0;\n this.parent = parent;\n this.addEventListener();\n }\n BlazorAction.prototype.addEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.on('detailclick', this.onDetailRowClick, this);\n this.parent.on('add-delete-success', this.addDeleteSuccess, this);\n this.parent.on('editsuccess', this.editSuccess, this);\n this.parent.on('setvisibility', this.setColumnVisibility, this);\n this.parent.on('offset', this.setServerOffSet, this);\n this.parent.on('updateaction', this.modelChanged, this);\n this.parent.on(events.modelChanged, this.modelChanged, this);\n this.parent.on('group-expand-collapse', this.onGroupClick, this);\n this.parent.on('setcolumnstyles', this.setColVTableWidthAndTranslate, this);\n this.parent.on('refresh-virtual-indices', this.invokeServerDataBind, this);\n this.parent.on('contentcolgroup', this.contentColGroup, this);\n this.parent.on(events.dataSourceModified, this.dataSourceModified, this);\n };\n BlazorAction.prototype.removeEventListener = function () {\n if (this.parent.isDestroyed) {\n return;\n }\n this.parent.off('detailclick', this.onDetailRowClick);\n this.parent.off('add-delete-success', this.addDeleteSuccess);\n this.parent.off('editsuccess', this.editSuccess);\n this.parent.off('setvisibility', this.setColumnVisibility);\n this.parent.off('offset', this.setServerOffSet);\n this.parent.off('updateaction', this.modelChanged);\n this.parent.off(events.modelChanged, this.modelChanged);\n this.parent.off('group-expand-collapse', this.onGroupClick);\n this.parent.off('setcolumnstyles', this.setColVTableWidthAndTranslate);\n this.parent.off('refresh-virtual-indices', this.invokeServerDataBind);\n this.parent.off('contentcolgroup', this.contentColGroup);\n this.parent.off(events.dataSourceModified, this.dataSourceModified);\n };\n BlazorAction.prototype.getModuleName = function () { return 'blazor'; };\n ;\n BlazorAction.prototype.modelChanged = function (args) {\n this.actionArgs = args;\n this.parent.currentAction = args;\n };\n BlazorAction.prototype.addDeleteSuccess = function (args) {\n var _this = this;\n var editArgs;\n var action = 'action';\n var data = 'data';\n var index = 'index';\n editArgs = {\n requestType: args.requestType,\n data: args[data],\n action: args[action]\n };\n if (!isNullOrUndefined(args[index])) {\n editArgs[index] = args[index];\n }\n args.promise.then(function (e) { return _this.editSuccess(editArgs); }).catch(function (e) {\n if (isBlazor() && _this.parent.isServerRendered) {\n var error = 'error';\n var message = 'message';\n if (!isNullOrUndefined(e[error]) && !isNullOrUndefined(e[error][message])) {\n e[error] = e[error][message];\n }\n }\n _this.parent.trigger(events.actionFailure, ((isBlazor() && e instanceof Array) ? e[0] : e));\n _this.parent.hideSpinner();\n _this.parent.log('actionfailure', { error: e });\n });\n };\n BlazorAction.prototype.editSuccess = function (args) {\n this.parent.renderModule.resetTemplates();\n this.invokeServerDataBind(args);\n };\n BlazorAction.prototype.invokeServerDataBind = function (args) {\n this.actionArgs = args;\n this.parent.currentAction = args;\n this.parent.allowServerDataBinding = true;\n this.parent.serverDataBind();\n this.parent.allowServerDataBinding = false;\n };\n BlazorAction.prototype.onDetailRowClick = function (target) {\n var gObj = this.parent;\n var adaptor = 'interopAdaptor';\n var rIndex = 'rowIndex';\n var invokeMethodAsync = 'invokeMethodAsync';\n var tr = target.parentElement;\n var uid = tr.getAttribute('data-uid');\n var rowObj = gObj.getRowObjectFromUID(uid);\n var args = {\n uid: uid, classList: target.classList[0], index: tr.getAttribute('aria-rowindex'),\n rowIndex: gObj.getRowsObject().indexOf(rowObj), colSpan: this.parent.getVisibleColumns().length\n };\n gObj[adaptor][invokeMethodAsync]('OnDetailClick', args);\n if (target.classList.contains('e-detailrowcollapse')) {\n var rows = gObj.getRowsObject();\n var rowData = rowObj.data;\n var gridRowId = this.parent.getRowUid('grid-row');\n var len = gObj.groupSettings.columns.length;\n var gridRow = new Row({\n isDataRow: true,\n isExpand: true,\n uid: gridRowId,\n isDetailRow: true,\n cells: [new Cell({ cellType: CellType.Indent }), new Cell({ isDataCell: true, visible: true })]\n });\n for (var i = 0; i < len; i++) {\n gridRow.cells.unshift(new Cell({ cellType: CellType.Indent }));\n }\n rows.splice(args[rIndex] + 1, 0, gridRow);\n gObj.trigger(events.detailDataBound, { data: rowData });\n gObj.notify(events.detailDataBound, { rows: gObj.getRowsObject() });\n rowObj.isExpand = true;\n this.aria.setExpand(target, true);\n }\n else {\n gObj.getRowsObject().splice(args[rIndex] + 1, 1);\n gObj.notify(events.detailDataBound, { rows: gObj.getRowsObject() });\n rowObj.isExpand = false;\n this.aria.setExpand(target, false);\n }\n };\n BlazorAction.prototype.setColumnVisibility = function (columns) {\n var visible = {};\n var adaptor = 'interopAdaptor';\n var invokeMethodAsync = 'invokeMethodAsync';\n for (var i = 0; i < columns.length; i++) {\n visible[columns[i].uid] = columns[i].visible;\n }\n this.parent[adaptor][invokeMethodAsync]('setColumnVisibility', { visible: visible });\n };\n BlazorAction.prototype.dataSuccess = function (args) {\n if (this.parent.enableVirtualization && Object.keys(this.actionArgs).length === 0) {\n this.actionArgs.requestType = 'virtualscroll';\n }\n var startIndex = 'startIndex';\n var endIndex = 'endIndex';\n this.actionArgs[startIndex] = args[startIndex];\n this.actionArgs[endIndex] = args[endIndex];\n if (this.parent.enableVirtualization) {\n this.virtualContentModule = this.parent.contentModule;\n if (this.virtualContentModule.activeKey === 'downArrow' || this.virtualContentModule.activeKey === 'upArrow') {\n var row = this.parent.getRowByIndex(this.virtualContentModule.blzRowIndex);\n if (row) {\n this.parent.selectRow(parseInt(row.getAttribute('aria-rowindex'), 10));\n // tslint:disable-next-line:no-any\n row.cells[0].focus({ preventScroll: true });\n }\n }\n this.virtualContentModule.blazorDataLoad = false;\n }\n if (args.foreignColumnsData) {\n var columns = this.parent.getColumns();\n for (var i = 0; i < columns.length; i++) {\n if (args.foreignColumnsData[columns[i].field]) {\n columns[i].columnData = args.foreignColumnsData[columns[i].field];\n }\n }\n }\n if (this.parent.allowGrouping && this.parent.groupSettings.columns) {\n var agg = [];\n var aggRows = this.parent.aggregates;\n for (var i = 0; i < aggRows.length; i++) {\n var aggRow = aggRows[i];\n for (var j = 0; j < aggRow.columns.length; j++) {\n var aggr = {};\n var type = aggRow.columns[j].type.toString();\n aggr = { type: type.toLowerCase(), field: aggRow.columns[j].field };\n agg.push(aggr);\n }\n }\n var data = void 0;\n var aggrds = void 0;\n var groupedCols = this.parent.groupSettings.columns;\n for (var k = 0; k < groupedCols.length; k++) {\n aggrds = data ? data : args.result;\n data = DataUtil.group(aggrds, groupedCols[k], agg, null, null);\n }\n args.result = data ? data : args.result;\n }\n var rowUid = 'rowUid';\n var offsetTime = 'offsetTime';\n var off = 'offset';\n this.parent[rowUid] = args[rowUid];\n args[off] = Math.sign(args[off]) === 1 ? -Math.abs(args[off]) : Math.abs(args[off]);\n this.parent[offsetTime] = args[off];\n if (this.parent[offsetTime] !== new Date().getTimezoneOffset() / 60) {\n if (this.parent.editSettings.mode !== 'Batch') {\n var action = 'action';\n var rowIndex = 'rowIndex';\n var index = 'index';\n if (this.actionArgs[action] === 'edit') {\n this.setClientOffSet(args, this.actionArgs[rowIndex]);\n }\n else if (this.actionArgs[action] === 'add') {\n this.setClientOffSet(args, this.actionArgs[index]);\n }\n }\n else if (this.parent.editSettings.mode === 'Batch') {\n var changes = 'changes';\n var changedRecords = 'changedRecords';\n var addedRecords = 'addedRecords';\n var keyField = this.parent.getPrimaryKeyFieldNames()[0];\n var batchChanges = this.actionArgs[changes] || { changedRecords: [], addedRecords: [] };\n for (var i = 0; i < batchChanges[changedRecords].length; i++) {\n for (var j = 0; j < args.result.length; j++) {\n if (batchChanges[changedRecords][i][keyField] === args.result[j][keyField]) {\n this.setClientOffSet(args, j);\n }\n }\n }\n for (var i = 0; i < batchChanges[addedRecords].length; i++) {\n for (var j = 0; j < args.result.length; j++) {\n if (batchChanges[addedRecords][i][keyField] === args.result[j][keyField]) {\n this.setClientOffSet(args, j);\n }\n }\n }\n }\n }\n this.parent.renderModule.dataManagerSuccess(args, this.actionArgs);\n this.parent.getMediaColumns();\n if (this.parent.enableVirtualization) {\n this.virtualContentModule = this.parent.contentModule;\n this.setColVTableWidthAndTranslate();\n if (this.parent.groupSettings.columns.length) {\n this.virtualContentModule.setVirtualHeight(this.virtualHeight);\n }\n }\n this.actionArgs = this.parent.currentAction = {};\n };\n BlazorAction.prototype.removeDisplayNone = function () {\n var renderedContentRows = this.parent.getContentTable().querySelectorAll('tr');\n for (var i = 0; i < renderedContentRows.length; i++) {\n var renderedContentCells = renderedContentRows[i].querySelectorAll('td');\n for (var j = 0; j < renderedContentCells.length; j++) {\n renderedContentCells[j].style.display = '';\n }\n }\n };\n BlazorAction.prototype.setVirtualTrackHeight = function (args) {\n this.virtualHeight = args.VisibleGroupedRowsCount * this.parent.getRowHeight();\n this.virtualContentModule.setVirtualHeight(this.virtualHeight);\n };\n BlazorAction.prototype.setColVTableWidthAndTranslate = function (args) {\n if (this.parent.enableColumnVirtualization && this.virtualContentModule.prevInfo &&\n (JSON.stringify(this.virtualContentModule.currentInfo.columnIndexes) !==\n JSON.stringify(this.virtualContentModule.prevInfo.columnIndexes)) || ((args && args.refresh))) {\n var translateX = this.virtualContentModule.getColumnOffset(this.virtualContentModule.startColIndex - 1);\n var width = this.virtualContentModule.getColumnOffset(this.virtualContentModule.endColIndex - 1) - translateX + '';\n this.virtualContentModule.header.virtualEle.setWrapperWidth(width);\n this.virtualContentModule.virtualEle.setWrapperWidth(width);\n this.virtualContentModule.header.virtualEle.adjustTable(translateX, 0);\n this.parent.getContentTable().parentElement.style.width = width + 'px';\n }\n if (this.dataSourceChanged) {\n this.virtualContentModule.getPanel().firstElementChild.scrollTop = 0;\n this.virtualContentModule.getPanel().firstElementChild.scrollLeft = 0;\n if (this.virtualContentModule.header.virtualEle) {\n this.virtualContentModule.header.virtualEle.adjustTable(0, 0);\n }\n this.parent.getContentTable().parentElement.style.transform = 'translate(0px,0px)';\n this.virtualContentModule.refreshOffsets();\n this.virtualContentModule.refreshVirtualElement();\n this.dataSourceChanged = false;\n }\n };\n BlazorAction.prototype.dataSourceModified = function () {\n this.dataSourceChanged = true;\n };\n BlazorAction.prototype.setClientOffSet = function (args, index) {\n var timeZone = DataUtil.serverTimezoneOffset;\n DataUtil.serverTimezoneOffset = 0;\n args.result[index] = DataUtil.parse.parseJson(JSON.stringify(args.result[index]));\n DataUtil.serverTimezoneOffset = timeZone;\n };\n BlazorAction.prototype.setServerOffSet = function (args) {\n var serverTimeZone = DataUtil.serverTimezoneOffset;\n var offsetTime = 'offsetTime';\n var data = 'data';\n var timeZone = new Date().getTimezoneOffset() / 60 * 2 + this.parent[offsetTime];\n DataUtil.serverTimezoneOffset = timeZone;\n args[data] = DataUtil.parse.parseJson(JSON.stringify(args[data]));\n DataUtil.serverTimezoneOffset = serverTimeZone;\n };\n BlazorAction.prototype.onGroupClick = function (args) {\n var _this = this;\n var adaptor = 'interopAdaptor';\n var content = 'contentModule';\n var invokeMethodAsync = 'invokeMethodAsync';\n var exactTopIndex = 'exactTopIndex';\n args[exactTopIndex] = Math.round((this.parent.element.querySelector('.e-content').scrollTop) / this.parent.getRowHeight());\n var rowHeight = 'rowHeight';\n args[rowHeight] = this.parent.getRowHeight();\n this.parent[adaptor][invokeMethodAsync]('OnGroupExpandClick', args).then(function () {\n _this.parent[content].rowElements = [].slice.call(_this.parent.getContentTable().querySelectorAll('tr.e-row[data-uid]'));\n });\n };\n BlazorAction.prototype.setPersistData = function (args) {\n var gObj = this.parent;\n gObj.mergePersistGridData(args);\n var bulkChanges = 'bulkChanges';\n if (gObj[bulkChanges].columns) {\n delete gObj[bulkChanges].columns;\n }\n gObj.headerModule.refreshUI();\n gObj.notify('persist-data-changed', {});\n gObj.notify(events.columnVisibilityChanged, gObj.getColumns());\n };\n ;\n BlazorAction.prototype.resetPersistData = function (args) {\n var gObj = this.parent;\n var bulkChanges = 'bulkChanges';\n var parseArgs = JSON.parse(args);\n var persistArgs = { filterSettings: parseArgs.filterSettings,\n groupSettings: parseArgs.groupSettings, pageSettings: parseArgs.pageSettings, sortSettings: parseArgs.sortSettings,\n searchSettings: parseArgs.searchSettings, columns: parseArgs.columns };\n if (!persistArgs.sortSettings.columns) {\n persistArgs.sortSettings.columns = [];\n }\n if (!persistArgs.groupSettings.columns) {\n persistArgs.groupSettings.columns = [];\n }\n if (!persistArgs.pageSettings.currentPage) {\n gObj.pageSettings.currentPage = 1;\n }\n for (var i = 0; i < gObj.columns.length; i++) {\n if (gObj.groupSettings.columns.indexOf(gObj.columns[i].field) > -1) {\n gObj.columns[i].visible = true;\n }\n }\n gObj.mergePersistGridData(persistArgs);\n gObj.notify('persist-data-changed', {});\n if (gObj[bulkChanges].columns) {\n delete gObj[bulkChanges].columns;\n }\n gObj.headerModule.refreshUI();\n for (var i = 0; i < gObj.columns.length; i++) {\n gObj.columns[i].editType = gObj.columns[i].editType.toLowerCase();\n }\n gObj.setProperties({ filterSettings: { columns: [] } }, true);\n };\n BlazorAction.prototype.contentColGroup = function () {\n var gObj = this.parent;\n var contentTable = gObj.getContent().querySelector('.e-table');\n contentTable.insertBefore(contentTable.querySelector(\"#content-\" + gObj.element.id + \"colGroup\"), contentTable.querySelector('tbody'));\n if (gObj.frozenRows) {\n var headerTable = gObj.getHeaderContent().querySelector('.e-table');\n headerTable.insertBefore(headerTable.querySelector(\"#\" + gObj.element.id + \"colGroup\"), headerTable.querySelector('tbody'));\n }\n if (gObj.getFrozenColumns() !== 0) {\n var movableContentTable = gObj.getContent().querySelector('.e-movablecontent').querySelector('.e-table');\n movableContentTable.insertBefore(movableContentTable.querySelector(\"#\" + gObj.element.id + \"colGroup\"), movableContentTable.querySelector('tbody'));\n if (gObj.frozenRows) {\n var movableHeaderTable = gObj.getHeaderContent().querySelector('.e-movableheader').querySelector('.e-table');\n movableHeaderTable.insertBefore(movableHeaderTable.querySelector(\"#\" + gObj.element.id + \"colGroup\"), movableHeaderTable.querySelector('tbody'));\n }\n }\n };\n BlazorAction.prototype.dataFailure = function (args) {\n this.parent.renderModule.dataManagerFailure(args, this.actionArgs);\n this.actionArgs = this.parent.currentAction = {};\n };\n BlazorAction.prototype.destroy = function () {\n this.removeEventListener();\n };\n return BlazorAction;\n}());\nexport { BlazorAction };\n","var __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n }\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { Component, ChildProperty, Browser, closest, extend } from '@syncfusion/ej2-base';\nimport { isNullOrUndefined, setValue, getValue, isBlazor, blazorTemplates } from '@syncfusion/ej2-base';\nimport { addClass, removeClass, append, remove, updateBlazorTemplate, classList, setStyleAttribute } from '@syncfusion/ej2-base';\nimport { Property, Collection, Complex, Event, NotifyPropertyChanges, L10n } from '@syncfusion/ej2-base';\nimport { EventHandler, KeyboardEvents } from '@syncfusion/ej2-base';\nimport { DataManager, DataUtil, UrlAdaptor } from '@syncfusion/ej2-data';\nimport { createSpinner, hideSpinner, showSpinner, Tooltip } from '@syncfusion/ej2-popups';\nimport { iterateArrayOrObject, prepareColumns, parentsUntil, wrap, templateCompiler, isGroupAdaptive, refreshForeignData } from './util';\nimport { getRowHeight, setColumnIndex, Global, ispercentageWidth, renderMovable, getNumberFormat } from './util';\nimport { setRowElements, resetRowIndex, compareChanges, getCellByColAndRowIndex, performComplexDataOperation } from './util';\nimport * as events from '../base/constant';\nimport { Render } from '../renderer/render';\nimport { RenderType } from './enum';\nimport { RowRenderer } from '../renderer/row-renderer';\nimport { CellRenderer } from '../renderer/cell-renderer';\nimport { CellRendererFactory } from '../services/cell-render-factory';\nimport { ServiceLocator } from '../services/service-locator';\nimport { ValueFormatter } from '../services/value-formatter';\nimport { RendererFactory } from '../services/renderer-factory';\nimport { ColumnWidthService } from '../services/width-controller';\nimport { AriaService } from '../services/aria-service';\nimport { FocusStrategy } from '../services/focus-strategy';\nimport { PageSettings } from '../models/page-settings';\nimport { ColumnChooserSettings } from '../models/column-chooser-settings';\nimport { Selection } from '../actions/selection';\nimport { Search } from '../actions/search';\nimport { ShowHide } from '../actions/show-hide';\nimport { Scroll } from '../actions/scroll';\nimport { Print } from '../actions/print';\nimport { AggregateRow } from '../models/aggregate';\nimport { Clipboard } from '../actions/clipboard';\nimport { gridObserver } from '../actions/blazor-action';\nimport { RowModelGenerator } from '../services/row-model-generator';\n/**\n * Represents the field name and direction of sort column.\n */\nvar SortDescriptor = /** @class */ (function (_super) {\n __extends(SortDescriptor, _super);\n function SortDescriptor() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property()\n ], SortDescriptor.prototype, \"field\", void 0);\n __decorate([\n Property()\n ], SortDescriptor.prototype, \"direction\", void 0);\n __decorate([\n Property(false)\n ], SortDescriptor.prototype, \"isFromGroup\", void 0);\n return SortDescriptor;\n}(ChildProperty));\nexport { SortDescriptor };\n/**\n * Configures the sorting behavior of Grid.\n */\nvar SortSettings = /** @class */ (function (_super) {\n __extends(SortSettings, _super);\n function SortSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Collection([], SortDescriptor)\n ], SortSettings.prototype, \"columns\", void 0);\n __decorate([\n Property(true)\n ], SortSettings.prototype, \"allowUnsort\", void 0);\n return SortSettings;\n}(ChildProperty));\nexport { SortSettings };\n/**\n * Represents the predicate for the filter column.\n */\nvar Predicate = /** @class */ (function (_super) {\n __extends(Predicate, _super);\n function Predicate() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property()\n ], Predicate.prototype, \"field\", void 0);\n __decorate([\n Property()\n ], Predicate.prototype, \"operator\", void 0);\n __decorate([\n Property()\n ], Predicate.prototype, \"value\", void 0);\n __decorate([\n Property()\n ], Predicate.prototype, \"matchCase\", void 0);\n __decorate([\n Property(false)\n ], Predicate.prototype, \"ignoreAccent\", void 0);\n __decorate([\n Property()\n ], Predicate.prototype, \"predicate\", void 0);\n __decorate([\n Property({})\n ], Predicate.prototype, \"actualFilterValue\", void 0);\n __decorate([\n Property({})\n ], Predicate.prototype, \"actualOperator\", void 0);\n __decorate([\n Property()\n ], Predicate.prototype, \"type\", void 0);\n __decorate([\n Property()\n ], Predicate.prototype, \"ejpredicate\", void 0);\n __decorate([\n Property()\n ], Predicate.prototype, \"uid\", void 0);\n __decorate([\n Property()\n ], Predicate.prototype, \"isForeignKey\", void 0);\n return Predicate;\n}(ChildProperty));\nexport { Predicate };\n/**\n * Configures the infinite scroll behavior of Grid.\n */\nvar InfiniteScrollSettings = /** @class */ (function (_super) {\n __extends(InfiniteScrollSettings, _super);\n function InfiniteScrollSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(false)\n ], InfiniteScrollSettings.prototype, \"enableCache\", void 0);\n __decorate([\n Property(3)\n ], InfiniteScrollSettings.prototype, \"maxBlocks\", void 0);\n __decorate([\n Property(3)\n ], InfiniteScrollSettings.prototype, \"initialBlocks\", void 0);\n return InfiniteScrollSettings;\n}(ChildProperty));\nexport { InfiniteScrollSettings };\n/**\n * Configures the filtering behavior of the Grid.\n */\nvar FilterSettings = /** @class */ (function (_super) {\n __extends(FilterSettings, _super);\n function FilterSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Collection([], Predicate)\n ], FilterSettings.prototype, \"columns\", void 0);\n __decorate([\n Property('FilterBar')\n ], FilterSettings.prototype, \"type\", void 0);\n __decorate([\n Property()\n ], FilterSettings.prototype, \"mode\", void 0);\n __decorate([\n Property(true)\n ], FilterSettings.prototype, \"showFilterBarStatus\", void 0);\n __decorate([\n Property(1500)\n ], FilterSettings.prototype, \"immediateModeDelay\", void 0);\n __decorate([\n Property()\n ], FilterSettings.prototype, \"operators\", void 0);\n __decorate([\n Property(false)\n ], FilterSettings.prototype, \"ignoreAccent\", void 0);\n __decorate([\n Property(false)\n ], FilterSettings.prototype, \"enableCaseSensitivity\", void 0);\n __decorate([\n Property(false)\n ], FilterSettings.prototype, \"showFilterBarOperator\", void 0);\n return FilterSettings;\n}(ChildProperty));\nexport { FilterSettings };\n/**\n * Configures the selection behavior of the Grid.\n */\nvar SelectionSettings = /** @class */ (function (_super) {\n __extends(SelectionSettings, _super);\n function SelectionSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('Row')\n ], SelectionSettings.prototype, \"mode\", void 0);\n __decorate([\n Property('Flow')\n ], SelectionSettings.prototype, \"cellSelectionMode\", void 0);\n __decorate([\n Property('Single')\n ], SelectionSettings.prototype, \"type\", void 0);\n __decorate([\n Property(false)\n ], SelectionSettings.prototype, \"checkboxOnly\", void 0);\n __decorate([\n Property(false)\n ], SelectionSettings.prototype, \"persistSelection\", void 0);\n __decorate([\n Property('Default')\n ], SelectionSettings.prototype, \"checkboxMode\", void 0);\n __decorate([\n Property(false)\n ], SelectionSettings.prototype, \"enableSimpleMultiRowSelection\", void 0);\n __decorate([\n Property(true)\n ], SelectionSettings.prototype, \"enableToggle\", void 0);\n __decorate([\n Property(false)\n ], SelectionSettings.prototype, \"allowColumnSelection\", void 0);\n return SelectionSettings;\n}(ChildProperty));\nexport { SelectionSettings };\n/**\n * Configures the search behavior of the Grid.\n */\nvar SearchSettings = /** @class */ (function (_super) {\n __extends(SearchSettings, _super);\n function SearchSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property([])\n ], SearchSettings.prototype, \"fields\", void 0);\n __decorate([\n Property('')\n ], SearchSettings.prototype, \"key\", void 0);\n __decorate([\n Property('contains')\n ], SearchSettings.prototype, \"operator\", void 0);\n __decorate([\n Property(true)\n ], SearchSettings.prototype, \"ignoreCase\", void 0);\n __decorate([\n Property(false)\n ], SearchSettings.prototype, \"ignoreAccent\", void 0);\n return SearchSettings;\n}(ChildProperty));\nexport { SearchSettings };\n/**\n * Configures the row drop settings of the Grid.\n */\nvar RowDropSettings = /** @class */ (function (_super) {\n __extends(RowDropSettings, _super);\n function RowDropSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property()\n ], RowDropSettings.prototype, \"targetID\", void 0);\n return RowDropSettings;\n}(ChildProperty));\nexport { RowDropSettings };\n/**\n * Configures the text wrap settings of the Grid.\n */\nvar TextWrapSettings = /** @class */ (function (_super) {\n __extends(TextWrapSettings, _super);\n function TextWrapSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('Both')\n ], TextWrapSettings.prototype, \"wrapMode\", void 0);\n return TextWrapSettings;\n}(ChildProperty));\nexport { TextWrapSettings };\n/**\n * Configures the resize behavior of the Grid.\n */\nvar ResizeSettings = /** @class */ (function (_super) {\n __extends(ResizeSettings, _super);\n function ResizeSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property('Normal')\n ], ResizeSettings.prototype, \"mode\", void 0);\n return ResizeSettings;\n}(ChildProperty));\nexport { ResizeSettings };\n/**\n * Configures the group behavior of the Grid.\n */\nvar GroupSettings = /** @class */ (function (_super) {\n __extends(GroupSettings, _super);\n function GroupSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(true)\n ], GroupSettings.prototype, \"showDropArea\", void 0);\n __decorate([\n Property(false)\n ], GroupSettings.prototype, \"allowReordering\", void 0);\n __decorate([\n Property(false)\n ], GroupSettings.prototype, \"showToggleButton\", void 0);\n __decorate([\n Property(false)\n ], GroupSettings.prototype, \"showGroupedColumn\", void 0);\n __decorate([\n Property(true)\n ], GroupSettings.prototype, \"showUngroupButton\", void 0);\n __decorate([\n Property(false)\n ], GroupSettings.prototype, \"disablePageWiseAggregates\", void 0);\n __decorate([\n Property([])\n ], GroupSettings.prototype, \"columns\", void 0);\n __decorate([\n Property()\n ], GroupSettings.prototype, \"captionTemplate\", void 0);\n __decorate([\n Property(false)\n ], GroupSettings.prototype, \"enableLazyLoading\", void 0);\n return GroupSettings;\n}(ChildProperty));\nexport { GroupSettings };\n/**\n * Configures the edit behavior of the Grid.\n */\nvar EditSettings = /** @class */ (function (_super) {\n __extends(EditSettings, _super);\n function EditSettings() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n __decorate([\n Property(false)\n ], EditSettings.prototype, \"allowAdding\", void 0);\n __decorate([\n Property(false)\n ], EditSettings.prototype, \"allowEditing\", void 0);\n __decorate([\n Property(false)\n ], EditSettings.prototype, \"allowDeleting\", void 0);\n __decorate([\n Property('Normal')\n ], EditSettings.prototype, \"mode\", void 0);\n __decorate([\n Property(true)\n ], EditSettings.prototype, \"allowEditOnDblClick\", void 0);\n __decorate([\n Property(true)\n ], EditSettings.prototype, \"showConfirmDialog\", void 0);\n __decorate([\n Property(false)\n ], EditSettings.prototype, \"showDeleteConfirmDialog\", void 0);\n __decorate([\n Property('')\n ], EditSettings.prototype, \"template\", void 0);\n __decorate([\n Property('')\n ], EditSettings.prototype, \"headerTemplate\", void 0);\n __decorate([\n Property('')\n ], EditSettings.prototype, \"footerTemplate\", void 0);\n __decorate([\n Property('Top')\n ], EditSettings.prototype, \"newRowPosition\", void 0);\n __decorate([\n Property({})\n ], EditSettings.prototype, \"dialog\", void 0);\n __decorate([\n Property(false)\n ], EditSettings.prototype, \"allowNextRowEdit\", void 0);\n return EditSettings;\n}(ChildProperty));\nexport { EditSettings };\n/**\n * Represents the Grid component.\n * ```html\n *
\n * \n * ```\n */\nvar Grid = /** @class */ (function (_super) {\n __extends(Grid, _super);\n /**\n * Constructor for creating the component\n * @hidden\n */\n function Grid(options, element) {\n var _this = _super.call(this, options, element) || this;\n _this.isPreventScrollEvent = false;\n _this.inViewIndexes = [];\n _this.keyA = false;\n _this.frozenRightCount = 0;\n _this.frozenLeftCount = 0;\n _this.tablesCount = 1;\n _this.movableCount = 0;\n _this.visibleFrozenLeft = 0;\n _this.visibleFrozenRight = 0;\n _this.visibleMovable = 0;\n _this.frozenLeftColumns = [];\n _this.frozenRightColumns = [];\n _this.movableColumns = [];\n _this.media = {};\n _this.isFreezeRefresh = false;\n /** @hidden */\n _this.tableIndex = 0;\n _this.componentRefresh = Component.prototype.refresh;\n /** @hidden */\n _this.isVirtualAdaptive = false;\n /** @hidden */\n _this.vRows = [];\n /** @hidden */\n _this.vcRows = [];\n /** @hidden */\n _this.vGroupOffsets = {};\n /** @hidden */\n _this.rowUid = 0;\n /**\n * Gets the currently visible records of the Grid.\n */\n _this.currentViewData = [];\n /** @hidden */\n _this.lockcolPositionCount = 0;\n /** @hidden */\n _this.prevPageMoving = false;\n /** @hidden */\n _this.pageTemplateChange = false;\n /** @hidden */\n _this.isAutoGen = false;\n _this.mediaBindInstance = {};\n /** @hidden */\n _this.commandDelIndex = undefined;\n /** @hidden */\n _this.asyncTimeOut = 50;\n // enable/disable logger for MVC & Core\n _this.enableLogger = true;\n _this.needsID = true;\n Grid_1.Inject(Selection);\n setValue('mergePersistData', _this.mergePersistGridData, _this);\n return _this;\n }\n Grid_1 = Grid;\n /**\n * Get the properties to be maintained in the persisted state.\n * @return {string}\n */\n Grid.prototype.getPersistData = function () {\n var keyEntity = ['pageSettings', 'sortSettings',\n 'filterSettings', 'groupSettings', 'columns', 'searchSettings', 'selectedRowIndex', 'scrollPosition'];\n var ignoreOnPersist = {\n pageSettings: ['template', 'pageSizes', 'enableQueryString', 'totalRecordsCount', 'pageCount'],\n filterSettings: ['type', 'mode', 'showFilterBarStatus', 'immediateModeDelay', 'ignoreAccent'],\n groupSettings: ['showDropArea', 'showToggleButton', 'showGroupedColumn', 'showUngroupButton',\n 'disablePageWiseAggregates', 'hideCaptionCount'],\n searchSettings: ['fields', 'operator', 'ignoreCase'],\n sortSettings: [], columns: [], selectedRowIndex: [], scrollPosition: []\n };\n var ignoreOnColumn = ['filter', 'edit', 'filterBarTemplate', 'headerTemplate', 'template',\n 'commandTemplate', 'commands', 'dataSource', 'headerText'];\n for (var i = 0; i < keyEntity.length; i++) {\n var currentObject = this[keyEntity[i]];\n for (var _i = 0, _a = ignoreOnPersist[keyEntity[i]]; _i < _a.length; _i++) {\n var val = _a[_i];\n delete currentObject[val];\n }\n }\n this.pageSettings.template = undefined;\n /* tslint:disable-next-line:no-any */\n if (this.isAngular) {\n /* tslint:disable:no-string-literal */\n delete this.groupSettings['properties']['captionTemplate'];\n }\n this.pageTemplateChange = !isNullOrUndefined(this.pagerTemplate);\n return this.addOnPersist(keyEntity);\n };\n /**\n * To provide the array of modules needed for component rendering\n * @return {ModuleDeclaration[]}\n * @hidden\n */\n // tslint:disable-next-line:max-func-body-length\n Grid.prototype.requiredModules = function () {\n this.setFrozenCount();\n var modules = [];\n if (this.isDestroyed) {\n return modules;\n }\n if (this.allowFiltering) {\n modules.push({\n member: 'filter',\n args: [this, this.filterSettings, this.serviceLocator]\n });\n }\n if (this.allowExcelExport) {\n modules.push({\n member: 'ExcelExport',\n args: [this, this.serviceLocator]\n });\n }\n if (this.allowPdfExport) {\n modules.push({\n member: 'PdfExport',\n args: [this]\n });\n }\n if (this.allowSorting) {\n modules.push({\n member: 'sort',\n args: [this, this.sortSettings, this.sortedColumns, this.serviceLocator]\n });\n }\n if (this.allowPaging) {\n modules.push({\n member: 'pager',\n args: [this, this.pageSettings]\n });\n }\n if (this.allowSelection) {\n modules.push({\n member: 'selection',\n args: [this, this.selectionSettings, this.serviceLocator]\n });\n }\n modules.push({\n member: 'resize',\n args: [this]\n });\n if (this.allowReordering) {\n modules.push({\n member: 'reorder',\n args: [this]\n });\n }\n if (this.allowRowDragAndDrop) {\n modules.push({\n member: 'rowDragAndDrop',\n args: [this]\n });\n }\n if (this.allowGrouping) {\n modules.push({\n member: 'group',\n args: [this, this.groupSettings, this.sortedColumns, this.serviceLocator]\n });\n }\n if (this.aggregates.length) {\n modules.push({ member: 'aggregate', args: [this, this.serviceLocator] });\n }\n if (this.isDetail()) {\n modules.push({\n member: 'detailRow',\n args: [this, this.serviceLocator]\n });\n }\n if (this.toolbar || this.toolbarTemplate) {\n modules.push({\n member: 'toolbar',\n args: [this, this.serviceLocator]\n });\n }\n if (this.enableVirtualization || this.enableColumnVirtualization) {\n modules.push({\n member: 'virtualscroll',\n args: [this, this.serviceLocator]\n });\n }\n if (this.getFrozenColumns() || this.frozenRows || this.frozenRightCount || this.frozenLeftCount) {\n modules.push({ member: 'freeze', args: [this, this.serviceLocator] });\n }\n if (this.isCommandColumn(this.columns)) {\n modules.push({\n member: 'commandColumn',\n args: [this, this.serviceLocator]\n });\n }\n if (this.editSettings.allowAdding || this.editSettings.allowDeleting || this.editSettings.allowEditing) {\n modules.push({\n member: 'edit',\n args: [this, this.serviceLocator]\n });\n }\n this.extendRequiredModules(modules);\n return modules;\n };\n Grid.prototype.extendRequiredModules = function (modules) {\n if (this.enableInfiniteScrolling) {\n modules.push({\n member: 'infiniteScroll',\n args: [this, this.serviceLocator]\n });\n }\n if (this.groupSettings.enableLazyLoading) {\n modules.push({\n member: 'lazyLoadGroup',\n args: [this, this.serviceLocator]\n });\n }\n if (this.contextMenuItems) {\n modules.push({\n member: 'contextMenu',\n args: [this, this.serviceLocator]\n });\n }\n if (this.showColumnMenu) {\n modules.push({\n member: 'columnMenu',\n args: [this, this.serviceLocator]\n });\n }\n if (this.showColumnChooser) {\n modules.push({\n member: 'columnChooser',\n args: [this, this.serviceLocator]\n });\n }\n if (this.isForeignKeyEnabled(this.columns)) {\n modules.push({ member: 'foreignKey', args: [this, this.serviceLocator] });\n }\n if (this.enableLogger) {\n modules.push({ member: 'logger', args: [this] });\n }\n if (isBlazor()) {\n modules.push({ member: 'blazor', args: [this] });\n }\n };\n /**\n * For internal use only - Initialize the event handler;\n * @private\n */\n Grid.prototype.preRender = function () {\n this.serviceLocator = new ServiceLocator;\n this.initProperties();\n this.initializeServices();\n };\n Grid.prototype.initProperties = function () {\n /* tslint:disable */\n this.isInitial = true;\n this.sortedColumns = [];\n this.inViewIndexes = [];\n this.mediaCol = [];\n this.isInitialLoad = false;\n this.allowServerDataBinding = false;\n this.ignoreCollectionWatch = true;\n if (isBlazor() && this.enableVirtualization && this.allowGrouping) {\n var isExpanded = 'isExpanded';\n this[isExpanded] = false;\n }\n this.mergeCells = {};\n this.isEdit = false;\n this.checkAllRows = 'None';\n this.isCheckBoxSelection = false;\n this.isPersistSelection = false;\n this.componentRefresh = Component.prototype.refresh;\n this.filterOperators = {\n contains: 'contains', endsWith: 'endswith', equal: 'equal', greaterThan: 'greaterthan', greaterThanOrEqual: 'greaterthanorequal',\n lessThan: 'lessthan', lessThanOrEqual: 'lessthanorequal', notEqual: 'notequal', startsWith: 'startswith'\n };\n this.defaultLocale = {\n EmptyRecord: 'No records to display',\n True: 'true',\n False: 'false',\n InvalidFilterMessage: 'Invalid Filter Data',\n GroupDropArea: 'Drag a column header here to group its column',\n UnGroup: 'Click here to ungroup',\n UnGroupButton: 'Click here to ungroup',\n GroupDisable: 'Grouping is disabled for this column',\n FilterbarTitle: '\\'s filter bar cell',\n EmptyDataSourceError: 'DataSource must not be empty at initial load since columns are generated from dataSource in AutoGenerate Column Grid',\n // Toolbar Items\n Add: 'Add',\n Edit: 'Edit',\n Cancel: 'Cancel',\n Update: 'Update',\n Delete: 'Delete',\n Print: 'Print',\n Pdfexport: 'PDF Export',\n Excelexport: 'Excel Export',\n Wordexport: 'Word Export',\n Csvexport: 'CSV Export',\n Search: 'Search',\n Columnchooser: 'Columns',\n Save: 'Save',\n Item: 'item',\n Items: 'items',\n EditOperationAlert: 'No records selected for edit operation',\n DeleteOperationAlert: 'No records selected for delete operation',\n SaveButton: 'Save',\n OKButton: 'OK',\n CancelButton: 'Cancel',\n EditFormTitle: 'Details of ',\n AddFormTitle: 'Add New Record',\n BatchSaveConfirm: 'Are you sure you want to save changes?',\n BatchSaveLostChanges: 'Unsaved changes will be lost. Are you sure you want to continue?',\n ConfirmDelete: 'Are you sure you want to Delete Record?',\n CancelEdit: 'Are you sure you want to Cancel the changes?',\n ChooseColumns: 'Choose Column',\n SearchColumns: 'search columns',\n Matchs: 'No Matches Found',\n FilterButton: 'Filter',\n ClearButton: 'Clear',\n StartsWith: 'Starts With',\n EndsWith: 'Ends With',\n Contains: 'Contains',\n Equal: 'Equal',\n NotEqual: 'Not Equal',\n LessThan: 'Less Than',\n LessThanOrEqual: 'Less Than Or Equal',\n GreaterThan: 'Greater Than',\n GreaterThanOrEqual: 'Greater Than Or Equal',\n ChooseDate: 'Choose a Date',\n EnterValue: 'Enter the value',\n Copy: 'Copy',\n Group: 'Group by this column',\n Ungroup: 'Ungroup by this column',\n autoFitAll: 'Autofit all columns',\n autoFit: 'Autofit this column',\n AutoFitAll: 'Autofit all columns',\n AutoFit: 'Autofit this column',\n Export: 'Export',\n FirstPage: 'First Page',\n LastPage: 'Last Page',\n PreviousPage: 'Previous Page',\n NextPage: 'Next Page',\n SortAscending: 'Sort Ascending',\n SortDescending: 'Sort Descending',\n EditRecord: 'Edit Record',\n DeleteRecord: 'Delete Record',\n FilterMenu: 'Filter',\n SelectAll: 'Select All',\n Blanks: 'Blanks',\n FilterTrue: 'True',\n FilterFalse: 'False',\n NoResult: 'No Matches Found',\n ClearFilter: 'Clear Filter',\n Clear: 'Clear',\n NumberFilter: 'Number Filters',\n TextFilter: 'Text Filters',\n DateFilter: 'Date Filters',\n DateTimeFilter: 'DateTime Filters',\n MatchCase: 'Match Case',\n Between: 'Between',\n CustomFilter: 'Custom Filter',\n CustomFilterPlaceHolder: 'Enter the value',\n CustomFilterDatePlaceHolder: 'Choose a date',\n AND: 'AND',\n OR: 'OR',\n ShowRowsWhere: 'Show rows where:',\n FilterMenuDialogARIA: 'Filter menu dialog',\n ExcelFilterDialogARIA: 'Excel filter dialog',\n DialogEditARIA: 'Edit dialog',\n ColumnChooserDialogARIA: 'Column chooser dialog',\n ColumnMenuDialogARIA: 'Column menu dialog',\n CustomFilterDialogARIA: 'Customer filter dialog',\n SortAtoZ: 'Sort A to Z',\n SortZtoA: 'Sort Z to A',\n SortByOldest: 'Sort by Oldest',\n SortByNewest: 'Sort by Newest',\n SortSmallestToLargest: 'Sort Smallest to Largest',\n SortLargestToSmallest: 'Sort Largest to Smallest',\n Sort: 'Sort'\n };\n this.keyConfigs = {\n downArrow: 'downarrow',\n upArrow: 'uparrow',\n rightArrow: 'rightarrow',\n leftArrow: 'leftarrow',\n shiftDown: 'shift+downarrow',\n shiftUp: 'shift+uparrow',\n shiftRight: 'shift+rightarrow',\n shiftLeft: 'shift+leftarrow',\n home: 'home',\n end: 'end',\n escape: 'escape',\n ctrlHome: 'ctrl+home',\n ctrlEnd: 'ctrl+end',\n pageUp: 'pageup',\n pageDown: 'pagedown',\n ctrlAltPageUp: 'ctrl+alt+pageup',\n ctrlAltPageDown: 'ctrl+alt+pagedown',\n altPageUp: 'alt+pageup',\n altPageDown: 'alt+pagedown',\n altDownArrow: 'alt+downarrow',\n altUpArrow: 'alt+uparrow',\n ctrlDownArrow: 'ctrl+downarrow',\n ctrlUpArrow: 'ctrl+uparrow',\n ctrlPlusA: 'ctrl+A',\n ctrlPlusP: 'ctrl+P',\n insert: 'insert',\n delete: 'delete',\n f2: 'f2',\n enter: 'enter',\n ctrlEnter: 'ctrl+enter',\n shiftEnter: 'shift+enter',\n tab: 'tab',\n shiftTab: 'shift+tab',\n space: 'space',\n ctrlPlusC: 'ctrl+C',\n ctrlShiftPlusH: 'ctrl+shift+H',\n ctrlSpace: 'ctrl+space',\n ctrlLeftArrow: 'ctrl+leftarrow',\n ctrlRightArrow: 'ctrl+rightarrow'\n };\n /* tslint:enable */\n };\n /**\n * For internal use only - To Initialize the component rendering.\n * @private\n */\n Grid.prototype.render = function () {\n this.log(['module_missing', 'promise_enabled', 'locale_missing', 'check_datasource_columns']);\n this.ariaService.setOptions(this.element, { role: 'grid' });\n if (isBlazor()) {\n this.renderComplete();\n }\n createSpinner({ target: this.element }, this.createElement);\n this.renderModule = new Render(this, this.serviceLocator);\n this.searchModule = new Search(this);\n this.scrollModule = new Scroll(this);\n this.notify(events.initialLoad, {});\n if (this.getDataModule().dataManager.dataSource.offline === true || this.getDataModule().dataManager.dataSource.url === undefined) {\n this.isVirtualAdaptive = true;\n }\n this.trigger(events.load);\n prepareColumns(this.columns, this.enableColumnVirtualization, this);\n if (this.enablePersistence) {\n this.notify(events.columnsPrepared, {});\n }\n if (!(isBlazor() && this.isServerRendered)) {\n this.getMediaColumns();\n setColumnIndex(this.columns);\n }\n this.checkLockColumns(this.columns);\n this.getColumns();\n this.processModel();\n this.gridRender();\n this.wireEvents();\n this.addListener();\n this.updateDefaultCursor();\n this.updateStackedFilter();\n this.showSpinner();\n this.notify(events.initialEnd, {});\n if (isBlazor() && this.isServerRendered) {\n gridObserver.notify(events.componentRendered, { id: this.element.id, grid: this });\n }\n };\n /**\n * By default, grid shows the spinner for all its actions. You can use this method to show spinner at your needed time.\n */\n Grid.prototype.showSpinner = function () {\n showSpinner(this.element);\n };\n /**\n * Manually showed spinner needs to hide by `hideSpinnner`.\n */\n Grid.prototype.hideSpinner = function () {\n hideSpinner(this.element);\n };\n Grid.prototype.updateStackedFilter = function () {\n if (this.allowFiltering && this.filterSettings.type === 'FilterBar' &&\n this.getHeaderContent().querySelectorAll('.e-stackedheadercell').length) {\n this.getHeaderContent().classList.add('e-stackedfilter');\n }\n else {\n this.getHeaderContent().classList.remove('e-stackedfilter');\n }\n };\n Grid.prototype.getMediaColumns = function () {\n if (!this.enableColumnVirtualization) {\n var gcol = this.getColumns();\n this.getShowHideService = this.serviceLocator.getService('showHideService');\n if (!isNullOrUndefined(gcol)) {\n for (var index = 0; index < gcol.length; index++) {\n if (!isNullOrUndefined(gcol[index].hideAtMedia) && (isNullOrUndefined(gcol[index].visible) || gcol[index].visible)) {\n this.pushMediaColumn(gcol[index], index);\n }\n }\n }\n }\n };\n Grid.prototype.pushMediaColumn = function (col, index) {\n this.mediaCol.push(col);\n this.media[col.uid] = window.matchMedia(col.hideAtMedia);\n this.mediaQueryUpdate(index, this.media[col.uid]);\n this.mediaBindInstance[index] = this.mediaQueryUpdate.bind(this, index);\n this.media[col.uid].addListener(this.mediaBindInstance[index]);\n };\n /**\n * @hidden\n */\n Grid.prototype.updateMediaColumns = function (col) {\n if (!this.enableColumnVirtualization) {\n var index = this.getColumnIndexByUid(col.uid);\n for (var i = 0; i < this.mediaCol.length; i++) {\n if (col.uid === this.mediaCol[i].uid) {\n this.mediaCol.splice(i, 1);\n return;\n }\n }\n this.pushMediaColumn(col, index);\n }\n };\n /**\n * @hidden\n */\n Grid.prototype.mediaQueryUpdate = function (columnIndex, e) {\n var col = this.getColumns()[columnIndex];\n if (this.mediaCol.some(function (mediaColumn) { return mediaColumn.uid === col.uid; })) {\n col.visible = e.matches;\n if (this.isInitialLoad) {\n this.invokedFromMedia = true;\n if (col.visible) {\n this.showHider.show(col.headerText, 'headerText');\n }\n else {\n this.showHider.hide(col.headerText, 'headerText');\n }\n }\n }\n };\n Grid.prototype.refreshMediaCol = function () {\n this.isInitialLoad = true;\n var footerContent = this.element.querySelector('.e-gridfooter');\n if (this.aggregates.length && this.element.scrollHeight > this.height && footerContent) {\n addClass([footerContent], ['e-footerpadding']);\n }\n var checkboxColumn = this.getColumns().filter(function (col) { return col.type === 'checkbox'; });\n if (checkboxColumn.length && this.selectionSettings.checkboxMode === 'ResetOnRowClick') {\n this.isCheckBoxSelection = false;\n }\n if (this.rowRenderingMode === 'Vertical') {\n if (this.enableHover) {\n this.setProperties({ enableAdaptiveUI: true, enableHover: false }, true);\n removeClass([this.element], 'e-gridhover');\n }\n }\n };\n Grid.prototype.removeMediaListener = function () {\n for (var i = 0; i < this.mediaCol.length; i++) {\n this.media[this.mediaCol[i].uid].removeListener(this.mediaBindInstance[this.mediaCol[i].index]);\n }\n };\n /**\n * For internal use only - Initialize the event handler\n * @private\n */\n Grid.prototype.eventInitializer = function () {\n //eventInitializer\n };\n /**\n * Destroys the component (detaches/removes all event handlers, attributes, classes, and empties the component element).\n * @method destroy\n * @return {void}\n */\n Grid.prototype.destroy = function () {\n var gridElement = this.element;\n if (!gridElement) {\n return;\n }\n var hasGridChild = gridElement.querySelector('.e-gridheader') &&\n gridElement.querySelector('.e-gridcontent') ? true : false;\n if (hasGridChild) {\n this.unwireEvents();\n }\n this.removeListener();\n this.removeMediaListener();\n this.notify(events.destroy, {});\n this.destroyDependentModules();\n if (hasGridChild) {\n _super.prototype.destroy.call(this);\n }\n this.toolTipObj.destroy();\n var modules = ['renderModule', 'headerModule', 'contentModule', 'valueFormatterService',\n 'serviceLocator', 'ariaService', 'keyboardModule', 'widthService', 'searchModule', 'showHider',\n 'scrollModule', 'printModule', 'clipboardModule', 'focusModule'];\n for (var i = 0; i < modules.length; i++) {\n if (this[modules[i]]) {\n this[modules[i]] = null;\n }\n }\n if (!(isBlazor() && this.isServerRendered)) {\n this.element.innerHTML = '';\n }\n else {\n this.element.style.display = 'none';\n }\n classList(this.element, [], ['e-rtl', 'e-gridhover', 'e-responsive', 'e-default', 'e-device', 'e-grid-min-height']);\n if (this.isAngular && !this.isFreezeRefresh) {\n this.element = null;\n }\n this.isFreezeRefresh = false;\n };\n Grid.prototype.destroyDependentModules = function () {\n var gridElement = this.element;\n if (!gridElement || (!gridElement.querySelector('.e-gridheader') && !gridElement.querySelector('.e-gridcontent'))) {\n return;\n }\n this.scrollModule.destroy();\n this.keyboardModule.destroy();\n this.focusModule.destroy();\n };\n /**\n * For internal use only - Get the module name.\n * @private\n */\n Grid.prototype.getModuleName = function () {\n return 'grid';\n };\n Grid.prototype.enableBoxSelection = function () {\n if (this.enableAutoFill) {\n this.selectionSettings.cellSelectionMode = 'BoxWithBorder';\n this.element.classList.add('e-afenabled');\n }\n else {\n this.element.classList.remove('e-afenabled');\n }\n };\n /**\n * Called internally if any of the property value changed.\n * @hidden\n */\n /* tslint:disable-next-line:max-line-length */\n // tslint:disable-next-line:max-func-body-length\n Grid.prototype.onPropertyChanged = function (newProp, oldProp) {\n var requireRefresh = false;\n var requireGridRefresh = false;\n var freezeRefresh = false;\n var checkCursor;\n var args = { requestType: 'refresh' };\n if (this.isDestroyed) {\n return;\n }\n this.log('module_missing');\n if (this.isEllipsisTooltip()) {\n this.toolTipObj.close();\n }\n var properties = Object.keys(newProp);\n if (properties.indexOf('columns') > -1) {\n this.updateColumnObject();\n requireGridRefresh = true;\n }\n for (var _i = 0, properties_1 = properties; _i < properties_1.length; _i++) {\n var prop = properties_1[_i];\n switch (prop) {\n case 'allowPaging':\n this.notify(events.uiUpdate, { module: 'pager', enable: this.allowPaging });\n requireRefresh = true;\n break;\n case 'pageSettings':\n if (this.pageTemplateChange) {\n this.pageTemplateChange = false;\n this.notify(events.inBoundModelChanged, { module: 'pager', properties: newProp.pageSettings });\n break;\n }\n this.notify(events.inBoundModelChanged, { module: 'pager', properties: newProp.pageSettings });\n if (isNullOrUndefined(newProp.pageSettings.currentPage) && isNullOrUndefined(newProp.pageSettings.pageSize)\n && isNullOrUndefined(newProp.pageSettings.totalRecordsCount)\n || !isNullOrUndefined(oldProp.pageSettings) &&\n ((newProp.pageSettings.currentPage !== oldProp.pageSettings.currentPage)\n && !this.enableColumnVirtualization && !this.enableVirtualization\n && this.pageSettings.totalRecordsCount <= this.pageSettings.pageSize)) {\n requireRefresh = true;\n }\n break;\n case 'allowSorting':\n this.notify(events.uiUpdate, { module: 'sort', enable: this.allowSorting });\n requireRefresh = true;\n checkCursor = true;\n break;\n case 'allowFiltering':\n this.updateStackedFilter();\n this.notify(events.uiUpdate, { module: 'filter', enable: this.allowFiltering });\n requireRefresh = true;\n if (this.filterSettings.type !== 'FilterBar') {\n this.refreshHeader();\n }\n break;\n case 'height':\n case 'width':\n this.notify(events.uiUpdate, { module: 'scroll', properties: { width: newProp.width, height: newProp.height } });\n break;\n case 'allowReordering':\n this.headerModule.refreshUI();\n checkCursor = true;\n break;\n case 'allowRowDragAndDrop':\n this.notify(events.uiUpdate, { module: 'rowDragAndDrop', enable: this.allowRowDragAndDrop });\n this.renderModule.refresh();\n this.headerModule.refreshUI();\n break;\n case 'allowSelection':\n this.notify(events.uiUpdate, { module: 'selection', enable: this.allowSelection });\n break;\n case 'enableAutoFill':\n if (this.selectionModule) {\n this.enableBoxSelection();\n this.selectionModule.updateAutoFillPosition();\n }\n break;\n case 'rowTemplate':\n this.rowTemplateFn = templateCompiler(this.rowTemplate);\n requireRefresh = true;\n break;\n case 'detailTemplate':\n this.detailTemplateFn = templateCompiler(this.detailTemplate);\n requireRefresh = true;\n break;\n case 'allowGrouping':\n this.notify(events.uiUpdate, { module: 'group', enable: this.allowGrouping });\n this.headerModule.refreshUI();\n requireRefresh = true;\n checkCursor = true;\n break;\n case 'enableInfiniteScrolling':\n case 'childGrid':\n requireRefresh = true;\n break;\n case 'toolbar':\n this.notify(events.uiUpdate, { module: 'toolbar' });\n break;\n case 'groupSettings':\n this.notify(events.inBoundModelChanged, {\n module: 'group', properties: newProp.groupSettings,\n oldProperties: oldProp.groupSettings\n });\n break;\n case 'aggregates':\n if (!this.aggregates.length && this.allowGrouping && this.groupSettings.columns.length) {\n requireRefresh = true;\n }\n this.notify(events.uiUpdate, { module: 'aggregate', properties: newProp });\n break;\n case 'frozenColumns':\n case 'frozenRows':\n case 'enableVirtualization':\n case 'currencyCode':\n case 'locale':\n this.log('frozen_rows_columns');\n freezeRefresh = true;\n requireGridRefresh = true;\n break;\n case 'query':\n if (!this.getDataModule().isQueryInvokedFromData) {\n requireRefresh = true;\n }\n this.getDataModule().isQueryInvokedFromData = false;\n break;\n default:\n this.extendedPropertyChange(prop, newProp, requireGridRefresh);\n }\n }\n if (checkCursor) {\n this.updateDefaultCursor();\n }\n if (requireGridRefresh) {\n if (freezeRefresh || this.getFrozenColumns() || this.frozenRows) {\n if (!(isBlazor() && this.isServerRendered)) {\n this.freezeRefresh();\n }\n }\n else {\n this.refresh();\n }\n }\n else if (requireRefresh) {\n this.notify(events.modelChanged, args);\n requireRefresh = false;\n this.maintainSelection(newProp.selectedRowIndex);\n }\n };\n /* tslint:disable */\n Grid.prototype.extendedPropertyChange = function (prop, newProp, requireGridRefresh) {\n switch (prop) {\n case 'enableRtl':\n this.updateRTL();\n if (this.allowPaging) {\n this.element.querySelector('.e-gridpager').ej2_instances[0].enableRtl = newProp.enableRtl;\n this.element.querySelector('.e-gridpager').ej2_instances[0].dataBind();\n }\n if (this.height !== 'auto') {\n this.scrollModule.removePadding(!newProp.enableRtl);\n this.scrollModule.setPadding();\n }\n if (this.toolbar && this.toolbarModule) {\n this.toolbarModule.getToolbar().ej2_instances[0].enableRtl = newProp.enableRtl;\n this.toolbarModule.getToolbar().ej2_instances[0].dataBind();\n }\n if (this.contextMenuItems && this.contextMenuModule) {\n this.contextMenuModule.getContextMenu().ej2_instances[0].enableRtl = newProp.enableRtl;\n this.contextMenuModule.getContextMenu().ej2_instances[0].dataBind();\n }\n if (this.showColumnMenu && this.columnMenuModule) {\n this.columnMenuModule.getColumnMenu().ej2_instances[0].enableRtl = newProp.enableRtl;\n this.columnMenuModule.getColumnMenu().ej2_instances[0].dataBind();\n }\n if (this.filterSettings.type === 'FilterBar' && this.filterSettings.showFilterBarOperator) {\n this.refreshHeader();\n }\n this.notify(events.rtlUpdated, {});\n break;\n case 'enableAltRow':\n this.renderModule.refresh();\n break;\n case 'allowResizing':\n this.headerModule.refreshUI();\n this.updateResizeLines();\n break;\n case 'rowHeight':\n if (this.rowHeight) {\n addClass([this.element], 'e-grid-min-height');\n }\n else {\n removeClass([this.element], 'e-grid-min-height');\n }\n this.renderModule.refresh();\n this.headerModule.refreshUI();\n break;\n case 'gridLines':\n this.updateGridLines();\n break;\n case 'showColumnMenu':\n this.headerModule.refreshUI();\n this.notify(events.uiUpdate, { module: 'columnMenu', enable: true });\n break;\n case 'columnMenuItems':\n this.notify(events.uiUpdate, { module: 'columnMenu', enable: this.columnMenuItems });\n break;\n case 'contextMenuItems':\n this.notify(events.uiUpdate, { module: 'contextMenu', enable: this.contextMenuItems });\n break;\n case 'showColumnChooser':\n this.notify(events.uiUpdate, { module: 'columnChooser', enable: this.showColumnChooser });\n break;\n case 'filterSettings':\n this.updateStackedFilter();\n this.notify(events.inBoundModelChanged, { module: 'filter', properties: newProp.filterSettings });\n break;\n case 'searchSettings':\n this.notify(events.inBoundModelChanged, { module: 'search', properties: newProp.searchSettings });\n break;\n case 'sortSettings':\n this.notify(events.inBoundModelChanged, { module: 'sort' });\n break;\n case 'selectionSettings':\n this.notify(events.inBoundModelChanged, { module: 'selection', properties: newProp.selectionSettings });\n break;\n case 'editSettings':\n this.notify(events.inBoundModelChanged, { module: 'edit', properties: newProp.editSettings });\n break;\n case 'allowTextWrap':\n case 'textWrapSettings':\n if (this.allowTextWrap) {\n this.applyTextWrap();\n }\n else {\n this.removeTextWrap();\n }\n this.notify(events.freezeRender, { case: 'textwrap', isModeChg: (prop === 'textWrapSettings') });\n break;\n case 'dataSource':\n var pending_1 = this.getDataModule().getState();\n if (Object.getPrototypeOf(newProp).deepWatch) {\n var pKeyField = this.getPrimaryKeyFieldNames()[0];\n for (var i = 0, props = Object.keys(newProp.dataSource); i < props.length; i++) {\n this.setRowData(getValue(pKeyField, this.dataSource[props[i]]), this.dataSource[props[i]]);\n }\n }\n else if (pending_1.isPending) {\n var gResult = !isNullOrUndefined(this.dataSource) ? this.dataSource.result : [];\n var names = (pending_1.group || []);\n for (var i = 0; i < names.length; i++) {\n gResult = DataUtil.group(gResult, names[i], pending_1.aggregates || []);\n }\n this.dataSource = {\n result: gResult, count: this.dataSource.count,\n aggregates: this.dataSource.aggregates\n };\n this.getDataModule().setState({});\n pending_1.resolver(this.dataSource);\n }\n else {\n this.getDataModule().setState({ isDataChanged: false });\n this.notify(events.dataSourceModified, {});\n if (!requireGridRefresh) {\n this.renderModule.refresh();\n if (this.isCheckBoxSelection) {\n this.notify(events.beforeRefreshOnDataChange, {});\n }\n }\n }\n this.scrollRefresh();\n break;\n case 'enableHover':\n var action = newProp.enableHover ? addClass : removeClass;\n action([this.element], 'e-gridhover');\n break;\n case 'selectedRowIndex':\n if (!this.isSelectedRowIndexUpdating) {\n this.selectRow(newProp.selectedRowIndex);\n }\n this.isSelectedRowIndexUpdating = false;\n break;\n case 'resizeSettings':\n this.widthService.setWidthToTable();\n break;\n case 'enableAdaptiveUI':\n this.notify(events.setFullScreenDialog, {});\n break;\n case 'rowRenderingMode':\n this.enableVerticalRendering();\n this.notify(events.rowModeChange, {});\n this.refresh();\n break;\n }\n };\n Grid.prototype.maintainSelection = function (index) {\n var _this = this;\n if (index !== -1) {\n var fn_1 = function () {\n _this.selectRow(index);\n _this.off(events.contentReady, fn_1);\n };\n this.on(events.contentReady, fn_1, this);\n }\n };\n /**\n * @private\n */\n Grid.prototype.setProperties = function (prop, muteOnChange) {\n _super.prototype.setProperties.call(this, prop, muteOnChange);\n var filterSettings = 'filterSettings';\n if (prop[filterSettings] && this.filterModule && muteOnChange) {\n this.filterModule.refreshFilter();\n }\n };\n /**\n * @hidden\n */\n Grid.prototype.setTablesCount = function () {\n var frozenCols = this.getFrozenColumns();\n var frozenLeft = this.getFrozenLeftColumnsCount();\n var frozenRight = this.getFrozenRightColumnsCount();\n if (frozenCols && !frozenLeft && !frozenRight) {\n this.tablesCount = 2;\n }\n else if (!frozenCols && (frozenLeft || frozenRight)) {\n if ((frozenLeft && !frozenRight) || (frozenRight && !frozenLeft)) {\n this.tablesCount = 2;\n }\n else if (frozenLeft && frozenRight) {\n this.tablesCount = 3;\n }\n }\n };\n /**\n * @hidden\n */\n Grid.prototype.getTablesCount = function () {\n return this.tablesCount;\n };\n /**\n * @hidden\n */\n Grid.prototype.updateDefaultCursor = function () {\n var headerCells = [].slice.call(this.getHeaderContent().querySelectorAll('.e-headercell:not(.e-stackedheadercell)'));\n var stdHdrCell = [].slice.call(this.getHeaderContent().querySelectorAll('.e-stackedheadercell'));\n var cols = this.getColumns();\n if (this.enableColumnVirtualization && this.getFrozenColumns()) {\n var cells = this.contentModule.getHeaderCells();\n headerCells = cells.length ? cells : headerCells;\n }\n for (var i = 0; i < headerCells.length; i++) {\n var cell = headerCells[i];\n if (this.allowGrouping || this.allowReordering || this.allowSorting) {\n if (!cols[i].allowReordering || !cols[i].allowSorting || !cols[i].allowGrouping) {\n cell.classList.add('e-defaultcursor');\n }\n else {\n cell.classList.add('e-mousepointer');\n }\n }\n }\n for (var count = 0; count < stdHdrCell.length; count++) {\n if (this.allowReordering) {\n stdHdrCell[count].classList.add('e-mousepointer');\n }\n }\n };\n Grid.prototype.updateColumnModel = function (columns) {\n for (var i = 0, len = columns.length; i < len; i++) {\n if (columns[i].columns) {\n this.updateColumnModel(columns[i].columns);\n }\n else {\n this.columnModel.push(columns[i]);\n }\n }\n this.updateColumnLevelFrozen();\n this.updateFrozenColumns();\n this.updateLockableColumns();\n };\n Grid.prototype.updateColumnLevelFrozen = function () {\n var cols = this.columnModel;\n var leftCols = [];\n var rightCols = [];\n var movableCols = [];\n if (this.frozenLeftCount || this.frozenRightCount) {\n for (var i = 0, len = cols.length; i < len; i++) {\n /* tslint:disable-next-line:no-any */\n var col = cols[i];\n if (col.freeze === 'Left') {\n col.freezeTable = 'frozen-left';\n leftCols.push(col);\n }\n else if (col.freeze === 'Right') {\n col.freezeTable = 'frozen-right';\n rightCols.push(col);\n }\n else {\n col.freezeTable = 'movable';\n movableCols.push(col);\n }\n }\n this.columnModel = leftCols.concat(movableCols).concat(rightCols);\n }\n };\n Grid.prototype.updateFrozenColumns = function () {\n if (this.frozenLeftCount || this.frozenRightCount) {\n return;\n }\n var cols = this.columnModel;\n var directFrozenCount = this.frozenColumns;\n var totalFrozenCount = this.getFrozenColumns();\n var count = 0;\n for (var i = 0, len = cols.length; i < len; i++) {\n /* tslint:disable-next-line:no-any */\n var col = cols[i];\n if (directFrozenCount) {\n if (i < directFrozenCount) {\n col.freezeTable = 'frozen-left';\n }\n else {\n col.freezeTable = 'movable';\n }\n }\n if (col.isFrozen && i >= directFrozenCount) {\n col.freezeTable = 'frozen-left';\n cols.splice(this.frozenColumns + count, 0, cols.splice(i, 1)[0]);\n count++;\n }\n else if (totalFrozenCount && !directFrozenCount) {\n col.freezeTable = 'movable';\n }\n }\n };\n Grid.prototype.getFrozenLeftCount = function () {\n return this.getFrozenColumns() || this.getFrozenLeftColumnsCount();\n };\n Grid.prototype.isFrozenGrid = function () {\n return this.getFrozenColumns() !== 0 || this.getFrozenLeftColumnsCount() !== 0 || this.getFrozenRightColumnsCount() !== 0;\n };\n Grid.prototype.getFrozenMode = function () {\n return this.frozenName;\n };\n Grid.prototype.updateLockableColumns = function () {\n var cols = this.columnModel;\n var frozenCount = 0;\n var movableCount = 0;\n var frozenColumns = this.getFrozenColumns();\n for (var i = 0; i < cols.length; i++) {\n if (cols[i].lockColumn) {\n if (i < frozenColumns) {\n cols.splice(frozenCount, 0, cols.splice(i, 1)[0]);\n frozenCount++;\n }\n else {\n cols.splice(frozenColumns + movableCount, 0, cols.splice(i, 1)[0]);\n movableCount++;\n }\n }\n }\n };\n Grid.prototype.checkLockColumns = function (cols) {\n for (var i = 0; i < cols.length; i++) {\n if (cols[i].columns) {\n this.checkLockColumns(cols[i].columns);\n }\n else if (cols[i].lockColumn) {\n this.lockcolPositionCount++;\n }\n }\n };\n /**\n * Gets the columns from the Grid.\n * @return {Column[]}\n * @blazorType List
\n */\n Grid.prototype.getColumns = function (isRefresh) {\n var _this = this;\n var inview = this.inViewIndexes.map(function (v) { return v - _this.groupSettings.columns.length; }).filter(function (v) { return v > -1; });\n var vLen = inview.length;\n if (!this.enableColumnVirtualization || isNullOrUndefined(this.columnModel) || this.columnModel.length === 0 || isRefresh) {\n this.columnModel = [];\n this.updateColumnModel(this.columns);\n }\n var columns = vLen === 0 ? this.columnModel :\n this.columnModel.slice(inview[0], inview[vLen - 1] + 1);\n if (this.contentModule && this.enableColumnVirtualization && this.isFrozenGrid() && inview.length\n && inview[0] > 0) {\n var frozenCols = this.contentModule.ensureFrozenCols(columns);\n columns = frozenCols;\n }\n return columns;\n };\n /**\n * @private\n */\n Grid.prototype.getStackedHeaderColumnByHeaderText = function (stackedHeader, col) {\n for (var i = 0; i < col.length; i++) {\n var individualColumn = col[i];\n if (individualColumn.field === stackedHeader || individualColumn.headerText === stackedHeader) {\n this.stackedColumn = individualColumn;\n break;\n }\n else if (individualColumn.columns) {\n this.getStackedHeaderColumnByHeaderText(stackedHeader, individualColumn.columns);\n }\n }\n return this.stackedColumn;\n };\n /**\n * @private\n */\n Grid.prototype.getColumnIndexesInView = function () {\n return this.inViewIndexes;\n };\n /**\n * @private\n */\n Grid.prototype.getQuery = function () {\n return this.query;\n };\n /**\n * @private\n */\n Grid.prototype.getLocaleConstants = function () {\n return this.defaultLocale;\n };\n /**\n * @private\n */\n Grid.prototype.setColumnIndexesInView = function (indexes) {\n this.inViewIndexes = indexes;\n };\n /**\n * Gets the visible columns from the Grid.\n * @return {Column[]}\n * @blazorType List\n */\n Grid.prototype.getVisibleColumns = function () {\n var cols = [];\n for (var _i = 0, _a = this.columnModel; _i < _a.length; _i++) {\n var col = _a[_i];\n if (col.visible) {\n cols.push(col);\n }\n }\n return cols;\n };\n /**\n * Gets the header div of the Grid.\n * @return {Element}\n */\n Grid.prototype.getHeaderContent = function () {\n return this.headerModule.getPanel();\n };\n /**\n * Sets the header div of the Grid to replace the old header.\n * @param {Element} element - Specifies the Grid header.\n * @return {void}\n */\n Grid.prototype.setGridHeaderContent = function (element) {\n this.headerModule.setPanel(element);\n };\n /**\n * Gets the content table of the Grid.\n * @return {Element}\n */\n Grid.prototype.getContentTable = function () {\n return this.contentModule.getTable();\n };\n /**\n * Sets the content table of the Grid to replace the old content table.\n * @param {Element} element - Specifies the Grid content table.\n * @return {void}\n */\n Grid.prototype.setGridContentTable = function (element) {\n this.contentModule.setTable(element);\n };\n /**\n * Gets the content div of the Grid.\n * @return {Element}\n */\n Grid.prototype.getContent = function () {\n return this.contentModule.getPanel();\n };\n /**\n * Sets the content div of the Grid to replace the old Grid content.\n * @param {Element} element - Specifies the Grid content.\n * @return {void}\n */\n Grid.prototype.setGridContent = function (element) {\n this.contentModule.setPanel(element);\n };\n /**\n * Gets the header table element of the Grid.\n * @return {Element}\n */\n Grid.prototype.getHeaderTable = function () {\n return this.headerModule.getTable();\n };\n /**\n * Sets the header table of the Grid to replace the old one.\n * @param {Element} element - Specifies the Grid header table.\n * @return {void}\n */\n Grid.prototype.setGridHeaderTable = function (element) {\n this.headerModule.setTable(element);\n };\n /**\n * Gets the footer div of the Grid.\n * @return {Element}\n */\n Grid.prototype.getFooterContent = function () {\n this.footerElement = this.element.getElementsByClassName('e-gridfooter')[0];\n return this.footerElement;\n };\n /**\n * Gets the footer table element of the Grid.\n * @return {Element}\n */\n Grid.prototype.getFooterContentTable = function () {\n this.footerElement = this.element.getElementsByClassName('e-gridfooter')[0];\n return this.footerElement.firstChild.firstChild;\n };\n /**\n * Gets the pager of the Grid.\n * @return {Element}\n */\n Grid.prototype.getPager = function () {\n return this.gridPager; //get element from pager\n };\n /**\n * Sets the pager of the Grid to replace the old pager.\n * @param {Element} element - Specifies the Grid pager.\n * @return {void}\n */\n Grid.prototype.setGridPager = function (element) {\n this.gridPager = element;\n };\n /**\n * Gets a row by index.\n * @param {number} index - Specifies the row index.\n * @return {Element}\n */\n Grid.prototype.getRowByIndex = function (index) {\n return this.contentModule.getRowByIndex(index);\n };\n /**\n * Gets a movable tables row by index.\n * @param {number} index - Specifies the row index.\n * @return {Element}\n */\n Grid.prototype.getMovableRowByIndex = function (index) {\n return this.contentModule.getMovableRowByIndex(index);\n };\n /**\n * Gets a frozen tables row by index.\n * @param {number} index - Specifies the row index.\n * @return {Element}\n */\n Grid.prototype.getFrozenRowByIndex = function (index) {\n return this.getFrozenDataRows()[index];\n };\n /**\n * Gets all the data rows of the Grid.\n * @return {Element[]}\n */\n Grid.prototype.getRows = function () {\n return this.contentModule.getRowElements();\n };\n /**\n * Gets a frozen right tables row element by index.\n * @param {number} index - Specifies the row index.\n * @return {Element}\n */\n Grid.prototype.getFrozenRightRowByIndex = function (index) {\n return this.contentModule.getFrozenRightRowByIndex(index);\n };\n /**\n * Get a row information based on cell\n * @param {Element}\n * @return RowInfo\n */\n Grid.prototype.getRowInfo = function (target) {\n var ele = target;\n var args = { target: target };\n if (!isNullOrUndefined(target) && isNullOrUndefined(parentsUntil(ele, 'e-detailrowcollapse')\n && isNullOrUndefined(parentsUntil(ele, 'e-recordplusexpand')))) {\n var cell = closest(ele, '.e-rowcell');\n if (!cell) {\n var row = closest(ele, '.e-row');\n if (!isNullOrUndefined(row)) {\n var rowObj = this.getRowObjectFromUID(row.getAttribute('data-uid'));\n var rowIndex = parseInt(row.getAttribute('aria-rowindex'), 10);\n args = { row: row, rowData: rowObj.data, rowIndex: rowIndex };\n }\n return args;\n }\n var cellIndex = parseInt(cell.getAttribute('aria-colindex'), 10);\n if (!isNullOrUndefined(cell) && !isNaN(cellIndex)) {\n var row_1 = closest(cell, '.e-row');\n var rowIndex = parseInt(row_1.getAttribute('aria-rowindex'), 10);\n var frzCols = this.getFrozenColumns();\n var tableName = this.columnModel[cellIndex].getFreezeTableName();\n var rows = this.contentModule.getRows();\n var index = cellIndex + this.getIndentCount();\n if (this.isFrozenGrid()) {\n if (tableName === 'frozen-left') {\n rows = this.contentModule.getRows();\n }\n else if (tableName === 'movable') {\n index = cellIndex - frzCols - this.frozenLeftCount;\n rows = this.contentModule.getMovableRows();\n }\n else if (tableName === 'frozen-right') {\n index = cellIndex - (this.frozenLeftCount + this.movableCount);\n rows = this.contentModule.getFrozenRightRows();\n }\n }\n var rowsObject = rows.filter(function (r) { return r.uid === row_1.getAttribute('data-uid'); });\n var rowData = {};\n var column = void 0;\n if (Object.keys(rowsObject).length) {\n rowData = rowsObject[0].data;\n column = rowsObject[0].cells[index].column;\n }\n args = { cell: cell, cellIndex: cellIndex, row: row_1, rowIndex: rowIndex, rowData: rowData, column: column, target: target };\n }\n }\n return args;\n };\n /**\n * Gets the Grid's movable content rows from frozen grid.\n * @return {Element[]}\n */\n Grid.prototype.getMovableRows = function () {\n return this.contentModule.getMovableRowElements();\n };\n /**\n * Gets the Grid's frozen right content rows from frozen grid.\n * @return {Element[]}\n */\n Grid.prototype.getFrozenRightRows = function () {\n return this.contentModule.getFrozenRightRowElements();\n };\n /**\n * Gets all the Grid's data rows.\n * @return {Element[]}\n */\n Grid.prototype.getDataRows = function () {\n return this.getAllDataRows();\n };\n /**\n * @hidden\n */\n Grid.prototype.getAllDataRows = function (includeAdd) {\n if (isNullOrUndefined(this.getContentTable().querySelector('tbody'))) {\n return [];\n }\n var tbody = this.isFrozenGrid() ? this.getFrozenLeftContentTbody() : this.getContentTable().querySelector('tbody');\n var rows = [].slice.call(tbody.children);\n if (this.frozenRows) {\n var hdrTbody = this.isFrozenGrid() ? this.getHeaderContent().querySelector('.e-frozenheader').querySelector('tbody')\n : this.getHeaderTable().querySelector('tbody');\n var freezeRows = [].slice.call(hdrTbody.children);\n rows = this.addMovableRows(freezeRows, rows);\n }\n var dataRows = this.generateDataRows(rows, includeAdd);\n return dataRows;\n };\n /**\n * @hidden\n */\n Grid.prototype.addMovableRows = function (fRows, mrows) {\n for (var i = 0, len = mrows.length; i < len; i++) {\n fRows.push(mrows[i]);\n }\n return fRows;\n };\n Grid.prototype.generateDataRows = function (rows, includAdd) {\n var dRows = [];\n for (var i = 0, len = rows.length; i < len; i++) {\n if (rows[i].classList.contains('e-row') && (!rows[i].classList.contains('e-hiddenrow') || includAdd)) {\n if (this.isCollapseStateEnabled()) {\n dRows[parseInt(rows[i].getAttribute(\"aria-rowindex\"))] = rows[i];\n }\n else {\n dRows.push(rows[i]);\n }\n }\n }\n return dRows;\n };\n /**\n * Gets all the Grid's movable table data rows.\n * @return {Element[]}\n */\n Grid.prototype.getMovableDataRows = function () {\n return this.getAllMovableDataRows();\n };\n /**\n * @hidden\n */\n Grid.prototype.getAllMovableDataRows = function (includeAdd) {\n if (!this.isFrozenGrid()) {\n return [];\n }\n var rows = [].slice.call(this.getContent().querySelector('.e-movablecontent').querySelector('tbody').children);\n if (this.frozenRows) {\n var freezeRows = [].slice.call(this.getHeaderContent().querySelector('.e-movableheader').querySelector('tbody').children);\n rows = this.addMovableRows(freezeRows, rows);\n }\n var dataRows = this.generateDataRows(rows, includeAdd);\n return dataRows;\n };\n /**\n * Gets all the Grid's frozen table data rows.\n * @return {Element[]}\n */\n Grid.prototype.getFrozenDataRows = function () {\n return this.getAllFrozenDataRows();\n };\n /**\n * @hidden\n */\n Grid.prototype.getAllFrozenDataRows = function (includeAdd) {\n var rows = [].slice.call(this.getContent().querySelector('.e-frozencontent').querySelector('tbody').children);\n if (this.frozenRows) {\n var freezeRows = [].slice.call(this.getHeaderContent().querySelector('.e-frozenheader').querySelector('tbody').children);\n rows = this.addMovableRows(freezeRows, rows);\n }\n var dataRows = this.generateDataRows(rows, includeAdd);\n return dataRows;\n };\n /**\n * Gets all the Grid's frozen right table data rows.\n * @return {Element[]}\n */\n Grid.prototype.getFrozenRightDataRows = function () {\n return this.getAllFrozenRightDataRows();\n };\n /**\n * @hidden\n */\n Grid.prototype.getAllFrozenRightDataRows = function (includeAdd) {\n if (this.getFrozenMode() !== 'Right' && this.getFrozenMode() !== 'Left-Right') {\n return [];\n }\n var rows = [].slice.call(this.getContent().querySelector('.e-frozen-right-content').querySelector('tbody').children);\n if (this.frozenRows) {\n var freezeRows = [].slice.call(this.getHeaderContent().querySelector('.e-frozen-right-header').querySelector('tbody').children);\n rows = this.addMovableRows(freezeRows, rows);\n }\n var dataRows = this.generateDataRows(rows, includeAdd);\n return dataRows;\n };\n /**\n * Updates particular cell value based on the given primary key value.\n * > Primary key column must be specified using `columns.isPrimaryKey` property.\n * @param {string| number} key - Specifies the PrimaryKey value of dataSource.\n * @param {string } field - Specifies the field name which you want to update.\n * @param {string | number | boolean | Date} value - To update new value for the particular cell.\n */\n Grid.prototype.setCellValue = function (key, field, value) {\n var cells = 'cells';\n var rowData = 'data';\n var rowIdx = 'index';\n var rowuID = 'uid';\n var fieldIdx;\n var col;\n var tr;\n var mTr;\n var pkName = this.getPrimaryKeyFieldNames()[0];\n var cell = new CellRenderer(this, this.serviceLocator);\n var selectedRow = {};\n var movableSelectedRow = {};\n var rowObjects = this.contentModule.getRows();\n var movableRowObjects = this.contentModule.getMovableRows();\n fieldIdx = this.getColumnIndexByField(field);\n if (this.groupSettings.columns.length) {\n fieldIdx = fieldIdx + this.groupSettings.columns.length;\n }\n if (this.childGrid || this.detailTemplate) {\n fieldIdx++;\n }\n if (this.isRowDragable()) {\n fieldIdx++;\n }\n col = this.getColumnByField(field);\n selectedRow = rowObjects.filter(function (r) {\n return getValue(pkName, r.data) === key;\n })[0];\n movableSelectedRow = movableRowObjects.filter(function (r) {\n return getValue(pkName, r.data) === key;\n })[0];\n tr = !isNullOrUndefined(selectedRow) ? this.element.querySelector('[data-uid=' + selectedRow[rowuID] + ']') : null;\n mTr = !isNullOrUndefined(movableSelectedRow) ? this.element.querySelector('[data-uid=' + movableSelectedRow[rowuID] + ']') : null;\n if (!isNullOrUndefined(tr)) {\n setValue(field, value, selectedRow[rowData]);\n var td = !isNullOrUndefined(tr[cells][fieldIdx]) ?\n tr[cells][fieldIdx] : mTr[cells][fieldIdx - this.frozenColumns];\n if (!isNullOrUndefined(td)) {\n var sRow = selectedRow[cells][fieldIdx];\n var mRow = void 0;\n if (this.frozenColumns) {\n mRow = movableSelectedRow[cells][fieldIdx - this.frozenColumns];\n }\n cell.refreshTD(td, !isNullOrUndefined(sRow) ? sRow : mRow, selectedRow[rowData], { index: selectedRow[rowIdx] });\n if (this.aggregates.length > 0) {\n this.notify(events.refreshFooterRenderer, {});\n if (this.groupSettings.columns.length > 0) {\n this.notify(events.groupAggregates, {});\n }\n }\n /* tslint:disable:no-string-literal */\n if (!isNullOrUndefined(movableSelectedRow) && !isNullOrUndefined(movableSelectedRow['changes'])) {\n movableSelectedRow['changes'][field] = value;\n }\n /* tslint:disable:no-string-literal */\n this.trigger(events.queryCellInfo, {\n cell: td, column: col, data: selectedRow[rowData]\n });\n }\n }\n else {\n return;\n }\n };\n /**\n * @hidden\n */\n Grid.prototype.refreshReactColumnTemplateByUid = function (columnUid) {\n var _this = this;\n if (this.isReact) {\n //tslint:disable-next-line:no-any\n this.clearTemplate(['columnTemplate'], undefined, function () {\n var cells = 'cells';\n var rowIdx = 'index';\n var rowsObj = _this.getRowsObject();\n var indent = _this.getIndentCount();\n var cellIndex = _this.getNormalizedColumnIndex(columnUid);\n for (var j = 0; j < rowsObj.length; j++) {\n if (rowsObj[j].isDataRow && !isNullOrUndefined(rowsObj[j].index)) {\n var cell = rowsObj[j][cells][cellIndex];\n var cellRenderer = new CellRenderer(_this, _this.serviceLocator);\n var td = _this.getCellFromIndex(rowsObj[j].index, cellIndex - indent);\n cellRenderer.refreshTD(td, cell, rowsObj[j].data, { index: rowsObj[j][rowIdx] });\n }\n }\n });\n }\n };\n /**\n * Updates and refresh the particular row values based on the given primary key value.\n * > Primary key column must be specified using `columns.isPrimaryKey` property.\n * @param {string| number} key - Specifies the PrimaryKey value of dataSource.\n * @param {Object} rowData - To update new data for the particular row.\n */\n Grid.prototype.setRowData = function (key, rowData) {\n var rwdata = 'data';\n var rowuID = 'uid';\n var rowObjects = this.contentModule.getRows();\n var selectedRow;\n var pkName = this.getPrimaryKeyFieldNames()[0];\n var rowRenderer = new RowRenderer(this.serviceLocator, null, this);\n if (this.groupSettings.columns.length > 0 && this.aggregates.length > 0) {\n rowObjects = rowObjects.filter(function (row) { return row.isDataRow; });\n }\n selectedRow = rowObjects.filter(function (r) {\n return getValue(pkName, r.data) === key;\n })[0];\n if (!isNullOrUndefined(selectedRow) && this.element.querySelectorAll('[data-uid=' + selectedRow[rowuID] + ']').length) {\n selectedRow.changes = rowData;\n refreshForeignData(selectedRow, this.getForeignKeyColumns(), selectedRow.changes);\n rowRenderer.refresh(selectedRow, this.getColumns(), true);\n if (this.aggregates.length > 0) {\n this.notify(events.refreshFooterRenderer, {});\n if (this.groupSettings.columns.length > 0) {\n this.notify(events.groupAggregates, {});\n }\n }\n }\n else {\n return;\n }\n };\n /**\n * Gets a cell by row and column index.\n * @param {number} rowIndex - Specifies the row index.\n * @param {number} columnIndex - Specifies the column index.\n * @return {Element}\n */\n Grid.prototype.getCellFromIndex = function (rowIndex, columnIndex) {\n var col = this.getColumnByIndex(columnIndex);\n return getCellByColAndRowIndex(this, col, rowIndex, columnIndex);\n };\n /**\n * Gets a movable table cell by row and column index.\n * @param {number} rowIndex - Specifies the row index.\n * @param {number} columnIndex - Specifies the column index.\n * @return {Element}\n */\n Grid.prototype.getMovableCellFromIndex = function (rowIndex, columnIndex) {\n if (this.frozenName === 'Left-Right' && columnIndex >= this.movableCount) {\n return undefined;\n }\n var index = this.getFrozenColumns() || this.getFrozenLeftColumnsCount();\n return this.getMovableDataRows()[rowIndex] &&\n this.getMovableDataRows()[rowIndex].querySelectorAll('.e-rowcell')[columnIndex - index];\n };\n /**\n * Gets a frozen right table cell by row and column index.\n * @param {number} rowIndex - Specifies the row index.\n * @param {number} columnIndex - Specifies the column index.\n * @return {Element}\n */\n Grid.prototype.getFrozenRightCellFromIndex = function (rowIndex, columnIndex) {\n var index = this.getFrozenLeftColumnsCount() + this.getMovableColumnsCount();\n var rows = this.getFrozenRightDataRows();\n return rows[rowIndex] && rows[rowIndex].querySelectorAll('.e-rowcell')[columnIndex - index];\n };\n /**\n * Gets a column header by column index.\n * @param {number} index - Specifies the column index.\n * @return {Element}\n */\n Grid.prototype.getColumnHeaderByIndex = function (index) {\n return this.getHeaderTable().querySelectorAll('.e-headercell')[index];\n };\n /**\n * Gets a movable column header by column index.\n * @param {number} index - Specifies the column index.\n * @return {Element}\n */\n Grid.prototype.getMovableColumnHeaderByIndex = function (index) {\n var left = this.getFrozenColumns() || this.getFrozenLeftColumnsCount();\n return this.getMovableVirtualHeader().querySelectorAll('.e-headercell')[index - left];\n };\n /**\n * Gets a frozen right column header by column index.\n * @param {number} index - Specifies the column index.\n * @return {Element}\n */\n Grid.prototype.getFrozenRightColumnHeaderByIndex = function (index) {\n var left = this.getFrozenLeftColumnsCount() + this.getMovableColumnsCount();\n return this.getFrozenRightHeader().querySelectorAll('.e-headercell')[index - left];\n };\n /**\n * Gets a frozen left column header by column index.\n * @param {number} index - Specifies the column index.\n * @return {Element}\n */\n Grid.prototype.getFrozenLeftColumnHeaderByIndex = function (index) {\n return this.getFrozenVirtualHeader().querySelectorAll('.e-headercell')[index];\n };\n /**\n * @hidden\n */\n Grid.prototype.getRowObjectFromUID = function (uid, isMovable, isFrozenRight) {\n var rows = this.contentModule.getRows();\n var row = this.rowObject(rows, uid);\n if (this.isFrozenGrid()) {\n if (!row || isMovable || isFrozenRight) {\n row = this.rowObject(this.contentModule.getMovableRows(), uid);\n if ((!row && this.getFrozenMode() === 'Left-Right') || isFrozenRight) {\n row = this.rowObject(this.contentModule.getFrozenRightRows(), uid);\n }\n return row;\n }\n }\n if (isNullOrUndefined(row) && this.enableVirtualization && this.groupSettings.columns.length > 0) {\n row = this.rowObject(this.vRows, uid);\n return row;\n }\n return row;\n };\n Grid.prototype.rowObject = function (rows, uid) {\n for (var _i = 0, rows_1 = rows; _i < rows_1.length; _i++) {\n var row = rows_1[_i];\n if (row.uid === uid) {\n return row;\n }\n }\n return null;\n };\n /**\n * @hidden\n */\n Grid.prototype.getRowsObject = function () {\n return this.contentModule.getRows();\n };\n /**\n * @hidden\n */\n Grid.prototype.getMovableRowsObject = function () {\n var rows = [];\n if (this.isFrozenGrid()) {\n rows = this.contentModule.getMovableRows();\n }\n return rows;\n };\n /**\n * @hidden\n */\n Grid.prototype.getFrozenRightRowsObject = function () {\n var rows = [];\n if (this.getFrozenMode() === 'Right' || this.getFrozenMode() === 'Left-Right') {\n rows = this.contentModule.getFrozenRightRows();\n }\n return rows;\n };\n /**\n * Gets a column header by column name.\n * @param {string} field - Specifies the column name.\n * @return {Element}\n */\n Grid.prototype.getColumnHeaderByField = function (field) {\n var column = this.getColumnByField(field);\n return column ? this.getColumnHeaderByUid(column.uid) : undefined;\n };\n /**\n * Gets a column header by UID.\n * @param {string} field - Specifies the column uid.\n * @return {Element}\n */\n Grid.prototype.getColumnHeaderByUid = function (uid) {\n var element = this.getHeaderContent().querySelector('[e-mappinguid=' + uid + ']');\n return element ? element.parentElement : undefined;\n };\n /**\n * @hidden\n * @blazorType GridColumn\n */\n Grid.prototype.getColumnByIndex = function (index) {\n var column;\n this.getColumns().some(function (col, i) {\n column = col;\n return i === index;\n });\n return column;\n };\n /**\n * Gets a Column by column name.\n * @param {string} field - Specifies the column name.\n * @return {Column}\n * @blazorType GridColumn\n */\n Grid.prototype.getColumnByField = function (field) {\n return iterateArrayOrObject(this.getColumns(), function (item, index) {\n if (item.field === field) {\n return item;\n }\n return undefined;\n })[0];\n };\n /**\n * Gets a column index by column name.\n * @param {string} field - Specifies the column name.\n * @return {number}\n */\n Grid.prototype.getColumnIndexByField = function (field) {\n var cols = this.getColumns();\n for (var i = 0; i < cols.length; i++) {\n if (cols[i].field === field) {\n return i;\n }\n }\n return -1;\n };\n /**\n * Gets a column by UID.\n * @param {string} uid - Specifies the column UID.\n * @return {Column}\n * @blazorType GridColumn\n */\n Grid.prototype.getColumnByUid = function (uid) {\n return iterateArrayOrObject(this.getColumns().concat(this.getStackedColumns(this.columns)), function (item, index) {\n if (item.uid === uid) {\n return item;\n }\n return undefined;\n })[0];\n };\n /**\n * @hidden\n */\n Grid.prototype.getStackedColumns = function (columns, stackedColumn) {\n if (stackedColumn === void 0) { stackedColumn = []; }\n for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {\n var column = columns_1[_i];\n if (column.columns) {\n stackedColumn.push(column);\n this.getStackedColumns(column.columns, stackedColumn);\n }\n }\n return stackedColumn;\n };\n /**\n * Gets a column index by UID.\n * @param {string} uid - Specifies the column UID.\n * @return {number}\n */\n Grid.prototype.getColumnIndexByUid = function (uid) {\n var index = iterateArrayOrObject(this.getColumns(), function (item, index) {\n if (item.uid === uid) {\n return index;\n }\n return undefined;\n })[0];\n return !isNullOrUndefined(index) ? index : -1;\n };\n /**\n * Gets UID by column name.\n * @param {string} field - Specifies the column name.\n * @return {string}\n */\n Grid.prototype.getUidByColumnField = function (field) {\n return iterateArrayOrObject(this.getColumns(), function (item, index) {\n if (item.field === field) {\n return item.uid;\n }\n return undefined;\n })[0];\n };\n /**\n * Gets TH index by column uid value.\n * @private\n * @param {string} uid - Specifies the column uid.\n * @return {number}\n */\n Grid.prototype.getNormalizedColumnIndex = function (uid) {\n var index = this.getColumnIndexByUid(uid);\n return index + this.getIndentCount();\n };\n /**\n * Gets indent cell count.\n * @private\n * @return {number}\n */\n Grid.prototype.getIndentCount = function () {\n var index = 0;\n if (this.allowGrouping) {\n index += this.groupSettings.columns.length;\n }\n if (this.isDetail()) {\n index++;\n }\n if (this.isRowDragable() && isNullOrUndefined(this.rowDropSettings.targetID)) {\n index++;\n }\n /**\n * TODO: index normalization based on the stacked header, grouping and detailTemplate\n * and frozen should be handled here\n */\n return index;\n };\n /**\n * Gets the collection of column fields.\n * @return {string[]}\n */\n Grid.prototype.getColumnFieldNames = function () {\n var columnNames = [];\n var column;\n for (var i = 0, len = this.getColumns().length; i < len; i++) {\n column = this.getColumns()[i];\n if (column.visible) {\n columnNames.push(column.field);\n }\n }\n return columnNames;\n };\n /**\n * Gets a compiled row template.\n * @return {Function}\n * @private\n */\n Grid.prototype.getRowTemplate = function () {\n return this.rowTemplateFn;\n };\n /**\n * Gets a compiled detail row template.\n * @private\n * @return {Function}\n */\n Grid.prototype.getDetailTemplate = function () {\n return this.detailTemplateFn;\n };\n /**\n * Gets a compiled detail row template.\n * @private\n * @return {Function}\n */\n Grid.prototype.getEditTemplate = function () {\n return this.editTemplateFn;\n };\n /**\n * Gets a compiled dialog edit header template.\n * @private\n * @return {Function}\n */\n Grid.prototype.getEditHeaderTemplate = function () {\n return this.editHeaderTemplateFn;\n };\n /**\n * Gets a compiled dialog edit footer template.\n * @private\n * @return {Function}\n */\n Grid.prototype.getEditFooterTemplate = function () {\n return this.editFooterTemplateFn;\n };\n /**\n * Get the names of the primary key columns of the Grid.\n * @return {string[]}\n */\n Grid.prototype.getPrimaryKeyFieldNames = function () {\n var keys = [];\n for (var k = 0; k < this.columnModel.length; k++) {\n if (this.columnModel[k].isPrimaryKey) {\n keys.push(this.columnModel[k].field);\n }\n }\n return keys;\n };\n /**\n * Refreshes the Grid header and content.\n */\n Grid.prototype.refresh = function () {\n if (!this.isDestroyed) {\n this.headerModule.refreshUI();\n this.updateStackedFilter();\n this.renderModule.refresh();\n }\n };\n /**\n * Refreshes the Grid header.\n */\n Grid.prototype.refreshHeader = function () {\n this.headerModule.refreshUI();\n };\n /**\n * Gets the collection of selected rows.\n * @return {Element[]}\n */\n Grid.prototype.getSelectedRows = function () {\n return this.selectionModule ? this.selectionModule.selectedRecords : [];\n };\n /**\n * Gets the collection of selected row indexes.\n * @return {number[]}\n */\n Grid.prototype.getSelectedRowIndexes = function () {\n return this.selectionModule ? this.selectionModule.selectedRowIndexes : [];\n };\n /**\n * Gets the collection of selected row and cell indexes.\n * @return {number[]}\n */\n Grid.prototype.getSelectedRowCellIndexes = function () {\n return this.selectionModule ? this.selectionModule.selectedRowCellIndexes : [];\n };\n /**\n * Gets the collection of selected records.\n * @return {Object[]}\n * @isGenericType true\n */\n Grid.prototype.getSelectedRecords = function () {\n return this.selectionModule ? this.selectionModule.getSelectedRecords() : [];\n };\n /**\n * Gets the collection of selected columns uid.\n * @return {string[]}\n * @isGenericType true\n */\n Grid.prototype.getSelectedColumnsUid = function () {\n var _this = this;\n var uid = [];\n if (this.selectionModule) {\n this.selectionModule.selectedColumnsIndexes.filter(function (i) { return uid.push(_this.getColumns()[i].uid); });\n }\n return uid;\n };\n /**\n * Gets the data module.\n * @return {Data}\n */\n Grid.prototype.getDataModule = function () {\n return this.renderModule.data;\n };\n /**\n * Shows a column by its column name.\n * @param {string|string[]} keys - Defines a single or collection of column names.\n * @param {string} showBy - Defines the column key either as field name or header text.\n * @return {void}\n */\n Grid.prototype.showColumns = function (keys, showBy) {\n showBy = showBy ? showBy : 'headerText';\n this.showHider.show(keys, showBy);\n };\n /**\n * Hides a column by column name.\n * @param {string|string[]} keys - Defines a single or collection of column names.\n * @param {string} hideBy - Defines the column key either as field name or header text.\n * @return {void}\n */\n Grid.prototype.hideColumns = function (keys, hideBy) {\n hideBy = hideBy ? hideBy : 'headerText';\n this.showHider.hide(keys, hideBy);\n };\n /**\n * @hidden\n */\n Grid.prototype.getFrozenColumns = function () {\n return this.frozenColumns + this.getFrozenCount(this.columns, 0, 0);\n };\n /**\n * @hidden\n */\n Grid.prototype.getFrozenRightColumnsCount = function () {\n return this.frozenRightCount;\n };\n /**\n * @hidden\n */\n Grid.prototype.getFrozenLeftColumnsCount = function () {\n return this.frozenLeftCount;\n };\n /**\n * @hidden\n */\n Grid.prototype.getMovableColumnsCount = function () {\n return this.movableCount;\n };\n /**\n * @hidden\n */\n Grid.prototype.setFrozenCount = function () {\n this.frozenLeftCount = this.frozenRightCount = this.movableCount = 0;\n this.visibleFrozenLeft = this.visibleFrozenRight = this.visibleMovable = 0;\n this.frozenLeftColumns = [];\n this.frozenRightColumns = [];\n this.movableColumns = [];\n this.splitFrozenCount(this.columns);\n if (this.frozenColumns && (this.frozenLeftCount || this.frozenRightCount)) {\n this.setProperties({ frozenColumns: 0 }, true);\n }\n this.setTablesCount();\n if (this.frozenLeftCount && !this.frozenRightCount) {\n this.frozenName = 'Left';\n }\n else if (this.frozenRightCount && !this.frozenLeftCount) {\n this.frozenName = 'Right';\n }\n else if (this.frozenLeftCount && this.frozenRightCount) {\n this.frozenName = 'Left-Right';\n }\n };\n /**\n * @hidden\n */\n Grid.prototype.getVisibleFrozenLeftCount = function () {\n return this.visibleFrozenLeft;\n };\n /**\n * @hidden\n */\n Grid.prototype.getVisibleFrozenRightCount = function () {\n return this.visibleFrozenRight;\n };\n /**\n * @hidden\n */\n Grid.prototype.getVisibleMovableCount = function () {\n return this.visibleMovable;\n };\n /**\n * @hidden\n */\n Grid.prototype.getFrozenRightColumns = function () {\n return this.frozenRightColumns;\n };\n /**\n * @hidden\n */\n Grid.prototype.getFrozenLeftColumns = function () {\n return this.frozenLeftColumns;\n };\n /**\n * @hidden\n */\n Grid.prototype.getMovableColumns = function () {\n return this.movableColumns;\n };\n Grid.prototype.splitFrozenCount = function (columns) {\n for (var i = 0; i < columns.length; i++) {\n if (columns[i].columns) {\n this.splitFrozenCount(columns[i].columns);\n }\n else {\n if (columns[i].freeze === 'Right') {\n if (columns[i].visible !== false) {\n this.visibleFrozenRight++;\n }\n ;\n this.frozenRightColumns.push(columns[i]);\n this.frozenRightCount++;\n }\n else if (columns[i].freeze === 'Left') {\n if (columns[i].visible !== false) {\n this.visibleFrozenLeft++;\n }\n ;\n this.frozenLeftColumns.push(columns[i]);\n this.frozenLeftCount++;\n }\n else {\n if (columns[i].visible !== false) {\n this.visibleMovable++;\n }\n ;\n this.movableColumns.push(columns[i]);\n this.movableCount++;\n }\n }\n }\n };\n /**\n * @hidden\n */\n Grid.prototype.getVisibleFrozenColumns = function () {\n return this.getVisibleFrozenColumnsCount() + this.getVisibleFrozenCount(this.columns, 0);\n };\n /**\n * Get the current Filter operator and field.\n * @return {Object}\n */\n Grid.prototype.getFilterUIInfo = function () {\n return this.filterModule ? this.filterModule.getFilterUIInfo() : {};\n };\n Grid.prototype.getVisibleFrozenColumnsCount = function () {\n var visibleFrozenColumns = 0;\n var columns = this.columnModel;\n for (var i = 0; i < this.frozenColumns; i++) {\n if (columns[i].visible) {\n visibleFrozenColumns++;\n }\n }\n if (this.frozenLeftCount || this.frozenRightCount) {\n for (var i = 0; i < columns.length; i++) {\n if (columns[i].visible && (columns[i].freeze === 'Left' || columns[i].freeze === 'Right')) {\n visibleFrozenColumns++;\n }\n }\n }\n return visibleFrozenColumns;\n };\n Grid.prototype.getVisibleFrozenCount = function (cols, cnt) {\n if (!this.frozenLeftCount && !this.frozenRightCount) {\n for (var i = 0, len = cols.length; i < len; i++) {\n if (cols[i].columns) {\n cnt = this.getVisibleFrozenCount(cols[i].columns, cnt);\n }\n else {\n if (cols[i].isFrozen && cols[i].visible) {\n cnt++;\n }\n }\n }\n }\n return cnt;\n };\n Grid.prototype.getFrozenCount = function (cols, cnt, index) {\n for (var i = 0, len = cols.length; i < len; i++) {\n if (cols[i].columns) {\n cnt = this.getFrozenCount(cols[i].columns, cnt, index);\n }\n else {\n if (cols[i].isFrozen && index > this.frozenColumns - 1) {\n cnt++;\n }\n index++;\n }\n }\n return cnt;\n };\n /**\n * Navigates to the specified target page.\n * @param {number} pageNo - Defines the page number to navigate.\n * @return {void}\n */\n Grid.prototype.goToPage = function (pageNo) {\n if (this.pagerModule) {\n this.pagerModule.goToPage(pageNo);\n }\n };\n /**\n * Defines the text of external message.\n * @param {string} message - Defines the message to update.\n * @return {void}\n */\n Grid.prototype.updateExternalMessage = function (message) {\n if (this.pagerModule) {\n this.pagerModule.updateExternalMessage(message);\n }\n };\n /**\n * Sorts a column with the given options.\n * @param {string} columnName - Defines the column name to be sorted.\n * @param {SortDirection} direction - Defines the direction of sorting field.\n * @param {boolean} isMultiSort - Specifies whether the previous sorted columns are to be maintained.\n * @return {void}\n */\n Grid.prototype.sortColumn = function (columnName, direction, isMultiSort) {\n if (this.sortModule) {\n this.sortModule.sortColumn(columnName, direction, isMultiSort);\n }\n };\n /**\n * Clears all the sorted columns of the Grid.\n * @return {void}\n */\n Grid.prototype.clearSorting = function () {\n if (this.sortModule) {\n this.sortModule.clearSorting();\n }\n };\n /**\n * Remove sorted column by field name.\n * @param {string} field - Defines the column field name to remove sort.\n * @return {void}\n * @hidden\n */\n Grid.prototype.removeSortColumn = function (field) {\n if (this.sortModule) {\n this.sortModule.removeSortColumn(field);\n }\n };\n /**\n * Filters grid row by column name with the given options.\n * @param {string} fieldName - Defines the field name of the column.\n * @param {string} filterOperator - Defines the operator to filter records.\n * @param {string | number | Date | boolean} filterValue - Defines the value used to filter records.\n * @param {string} predicate - Defines the relationship between one filter query and another by using AND or OR predicate.\n * @param {boolean} matchCase - If match case is set to true, the grid filters the records with exact match. if false, it filters case\n * insensitive records (uppercase and lowercase letters treated the same).\n * @param {boolean} ignoreAccent - If ignoreAccent set to true,\n * then filter ignores the diacritic characters or accents while filtering.\n * @param {string} actualFilterValue - Defines the actual filter value for the filter column.\n * @param {string} actualOperator - Defines the actual filter operator for the filter column.\n * @return {void}\n */\n Grid.prototype.filterByColumn = function (fieldName, filterOperator, filterValue, predicate, matchCase, ignoreAccent, actualFilterValue, actualOperator) {\n if (this.filterModule) {\n this.filterModule.filterByColumn(fieldName, filterOperator, filterValue, predicate, matchCase, ignoreAccent, actualFilterValue, actualOperator);\n }\n };\n /**\n * Clears all the filtered rows of the Grid.\n * @return {void}\n */\n Grid.prototype.clearFiltering = function (fields) {\n if (this.filterModule) {\n this.filterModule.clearFiltering(fields);\n }\n };\n /**\n * Removes filtered column by field name.\n * @param {string} field - Defines column field name to remove filter.\n * @param {boolean} isClearFilterBar - Specifies whether the filter bar value needs to be cleared.\n * @return {void}\n * @hidden\n */\n Grid.prototype.removeFilteredColsByField = function (field, isClearFilterBar) {\n if (this.filterModule) {\n this.filterModule.removeFilteredColsByField(field, isClearFilterBar);\n }\n };\n /**\n * Selects a row by given index.\n * @param {number} index - Defines the row index.\n * @param {boolean} isToggle - If set to true, then it toggles the selection.\n * @return {void}\n */\n Grid.prototype.selectRow = function (index, isToggle) {\n if (this.selectionModule) {\n this.selectionModule.selectRow(index, isToggle);\n }\n };\n /**\n * Selects a collection of rows by indexes.\n * @param {number[]} rowIndexes - Specifies the row indexes.\n * @return {void}\n */\n Grid.prototype.selectRows = function (rowIndexes) {\n if (this.selectionModule) {\n this.selectionModule.selectRows(rowIndexes);\n }\n };\n /**\n * Deselects the current selected rows and cells.\n * @return {void}\n */\n Grid.prototype.clearSelection = function () {\n if (this.selectionModule) {\n this.selectionModule.clearSelection();\n }\n };\n /**\n * Selects a cell by the given index.\n * @param {IIndex} cellIndex - Defines the row and column indexes.\n * @param {boolean} isToggle - If set to true, then it toggles the selection.\n * @return {void}\n */\n Grid.prototype.selectCell = function (cellIndex, isToggle) {\n if (this.selectionModule) {\n this.selectionModule.selectCell(cellIndex, isToggle);\n }\n };\n /**\n * Selects a range of cells from start and end indexes.\n * @param {IIndex} startIndex - Specifies the row and column's start index.\n * @param {IIndex} endIndex - Specifies the row and column's end index.\n * @return {void}\n */\n Grid.prototype.selectCellsByRange = function (startIndex, endIndex) {\n this.selectionModule.selectCellsByRange(startIndex, endIndex);\n };\n /**\n * Searches Grid records using the given key.\n * You can customize the default search option by using the\n * [`searchSettings`](./#searchsettings/).\n * @param {string} searchString - Defines the key.\n * @return {void}\n */\n Grid.prototype.search = function (searchString) {\n if (this.searchModule) {\n this.searchModule.search(searchString);\n }\n };\n /**\n * By default, prints all the pages of the Grid and hides the pager.\n * > You can customize print options using the\n * [`printMode`](./#printmode).\n * @return {void}\n */\n Grid.prototype.print = function () {\n if (this.printModule) {\n this.printModule.print();\n }\n };\n /**\n * Delete a record with Given options. If fieldname and data is not given then grid will delete the selected record.\n * > `editSettings.allowDeleting` should be true.\n * @param {string} fieldname - Defines the primary key field, 'Name of the column'.\n * @param {Object} data - Defines the JSON data of the record to be deleted.\n */\n Grid.prototype.deleteRecord = function (fieldname, data) {\n if (this.editModule) {\n this.editModule.deleteRecord(fieldname, data);\n }\n };\n /**\n * Starts edit the selected row. At least one row must be selected before invoking this method.\n * `editSettings.allowEditing` should be true.\n * {% codeBlock src='grid/startEdit/index.md' %}{% endcodeBlock %}\n * @return {void}\n */\n Grid.prototype.startEdit = function () {\n if (this.editModule) {\n this.editModule.startEdit();\n }\n };\n /**\n * If Grid is in editable state, you can save a record by invoking endEdit.\n */\n Grid.prototype.endEdit = function () {\n if (this.editModule) {\n this.editModule.endEdit();\n }\n };\n /**\n * Cancels edited state.\n */\n Grid.prototype.closeEdit = function () {\n if (this.editModule) {\n this.editModule.closeEdit();\n }\n };\n /**\n * Adds a new record to the Grid. Without passing parameters, it adds empty rows.\n * > `editSettings.allowEditing` should be true.\n * @param {Object} data - Defines the new add record data.\n * @param {number} index - Defines the row index to be added\n */\n Grid.prototype.addRecord = function (data, index) {\n if (this.editModule) {\n this.editModule.addRecord(data, index);\n }\n };\n /**\n * Delete any visible row by TR element.\n * @param {HTMLTableRowElement} tr - Defines the table row element.\n */\n Grid.prototype.deleteRow = function (tr) {\n if (this.editModule) {\n this.editModule.deleteRow(tr);\n }\n };\n /**\n * Changes a particular cell into edited state based on the row index and field name provided in the `batch` mode.\n * @param {number} index - Defines row index to edit a particular cell.\n * @param {string} field - Defines the field name of the column to perform batch edit.\n */\n Grid.prototype.editCell = function (index, field) {\n if (this.editModule) {\n this.editModule.editCell(index, field);\n }\n };\n /**\n * Saves the cell that is currently edited. It does not save the value to the DataSource.\n * {% codeBlock src='grid/saveCell/index.md' %}{% endcodeBlock %}\n */\n Grid.prototype.saveCell = function () {\n if (this.editModule) {\n this.editModule.saveCell();\n }\n };\n /**\n * To update the specified cell by given value without changing into edited state.\n * @param {number} rowIndex Defines the row index.\n * @param {string} field Defines the column field.\n * @param {string | number | boolean | Date} value - Defines the value to be changed.\n */\n Grid.prototype.updateCell = function (rowIndex, field, value) {\n if (this.editModule) {\n this.editModule.updateCell(rowIndex, field, value);\n }\n };\n /**\n * To update the specified row by given values without changing into edited state.\n * @param {number} index Defines the row index.\n * @param {Object} data Defines the data object to be updated.\n * {% codeBlock src='grid/updateRow/index.md' %}{% endcodeBlock %}\n */\n Grid.prototype.updateRow = function (index, data) {\n if (this.editModule) {\n this.editModule.updateRow(index, data);\n }\n };\n /**\n * Gets the added, edited,and deleted data before bulk save to the DataSource in batch mode.\n * @return {Object}\n */\n Grid.prototype.getBatchChanges = function () {\n if (this.editModule) {\n return this.editModule.getBatchChanges();\n }\n return {};\n };\n /**\n * Enables or disables ToolBar items.\n * @param {string[]} items - Defines the collection of itemID of ToolBar items.\n * @param {boolean} isEnable - Defines the items to be enabled or disabled.\n * @return {void}\n */\n Grid.prototype.enableToolbarItems = function (items, isEnable) {\n if (this.toolbarModule) {\n this.toolbarModule.enableItems(items, isEnable);\n }\n };\n /**\n * Copy the selected rows or cells data into clipboard.\n * @param {boolean} withHeader - Specifies whether the column header text needs to be copied along with rows or cells.\n */\n Grid.prototype.copy = function (withHeader) {\n if (this.clipboardModule) {\n this.clipboardModule.copy(withHeader);\n }\n };\n /**\n * @hidden\n */\n Grid.prototype.recalcIndentWidth = function () {\n var _this = this;\n if (!this.getHeaderTable().querySelector('.e-emptycell')) {\n return;\n }\n if ((!this.groupSettings.columns.length && !this.isDetail() && !this.isRowDragable()) ||\n this.getHeaderTable().querySelector('.e-emptycell').getAttribute('indentRefreshed') ||\n !this.getContentTable()) {\n return;\n }\n var indentWidth = this.getHeaderTable().querySelector('.e-emptycell').parentElement.offsetWidth;\n var headerCol = [].slice.call(this.getHeaderTable().querySelector('colgroup').childNodes);\n var contentCol = [].slice.call(this.getContentTable().querySelector('colgroup').childNodes);\n var perPixel = indentWidth / 30;\n var i = this.getFrozenMode() === 'Right' ? this.frozenRightCount : 0;\n var parentOffset = this.element.offsetWidth;\n var applyWidth = function (index, width) {\n if (ispercentageWidth(_this)) {\n var newWidth = (width / parentOffset * 100).toFixed(1) + '%';\n headerCol[index].style.width = newWidth;\n contentCol[index].style.width = newWidth;\n }\n else {\n headerCol[index].style.width = width + 'px';\n contentCol[index].style.width = width + 'px';\n }\n _this.notify(events.columnWidthChanged, { index: index, width: width });\n };\n if (perPixel >= 1) {\n indentWidth = (30 / perPixel);\n }\n if (this.enableColumnVirtualization || this.isAutoGen) {\n indentWidth = 30;\n }\n while (i < this.groupSettings.columns.length) {\n applyWidth(i, indentWidth);\n i++;\n }\n if (this.isDetail()) {\n applyWidth(i, indentWidth);\n i++;\n }\n if (this.isRowDragable()) {\n applyWidth(i, indentWidth);\n }\n this.isAutoGen = false;\n this.getHeaderTable().querySelector('.e-emptycell').setAttribute('indentRefreshed', 'true');\n };\n /**\n * @hidden\n */\n Grid.prototype.resetIndentWidth = function () {\n if (ispercentageWidth(this)) {\n this.getHeaderTable().querySelector('.e-emptycell').removeAttribute('indentRefreshed');\n this.widthService.setWidthToColumns();\n this.recalcIndentWidth();\n }\n if ((this.width === 'auto' || typeof (this.width) === 'string' && this.width.indexOf('%') !== -1)\n && this.getColumns().filter(function (col) { return (!col.width || col.width === 'auto') && col.minWidth; }).length > 0) {\n var tgridWidth = this.widthService.getTableWidth(this.getColumns());\n this.widthService.setMinwidthBycalculation(tgridWidth);\n }\n if (this.isFrozenGrid() && this.widthService) {\n this.widthService.refreshFrozenScrollbar();\n }\n };\n /**\n * @hidden\n */\n Grid.prototype.isRowDragable = function () {\n return this.allowRowDragAndDrop && !this.rowDropSettings.targetID;\n };\n /**\n * Changes the Grid column positions by field names.\n * @param {string} fromFName - Defines the origin field name.\n * @param {string} toFName - Defines the destination field name.\n * @return {void}\n */\n Grid.prototype.reorderColumns = function (fromFName, toFName) {\n if (this.reorderModule) {\n this.reorderModule.reorderColumns(fromFName, toFName);\n }\n };\n /**\n * Changes the Grid column positions by field index. If you invoke reorderColumnByIndex multiple times,\n * then you won't get the same results every time.\n * @param {number} fromIndex - Defines the origin field index.\n * @param {number} toIndex - Defines the destination field index.\n * @return {void}\n */\n Grid.prototype.reorderColumnByIndex = function (fromIndex, toIndex) {\n if (this.reorderModule) {\n this.reorderModule.reorderColumnByIndex(fromIndex, toIndex);\n }\n };\n /**\n * Changes the Grid column positions by field index. If you invoke reorderColumnByTargetIndex multiple times,\n * then you will get the same results every time.\n * @param {string} fieldName - Defines the field name.\n * @param {number} toIndex - Defines the destination field index.\n * @return {void}\n */\n Grid.prototype.reorderColumnByTargetIndex = function (fieldName, toIndex) {\n if (this.reorderModule) {\n this.reorderModule.reorderColumnByTargetIndex(fieldName, toIndex);\n }\n };\n /**\n * Changes the Grid Row position with given indexes.\n * @param {number} fromIndexes - Defines the origin Indexes.\n * @param {number} toIndex - Defines the destination Index.\n * @return {void}\n */\n Grid.prototype.reorderRows = function (fromIndexes, toIndex) {\n if (this.rowDragAndDropModule) {\n this.rowDragAndDropModule.reorderRows(fromIndexes, toIndex);\n }\n };\n /**\n * @hidden\n */\n Grid.prototype.refreshDataSource = function (e, args) {\n this.notify('refreshdataSource', e);\n };\n /**\n * @hidden\n */\n Grid.prototype.disableRowDD = function (enable) {\n var headerTable = this.getHeaderTable();\n var contentTable = this.getContentTable();\n var headerRows = headerTable.querySelectorAll('th.e-rowdragheader, th.e-mastercell');\n var rows = this.getRows();\n var disValue = enable ? 'none' : '';\n setStyleAttribute(headerTable.querySelector('colgroup').childNodes[0], { 'display': disValue });\n setStyleAttribute(contentTable.querySelector('colgroup').childNodes[0], { 'display': disValue });\n for (var i = 0; i < this.getRows().length; i++) {\n var ele = rows[i].firstElementChild;\n enable ? addClass([ele], 'e-hide') : removeClass([ele], ['e-hide']);\n }\n for (var j = 0; j < headerTable.querySelectorAll('th.e-rowdragheader, th.e-mastercell').length; j++) {\n var ele = headerRows[j];\n enable ? addClass([ele], 'e-hide') : removeClass([ele], ['e-hide']);\n }\n };\n /**\n * Changes the column width to automatically fit its content to ensure that the width shows the content without wrapping/hiding.\n * > * This method ignores the hidden columns.\n * > * Uses the `autoFitColumns` method in the `dataBound` event to resize at initial rendering.\n * @param {string |string[]} fieldNames - Defines the column names.\n * @return {void}\n *\n *\n * ```typescript\n * \n * \n * ```\n *\n */\n Grid.prototype.autoFitColumns = function (fieldNames) {\n if (this.resizeModule) {\n this.resizeModule.autoFitColumns(fieldNames);\n }\n };\n /**\n * @hidden\n */\n Grid.prototype.createColumnchooser = function (x, y, target) {\n if (this.columnChooserModule) {\n this.columnChooserModule.renderColumnChooser(x, y, target);\n }\n };\n Grid.prototype.initializeServices = function () {\n this.serviceLocator.register('widthService', this.widthService = new ColumnWidthService(this));\n this.serviceLocator.register('cellRendererFactory', new CellRendererFactory);\n this.serviceLocator.register('rendererFactory', new RendererFactory);\n this.serviceLocator.register('localization', this.localeObj = new L10n(this.getModuleName(), this.defaultLocale, this.locale));\n this.serviceLocator.register('valueFormatter', this.valueFormatterService = new ValueFormatter(this.locale));\n this.serviceLocator.register('showHideService', this.showHider = new ShowHide(this));\n this.serviceLocator.register('ariaService', this.ariaService = new AriaService());\n this.serviceLocator.register('focus', this.focusModule = new FocusStrategy(this));\n };\n Grid.prototype.processModel = function () {\n var gCols = this.groupSettings.columns;\n var sCols = this.sortSettings.columns;\n var flag;\n var j;\n if (this.allowGrouping) {\n var _loop_1 = function (i, len) {\n j = 0;\n for (var sLen = sCols.length; j < sLen; j++) {\n if (sCols[j].field === gCols[i]) {\n flag = true;\n break;\n }\n }\n if (!flag) {\n sCols.push({ field: gCols[i], direction: 'Ascending', isFromGroup: true });\n }\n else {\n if (this_1.allowSorting) {\n this_1.sortedColumns.push(sCols[j].field);\n }\n else {\n sCols[j].direction = 'Ascending';\n }\n }\n if (!this_1.groupSettings.showGroupedColumn) {\n var column = this_1.enableColumnVirtualization ?\n this_1.columns.filter(function (c) { return c.field === gCols[i]; })[0] : this_1.getColumnByField(gCols[i]);\n if (column) {\n column.visible = false;\n }\n else {\n this_1.log('initial_action', { moduleName: 'group', columnName: gCols[i] });\n }\n }\n };\n var this_1 = this;\n for (var i = 0, len = gCols.length; i < len; i++) {\n _loop_1(i, len);\n }\n }\n if (!gCols.length) {\n for (var i = 0; i < sCols.length; i++) {\n this.sortedColumns.push(sCols[i].field);\n }\n }\n this.rowTemplateFn = templateCompiler(this.rowTemplate);\n this.detailTemplateFn = templateCompiler(this.detailTemplate);\n this.editTemplateFn = templateCompiler(this.editSettings.template);\n this.editHeaderTemplateFn = templateCompiler(this.editSettings.headerTemplate);\n this.editFooterTemplateFn = templateCompiler(this.editSettings.footerTemplate);\n if (!isNullOrUndefined(this.parentDetails)) {\n var value = isNullOrUndefined(this.parentDetails.parentKeyFieldValue) ? 'undefined' :\n this.parentDetails.parentKeyFieldValue;\n this.query.where(this.queryString, 'equal', value, true);\n }\n this.initForeignColumn();\n };\n Grid.prototype.initForeignColumn = function () {\n if (this.isForeignKeyEnabled(this.getColumns())) {\n this.notify(events.initForeignKeyColumn, this.getForeignKeyColumns());\n }\n };\n Grid.prototype.enableVerticalRendering = function () {\n if (this.rowRenderingMode === 'Vertical') {\n this.element.classList.add('e-row-responsive');\n }\n else {\n this.element.classList.remove('e-row-responsive');\n }\n };\n Grid.prototype.gridRender = function () {\n this.updateRTL();\n if (this.rowRenderingMode === 'Vertical') {\n this.element.classList.add('e-row-responsive');\n }\n if (this.enableHover) {\n this.element.classList.add('e-gridhover');\n }\n if (Browser.isDevice) {\n this.element.classList.add('e-device');\n }\n if (this.rowHeight) {\n this.element.classList.add('e-grid-min-height');\n }\n classList(this.element, ['e-responsive', 'e-default'], []);\n var rendererFactory = this.serviceLocator.getService('rendererFactory');\n this.headerModule = rendererFactory.getRenderer(RenderType.Header);\n this.contentModule = rendererFactory.getRenderer(RenderType.Content);\n this.printModule = new Print(this, this.scrollModule);\n this.clipboardModule = new Clipboard(this);\n this.renderModule.render();\n this.eventInitializer();\n this.createGridPopUpElement();\n this.widthService.setWidthToColumns();\n this.updateGridLines();\n this.applyTextWrap();\n this.createTooltip(); //for clip mode ellipsis\n this.enableBoxSelection();\n };\n Grid.prototype.dataReady = function () {\n this.scrollModule.setWidth();\n this.scrollModule.setHeight();\n if (this.height !== 'auto') {\n this.scrollModule.setPadding();\n }\n };\n Grid.prototype.updateRTL = function () {\n if (this.enableRtl) {\n this.element.classList.add('e-rtl');\n }\n else {\n this.element.classList.remove('e-rtl');\n }\n };\n Grid.prototype.createGridPopUpElement = function () {\n var popup = this.createElement('div', { className: 'e-gridpopup', styles: 'display:none;' });\n var content = this.createElement('div', { className: 'e-content', attrs: { tabIndex: '-1' } });\n append([content, this.createElement('div', { className: 'e-uptail e-tail' })], popup);\n content.appendChild(this.createElement('span'));\n append([content, this.createElement('div', { className: 'e-downtail e-tail' })], popup);\n this.element.appendChild(popup);\n };\n Grid.prototype.updateGridLines = function () {\n classList(this.element, [], ['e-verticallines', 'e-horizontallines', 'e-hidelines', 'e-bothlines']);\n switch (this.gridLines) {\n case 'Horizontal':\n this.element.classList.add('e-horizontallines');\n break;\n case 'Vertical':\n this.element.classList.add('e-verticallines');\n break;\n case 'None':\n this.element.classList.add('e-hidelines');\n break;\n case 'Both':\n this.element.classList.add('e-bothlines');\n break;\n }\n this.updateResizeLines();\n };\n Grid.prototype.updateResizeLines = function () {\n if (this.allowResizing &&\n !(this.gridLines === 'Vertical' || this.gridLines === 'Both')) {\n this.element.classList.add('e-resize-lines');\n }\n else {\n this.element.classList.remove('e-resize-lines');\n }\n };\n /**\n * The function is used to apply text wrap\n * @return {void}\n * @hidden\n */\n Grid.prototype.applyTextWrap = function () {\n if (this.allowTextWrap) {\n var headerRows = [].slice.call(this.element.querySelectorAll('.e-columnheader'));\n switch (this.textWrapSettings.wrapMode) {\n case 'Header':\n wrap(this.element, false);\n wrap(this.getContent(), false);\n wrap(headerRows, true);\n break;\n case 'Content':\n wrap(this.getContent(), true);\n wrap(this.element, false);\n wrap(headerRows, false);\n break;\n default:\n wrap(this.element, true);\n wrap(this.getContent(), false);\n wrap(headerRows, false);\n }\n if (this.textWrapSettings.wrapMode !== 'Content') {\n this.notify(events.refreshHandlers, {});\n }\n }\n };\n /**\n * The function is used to remove text wrap\n * @return {void}\n * @hidden\n */\n Grid.prototype.removeTextWrap = function () {\n wrap(this.element, false);\n var headerRows = [].slice.call(this.element.querySelectorAll('.e-columnheader'));\n wrap(headerRows, false);\n wrap(this.getContent(), false);\n if (this.textWrapSettings.wrapMode !== 'Content') {\n this.notify(events.refreshHandlers, {});\n }\n };\n /**\n * The function is used to add Tooltip to the grid cell that has ellipsiswithtooltip clip mode.\n * @return {void}\n * @hidden\n */\n Grid.prototype.createTooltip = function () {\n this.toolTipObj = new Tooltip({ opensOn: 'custom', content: '' }, this.element);\n };\n /** @hidden */\n Grid.prototype.freezeRefresh = function () {\n this.isFreezeRefresh = true;\n if (this.enableVirtualization) {\n this.pageSettings.currentPage = 1;\n }\n this.componentRefresh();\n };\n Grid.prototype.getTooltipStatus = function (element) {\n var width;\n var headerTable = this.getHeaderTable();\n var contentTable = this.getContentTable();\n var headerDivTag = 'e-gridheader';\n var contentDivTag = 'e-gridcontent';\n var htable = this.createTable(headerTable, headerDivTag, 'header');\n var ctable = this.createTable(headerTable, headerDivTag, 'content');\n var td = element;\n var table = element.classList.contains('e-headercell') ? htable : ctable;\n var ele = element.classList.contains('e-headercell') ? 'th' : 'tr';\n table.querySelector(ele).className = element.className;\n table.querySelector(ele).innerHTML = element.innerHTML;\n width = table.querySelector(ele).getBoundingClientRect().width;\n document.body.removeChild(htable);\n document.body.removeChild(ctable);\n if (width > element.getBoundingClientRect().width) {\n return true;\n }\n return false;\n };\n Grid.prototype.mouseMoveHandler = function (e) {\n if (this.isEllipsisTooltip()) {\n var element = parentsUntil(e.target, 'e-ellipsistooltip');\n if (this.prevElement !== element || e.type === 'mouseout') {\n this.toolTipObj.close();\n }\n var tagName = e.target.tagName;\n var elemNames = ['A', 'BUTTON', 'INPUT'];\n if (element && e.type !== 'mouseout' && !(Browser.isDevice && elemNames.indexOf(tagName) !== -1)) {\n if (element.getAttribute('aria-describedby')) {\n return;\n }\n if (this.getTooltipStatus(element)) {\n if (element.getElementsByClassName('e-headertext').length) {\n this.toolTipObj.content = element.getElementsByClassName('e-headertext')[0].innerText;\n }\n else {\n this.toolTipObj.content = element.innerText;\n }\n this.prevElement = element;\n this.toolTipObj.open(element);\n }\n }\n }\n this.hoverFrozenRows(e);\n };\n /** @hidden */\n Grid.prototype.hoverFrozenRows = function (e) {\n if (this.isFrozenGrid()) {\n var row = parentsUntil(e.target, 'e-row');\n if ([].slice.call(this.element.querySelectorAll('.e-frozenhover')).length && e.type === 'mouseout') {\n var rows = [].slice.call(this.element.querySelectorAll('.e-frozenhover'));\n for (var i = 0; i < rows.length; i++) {\n rows[i].classList.remove('e-frozenhover');\n }\n }\n else if (row) {\n var rows = [].slice.call(this.element.querySelectorAll('tr[aria-rowindex=\"' + row.getAttribute('aria-rowindex') + '\"]'));\n rows.splice(rows.indexOf(row), 1);\n for (var i = 0; i < rows.length; i++) {\n if (row.getAttribute('aria-selected') != 'true' && rows[i]) {\n rows[i].classList.add('e-frozenhover');\n }\n else if (rows[i]) {\n rows[i].classList.remove('e-frozenhover');\n }\n }\n }\n }\n };\n Grid.prototype.isEllipsisTooltip = function () {\n var cols = this.getColumns();\n if (this.clipMode === 'EllipsisWithTooltip') {\n return true;\n }\n for (var i = 0; i < cols.length; i++) {\n if (cols[i].clipMode === 'EllipsisWithTooltip') {\n return true;\n }\n }\n return false;\n };\n Grid.prototype.scrollHandler = function () {\n if (this.isEllipsisTooltip()) {\n this.toolTipObj.close();\n }\n };\n /**\n * To create table for ellipsiswithtooltip\n * @hidden\n */\n Grid.prototype.createTable = function (table, tag, type) {\n var myTableDiv = this.createElement('div');\n myTableDiv.className = this.element.className;\n myTableDiv.style.cssText = 'display: inline-block;visibility:hidden;position:absolute';\n var mySubDiv = this.createElement('div');\n mySubDiv.className = tag;\n var myTable = this.createElement('table');\n myTable.className = table.className;\n myTable.style.cssText = 'table-layout: auto;width: auto';\n var ele = (type === 'header') ? 'th' : 'td';\n var myTr = this.createElement('tr');\n var mytd = this.createElement(ele);\n myTr.appendChild(mytd);\n myTable.appendChild(myTr);\n mySubDiv.appendChild(myTable);\n myTableDiv.appendChild(mySubDiv);\n document.body.appendChild(myTableDiv);\n return myTableDiv;\n };\n Grid.prototype.onKeyPressed = function (e) {\n if (e.action === 'tab' || e.action === 'shiftTab') {\n this.toolTipObj.close();\n }\n };\n /**\n * Binding events to the element while component creation.\n * @hidden\n */\n Grid.prototype.wireEvents = function () {\n EventHandler.add(this.element, 'click', this.mouseClickHandler, this);\n EventHandler.add(this.element, 'touchend', this.mouseClickHandler, this);\n EventHandler.add(this.element, 'focusout', this.focusOutHandler, this);\n EventHandler.add(this.element, 'dblclick', this.dblClickHandler, this);\n EventHandler.add(this.element, 'keydown', this.keyPressHandler, this);\n /* tslint:disable-next-line:no-any */\n EventHandler.add(window, 'resize', this.resetIndentWidth, this);\n if (this.allowKeyboard) {\n this.element.tabIndex = this.element.tabIndex === -1 ? 0 : this.element.tabIndex;\n }\n this.keyboardModule = new KeyboardEvents(this.element, {\n keyAction: this.keyActionHandler.bind(this),\n keyConfigs: this.keyConfigs,\n eventName: 'keydown'\n });\n EventHandler.add(this.getContent().firstElementChild, 'scroll', this.scrollHandler, this);\n EventHandler.add(this.element, 'mousemove', this.mouseMoveHandler, this);\n EventHandler.add(this.element, 'mouseout', this.mouseMoveHandler, this);\n EventHandler.add(this.getContent(), 'touchstart', this.tapEvent, this);\n EventHandler.add(document.body, 'keydown', this.keyDownHandler, this);\n };\n /**\n * Unbinding events from the element while component destroy.\n * @hidden\n */\n Grid.prototype.unwireEvents = function () {\n EventHandler.remove(this.element, 'click', this.mouseClickHandler);\n EventHandler.remove(this.element, 'touchend', this.mouseClickHandler);\n EventHandler.remove(this.element, 'focusout', this.focusOutHandler);\n EventHandler.remove(this.element, 'dblclick', this.dblClickHandler);\n EventHandler.remove(this.getContent().firstElementChild, 'scroll', this.scrollHandler);\n EventHandler.remove(this.element, 'mousemove', this.mouseMoveHandler);\n EventHandler.remove(this.element, 'mouseout', this.mouseMoveHandler);\n EventHandler.remove(this.element, 'keydown', this.keyPressHandler);\n EventHandler.remove(this.getContent(), 'touchstart', this.tapEvent);\n EventHandler.remove(document.body, 'keydown', this.keyDownHandler);\n /* tslint:disable-next-line:no-any */\n EventHandler.remove(window, 'resize', this.resetIndentWidth);\n };\n /**\n * @hidden\n */\n Grid.prototype.addListener = function () {\n if (this.isDestroyed) {\n return;\n }\n this.on(events.dataReady, this.dataReady, this);\n this.on(events.contentReady, this.recalcIndentWidth, this);\n this.on(events.headerRefreshed, this.recalcIndentWidth, this);\n this.dataBoundFunction = this.refreshMediaCol.bind(this);\n this.addEventListener(events.dataBound, this.dataBoundFunction);\n this.on(events.keyPressed, this.onKeyPressed, this);\n this.on(events.contentReady, this.blazorTemplate, this);\n };\n /**\n * @hidden\n */\n Grid.prototype.removeListener = function () {\n if (this.isDestroyed) {\n return;\n }\n this.off(events.dataReady, this.dataReady);\n this.off(events.contentReady, this.recalcIndentWidth);\n this.off(events.headerRefreshed, this.recalcIndentWidth);\n this.removeEventListener(events.dataBound, this.dataBoundFunction);\n this.off(events.keyPressed, this.onKeyPressed);\n };\n Grid.prototype.blazorTemplate = function () {\n if (isBlazor()) {\n if (this.pageSettings.template) {\n updateBlazorTemplate(this.element.id + \"_template\", 'Template', this.pageSettings);\n }\n for (var i = 0; i < this.columnModel.length; i++) {\n if (this.columnModel[i].template) {\n updateBlazorTemplate(this.element.id + this.columnModel[i].uid, 'Template', this.columnModel[i], false);\n }\n if (this.columnModel[i].headerTemplate) {\n updateBlazorTemplate(this.element.id + this.columnModel[i].uid + 'headerTemplate', 'HeaderTemplate', this.columnModel[i], false);\n }\n if (this.filterSettings.type == 'FilterBar' && this.columnModel[i].filterTemplate) {\n var fieldName = this.columnModel[i].field;\n var tempID = this.element.id + this.columnModel[i].uid + 'filterTemplate';\n var filteredColumns = this.filterSettings.columns;\n for (var k = 0; k < filteredColumns.length; k++) {\n if (fieldName == filteredColumns[k].field) {\n blazorTemplates[tempID][0][fieldName] = filteredColumns[k].value;\n }\n }\n updateBlazorTemplate(this.element.id + this.columnModel[i].uid + 'filterTemplate', 'FilterTemplate', this.columnModel[i], false);\n }\n if (this.filterSettings.type != 'FilterBar' && this.columnModel[i].filterTemplate) {\n updateBlazorTemplate(this.element.id + this.columnModel[i].uid + 'filterTemplate', 'FilterTemplate', this.columnModel[i]);\n }\n }\n if (this.groupSettings.captionTemplate) {\n updateBlazorTemplate(this.element.id + 'captionTemplate', 'CaptionTemplate', this.groupSettings);\n }\n var guid = 'guid';\n for (var k = 0; k < this.aggregates.length; k++) {\n for (var j = 0; j < this.aggregates[k].columns.length; j++) {\n if (this.aggregates[k].columns[j].footerTemplate) {\n updateBlazorTemplate(this.element.id + this.aggregates[k].columns[j][guid] + 'footerTemplate', 'FooterTemplate', this.aggregates[k].columns[j]);\n }\n if (this.aggregates[k].columns[j].groupFooterTemplate) {\n updateBlazorTemplate(this.element.id + this.aggregates[k].columns[j][guid] + 'groupFooterTemplate', 'GroupFooterTemplate', this.aggregates[k].columns[j]);\n }\n if (this.aggregates[k].columns[j].groupCaptionTemplate) {\n updateBlazorTemplate(this.element.id + this.aggregates[k].columns[j][guid] + 'groupCaptionTemplate', 'GroupCaptionTemplate', this.aggregates[k].columns[j]);\n }\n }\n }\n }\n };\n /**\n * Get current visible data of grid.\n * @return {Object[]}\n * @isGenericType true\n */\n Grid.prototype.getCurrentViewRecords = function () {\n if (isGroupAdaptive(this)) {\n return isNullOrUndefined(this.currentViewData.records) ?\n this.currentViewData : this.currentViewData.records;\n }\n if (this.groupSettings.enableLazyLoading) {\n return this.currentViewData;\n }\n ;\n return (this.allowGrouping && this.groupSettings.columns.length && this.currentViewData.length && this.currentViewData.records) ?\n this.currentViewData.records : this.currentViewData;\n };\n Grid.prototype.mouseClickHandler = function (e) {\n if (this.isChildGrid(e) || (parentsUntil(e.target, 'e-gridpopup') && e.touches) ||\n this.element.querySelectorAll('.e-cloneproperties').length || this.checkEdit(e)) {\n return;\n }\n if (((!this.allowRowDragAndDrop && (parentsUntil(e.target, 'e-gridcontent') ||\n e.target.tagName === 'TD')) || (!(this.allowGrouping || this.allowReordering) &&\n parentsUntil(e.target, 'e-gridheader'))) && e.touches) {\n return;\n }\n if (parentsUntil(e.target, 'e-gridheader') && this.allowRowDragAndDrop &&\n !(parentsUntil(e.target, 'e-filterbarcell'))) {\n e.preventDefault();\n }\n var args = this.getRowInfo(e.target);\n var cancel = 'cancel';\n args[cancel] = false;\n var isDataRow = false;\n var tr = closest(e.target, 'tr');\n if (tr && tr.getAttribute('data-uid')) {\n var rowObj = this.getRowObjectFromUID(tr.getAttribute('data-uid'));\n isDataRow = rowObj ? rowObj.isDataRow : false;\n }\n if (isBlazor()) {\n var clonedColumn = extend({}, args.column);\n args = { rowData: args.rowData, rowIndex: args.rowIndex,\n cellIndex: args.cellIndex, column: clonedColumn };\n }\n if (isDataRow) {\n this.trigger(events.recordClick, args);\n }\n this.notify(events.click, e);\n };\n Grid.prototype.checkEdit = function (e) {\n var tr = parentsUntil(e.target, 'e-row');\n var isEdit = this.editSettings.mode !== 'Batch' &&\n this.isEdit && tr && (tr.classList.contains('e-editedrow') || tr.classList.contains('e-addedrow'));\n return !parentsUntil(e.target, 'e-unboundcelldiv') && (isEdit || (parentsUntil(e.target, 'e-rowcell') &&\n parentsUntil(e.target, 'e-rowcell').classList.contains('e-editedbatchcell')));\n };\n Grid.prototype.dblClickHandler = function (e) {\n var grid = parentsUntil(e.target, 'e-grid');\n if (isNullOrUndefined(grid) || grid.id !== this.element.id || closest(e.target, '.e-unboundcelldiv')) {\n return;\n }\n var dataRow = false;\n var tr = closest(e.target, 'tr');\n if (tr && tr.getAttribute('data-uid')) {\n var rowObj = this.getRowObjectFromUID(tr.getAttribute('data-uid'));\n dataRow = rowObj ? rowObj.isDataRow : false;\n }\n var args = this.getRowInfo(e.target);\n args.target = e.target;\n if (dataRow) {\n this.trigger(events.recordDoubleClick, args);\n }\n this.notify(events.dblclick, e);\n };\n Grid.prototype.focusOutHandler = function (e) {\n if (this.isChildGrid(e)) {\n return;\n }\n if (!parentsUntil(e.target, 'e-grid')) {\n this.element.querySelector('.e-gridpopup').style.display = 'None';\n }\n var filterClear = this.element.querySelector('.e-cancel:not(.e-hide)');\n if (filterClear) {\n filterClear.classList.add('e-hide');\n }\n var relatedTarget = e.relatedTarget;\n var ariaOwns = relatedTarget ? relatedTarget.getAttribute('aria-owns') : null;\n if ((!relatedTarget || (!parentsUntil(relatedTarget, 'e-grid') &&\n (!isNullOrUndefined(ariaOwns) &&\n (ariaOwns)) !== e.target.getAttribute('aria-owns')))\n && !this.keyPress && this.isEdit && !Browser.isDevice) {\n if (this.editSettings.mode === 'Batch') {\n this.editModule.saveCell();\n this.notify(events.editNextValCell, {});\n }\n if (this.editSettings.mode === 'Normal') {\n this.editModule.editFormValidate();\n }\n }\n this.keyPress = false;\n };\n Grid.prototype.isChildGrid = function (e) {\n var gridElement = parentsUntil(e.target, 'e-grid');\n if (gridElement && gridElement.id !== this.element.id) {\n return true;\n }\n return false;\n };\n /**\n * @hidden\n */\n Grid.prototype.mergePersistGridData = function (persistedData) {\n var data = this.getLocalData();\n if (!(isNullOrUndefined(data) || (data === '')) || !isNullOrUndefined(persistedData)) {\n var dataObj = !isNullOrUndefined(persistedData) ? persistedData : JSON.parse(data);\n if (this.enableVirtualization) {\n dataObj.pageSettings.currentPage = 1;\n }\n var keys = Object.keys(dataObj);\n this.isProtectedOnChange = true;\n for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {\n var key = keys_1[_i];\n if ((typeof this[key] === 'object') && !isNullOrUndefined(this[key])) {\n if (Array.isArray(this[key]) && key === 'columns') {\n if (!(isBlazor() && this.isServerRendered)) {\n setColumnIndex(this[key]);\n }\n this.mergeColumns(dataObj[key], this[key]);\n this[key] = dataObj[key];\n }\n else {\n extend(this[key], dataObj[key]);\n }\n }\n else {\n this[key] = dataObj[key];\n }\n }\n this.isProtectedOnChange = false;\n }\n };\n Grid.prototype.mergeColumns = function (storedColumn, columns) {\n var storedColumns = storedColumn;\n var _loop_2 = function (i) {\n var localCol = columns.filter(function (tCol) { return tCol.index === storedColumns[i].index; })[0];\n if (!isNullOrUndefined(localCol)) {\n if (localCol.columns && localCol.columns.length) {\n this_2.mergeColumns(storedColumns[i].columns, localCol.columns);\n storedColumns[i] = extend(localCol, storedColumns[i], {}, true);\n }\n else {\n if (isBlazor()) {\n var guid = 'guid';\n storedColumns[i][guid] = localCol[guid];\n storedColumns[i].uid = localCol.uid;\n }\n storedColumns[i] = extend(localCol, storedColumns[i], {}, true);\n }\n }\n };\n var this_2 = this;\n for (var i = 0; i < storedColumns.length; i++) {\n _loop_2(i);\n }\n };\n /**\n * @hidden\n */\n Grid.prototype.isDetail = function () {\n return !isNullOrUndefined(this.detailTemplate) || !isNullOrUndefined(this.childGrid);\n };\n Grid.prototype.isCommandColumn = function (columns) {\n var _this = this;\n return columns.some(function (col) {\n if (col.columns) {\n return _this.isCommandColumn(col.columns);\n }\n return !!(col.commands || col.commandsTemplate);\n });\n };\n Grid.prototype.isForeignKeyEnabled = function (columns) {\n var _this = this;\n return columns.some(function (col) {\n if (col.columns) {\n return _this.isForeignKeyEnabled(col.columns);\n }\n return !!(col.dataSource && col.foreignKeyValue);\n });\n };\n Grid.prototype.keyPressHandler = function (e) {\n var presskey = extend(e, { cancel: false, });\n this.trigger(\"keyPressed\", presskey);\n if (presskey.cancel === true) {\n e.stopImmediatePropagation();\n }\n };\n Grid.prototype.keyDownHandler = function (e) {\n if (e.altKey) {\n if (e.keyCode === 74) { //alt j\n if (this.keyA) { //alt A J\n this.notify(events.groupCollapse, { target: e.target, collapse: false });\n this.keyA = false;\n }\n else {\n this.focusModule.focusHeader();\n this.focusModule.addOutline();\n }\n }\n if (e.keyCode === 87) { //alt w\n this.focusModule.focusContent();\n this.focusModule.addOutline();\n }\n if (e.keyCode === 65) { //alt A\n this.keyA = true;\n }\n if (e.keyCode === 72 && this.keyA) { //alt A H\n this.notify(events.groupCollapse, { target: e.target, collapse: true });\n this.keyA = false;\n }\n }\n if (e.keyCode === 13) {\n this.notify(events.enterKeyHandler, e);\n }\n };\n Grid.prototype.keyActionHandler = function (e) {\n if (this.isChildGrid(e) ||\n (this.isEdit && e.action !== 'escape' && e.action !== 'enter' && e.action !== 'shiftEnter'\n && e.action !== 'tab' && e.action !== 'shiftTab')) {\n return;\n }\n else {\n this.keyPress = true;\n }\n if (this.allowKeyboard) {\n if (e.action === 'ctrlPlusP') {\n e.preventDefault();\n this.print();\n }\n this.notify(events.keyPressed, e);\n }\n };\n /**\n * @hidden\n */\n Grid.prototype.setInjectedModules = function (modules) {\n this.injectedModules = modules;\n };\n Grid.prototype.updateColumnObject = function () {\n prepareColumns(this.columns, this.enableColumnVirtualization, this);\n if (!(isBlazor() && this.isServerRendered)) {\n setColumnIndex(this.columns);\n }\n this.initForeignColumn();\n this.notify(events.autoCol, {});\n };\n /**\n * Gets the foreign columns from Grid.\n * @return {Column[]}\n * @blazorType List\n */\n Grid.prototype.getForeignKeyColumns = function () {\n return this.getColumns().filter(function (col) {\n return col.isForeignColumn();\n });\n };\n /**\n * @hidden\n */\n Grid.prototype.getRowHeight = function () {\n return this.rowHeight ? this.rowHeight : getRowHeight(this.element);\n };\n /**\n * Refreshes the Grid column changes.\n */\n Grid.prototype.refreshColumns = function () {\n this.setFrozenCount();\n var fCnt = this.getContent().querySelector('.e-frozen-left-content');\n var frCnt = this.getContent().querySelector('.e-frozen-right-content');\n var isColFrozen = !this.frozenRightCount && !this.frozenLeftCount;\n var isFrozen = this.getFrozenColumns() !== 0;\n if (!isFrozen && ((!fCnt && this.frozenLeftCount) || (!frCnt && this.frozenRightCount) || (fCnt && !this.frozenLeftCount)\n || (frCnt && !this.frozenRightCount))) {\n this.tableIndex = 0;\n this.tablesCount = 1;\n if (this.enableColumnVirtualization) {\n this.columnModel = [];\n this.updateColumnModel(this.columns);\n }\n this.freezeRefresh();\n }\n else if (isColFrozen && ((this.getFrozenColumns() === 1 && !fCnt) || (this.getFrozenColumns() === 0 && fCnt))) {\n this.tableIndex = 0;\n this.tablesCount = 1;\n if (this.enableColumnVirtualization) {\n this.columnModel = [];\n this.updateColumnModel(this.columns);\n }\n this.freezeRefresh();\n }\n else {\n this.isPreventScrollEvent = true;\n this.updateColumnObject();\n this.checkLockColumns(this.getColumns());\n this.refresh();\n if (this.isFrozenGrid()) {\n var mTbl = this.contentModule.getMovableContent().querySelector('.e-table');\n remove(mTbl.querySelector('colgroup'));\n var colGroup = ((this.getHeaderContent()\n .querySelector('.e-movableheader').querySelector('colgroup')).cloneNode(true));\n mTbl.insertBefore(colGroup, mTbl.querySelector('tbody'));\n if (this.getFrozenMode() === 'Left-Right') {\n var frTbl = this.contentModule.getFrozenRightContent().querySelector('.e-table');\n remove(frTbl.querySelector('colgroup'));\n var colGrp = ((this.getHeaderContent()\n .querySelector('.e-frozen-right-header').querySelector('colgroup')).cloneNode(true));\n frTbl.insertBefore(colGrp, frTbl.querySelector('tbody'));\n }\n }\n }\n if (this.isFrozenGrid()) {\n var left = this.getContent().querySelector('.e-movablescrollbar').scrollLeft;\n this.headerModule.getMovableHeader().scrollLeft = left;\n this.contentModule.getMovableContent().scrollLeft = left;\n }\n };\n /**\n * Export Grid data to Excel file(.xlsx).\n * @param {ExcelExportProperties} excelExportProperties - Defines the export properties of the Grid.\n * @param {boolean} isMultipleExport - Define to enable multiple export.\n * @param {workbook} workbook - Defines the Workbook if multiple export is enabled.\n * @param {boolean} isBlob - If 'isBlob' set to true, then it will be returned as blob data.\n * @return {Promise}\n * @blazorType void\n */\n Grid.prototype.excelExport = function (excelExportProperties, isMultipleExport, \n /* tslint:disable-next-line:no-any */\n workbook, isBlob) {\n if (isBlazor()) {\n this.excelExportModule.Map(this, excelExportProperties, isMultipleExport, workbook, false, isBlob);\n return null;\n }\n return this.excelExportModule ?\n this.excelExportModule.Map(this, excelExportProperties, isMultipleExport, workbook, false, isBlob) : null;\n };\n /**\n * Export Grid data to CSV file.\n * @param {ExcelExportProperties} excelExportProperties - Defines the export properties of the Grid.\n * @param {boolean} isMultipleExport - Define to enable multiple export.\n * @param {workbook} workbook - Defines the Workbook if multiple export is enabled.\n * @param {boolean} isBlob - If 'isBlob' set to true, then it will be returned as blob data.\n * @return {Promise}\n * @blazorType void\n */\n Grid.prototype.csvExport = function (excelExportProperties, \n /* tslint:disable-next-line:no-any */\n isMultipleExport, workbook, isBlob) {\n if (isBlazor()) {\n this.excelExportModule.Map(this, excelExportProperties, isMultipleExport, workbook, true, isBlob);\n return null;\n }\n return this.excelExportModule ?\n this.excelExportModule.Map(this, excelExportProperties, isMultipleExport, workbook, true, isBlob) : null;\n };\n /**\n * Export Grid data to PDF document.\n * @param {pdfExportProperties} PdfExportProperties - Defines the export properties of the Grid.\n * @param {isMultipleExport} isMultipleExport - Define to enable multiple export.\n * @param {pdfDoc} pdfDoc - Defined the Pdf Document if multiple export is enabled.\n * @param {boolean} isBlob - If 'isBlob' set to true, then it will be returned as blob data.\n * @return {Promise}\n * @blazorType void\n */\n Grid.prototype.pdfExport = function (pdfExportProperties, \n /* tslint:disable-next-line:no-any */\n isMultipleExport, pdfDoc, isBlob) {\n if (isBlazor()) {\n this.pdfExportModule.Map(this, pdfExportProperties, isMultipleExport, pdfDoc, isBlob);\n return null;\n }\n return this.pdfExportModule ? this.pdfExportModule.Map(this, pdfExportProperties, isMultipleExport, pdfDoc, isBlob) : null;\n };\n /**\n * Groups a column by column name.\n * @param {string} columnName - Defines the column name to group.\n * @return {void}\n */\n Grid.prototype.groupColumn = function (columnName) {\n if (this.groupModule) {\n this.groupModule.groupColumn(columnName);\n }\n };\n /**\n * Expands all the grouped rows of the Grid.\n * @return {void}\n */\n Grid.prototype.groupExpandAll = function () {\n if (this.groupModule) {\n this.groupModule.expandAll();\n }\n };\n /**\n * Collapses all the grouped rows of the Grid.\n * @return {void}\n */\n Grid.prototype.groupCollapseAll = function () {\n if (this.groupModule) {\n this.groupModule.collapseAll();\n }\n };\n /**\n * Expands or collapses grouped rows by target element.\n * @param {Element} target - Defines the target element of the grouped row.\n * @return {void}\n */\n // public expandCollapseRows(target: Element): void {\n // if (this.groupModule) {\n // this.groupModule.expandCollapseRows(target);\n // }\n // }\n /**\n * Clears all the grouped columns of the Grid.\n * @return {void}\n */\n Grid.prototype.clearGrouping = function () {\n if (this.groupModule) {\n this.groupModule.clearGrouping();\n }\n };\n /**\n * Ungroups a column by column name.\n * @param {string} columnName - Defines the column name to ungroup.\n * {% codeBlock src='grid/ungroupColumn/index.md' %}{% endcodeBlock %}\n * @return {void}\n */\n Grid.prototype.ungroupColumn = function (columnName) {\n if (this.groupModule) {\n this.groupModule.ungroupColumn(columnName);\n }\n };\n /**\n * Column chooser can be displayed on screen by given position(X and Y axis).\n * @param {number} X - Defines the X axis.\n * @param {number} Y - Defines the Y axis.\n * @return {void}\n */\n Grid.prototype.openColumnChooser = function (x, y) {\n if (this.columnChooserModule) {\n this.columnChooserModule.openColumnChooser(x, y);\n }\n };\n Grid.prototype.scrollRefresh = function () {\n var _this = this;\n var refresh = function () {\n _this.scrollModule.refresh();\n _this.off(events.contentReady, refresh);\n };\n this.on(events.contentReady, refresh, this);\n };\n /**\n * Collapses a detail row with the given target.\n * @param {Element} target - Defines the expanded element to collapse.\n * @return {void}\n */\n // public detailCollapse(target: number | Element): void {\n // if (this.detailRowModule) {\n // this.detailRowModule.collapse(target);\n // }\n // }\n /**\n * Collapses all the detail rows of the Grid.\n * @return {void}\n */\n Grid.prototype.detailCollapseAll = function () {\n if (this.detailRowModule) {\n this.detailRowModule.collapseAll();\n }\n };\n /**\n * Expands a detail row with the given target.\n * @param {Element} target - Defines the collapsed element to expand.\n * @return {void}\n */\n // public detailExpand(target: number | Element): void {\n // if (this.detailRowModule) {\n // this.detailRowModule.expand(target);\n // }\n // }\n /**\n * Expands all the detail rows of the Grid.\n * @return {void}\n */\n Grid.prototype.detailExpandAll = function () {\n if (this.detailRowModule) {\n this.detailRowModule.expandAll();\n }\n };\n /**\n * Deselects the currently selected cells.\n * @return {void}\n */\n Grid.prototype.clearCellSelection = function () {\n if (this.selectionModule) {\n this.selectionModule.clearCellSelection();\n }\n };\n /**\n * Deselects the currently selected rows.\n * @return {void}\n */\n Grid.prototype.clearRowSelection = function () {\n if (this.selectionModule) {\n this.selectionModule.clearRowSelection();\n }\n };\n /**\n * Selects a collection of cells by row and column indexes.\n * @param {ISelectedCell[]} rowCellIndexes - Specifies the row and column indexes.\n * @return {void}\n */\n Grid.prototype.selectCells = function (rowCellIndexes) {\n if (this.selectionModule) {\n this.selectionModule.selectCells(rowCellIndexes);\n }\n };\n /**\n * Selects a range of rows from start and end row indexes.\n * @param {number} startIndex - Specifies the start row index.\n * @param {number} endIndex - Specifies the end row index.\n * @return {void}\n */\n Grid.prototype.selectRowsByRange = function (startIndex, endIndex) {\n if (this.selectionModule) {\n this.selectionModule.selectRowsByRange(startIndex, endIndex);\n }\n };\n /**\n * @hidden\n */\n Grid.prototype.isContextMenuOpen = function () {\n return this.contextMenuModule && this.contextMenuModule.isOpen;\n };\n /**\n * @hidden\n */\n Grid.prototype.ensureModuleInjected = function (module) {\n return this.getInjectedModules().indexOf(module) >= 0;\n };\n /**\n * Destroys the given template reference.\n * @param {string[]} propertyNames - Defines the collection of template name.\n */\n //tslint:disable-next-line:no-any\n Grid.prototype.destroyTemplate = function (propertyNames, index) {\n this.clearTemplate(propertyNames, index);\n };\n /**\n * @hidden\n * @private\n */\n Grid.prototype.log = function (type, args) {\n this.loggerModule ? this.loggerModule.log(type, args) : (function () { return 0; })();\n };\n /**\n * @hidden\n */\n Grid.prototype.applyBiggerTheme = function (element) {\n if (this.element.classList.contains('e-bigger')) {\n element.classList.add('e-bigger');\n }\n };\n /**\n * @hidden\n */\n Grid.prototype.getPreviousRowData = function () {\n var previousRowData = this.getRowsObject()[this.getRows().length - 1].data;\n return previousRowData;\n };\n /**\n * Hides the scrollbar placeholder of Grid content when grid content is not overflown.\n * @return {void}\n */\n Grid.prototype.hideScroll = function () {\n var content = this.getContent().querySelector('.e-content');\n var scrollBar = this.getContent().querySelector('.e-scrollbar');\n if (content.scrollHeight <= content.clientHeight) {\n this.scrollModule.removePadding();\n content.style.overflowY = 'auto';\n }\n if (this.isFrozenGrid() && scrollBar) {\n var mvblScrollBar = this.getContent().querySelector('.e-movablescrollbar');\n var mvblChild = this.getContent().querySelector('.e-movablechild');\n scrollBar.style.display = 'flex';\n if (mvblScrollBar.offsetWidth >= mvblChild.offsetWidth) {\n scrollBar.style.display = 'none';\n this.notify(events.frozenHeight, 0);\n }\n }\n };\n /**\n * Get row index by primary key or row data.\n * @param {string} value - Defines the primary key value.\n * @param {Object} value - Defines the row data.\n */\n Grid.prototype.getRowIndexByPrimaryKey = function (value) {\n var pkName = this.getPrimaryKeyFieldNames()[0];\n value = typeof value === 'object' ? value[pkName] : value;\n for (var i = 0; i < this.getRowsObject().length; i++) {\n var pKvalue = this.getRowsObject()[i].data[pkName];\n if (pkName.split('.').length > 1) {\n pKvalue = performComplexDataOperation(pkName, this.getRowsObject()[i].data);\n }\n if (pKvalue === value) {\n return this.getRowsObject()[i].index;\n }\n }\n return -1;\n };\n ;\n /**\n * @hidden\n */\n // Need to have all columns while filtering with ColumnVirtualization.\n Grid.prototype.grabColumnByFieldFromAllCols = function (field) {\n var column;\n this.columnModel = [];\n this.updateColumnModel(this.columns);\n var gCols = this.columnModel;\n for (var i = 0; i < gCols.length; i++) {\n if (field === gCols[i].field) {\n column = gCols[i];\n }\n }\n return column;\n };\n /**\n * @hidden\n */\n // Need to have all columns while filtering with ColumnVirtualization.\n Grid.prototype.grabColumnByUidFromAllCols = function (uid) {\n var column;\n this.columnModel = [];\n this.updateColumnModel(this.columns);\n var gCols = this.columnModel;\n for (var i = 0; i < gCols.length; i++) {\n if (uid === gCols[i].uid) {\n column = gCols[i];\n }\n }\n return column;\n };\n /**\n * Get all filtered records from the Grid and it returns array of objects for the local dataSource, returns a promise object if the Grid has remote data.\n * @return {Object[] | Promise