@syncfusion/ej2-layouts 19.2.44 → 19.3.43

package/dist/es6/ej2-layouts.es5.js

@@ -1,4 +1,4 @@
-import { Browser, ChildProperty, Collection, Component, Draggable, Event, EventHandler, NotifyPropertyChanges, Property, SanitizeHtmlHelper, addClass, append, closest, compile, detach, extend, formatUnit, getValue, isBlazor, isNullOrUndefined, isUndefined, removeClass, select, selectAll, setStyleAttribute, setValue, updateBlazorTemplate } from '@syncfusion/ej2-base';
+import { Browser, ChildProperty, Collection, Component, Draggable, Event, EventHandler, NotifyPropertyChanges, Property, SanitizeHtmlHelper, addClass, append, closest, compile, detach, extend, formatUnit, getValue, isNullOrUndefined, isUndefined, removeClass, select, selectAll, setStyleAttribute, setValue } from '@syncfusion/ej2-base';
 
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -260,11 +260,9 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
         this.onReportWindowSize = this.reportWindowSize.bind(this);
         this.wrapper = this.element.cloneNode(true);
         this.wrapperParent = this.element.parentElement;
-        if (!this.checkBlazor()) {
-            removeClass([this.wrapper], ['e-control', 'e-lib', ROOT]);
-            var orientation_1 = this.orientation === 'Horizontal' ? HORIZONTAL_PANE : VERTICAL_PANE;
-            addClass([this.element], orientation_1);
-        }
+        removeClass([this.wrapper], ['e-control', 'e-lib', ROOT]);
+        var orientation = this.orientation === 'Horizontal' ? HORIZONTAL_PANE : VERTICAL_PANE;
+        addClass([this.element], orientation);
         var name = Browser.info.name;
         var css = (name === 'msie') ? 'e-ie' : '';
         this.setCssClass(this.element, css);
