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 { Dialog } from '@syncfusion/ej2-popups';\nimport { EventHandler, remove } from '@syncfusion/ej2-base';\nimport { parentsUntil, addBiggerDialog } from '../base/util';\nimport * as events from '../base/constant';\nimport { Button } from '@syncfusion/ej2-buttons';\nimport { ResponsiveDialogAction } from '../base/enum';\n/**\n *\n * The `ResponsiveDialogRenderer` module is used to render the responsive dialogs.\n */\nvar ResponsiveDialogRenderer = /** @class */ (function () {\n /**\n * Constructor for Grid Responsive dialog renderer\n * @hidden\n */\n function ResponsiveDialogRenderer(parent, serviceLocator) {\n this.sortedCols = [];\n this.sortPredicate = [];\n this.parent = parent;\n this.serviceLocator = serviceLocator;\n this.addEventListener();\n }\n ResponsiveDialogRenderer.prototype.addEventListener = function () {\n this.parent.on(events.filterDialogClose, this.closeCustomDialog, this);\n this.parent.on(events.setCustomFilterHeader, this.setCustomFilterHeader, this);\n this.parent.on(events.refreshCustomFilterOkBtn, this.refreshCustomFilterOkBtn, this);\n this.parent.on(events.renderResponsiveCmenu, this.renderResponsiveContextMenu, this);\n this.parent.on(events.filterCmenuSelect, this.renderCustomFilterDiv, this);\n this.parent.on(events.customFilterClose, this.customExFilterClose, this);\n this.parent.on(events.refreshCustomFilterClearBtn, this.refreshCustomFilterClearBtn, this);\n this.onActionCompleteFn = this.editComplate.bind(this);\n this.parent.addEventListener(events.actionComplete, this.onActionCompleteFn);\n };\n ResponsiveDialogRenderer.prototype.customExFilterClose = function () {\n this.isCustomDlgRender = false;\n };\n ResponsiveDialogRenderer.prototype.renderCustomFilterDiv = function () {\n var header = this.customResponsiveDlg.element.querySelector('.e-dlg-header-content');\n var title = header.querySelector('.e-dlg-custom-header');\n var closeBtn = header.querySelector('.e-dlg-closeicon-btn');\n this.isCustomDlgRender = true;\n this.parent.filterModule.filterModule.closeDialog();\n this.saveBtn.element.style.display = '';\n this.refreshCustomFilterOkBtn({ disabled: false });\n this.backBtn.element.style.display = 'none';\n closeBtn.style.display = '';\n title.innerHTML = this.parent.localeObj.getConstant('CustomFilter');\n var content = this.customResponsiveDlg.element.querySelector('.e-dlg-content');\n this.customExcelFilterParent = this.parent.createElement('div', { className: 'e-xl-customfilterdiv e-default-filter' });\n content.appendChild(this.customExcelFilterParent);\n };\n ResponsiveDialogRenderer.prototype.renderResponsiveContextMenu = function (args) {\n if (this.action === ResponsiveDialogAction.isFilter) {\n var content = this.customResponsiveDlg.element.querySelector('.e-dlg-content');\n var header = this.customResponsiveDlg.element.querySelector('.e-dlg-header-content');\n var closeBtn = header.querySelector('.e-dlg-closeicon-btn');\n var text = header.querySelector('.e-dlg-custom-header');\n if (args.isOpen) {\n content.firstChild.style.display = 'none';\n content.appendChild(args.target);\n closeBtn.style.display = 'none';\n this.saveBtn.element.style.display = 'none';\n this.filterClearBtn.element.style.display = 'none';\n text.innerHTML = args.header;\n var backBtn = this.parent.createElement('button');\n var span = this.parent.createElement('span', { className: 'e-btn-icon e-resfilterback e-icons' });\n backBtn.appendChild(span);\n this.backBtn = new Button({\n cssClass: 'e-res-back-btn'\n });\n this.backBtn.appendTo(backBtn);\n text.parentElement.insertBefore(backBtn, text);\n }\n else if (this.backBtn && !this.isCustomDlgRender) {\n content.firstChild.style.display = '';\n remove(this.backBtn.element);\n closeBtn.style.display = '';\n this.saveBtn.element.style.display = '';\n if (this.isFiltered) {\n this.filterClearBtn.element.style.display = '';\n }\n text.innerHTML = this.getHeaderTitle({ action: ResponsiveDialogAction.isFilter });\n }\n }\n };\n ResponsiveDialogRenderer.prototype.refreshCustomFilterClearBtn = function (args) {\n if (this.filterClearBtn) {\n this.isFiltered = args.isFiltered;\n this.filterClearBtn.element.style.display = args.isFiltered ? '' : 'none';\n }\n };\n ResponsiveDialogRenderer.prototype.refreshCustomFilterOkBtn = function (args) {\n if (this.saveBtn) {\n this.saveBtn.disabled = args.disabled;\n }\n };\n ResponsiveDialogRenderer.prototype.renderResponsiveContent = function (col) {\n var _this = this;\n var gObj = this.parent;\n if (col) {\n this.filterParent = this.parent.createElement('div', { className: 'e-mainfilterdiv e-default-filter', id: col.uid + '-main-filter' });\n return this.filterParent;\n }\n else {\n var cols = gObj.getColumns();\n this.customColumnDiv = gObj.createElement('div', { className: 'columndiv', styles: 'width: 100%' });\n var sortBtnParent = gObj.createElement('div', { className: 'e-ressortbutton-parent' });\n var filteredCols = [];\n if (this.action === ResponsiveDialogAction.isFilter) {\n for (var i = 0; i < gObj.filterSettings.columns.length; i++) {\n filteredCols.push(gObj.filterSettings.columns[i].field);\n }\n }\n for (var i = 0; i < cols.length; i++) {\n var cDiv = gObj.createElement('div', { className: 'e-responsivecoldiv' });\n cDiv.setAttribute('data-e-mappingname', cols[i].field);\n cDiv.setAttribute('data-e-mappinguid', cols[i].uid);\n var span = gObj.createElement('span', { innerHTML: cols[i].headerText, className: 'e-res-header-text' });\n cDiv.appendChild(span);\n this.customColumnDiv.appendChild(cDiv);\n if (this.action === ResponsiveDialogAction.isSort) {\n var fields = this.getSortedFieldsAndDirections('field');\n var index = fields.indexOf(cols[i].field);\n var button = gObj.createElement('button', { id: gObj.element.id + cols[i].field + 'sortbutton' });\n var clone = sortBtnParent.cloneNode();\n clone.appendChild(button);\n cDiv.appendChild(clone);\n var btnObj = new Button({\n cssClass: 'e-ressortbutton'\n });\n btnObj.appendTo(button);\n button.innerHTML = index > -1 ? this.parent.sortSettings.columns[index].direction : 'None';\n button.onclick = function (e) {\n _this.sortButtonClickHandler(e.target);\n };\n }\n if (this.action === ResponsiveDialogAction.isFilter && filteredCols.indexOf(cols[i].field) > -1) {\n var divIcon = gObj.createElement('div', { className: 'e-icons e-res-icon e-filtersetdiv' });\n var iconSpan = gObj.createElement('span', { className: 'e-icons e-res-icon e-filterset' });\n iconSpan.setAttribute('colType', cols[i].type);\n divIcon.appendChild(iconSpan);\n cDiv.appendChild(divIcon);\n }\n }\n EventHandler.add(this.customColumnDiv, 'click', this.customFilterColumnClickHandler, this);\n return this.customColumnDiv;\n }\n };\n ResponsiveDialogRenderer.prototype.getSortedFieldsAndDirections = function (name) {\n var fields = [];\n for (var i = 0; i < this.parent.sortSettings.columns.length; i++) {\n fields.push(this.parent.sortSettings.columns[i][name]);\n }\n return fields;\n };\n ResponsiveDialogRenderer.prototype.sortButtonClickHandler = function (target) {\n if (target) {\n var columndiv = parentsUntil(target, 'e-responsivecoldiv');\n var field = columndiv.getAttribute('data-e-mappingname');\n if (!this.parent.allowMultiSorting) {\n this.sortPredicate = [];\n this.sortedCols = [];\n this.isSortApplied = false;\n this.resetSortButtons(target);\n }\n var txt = target.textContent;\n var direction = txt === 'None' ? 'Ascending' : txt === 'Ascending' ? 'Descending' : 'None';\n target.innerHTML = direction;\n this.setSortedCols(field, direction);\n }\n };\n ResponsiveDialogRenderer.prototype.resetSortButtons = function (target) {\n var buttons = [].slice.call(this.customColumnDiv.querySelectorAll('.e-ressortbutton'));\n for (var i = 0; i < buttons.length; i++) {\n if (buttons[i] !== target) {\n buttons[i].innerHTML = 'None';\n }\n }\n };\n ResponsiveDialogRenderer.prototype.setSortedCols = function (field, direction) {\n var fields = this.getCurrentSortedFields();\n var index = fields.indexOf(field);\n if (this.parent.allowMultiSorting && index > -1) {\n this.sortedCols.splice(index, 1);\n this.sortPredicate.splice(index, 1);\n }\n this.isSortApplied = true;\n if (direction !== 'None') {\n this.sortedCols.push(field);\n this.sortPredicate.push({ field: field, direction: direction });\n }\n };\n ResponsiveDialogRenderer.prototype.getCurrentSortedFields = function () {\n var fields = [];\n for (var i = 0; i < this.sortedCols.length; i++) {\n fields.push(this.sortedCols[i]);\n }\n return fields;\n };\n ResponsiveDialogRenderer.prototype.customFilterColumnClickHandler = function (e) {\n if (this.action !== ResponsiveDialogAction.isFilter) {\n return;\n }\n var gObj = this.parent;\n var target = e.target;\n if (gObj.filterSettings.type !== 'FilterBar') {\n if (target.classList.contains('e-responsivecoldiv') || target.parentElement.classList.contains('e-responsivecoldiv')) {\n var field = target.getAttribute('data-e-mappingname');\n if (!field) {\n field = target.parentElement.getAttribute('data-e-mappingname');\n }\n if (field) {\n var col = gObj.getColumnByField(field);\n this.isRowResponsive = true;\n this.showResponsiveDialog(col);\n }\n }\n else if (target.classList.contains('e-filterset') || target.parentElement.classList.contains('e-filtersetdiv')) {\n var colDiv = parentsUntil(target, 'e-responsivecoldiv');\n if (colDiv) {\n var field = colDiv.getAttribute('data-e-mappingname');\n var col = gObj.getColumnByField(field);\n if (col.filter.type === 'Menu' || (!col.filter.type && gObj.filterSettings.type === 'Menu')) {\n this.isDialogClose = true;\n }\n this.parent.filterModule.filterModule.clearCustomFilter(col);\n this.removeCustomDlgFilterEle(target);\n }\n }\n }\n };\n /**\n * To show the responsive custom filter dialog\n * @return {void}\n * @hidden\n */\n ResponsiveDialogRenderer.prototype.showResponsiveDialog = function (col) {\n if (this.parent.rowRenderingMode === 'Vertical' && this.action === ResponsiveDialogAction.isFilter && !this.isRowResponsive) {\n this.renderCustomFilterDialog();\n this.customFilterDlg.show(true);\n this.customFilterDlg.element.style.maxHeight = '100%';\n }\n else {\n this.filteredCol = col;\n this.renderResponsiveDialog(col);\n if (this.parent.enableAdaptiveUI && col) {\n this.parent.filterModule.setFilterModel(col);\n this.parent.filterModule.filterModule.openDialog(this.parent.filterModule.createOptions(col, undefined));\n }\n this.customResponsiveDlg.show(true);\n this.customResponsiveDlg.element.style.maxHeight = '100%';\n this.setTopToChildDialog(this.customResponsiveDlg.element);\n }\n };\n ResponsiveDialogRenderer.prototype.setTopToChildDialog = function (dialogEle) {\n var child = dialogEle.querySelector('.e-dialog');\n if (child) {\n var top_1 = dialogEle.querySelector('.e-dlg-header-content').getBoundingClientRect().height;\n child.style.top = top_1 + 'px';\n }\n };\n ResponsiveDialogRenderer.prototype.renderCustomFilterDialog = function (col) {\n var gObj = this.parent;\n if (this.action === ResponsiveDialogAction.isFilter && gObj.filterSettings.type === 'FilterBar') {\n return;\n }\n var outerDiv = this.parent.createElement('div', {\n id: gObj.element.id + 'customfilter', className: 'e-customfilterdiv e-responsive-dialog'\n });\n this.parent.element.appendChild(outerDiv);\n this.customFilterDlg = this.getDialogOptions(col, true);\n this.customFilterDlg.appendTo(outerDiv);\n };\n ResponsiveDialogRenderer.prototype.getDialogOptions = function (col, isCustomFilter, id) {\n var options = new Dialog({\n isModal: true,\n showCloseIcon: true,\n closeOnEscape: false,\n locale: this.parent.locale,\n target: this.parent.adaptiveDlgTarget ? this.parent.adaptiveDlgTarget : document.body,\n visible: false,\n enableRtl: this.parent.enableRtl,\n content: this.renderResponsiveContent(col),\n open: this.dialogOpen.bind(this),\n created: this.dialogCreated.bind(this),\n close: this.beforeDialogClose.bind(this),\n width: '100%',\n height: '100%',\n animationSettings: { effect: 'None' },\n });\n var isStringTemplate = 'isStringTemplate';\n options[isStringTemplate] = true;\n if (isCustomFilter) {\n options.header = this.renderResponsiveHeader(undefined, true);\n options.cssClass = 'e-customfilter';\n }\n else {\n options.header = this.renderResponsiveHeader();\n options.cssClass = this.parent.rowRenderingMode === 'Vertical' && this.action === ResponsiveDialogAction.isFilter\n ? 'e-res' + id + ' e-row-responsive-filter' : 'e-res' + id;\n }\n return options;\n };\n ResponsiveDialogRenderer.prototype.renderResponsiveDialog = function (col) {\n var gObj = this.parent;\n if (this.action === ResponsiveDialogAction.isFilter && gObj.filterSettings.type === 'FilterBar') {\n return;\n }\n var id = this.action === ResponsiveDialogAction.isFilter ? 'filter' : 'sort';\n var outerDiv = this.parent.createElement('div', {\n id: gObj.element.id + 'responsive' + id, className: 'e-res' + id + 'div e-responsive-dialog'\n });\n this.parent.element.appendChild(outerDiv);\n this.customResponsiveDlg = this.getDialogOptions(col, false, id);\n this.customResponsiveDlg.appendTo(outerDiv);\n };\n ResponsiveDialogRenderer.prototype.dialogCreated = function () {\n addBiggerDialog(this.parent);\n };\n ResponsiveDialogRenderer.prototype.dialogOpen = function () {\n if (this.action === ResponsiveDialogAction.isSort && this.parent.allowMultiSorting) {\n for (var i = 0; i < this.parent.sortSettings.columns.length; i++) {\n this.sortedCols.push(this.parent.sortSettings.columns[i].field);\n var sortField = this.parent.sortSettings.columns[i].field;\n var sortDirection = this.parent.sortSettings.columns[i].direction;\n this.sortPredicate.push({ field: sortField, direction: sortDirection });\n }\n }\n };\n ResponsiveDialogRenderer.prototype.beforeDialogClose = function (args) {\n this.isDialogClose = args.element && !args.element.querySelector('.e-xl-customfilterdiv')\n && args.element.classList.contains('e-resfilterdiv');\n if (this.action === ResponsiveDialogAction.isFilter) {\n if (args.element.classList.contains('e-resfilterdiv')) {\n this.parent.filterModule.filterModule.closeResponsiveDialog(this.isCustomDlgRender);\n }\n else if (args.element.classList.contains('e-customfilterdiv')) {\n this.closeCustomFilter();\n }\n }\n else if (this.action === ResponsiveDialogAction.isSort) {\n this.closeCustomDialog();\n }\n this.parent.off(events.enterKeyHandler, this.keyHandler);\n };\n ResponsiveDialogRenderer.prototype.sortColumn = function () {\n if (!this.isSortApplied) {\n this.closeCustomDialog();\n return;\n }\n if (this.sortPredicate.length) {\n this.parent.setProperties({ sortSettings: { columns: [] } }, true);\n }\n for (var i = 0; i < this.sortPredicate.length; i++) {\n this.parent.sortColumn(this.sortPredicate[i].field, this.sortPredicate[i].direction, this.parent.allowMultiSorting);\n }\n if (!this.sortPredicate.length) {\n this.parent.clearSorting();\n }\n this.closeCustomDialog();\n };\n ResponsiveDialogRenderer.prototype.getHeaderTitle = function (args) {\n var gObj = this.parent;\n var title;\n if (this.action === ResponsiveDialogAction.isEdit) {\n title = gObj.localeObj.getConstant('EditFormTitle') + args.primaryKeyValue[0];\n }\n else if (this.action === ResponsiveDialogAction.isAdd) {\n title = gObj.localeObj.getConstant('AddFormTitle');\n }\n else if (this.action === ResponsiveDialogAction.isFilter) {\n title = gObj.localeObj.getConstant('FilterButton');\n }\n else if (this.action === ResponsiveDialogAction.isSort) {\n title = gObj.localeObj.getConstant('Sort');\n }\n return title;\n };\n ResponsiveDialogRenderer.prototype.getDialogName = function (action) {\n var name;\n if (action === ResponsiveDialogAction.isAdd || action === ResponsiveDialogAction.isEdit) {\n name = 'dialogEdit_wrapper_title';\n }\n else if (action === ResponsiveDialogAction.isFilter) {\n name = 'responsive_filter_dialog_wrapper';\n }\n return name;\n };\n ResponsiveDialogRenderer.prototype.getButtonText = function (action) {\n var text;\n if (action === ResponsiveDialogAction.isAdd || action === ResponsiveDialogAction.isEdit) {\n text = 'Save';\n }\n else if (action === ResponsiveDialogAction.isFilter || this.action === ResponsiveDialogAction.isSort) {\n text = 'OKButton';\n }\n return text;\n };\n /** @hidden */\n ResponsiveDialogRenderer.prototype.renderResponsiveHeader = function (args, isCustomFilter) {\n var _this = this;\n var gObj = this.parent;\n gObj.on(events.enterKeyHandler, this.keyHandler, this);\n var id = gObj.element.id + this.getDialogName(this.action);\n var header = gObj.createElement('div', { className: 'e-res-custom-element' });\n var titleDiv = gObj.createElement('div', { className: 'e-dlg-custom-header', id: id });\n titleDiv.innerHTML = this.getHeaderTitle(args);\n header.appendChild(titleDiv);\n var saveBtn = gObj.createElement('button');\n if (!isCustomFilter) {\n this.saveBtn = new Button({\n cssClass: 'e-primary e-flat e-res-apply-btn',\n });\n saveBtn.innerHTML = gObj.localeObj.getConstant(this.getButtonText(this.action));\n this.saveBtn.appendTo(saveBtn);\n saveBtn.onclick = function (e) {\n _this.dialogHdrBtnClickHandler();\n };\n }\n var isSort = this.action === ResponsiveDialogAction.isSort;\n var isFilter = this.action === ResponsiveDialogAction.isFilter;\n if (isFilter || isSort) {\n var id_1 = isSort ? 'sort' : 'filter';\n var clearBtn = gObj.createElement('button');\n this.filterClearBtn = new Button({\n cssClass: 'e-primary e-flat e-res-' + id_1 + '-clear-btn',\n });\n if (isFilter) {\n var span = gObj.createElement('span', { className: 'e-btn-icon e-icon-filter-clear e-icons' });\n clearBtn.appendChild(span);\n }\n else {\n clearBtn.innerHTML = gObj.localeObj.getConstant('Clear');\n }\n header.appendChild(clearBtn);\n this.filterClearBtn.appendTo(clearBtn);\n clearBtn.onclick = function (e) {\n if ((parentsUntil(e.target, 'e-customfilter'))) {\n _this.parent.filterModule.clearFiltering();\n _this.removeCustomDlgFilterEle();\n }\n else {\n if (isFilter) {\n _this.filterClear();\n }\n else {\n _this.resetSortButtons();\n _this.sortedCols = [];\n _this.sortPredicate = [];\n _this.isSortApplied = true;\n }\n }\n };\n header.appendChild(clearBtn);\n }\n if (!isCustomFilter) {\n header.appendChild(saveBtn);\n }\n return header;\n };\n ResponsiveDialogRenderer.prototype.filterClear = function () {\n this.parent.filterModule.filterModule.clearCustomFilter(this.filteredCol);\n this.parent.filterModule.filterModule.closeResponsiveDialog();\n };\n ResponsiveDialogRenderer.prototype.dialogHdrBtnClickHandler = function () {\n if (this.action === ResponsiveDialogAction.isEdit || this.action === ResponsiveDialogAction.isAdd) {\n this.parent.endEdit();\n }\n else if (this.action === ResponsiveDialogAction.isFilter) {\n this.parent.filterModule.filterModule.applyCustomFilter({ col: this.filteredCol, isCustomFilter: this.isCustomDlgRender });\n }\n else if (this.action === ResponsiveDialogAction.isSort) {\n this.sortColumn();\n }\n };\n ResponsiveDialogRenderer.prototype.closeCustomDialog = function () {\n if (this.isCustomDlgRender) {\n var mainfilterdiv = this.customResponsiveDlg.element.querySelector('.e-mainfilterdiv');\n remove(mainfilterdiv);\n return;\n }\n this.isRowResponsive = false;\n this.isCustomDlgRender = false;\n this.destroyCustomFilterDialog();\n };\n ResponsiveDialogRenderer.prototype.destroyCustomFilterDialog = function () {\n if (!this.customResponsiveDlg) {\n return;\n }\n var elem = document.getElementById(this.customResponsiveDlg.element.id);\n if (this.customResponsiveDlg && !this.customResponsiveDlg.isDestroyed && elem) {\n this.customResponsiveDlg.destroy();\n remove(elem);\n }\n this.closeCustomFilter();\n if (this.action === ResponsiveDialogAction.isSort) {\n this.sortPredicate = [];\n this.sortedCols = [];\n this.isSortApplied = false;\n }\n };\n ResponsiveDialogRenderer.prototype.closeCustomFilter = function () {\n if (!this.isDialogClose && this.customFilterDlg) {\n var customEle = document.getElementById(this.customFilterDlg.element.id);\n if (this.customFilterDlg && !this.customFilterDlg.isDestroyed && customEle) {\n this.customFilterDlg.destroy();\n remove(customEle);\n }\n }\n this.isDialogClose = false;\n };\n ResponsiveDialogRenderer.prototype.removeCustomDlgFilterEle = function (target) {\n if (target) {\n if (target.parentElement.classList.contains('e-filtersetdiv')) {\n remove(target.parentElement);\n }\n else {\n remove(target);\n }\n }\n else {\n var child = this.customColumnDiv.children;\n for (var i = 0; i < child.length; i++) {\n target = child[i].querySelector('.e-filtersetdiv');\n if (target) {\n remove(target);\n i--;\n }\n }\n }\n };\n ResponsiveDialogRenderer.prototype.setCustomFilterHeader = function (args) {\n if (this.parent.rowRenderingMode !== 'Vertical') {\n return;\n }\n var header = this.customResponsiveDlg.element.querySelector('.e-reslabel');\n if (header && header.firstElementChild) {\n header.firstElementChild.innerHTML = args.title;\n }\n };\n ResponsiveDialogRenderer.prototype.keyHandler = function (e) {\n if (e.keyCode === 13 && ((this.action === ResponsiveDialogAction.isFilter\n && e.target.classList.contains('e-searchinput'))\n || (this.action === ResponsiveDialogAction.isEdit || this.action === ResponsiveDialogAction.isAdd))) {\n this.dialogHdrBtnClickHandler();\n }\n };\n ResponsiveDialogRenderer.prototype.editComplate = function (args) {\n if (args.requestType === 'save' || args.requestType === 'cancel') {\n this.parent.off(events.enterKeyHandler, this.keyHandler);\n }\n };\n ResponsiveDialogRenderer.prototype.removeEventListener = function () {\n if (this.customColumnDiv) {\n EventHandler.remove(this.customColumnDiv, 'click', this.customFilterColumnClickHandler);\n }\n this.parent.off(events.filterDialogClose, this.closeCustomDialog);\n this.parent.off(events.setCustomFilterHeader, this.setCustomFilterHeader);\n this.parent.off(events.refreshCustomFilterOkBtn, this.refreshCustomFilterOkBtn);\n this.parent.off(events.renderResponsiveCmenu, this.renderResponsiveContextMenu);\n this.parent.off(events.filterCmenuSelect, this.renderCustomFilterDiv);\n this.parent.off(events.customFilterClose, this.customExFilterClose);\n this.parent.off(events.refreshCustomFilterClearBtn, this.refreshCustomFilterClearBtn);\n this.parent.removeEventListener(events.actionComplete, this.onActionCompleteFn);\n };\n return ResponsiveDialogRenderer;\n}());\nexport { ResponsiveDialogRenderer };\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","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","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","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