@@ -291,19 +289,15 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
      * @private
      */
     Splitter.prototype.render = function () {
-        if (!this.checkBlazor()) {
-            this.checkDataAttributes();
-            this.setCssClass(this.element, this.cssClass);
-            this.isEnabled(this.enabled);
-            this.setDimension(this.getHeight(this.element), this.getWidth(this.element));
-        }
+        this.checkDataAttributes();
+        this.setCssClass(this.element, this.cssClass);
+        this.isEnabled(this.enabled);
+        this.setDimension(this.getHeight(this.element), this.getWidth(this.element));
         this.createSplitPane(this.element);
         this.addSeparator(this.element);
         this.getPanesDimensions();
         this.setPaneSettings();
-        if (!this.checkBlazor()) {
-            this.setRTL(this.enableRtl);
-        }
+        this.setRTL(this.enableRtl);
         if (this.enableReversePanes) {
             this.setReversePane();
         }
@@ -331,11 +325,15 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
             this.totalPercent = previousFlexBasis + nextFlexBasis;
             this.totalWidth = this.convertPercentageToPixel(this.totalPercent + '%');
             if (e.type === 'keydown' && (!isNullOrUndefined(e.keyCode))) {
-                if ((e.keyCode === 39 || (e.keyCode === 40)) && nextPaneSize > 0) {
+                if ((e.keyCode === 39 || (e.keyCode === 40)) && nextPaneSize > 0 &&
+                    (this.getMinInPixel(this.paneSettings[this.nextPaneIndex].min) <
+                        this.convertPercentageToPixel((nextFlexBasis - 1) + '%'))) {
                     this.previousPane.style.flexBasis = (previousFlexBasis + 1) + '%';
                     this.nextPane.style.flexBasis = (nextFlexBasis - 1) + '%';
                 }
-                else if ((e.keyCode === 37 || (e.keyCode === 38)) && prePaneSize > 0) {
+                else if ((e.keyCode === 37 || (e.keyCode === 38)) && prePaneSize > 0 &&
+                    (this.getMinInPixel(this.paneSettings[this.prevPaneIndex].min) <
+                        this.convertPercentageToPixel((previousFlexBasis - 1) + '%'))) {
                     this.previousPane.style.flexBasis = (previousFlexBasis - 1) + '%';
                     this.nextPane.style.flexBasis = (nextFlexBasis + 1) + '%';
                 }
@@ -345,13 +343,15 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
             this.totalWidth = (this.orientation === 'Horizontal') ? this.previousPane.offsetWidth + this.nextPane.offsetWidth :
                 this.previousPane.offsetHeight + this.nextPane.offsetHeight;
             if (e.type === 'keydown' && (!isNullOrUndefined(e.keyCode))) {
-                if ((e.keyCode === 39 || (e.keyCode === 40)) && nextPaneSize > 0) {
+                if ((e.keyCode === 39 || (e.keyCode === 40)) && nextPaneSize > 0 &&
+                    (this.getMinInPixel(this.paneSettings[this.nextPaneIndex].min) < (nextPaneSize + splitBarSize))) {
                     this.addStaticPaneClass();
                     this.previousPane.style.flexBasis = (prePaneSize + splitBarSize) + 'px';
                     this.nextPane.style.flexBasis = (nextPaneSize < splitBarSize) ? '0px' :
                         (nextPaneSize - splitBarSize) + 'px';
                 }
-                else if ((e.keyCode === 37 || (e.keyCode === 38)) && prePaneSize > 0) {
+                else if ((e.keyCode === 37 || (e.keyCode === 38)) && prePaneSize > 0 &&
+                    (this.getMinInPixel(this.paneSettings[this.prevPaneIndex].min) < (prePaneSize - splitBarSize))) {
                     this.addStaticPaneClass();
                     this.previousPane.style.flexBasis = (prePaneSize < splitBarSize) ? '0px' :
                         (prePaneSize - splitBarSize) + 'px';
@@ -372,11 +372,12 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
                 && (!isPrevpaneExpanded && !isNextpaneCollapsed && !isPrevpaneCollapsed || (isPrevpaneExpanded) && !isNextpaneCollapsed) &&
                 document.activeElement.classList.contains(SPLIT_BAR) && (this.paneSettings[index].resizable &&
                 this.paneSettings[index + 1].resizable)) {
+                event.preventDefault();
                 this.checkPaneSize(event);
                 this.triggerResizing(event);
             }
             else if (event.keyCode === 13 && this.paneSettings[index].collapsible &&
-                document.activeElement.classList.contains(SPLIT_BAR)) {
+                document.activeElement.classList.contains(SPLIT_BAR) && this.currentSeparator.classList.contains(SPLIT_BAR_ACTIVE)) {
                 if (!this.previousPane.classList.contains(COLLAPSE_PANE)) {
                     this.collapse(index);
                     addClass([this.currentSeparator], SPLIT_BAR_ACTIVE);
@@ -388,6 +389,18 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
+    Splitter.prototype.getMinInPixel = function (minValue) {
+        var min;
+        if (isNullOrUndefined(minValue)) {
+            return 0;
+        }
+        var paneMinRange = this.convertPixelToNumber(minValue.toString());
+        if (minValue.indexOf('%') > 0) {
+            paneMinRange = this.convertPercentageToPixel(minValue);
+        }
+        min = this.convertPixelToNumber((paneMinRange).toString());
+        return min;
+    };
     /**
      * @param {string} value - specifies the string value
      * @returns {string} returns the string
@@ -461,9 +474,6 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
         });
         this.restoreElem();
     };
-    Splitter.prototype.checkBlazor = function () {
-        return isBlazor() && this.isServerRendered;
-    };
     Splitter.prototype.setPaneSettings = function () {
         var childCount = this.allPanes.length;
         var paneCollection = [];
@@ -863,52 +873,19 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
         this.isResizable() ? this.allPanes[index].classList.add(RESIZABLE_PANE) : this.allPanes[index].classList.remove(RESIZABLE_PANE);
     };
     Splitter.prototype.addSeparator = function (target) {
-        var _this = this;
         var childCount = this.allPanes.length;
         var clonedEle = target.children;
         var separator;
-        var proxy;
-        if (this.checkBlazor()) {
-            for (var j = 0; j < this.element.children.length; j++) {
-                if (this.element.children[j].classList.contains(SPLIT_BAR)) {
-                    this.allBars.push(this.element.children[j]);
-                }
-            }
-        }
         for (var i = 0; i < childCount; i++) {
             if (i < childCount - 1) {
-                if (!this.checkBlazor()) {
-                    separator = this.createSeparator(i);
-                    setStyleAttribute(separator, { 'order': (i * 2) + 1 });
-                    this.separatorOrder.push((i * 2) + 1);
-                    clonedEle[i].parentNode.appendChild(separator);
-                    this.currentSeparator = separator;
-                    separator.setAttribute('role', 'separator');
-                    separator.setAttribute('aria-orientation', this.orientation.toLowerCase());
-                }
-                if (this.checkBlazor()) {
-                    proxy = this;
-                    separator = this.allBars[i];
-                    this.updateIconClass();
-                }
-                if (!this.checkBlazor()) {
-                    this.wireClickEvents();
-                }
-                if (this.checkBlazor() && !isNullOrUndefined(separator)) {
-                    this.currentSeparator = separator;
-                    this.addMouseActions(separator);
-                    this.wireClickEvents();
-                    separator.addEventListener('focus', function () {
-                        if (document.activeElement.classList.contains('e-split-bar')) {
-                            proxy.currentSeparator = document.activeElement;
-                            proxy.currentSeparator.classList.add(SPLIT_BAR_ACTIVE);
-                        }
-                        _this.getPaneDetails();
-                    });
-                    separator.addEventListener('blur', function () {
-                        proxy.currentSeparator.classList.remove(SPLIT_BAR_ACTIVE);
-                    });
-                }
+                separator = this.createSeparator(i);
+                setStyleAttribute(separator, { 'order': (i * 2) + 1 });
+                this.separatorOrder.push((i * 2) + 1);
+                clonedEle[i].parentNode.appendChild(separator);
+                this.currentSeparator = separator;
+                separator.setAttribute('role', 'separator');
+                separator.setAttribute('aria-orientation', this.orientation.toLowerCase());
+                this.wireClickEvents();
                 if (!isNullOrUndefined(separator)) {
                     if (this.isResizable()) {
                         EventHandler.add(separator, 'mousedown', this.onMouseDown, this);
@@ -1070,7 +1047,7 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
             var updatePane = void 0;
             var flexPane = void 0;
             for (var i = 0; i < paneCount; i++) {
-                if (this.paneSettings[i].min !== null) {
+                if (!isNullOrUndefined(this.paneSettings[i].min)) {
                     paneMinRange = this.convertPixelToNumber((this.paneSettings[i].min).toString());
                     if (this.paneSettings[i].min.indexOf('%') > 0) {
                         paneMinRange = this.convertPercentageToPixel(this.paneSettings[i].min);
@@ -1367,13 +1344,7 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Splitter.prototype.beforeAction = function (e) {
-        var eventArgs = isBlazor() ? {
-            element: this.element,
-            event: e,
-            index: [this.prevPaneIndex, this.nextPaneIndex],
-            separator: this.currentSeparator,
-            cancel: false
-        } : {
+        var eventArgs = {
             element: this.element,
             event: e,
             pane: [this.previousPane, this.nextPane],
@@ -1472,12 +1443,7 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Splitter.prototype.afterAction = function (e) {
-        var eventArgs = isBlazor() ? {
-            element: this.element,
-            event: e,
-            index: [this.prevPaneIndex, this.nextPaneIndex],
-            separator: this.currentSeparator
-        } : {
+        var eventArgs = {
             element: this.element,
             event: e,
             pane: [this.previousPane, this.nextPane],
@@ -1490,10 +1456,6 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
         this.currentBarIndex = this.getOrderIndex(parseInt(e.target.parentElement.style.order, 10), 'splitbar');
     };
     Splitter.prototype.getSeparatorIndex = function (target) {
-        var separator = this.orientation === 'Horizontal' ? SPLIT_H_BAR : SPLIT_V_BAR;
-        if (this.checkBlazor() && this.allBars.length < 1) {
-            this.allBars = selectAll('.' + separator, this.element);
-        }
         var array = [].slice.call(this.allBars);
         array = this.enableReversePanes ? array.reverse() : array;
         return array.indexOf(target);
@@ -1523,13 +1485,7 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
         this.getPaneDetails();
     };
     Splitter.prototype.triggerResizing = function (e) {
-        var eventArgs = isBlazor() ? {
-            element: this.element,
-            event: e,
-            index: [this.prevPaneIndex, this.nextPaneIndex],
-            paneSize: [this.prePaneDimenson, this.nextPaneDimension],
-            separator: this.currentSeparator
-        } : {
+        var eventArgs = {
             element: this.element,
             event: e,
             pane: [this.previousPane, this.nextPane],
@@ -1550,13 +1506,7 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
         addClass([this.currentSeparator], SPLIT_BAR_ACTIVE);
         this.updateCursorPosition(e, 'previous');
         this.getPaneDetails();
-        var eventArgs = isBlazor() ? {
-            element: this.element,
-            event: e,
-            index: [this.getPreviousPaneIndex(), this.getNextPaneIndex()],
-            separator: this.currentSeparator,
-            cancel: false
-        } : {
+        var eventArgs = {
             element: this.element,
             event: e,
             pane: [this.previousPane, this.nextPane],
@@ -1941,13 +1891,7 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
     Splitter.prototype.onMouseUp = function (e) {
         removeClass([this.currentSeparator], SPLIT_BAR_ACTIVE);
         this.unwireResizeEvents();
-        var eventArgs = isBlazor() ? {
-            event: e,
-            element: this.element,
-            index: [this.prevPaneIndex, this.nextPaneIndex],
-            separator: this.currentSeparator,
-            paneSize: [this.prePaneDimenson, this.nextPaneDimension]
-        } : {
+        var eventArgs = {
             event: e,
             element: this.element,
             pane: [this.previousPane, this.nextPane],
@@ -2049,12 +1993,7 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
         }
         var templateFUN;
         if (!isNullOrUndefined(templateFn)) {
-            if (isBlazor() && !this.isStringTemplate) {
-                templateFUN = templateFn({}, this, prop, this.element.id + 'content' + this.allPanes.length.toString(), this.isStringTemplate);
-            }
-            else {
-                templateFUN = templateFn({}, this, prop, this.element.id + 'content' + this.allPanes.length.toString(), true);
-            }
+            templateFUN = templateFn({}, this, prop, this.element.id + 'content' + this.allPanes.length.toString(), true);
         }
         if (!isNullOrUndefined(templateFn) && templateFUN && templateFUN.length > 0) {
             [].slice.call(templateFUN).forEach(function (el) {
@@ -2068,13 +2007,11 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
     };
     Splitter.prototype.createSplitPane = function (target) {
         var childCount = target.children.length;
-        if (!this.checkBlazor()) {
-            for (var i = 0; i < this.paneSettings.length; i++) {
-                if (childCount < this.paneSettings.length) {
-                    var childElement = this.createElement('div');
-                    this.element.appendChild(childElement);
-                    childCount = childCount + 1;
-                }
+        for (var i = 0; i < this.paneSettings.length; i++) {
+            if (childCount < this.paneSettings.length) {
+                var childElement = this.createElement('div');
+                this.element.appendChild(childElement);
+                childCount = childCount + 1;
             }
         }
         childCount = target.children.length;
@@ -2084,30 +2021,23 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
             for (var i = 0; i < childCount; i++) {
                 // To accept only div and span element as pane
                 if (child[i].nodeName === 'DIV' || child[i].nodeName === 'SPAN') {
-                    if (this.checkBlazor() && child[i].classList.contains(PANE)) {
-                        this.allPanes.push(child[i]);
+                    this.allPanes.push(child[i]);
+                    if (this.orientation === 'Horizontal') {
+                        addClass([child[i]], [PANE, SPLIT_H_PANE, SCROLL_PANE]);
+                        this.panesDimension(i, child);
                     }
-                    else if (!this.checkBlazor()) {
-                        this.allPanes.push(child[i]);
+                    else {
+                        addClass([child[i]], [PANE, SPLIT_V_PANE, SCROLL_PANE]);
+                        this.panesDimension(i, child);
                     }
-                    if (!this.checkBlazor()) {
-                        if (this.orientation === 'Horizontal') {
-                            addClass([child[i]], [PANE, SPLIT_H_PANE, SCROLL_PANE]);
-                            this.panesDimension(i, child);
-                        }
-                        else {
-                            addClass([child[i]], [PANE, SPLIT_V_PANE, SCROLL_PANE]);
-                            this.panesDimension(i, child);
-                        }
-                        if (!isNullOrUndefined(this.paneSettings[i]) && !isNullOrUndefined(this.paneSettings[i].content)) {
-                            this.setTemplate(this.paneSettings[i].content, child[i]);
-                        }
-                        if (!isNullOrUndefined(this.paneSettings[i]) && this.paneSettings[i].cssClass) {
-                            this.setCssClass(child[i], this.paneSettings[i].cssClass);
-                        }
-                        if (!isNullOrUndefined(this.paneSettings[i])) {
-                            this.paneCollapsible(child[i], i);
-                        }
+                    if (!isNullOrUndefined(this.paneSettings[i]) && !isNullOrUndefined(this.paneSettings[i].content)) {
+                        this.setTemplate(this.paneSettings[i].content, child[i]);
+                    }
+                    if (!isNullOrUndefined(this.paneSettings[i]) && this.paneSettings[i].cssClass) {
+                        this.setCssClass(child[i], this.paneSettings[i].cssClass);
+                    }
+                    if (!isNullOrUndefined(this.paneSettings[i])) {
+                        this.paneCollapsible(child[i], i);
                     }
                 }
             }
@@ -2140,24 +2070,15 @@ var Splitter = /** @__PURE__ @class */ (function (_super) {
      */
     Splitter.prototype.destroy = function () {
         if (!this.isDestroyed) {
-            if (!this.checkBlazor()) {
-                _super.prototype.destroy.call(this);
-            }
+            _super.prototype.destroy.call(this);
             EventHandler.remove(document, 'touchstart click', this.onDocumentClick);
+            this.element.ownerDocument.defaultView.removeEventListener('resize', this.onReportWindowSize, true);
             while (this.element.attributes.length > 0) {
                 this.element.removeAttribute(this.element.attributes[0].name);
             }
-            if (this.checkBlazor()) {
-                var splitNodes = this.element.children;
-                for (var i = splitNodes.length - 1; i >= 0; i--) {
-                    detach(splitNodes[i]);
-                }
-            }
-            else {
-                this.element.innerHTML = this.wrapper.innerHTML;
-                for (var i = 0; i < this.wrapper.attributes.length; i++) {
-                    this.element.setAttribute(this.wrapper.attributes[i].name, this.wrapper.attributes[i].value);
-                }
+            this.element.innerHTML = this.wrapper.innerHTML;
+            for (var i = 0; i < this.wrapper.attributes.length; i++) {
+                this.element.setAttribute(this.wrapper.attributes[i].name, this.wrapper.attributes[i].value);
             }
             if (this.refreshing) {
                 addClass([this.element], ['e-control', 'e-lib', ROOT]);
@@ -2464,7 +2385,6 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
         _this.mouseY = 0;
         _this.minTop = 0;
         _this.minLeft = 0;
-        _this.isBlazor = false;
         _this.isInlineRendering = false;
         _this.removeAllCalled = false;
         // to check whether removePanel is executed in mobile device
@@ -2481,7 +2401,6 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
      * @private
      */
     DashboardLayout.prototype.preRender = function () {
-        this.isBlazor = (isBlazor() && this.isServerRendered);
         this.panelCollection = [];
         this.sortedArray = [];
         this.gridPanelCollection = [];
@@ -2532,16 +2451,8 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
         }
         this.updateDragArea();
         this.renderComplete();
-        this.updateServerPanelData();
         this.renderReactTemplates();
     };
-    DashboardLayout.prototype.updateServerPanelData = function () {
-        if (isBlazor() && this.isServerRendered) {
-            this.setProperties({ panels: this.panels }, true);
-            this.allowServerDataBinding = true;
-            this.serverDataBind();
-        }
-    };
     DashboardLayout.prototype.initGridLines = function () {
         this.table = document.createElement('table');
         var tbody = document.createElement('tbody');
@@ -2565,8 +2476,7 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
     };
     DashboardLayout.prototype.initialize = function () {
         this.updateRowHeight();
-        if (this.element.childElementCount > 0 && this.element.querySelectorAll('.e-panel').length > 0
-            && !(this.isBlazor && this.panels.length > 0)) {
+        if (this.element.childElementCount > 0 && this.element.querySelectorAll('.e-panel').length > 0) {
             var panelElements = [];
             this.setProperties({ panels: [] }, true);
             this.isInlineRendering = true;
@@ -2590,9 +2500,7 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
                     this.panelPropertyChange(this.panels[i], { col: colValue < 0 ? 0 : colValue });
                 }
                 this.setXYAttributes(panelElement, this.panels[i]);
-                this.isBlazor = false;
                 var panel_1 = this.renderPanels(panelElement, this.panels[i], this.panels[i].id, false);
-                this.isBlazor = (isBlazor() && this.isServerRendered);
                 this.panelCollection.push(panel_1);
                 this.setHeightAndWidth(panelElement, this.panels[i]);
                 this.tempObject = this;
@@ -2623,9 +2531,7 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
         if (!(this.checkMediaQuery())) {
             this.panelResponsiveUpdate();
         }
-        if (!this.isBlazor) {
-            this.setEnableRtl();
-        }
+        this.setEnableRtl();
     };
     DashboardLayout.prototype.checkMediaQuery = function () {
         return (this.mediaQuery && window.matchMedia('(' + this.mediaQuery + ')').matches);
@@ -2742,31 +2648,24 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
         }
     };
     DashboardLayout.prototype.renderPanels = function (cellElement, panelModel, panelId, isStringTemplate) {
-        if (!this.isBlazor) {
-            addClass([cellElement], [panel, panelTransition]);
-        }
+        addClass([cellElement], [panel, panelTransition]);
         var cssClass = panelModel.cssClass ? panelModel.cssClass.split(' ') : null;
         this.panelContent = cellElement.querySelector('.e-panel-container') ?
             cellElement.querySelector('.e-panel-container') :
             this.createSubElement(cssClass, cellElement.id + '_content', panelContainer);
-        if (!this.isBlazor) {
-            cellElement.appendChild(this.panelContent);
-            if (!panelModel.enabled) {
-                this.disablePanel(cellElement);
-            }
+        cellElement.appendChild(this.panelContent);
+        if (!panelModel.enabled) {
+            this.disablePanel(cellElement);
         }
         if (panelModel.header) {
             var headerTemplateElement = cellElement.querySelector('.e-panel-header') ?
                 cellElement.querySelector('.e-panel-header') : this.createSubElement([], cellElement.id + 'template', '');
-            if (!this.isBlazor) {
-                addClass([headerTemplateElement], [header]);
-            }
-            if (!cellElement.querySelector('.e-panel-header') && !this.isBlazor) {
+            addClass([headerTemplateElement], [header]);
+            if (!cellElement.querySelector('.e-panel-header')) {
                 var id = this.element.id + 'HeaderTemplate' + panelId;
                 this.renderTemplate(panelModel.header, headerTemplateElement, id, isStringTemplate, 'header');
                 this.panelContent.appendChild(headerTemplateElement);
                 this.renderReactTemplates();
-                updateBlazorTemplate(id, 'HeaderTemplate', panelModel);
             }
         }
         if (panelModel.content) {
@@ -2777,12 +2676,11 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
                 window.getComputedStyle(this.panelContent.querySelector('.e-panel-header')).height : '0px';
             var contentHeightValue = 'calc( 100% - ' + headerHeight + ')';
             setStyleAttribute(this.panelBody, { height: contentHeightValue });
-            if (!cellElement.querySelector('.e-panel-content') && !this.isBlazor) {
+            if (!cellElement.querySelector('.e-panel-content')) {
                 var id = this.element.id + 'ContentTemplate' + panelId;
                 this.renderTemplate(panelModel.content, this.panelBody, id, isStringTemplate, 'content');
                 this.panelContent.appendChild(this.panelBody);
                 this.renderReactTemplates();
-                updateBlazorTemplate(id, 'ContentTemplate', panelModel);
             }
         }
         return cellElement;
@@ -3038,7 +2936,6 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
         if (isNullOrUndefined(this.downTarget)) {
             return;
         }
-        this.updateServerPanelData();
         this.upTarget = this.downTarget;
         var el = closest((this.upTarget), '.e-panel');
         var args = { event: e, element: el, isInteracted: true };
@@ -3322,18 +3219,9 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
                     panelElement.style.height = '' + updatedHeight + 'px';
                 }
                 this.resizeHeight = true;
-                if (this.addPanelCalled && this.isBlazor) {
-                    var panelProp = this.getActualProperties(updatedPanel[i]);
-                    panelProp.row = i;
-                    panelProp.col = 0;
-                    this.panelPropertyChange(updatedPanel[i], panelProp);
-                    this.setPanelPosition(panelElement, i, 0);
-                }
-                else {
-                    this.panelPropertyChange(updatedPanel[i], { row: i, col: 0 });
-                    this.setPanelPosition(panelElement, updatedPanel[i].row, updatedPanel[i].col);
-                    this.panelsSizeY = this.panelsSizeY + updatedPanel[i].sizeY;
-                }
+                this.panelPropertyChange(updatedPanel[i], { row: i, col: 0 });
+                this.setPanelPosition(panelElement, updatedPanel[i].row, updatedPanel[i].col);
+                this.panelsSizeY = this.panelsSizeY + updatedPanel[i].sizeY;
                 this.setClasses(this.panelCollection);
                 this.checkDragging(this.dragCollection);
                 this.removeResizeClasses(this.panelCollection);
@@ -3385,40 +3273,24 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
         if (isUndefined(panel.enabled)) {
             panel.enabled = true;
         }
-        if (this.isBlazor) {
-            cellElement = document.getElementById(panel.id);
-        }
-        else {
-            if (this.contentTemplateChild.length > 0 && !isNullOrUndefined(index)) {
-                cellElement = this.contentTemplateChild[index];
-                if (panel.cssClass) {
-                    addClass([cellElement], [panel.cssClass]);
-                }
-                if (panel.id) {
-                    cellElement.setAttribute('id', panel.id);
-                }
+        if (this.contentTemplateChild.length > 0 && !isNullOrUndefined(index)) {
+            cellElement = this.contentTemplateChild[index];
+            if (panel.cssClass) {
+                addClass([cellElement], [panel.cssClass]);
             }
-            else {
-                cellElement = this.createPanelElement(panel.cssClass ? panel.cssClass.split(' ') : null, panel.id);
+            if (panel.id) {
+                cellElement.setAttribute('id', panel.id);
             }
-            cellElement.style.zIndex = '' + panel.zIndex;
-            this.element.appendChild(cellElement);
-            this.renderReactTemplates();
-        }
-        var dashBoardCell = this.renderPanels(cellElement, panel, panel.id, isStringTemplate);
-        this.panelCollection.push(dashBoardCell);
-        if (!this.isBlazor) {
-            this.setXYAttributes(cellElement, panel);
         }
         else {
-            var bodyElement = cellElement.querySelector('.e-panel-content');
-            if (bodyElement) {
-                var headerHeight = cellElement.querySelector('.e-panel-header') ?
-                    window.getComputedStyle(cellElement.querySelector('.e-panel-header')).height : '0px';
-                var contentHeightValue = 'calc( 100% - ' + headerHeight + ')';
-                setStyleAttribute(bodyElement, { height: contentHeightValue });
-            }
+            cellElement = this.createPanelElement(panel.cssClass ? panel.cssClass.split(' ') : null, panel.id);
         }
+        cellElement.style.zIndex = '' + panel.zIndex;
+        this.element.appendChild(cellElement);
+        this.renderReactTemplates();
+        var dashBoardCell = this.renderPanels(cellElement, panel, panel.id, isStringTemplate);
+        this.panelCollection.push(dashBoardCell);
+        this.setXYAttributes(cellElement, panel);
         this.setHeightAndWidth(cellElement, panel);
         return cellElement;
     };
@@ -3488,7 +3360,6 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
         }
     };
     DashboardLayout.prototype.panelPropertyChange = function (panel, value) {
-        this.allowServerDataBinding = false;
         // eslint-disable-next-line
         panel.setProperties(value, true);
     };
@@ -3496,20 +3367,16 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
         if (this.element.querySelectorAll('.e-panel').length > 0 || this.panels.length > 0) {
             for (var j = 0; j < cells.length; j++) {
                 this.gridPanelCollection.push(cells[j]);
-                if (!(this.isBlazor && this.panels.length > 0)) {
-                    this.setMinMaxValues(cells[j]);
-                }
+                this.setMinMaxValues(cells[j]);
                 if (this.maxColumnValue < cells[j].col || this.maxColumnValue < (cells[j].col + cells[j].sizeX)) {
                     this.panelPropertyChange(cells[j], { col: this.maxColumnValue - cells[j].sizeX });
                 }
                 var cell = this.renderCell(cells[j], false, j);
-                if (!this.isBlazor) {
-                    if (this.enableRtl) {
-                        addClass([cell], 'e-rtl');
-                    }
-                    this.element.appendChild(cell);
-                    this.renderReactTemplates();
+                if (this.enableRtl) {
+                    addClass([cell], 'e-rtl');
                 }
+                this.element.appendChild(cell);
+                this.renderReactTemplates();
                 if (this.checkMediaQuery() && j === cells.length - 1) {
                     this.checkMediaQuerySizing();
                 }
@@ -4448,7 +4315,6 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
                         var panelInstance = _this.getCellInstance(args.element.id);
                         _this.setPanelPosition(args.element, panelInstance.row, panelInstance.col);
                         _this.updatePanels();
-                        _this.updateServerPanelData();
                         _this.updateCloneArrayObject();
                         _this.checkForChanges(true);
                         _this.dragStopEventArgs = { event: args.event, element: args.element };
@@ -4494,9 +4360,6 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
     DashboardLayout.prototype.onDraggingStart = function (args) {
         var dragArgs = args;
         this.trigger('dragStart', dragArgs, function (dragArgs) {
-            if (isBlazor()) {
-                dragArgs.bindEvents(args.element);
-            }
         });
         this.panelsInitialModel = this.cloneModels(this.panels);
         this.mainElement = args.element;
@@ -4668,7 +4531,6 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
      */
     DashboardLayout.prototype.addPanel = function (panel) {
         this.panelsSizeY = 0;
-        this.allowServerDataBinding = false;
         this.maxCol();
         if (!panel.minSizeX) {
             panel.minSizeX = 1;
@@ -4696,9 +4558,6 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
         this.addPanelCalled = true;
         if (this.checkMediaQuery()) {
             this.checkMediaQuerySizing();
-            if (this.isBlazor) {
-                cell.style.removeProperty('visibility');
-            }
             this.removeResizeClasses(this.panelCollection);
         }
         else {
@@ -4707,9 +4566,6 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
                 this.checkCollision = [];
             }
             this.setPanelPosition(cell, panelProp.row, panelProp.col);
-            if (this.isBlazor) {
-                cell.style.removeProperty('visibility');
-            }
             this.updatePanelLayout(cell, panelProp);
         }
         this.addPanelCalled = false;
@@ -4735,8 +4591,6 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
             }
         }
         this.checkForChanges(false, [panelProp]);
-        this.allowServerDataBinding = true;
-        this.serverDataBind();
     };
     /**
      * Allows to update a panel in the DashboardLayout.
@@ -4845,7 +4699,6 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
             this.clearTemplate();
         }
         this.removeAllPanel();
-        this.updateServerPanelData();
         this.rows = 0;
         this.gridPanelCollection = [];
         this.setHeightWidth();
@@ -4895,7 +4748,6 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
             this.checkMediaQuerySizing();
             this.isPanelRemoved = false;
         }
-        this.updateServerPanelData();
         this.gridPanelCollection.forEach(function (item) {
             if (item.id === id) {
                 _this.gridPanelCollection.splice(_this.gridPanelCollection.indexOf(item), 1);
@@ -4939,7 +4791,6 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
         this.updatePanelLayout(ele, panelInstance);
         this.updateRowHeight();
         this.updatePanels();
-        this.updateServerPanelData();
         this.updateCloneArrayObject();
         this.mainElement = null;
         if (this.allowFloating) {
@@ -5002,7 +4853,6 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
         this.setHeightAndWidth(ele, panelInstance);
         this.updatePanelLayout(ele, panelInstance);
         this.updatePanels();
-        this.updateServerPanelData();
         this.updateRowHeight();
         this.resizeCalled = false;
         this.trigger('resizeStop', args);
@@ -5064,12 +4914,10 @@ var DashboardLayout = /** @__PURE__ @class */ (function (_super) {
         if (this.table) {
             this.table.remove();
         }
-        this.isBlazor = false;
         this.initialize();
         if (this.checkMediaQuery()) {
             this.refresh();
         }
-        this.isBlazor = (isBlazor() && this.isServerRendered);
         if (this.showGridLines) {
             this.initGridLines();
         }