..F....... [ZBXNEXT-6309] fixed page activation

4 files changed, 268 insertions, 201 deletions

diff --git a/ui/js/class.dashboard.loader.js b/ui/js/class.dashboard.loader.js
index 71c10de70a6..48433ab3fea 100755
--- a/ui/js/class.dashboard.loader.js
+++ b/ui/js/class.dashboard.loader.js
@@ -1 +1,32 @@
-/*
** Zabbix
** Copyright (C) 2001-2021 Zabbix SIA
**
** This program is free software; you can redistribute it and/or modify
** it under the terms of the GNU General Public License as published by
** the Free Software Foundation; either version 2 of the License, or
** (at your option) any later version.
**
** This program is distributed in the hope that it will be useful,
** but WITHOUT ANY WARRANTY; without even the implied warranty of
** MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
** GNU General Public License for more details.
**
** You should have received a copy of the GNU General Public License
** along with this program; if not, write to the Free Software
** Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
**/


class CDashboardLoader {

	constructor() {
		this._cache = {};
	}

	getContent(key) {
		if (this._cache[key] !== undefined) {

		}
	}
}
\ No newline at end of file
+/*
+** Zabbix
+** Copyright (C) 2001-2021 Zabbix SIA
+**
+** This program is free software; you can redistribute it and/or modify
+** it under the terms of the GNU General Public License as published by
+** the Free Software Foundation; either version 2 of the License, or
+** (at your option) any later version.
+**
+** This program is distributed in the hope that it will be useful,
+** but WITHOUT ANY WARRANTY; without even the implied warranty of
+** MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+** GNU General Public License for more details.
+**
+** You should have received a copy of the GNU General Public License
+** along with this program; if not, write to the Free Software
+** Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+**/
+
+
+class CDashboardLoader {
+
+	constructor() {
+		this._cache = {};
+	}
+
+	getContent(key) {
+		if (this._cache[key] !== undefined) {
+
+		}
+	}
+}
diff --git a/ui/js/class.dashboard.page.js b/ui/js/class.dashboard.page.js
index 09eb50eab09..4f4544fd0c5 100644
--- a/ui/js/class.dashboard.page.js
+++ b/ui/js/class.dashboard.page.js
@@ -89,7 +89,7 @@ class CDashboardPage {
 
 		this._data.new_widget_placeholder.showAtDefaultPosition();
 
-		if (this._options['edit_mode']) {
+		if (this._options.edit_mode) {
 			this._doAction('onEditStart');
 			this._editDashboard();
 		}
@@ -108,13 +108,41 @@ class CDashboardPage {
 	}
 
 	activate() {
-		this._is_active = true;
+		if (!this._is_active) {
+			this._is_active = true;
 
-		for (const w of this._widgets) {
-			w.activate();
-		}
+			for (const w of this._widgets) {
+				// TODO temporary solution
+				if (this._data.pos_action !== 'updateWidgetConfig') {
+					this._resetCurrentPositions();
+					if (!this._posEquals(w.pos, w.current_pos)) {
+						w.pos = w.current_pos;
+					}
+				}
+
+				w.activate();
+				delete w.current_pos;
+
+				w.getView().appendTo(this._$target);
+
+				// TODO check this
+				if (this._options.edit_mode) {
+					w.rf_rate = 0;
+					this._setWidgetModeEdit(w);
+				}
+
+				this._doAction('onWidgetActivate', w);
+			}
 
-		this._registerEvents();
+			// TODO check if needs if (this._data.pos_action !== 'updateWidgetConfig') {
+			this._resizeDashboardGrid();
+
+			for (const w of this._widgets) {
+				this._updateWidgetContent(w);
+			}
+
+			this._registerEvents();
+		}
 	}
 
 	deactivate() {
@@ -122,6 +150,8 @@ class CDashboardPage {
 
 		for (const w of this._widgets) {
 			w.deactivate();
+			// TODO temporary solution
+			w.getView().detach();
 		}
 
 		this._unregisterEvents();
@@ -145,7 +175,7 @@ class CDashboardPage {
 			}
 		}
 
-		for (const action of ['onWidgetAdd', 'onWidgetDelete', 'onWidgetPosition']) {
+		for (const action of ['onWidgetActivate', 'onWidgetDelete', 'onWidgetPosition']) {
 			this.addAction(action, this._hideMessageExhausted);
 		}
 
@@ -162,7 +192,7 @@ class CDashboardPage {
 	}
 
 	_unregisterEvents() {
-		for (const action of ['onWidgetAdd', 'onWidgetDelete', 'onWidgetPosition']) {
+		for (const action of ['onWidgetActivate', 'onWidgetDelete', 'onWidgetPosition']) {
 			this.removeAction(action, this._hideMessageExhausted);
 		}
 
@@ -219,10 +249,6 @@ class CDashboardPage {
 		for (const w of widgets) {
 			this._addWidget(w);
 		}
-
-		for (const w of this._widgets) {
-			this._updateWidgetContent(w);
-		}
 	}
 
 	_addWidget(config) {
@@ -278,31 +304,9 @@ class CDashboardPage {
 			});
 
 		this._widgets.push(widget);
-		this._$target.append(widget.div);
-
-		this._setDivPosition(widget.div, widget.pos);
 
-		if (this._data.pos_action !== 'updateWidgetConfig') {
-			this._checkWidgetOverlap();
-			this._resizeDashboardGrid();
-		}
-
-		widget.showPreloader();
 		this._data.new_widget_placeholder.hide();
 
-		if (widget instanceof CDashboardWidgetIterator) {
-			// Placeholders will be shown while the iterator will be loading.
-			this._addIteratorPlaceholders(widget,
-				widget.getNumColumns() * widget.getNumRows()
-			);
-			this._alignIteratorContents(widget, widget.pos);
-		}
-
-		if (this._options['edit_mode']) {
-			widget.rf_rate = 0;
-			this._setWidgetModeEdit(widget);
-		}
-
 		this._doAction('onWidgetAdd', widget);
 	}
 
@@ -373,7 +377,7 @@ class CDashboardPage {
 
 	editDashboard() {
 		// Set before firing "onEditStart" for isEditMode to work correctly.
-		this._options['edit_mode'] = true;
+		this._options.edit_mode = true;
 
 		this._doAction('onEditStart');
 		this._editDashboard();
@@ -809,7 +813,7 @@ class CDashboardPage {
 	}
 
 	isEditMode() {
-		return this._options['edit_mode'];
+		return this._options.edit_mode;
 	}
 
 	/**
@@ -887,8 +891,8 @@ class CDashboardPage {
 			// Widget popup open (refresh rate)?
 			if (w.content_header.find('[data-expanded="true"]').length > 0
 				// Widget being dragged or resized in dashboard edit mode?
-				|| w.div.hasClass('ui-draggable-dragging')
-				|| w.div.hasClass('ui-resizable-resizing')) {
+				|| w.getView().hasClass('ui-draggable-dragging')
+				|| w.getView().hasClass('ui-resizable-resizing')) {
 				return true;
 			}
 		}
@@ -904,7 +908,7 @@ class CDashboardPage {
 	 * @param {object} widget  Dashboard widget object.
 	 */
 	_enterWidget(widget) {
-		if (widget.div.hasClass(widget.getCssClass('focus'))) {
+		if (widget.getView().hasClass(widget.getCssClass('focus'))) {
 			return;
 		}
 
@@ -931,7 +935,7 @@ class CDashboardPage {
 	 * @param {object} widget  Dashboard widget object.
 	 */
 	_leaveWidget(widget) {
-		if (!widget.div.hasClass(widget.getCssClass('focus'))) {
+		if (!widget.getView().hasClass(widget.getCssClass('focus'))) {
 			return;
 		}
 
@@ -970,19 +974,19 @@ class CDashboardPage {
 		let slide_lines = 0;
 
 		for (const widget of this._widgets) {
-			if (!widget.div.hasClass(widget.getCssClass('focus'))) {
+			if (!widget.getView().hasClass(widget.getCssClass('focus'))) {
 				continue;
 			}
 
 			// Focused widget not on the first row of dashboard?
-			if (widget.div.position().top !== 0) {
+			if (widget.getView().position().top !== 0) {
 				break;
 			}
 
 			if (widget instanceof CDashboardWidgetIterator) {
-				slide_lines = widget.div.hasClass('iterator-double-header') ? 2 : 1;
+				slide_lines = widget.getView().hasClass('iterator-double-header') ? 2 : 1;
 			}
-			else if (widget.div.hasClass(widget.getCssClass('hidden_header'))) {
+			else if (widget.getView().hasClass(widget.getCssClass('hidden_header'))) {
 				slide_lines = 1;
 			}
 
@@ -1048,7 +1052,7 @@ class CDashboardPage {
 	 *
 	 * @param {int|null}    min_rows  Minimal desired rows count.
 	 */
-	_resizeDashboardGrid(min_rows= null) {
+	_resizeDashboardGrid(min_rows = null) {
 		this._options['rows'] = 0;
 
 		for (const w of this._widgets) {
@@ -1061,7 +1065,7 @@ class CDashboardPage {
 
 		let height = this._options['widget-height'] * this._options['rows'];
 
-		if (this._options['edit_mode']) {
+		if (this._options.edit_mode) {
 			// Occupy whole screen only if in edit mode, not to cause scrollbar in kiosk mode.
 			height = Math.max(height, this._data.minimal_height);
 		}
@@ -1144,7 +1148,7 @@ class CDashboardPage {
 		return this._$target.width() / this._options['max-columns'];
 	}
 
-	_setDivPosition($div, pos) {
+	setDivPosition($div, pos) {
 		$div.css({
 			left: `${this._options['widget-width'] * pos.x}%`,
 			top: `${this._options['widget-height'] * pos.y}px`,
@@ -1739,26 +1743,13 @@ class CDashboardPage {
 		}
 	}
 
-	_checkWidgetOverlap() {
-		this._resetCurrentPositions();
-
-		for (const w of this._widgets) {
-			if (!this._posEquals(w.pos, w.current_pos)) {
-				w.pos = w.current_pos;
-				this._setDivPosition(w.div, w.pos);
-			}
-
-			delete w.current_pos;
-		}
-	}
-
 	/**
 	 * User action handler for resize of widget.
 	 *
 	 * @param {object} widget  Dashboard widget object.
 	 */
 	_doWidgetResize(widget) {
-		let pos = this._calcDivPosition(widget.div);
+		let pos = this._calcDivPosition(widget.getView());
 		let rows = 0;
 
 		if (!this._posEquals(pos, widget.current_pos)) {
@@ -1766,20 +1757,24 @@ class CDashboardPage {
 			this._realignResize(widget);
 
 			if (widget instanceof CDashboardWidgetIterator) {
-				this._alignIteratorContents(widget, widget.current_pos);
+				if (widget.alignContents(widget.current_pos)) {
+					this._updateWidgetContent(widget);
+				}
 			}
 
 			for (const w of this._widgets) {
 				if (widget.uniqueid !== w.uniqueid) {
 					if (w instanceof CDashboardWidgetIterator) {
-						const box_pos = this._calcDivPosition(w.div);
+						const box_pos = this._calcDivPosition(w.getView());
 
 						if (box_pos.width !== w.current_pos.width || box_pos.height !== w.current_pos.height) {
-							this._alignIteratorContents(w, w.current_pos);
+							if (w.alignContents(w.current_pos)) {
+								this._updateWidgetContent(w);
+							}
 						}
 					}
 
-					this._setDivPosition(w.div, w.current_pos);
+					w.setDivPosition(w.current_pos);
 				}
 
 				rows = Math.max(rows, w.current_pos.y + w.current_pos.height);
@@ -1790,7 +1785,7 @@ class CDashboardPage {
 			}
 		}
 
-		this._setDivPosition(this._data.placeholder, pos);
+		this.setDivPosition(this._data.placeholder, pos);
 	}
 
 	/**
@@ -1799,7 +1794,7 @@ class CDashboardPage {
 	 * @param {object} widget  Dashboard widget object.
 	 */
 	_doWidgetPositioning(widget) {
-		let pos = this._calcDivPosition(widget.div);
+		let pos = this._calcDivPosition(widget.getView());
 		let rows = 0;
 
 		if (!this._posEquals(pos, widget.current_pos)) {
@@ -1821,7 +1816,7 @@ class CDashboardPage {
 
 				for (const w of this._widgets) {
 					if (widget.uniqueid !== w.uniqueid) {
-						this._setDivPosition(w.div, w.current_pos);
+						w.setDivPosition(w.current_pos);
 					}
 
 					rows = Math.max(rows, w.current_pos.y + w.current_pos.height);
@@ -1834,7 +1829,7 @@ class CDashboardPage {
 			}
 		}
 
-		this._setDivPosition(this._data.placeholder, pos);
+		this.setDivPosition(this._data.placeholder, pos);
 	}
 
 	_stopWidgetPositioning(widget) {
@@ -1858,14 +1853,14 @@ class CDashboardPage {
 			delete w.current_pos;
 		}
 
-		this._setDivPosition(widget.div, widget.pos);
+		widget.setDivPosition(widget.pos);
 		this._resizeDashboardGrid();
 
 		this._doAction('onWidgetPosition', widget);
 	}
 
 	_makeDraggable(widget) {
-		widget.div.draggable({
+		widget.getView().draggable({
 			cursor: 'grabbing',
 			handle: widget.content_header,
 			scroll: true,
@@ -1874,8 +1869,8 @@ class CDashboardPage {
 				this._$target.addClass('dashbrd-positioning');
 
 				this._data.calculated = {
-					'left-max': this._$target.width() - widget.div.width(),
-					'top-max': this._options['max-rows'] * this._options['widget-height'] - widget.div.height()
+					'left-max': this._$target.width() - widget.getView().width(),
+					'top-max': this._options['max-rows'] * this._options['widget-height'] - widget.getView().height()
 				};
 
 				this._setResizableState('disable');
@@ -1914,8 +1909,8 @@ class CDashboardPage {
 				this._setResizableState('enable');
 				this._stopWidgetPositioning(widget);
 
-				if (widget instanceof CDashboardWidgetIterator && !widget.div.is(':hover')) {
-					widget.div.removeClass('iterator-double-header');
+				if (widget instanceof CDashboardWidgetIterator && !widget.getView().is(':hover')) {
+					widget.getView().removeClass('iterator-double-header');
 				}
 
 				this._options['rows'] = this._options['rows_actual'];
@@ -1938,11 +1933,11 @@ class CDashboardPage {
 					.append($('<div>', {'class': `ui-resizable-border-${direction}`}));
 			}
 
-			widget.div.append($handle);
+			widget.getView().append($handle);
 			handles[direction] = $handle;
 		}
 
-		widget.div.resizable({
+		widget.getView().resizable({
 			handles: handles,
 			scroll: false,
 			minWidth: this._getCurrentCellWidth(),
@@ -1969,7 +1964,7 @@ class CDashboardPage {
 			},
 			resize: (e, ui) => {
 				// Will break fast-resizing widget-top past minimum height, if moved to start section (jQuery UI bug?)
-				widget.div
+				widget.getView()
 					.toggleClass('resizing-top', this._data.resizing_top)
 					.toggleClass('resizing-left', this._data.resizing_left);
 
@@ -1994,7 +1989,7 @@ class CDashboardPage {
 					);
 				}
 
-				widget.div.css({
+				widget.getView().css({
 					'left': ui.position.left,
 					'top': ui.position.top,
 					'max-width': Math.min(ui.size.width,
@@ -2024,13 +2019,15 @@ class CDashboardPage {
 				widget.container.removeAttr('style');
 
 				if (widget instanceof CDashboardWidgetIterator) {
-					this._alignIteratorContents(widget, widget.pos);
+					if (widget.alignContents(widget.pos)) {
+						this._updateWidgetContent(widget);
+					}
 				}
 
 				delete this._data.resizing_top;
 				delete this._data.resizing_left;
 
-				widget.div
+				widget.getView()
 					.removeClass('resizing-top')
 					.removeClass('resizing-left')
 					.css({
@@ -2059,7 +2056,7 @@ class CDashboardPage {
 	_setResizableState(state, ignoreid = '') {
 		for (const w of this._widgets) {
 			if (w.uniqueid !== ignoreid) {
-				w.div.resizable(state);
+				w.getView().resizable(state);
 			}
 		}
 	}
@@ -2093,91 +2090,6 @@ class CDashboardPage {
 		}
 	}
 
-	_addIteratorPlaceholders(iterator, count) {
-		$('.dashbrd-grid-iterator-placeholder', iterator.content_body).remove();
-
-		for (let index = 0; index < count; index++) {
-			iterator.content_body.append($('<div>', {'class': 'dashbrd-grid-iterator-placeholder'})
-				.append('<div>')
-				.on('mouseenter', () => {
-					// Set single-line header for the iterator.
-					iterator.div.removeClass('iterator-double-header');
-
-					if (this._options['kioskmode'] && iterator.div.position().top === 0) {
-						this._slideKiosk();
-					}
-				})
-			);
-		}
-	}
-
-	_alignIteratorContents(iterator, pos) {
-		if (iterator.isTooSmall(pos)) {
-			iterator.setTooSmallState(true);
-
-			return;
-		}
-
-		if (iterator.getTooSmallState() && iterator.update_pending) {
-			iterator.setTooSmallState(false);
-			iterator.showPreloader();
-			this._updateWidgetContent(iterator);
-
-			return;
-		}
-
-		iterator.setTooSmallState(false);
-
-		const $placeholders = iterator.content_body.find('.dashbrd-grid-iterator-placeholder');
-		const num_columns = iterator.getNumColumns();
-		const num_rows = iterator.getNumRows();
-
-		for (let index = 0, count = num_columns * num_rows; index < count; index++) {
-			const cell_column = index % num_columns;
-			const cell_row = Math.floor(index / num_columns);
-			const cell_width_min = Math.floor(pos.width / num_columns);
-			const cell_height_min = Math.floor(pos.height / num_rows);
-
-			const num_enlarged_columns = pos.width - cell_width_min * num_columns;
-			const num_enlarged_rows = pos.height - cell_height_min * num_rows;
-
-			const x = cell_column * cell_width_min + Math.min(cell_column, num_enlarged_columns);
-			const y = cell_row * cell_height_min + Math.min(cell_row, num_enlarged_rows);
-			const width = cell_width_min + (cell_column < num_enlarged_columns ? 1 : 0);
-			const height = cell_height_min + (cell_row < num_enlarged_rows ? 1 : 0);
-
-			let css = {
-				left: `${x / pos.width * 100}%`,
-				top: `${y * this._options['widget-height']}px`,
-				width: `${width / pos.width * 100}%`,
-				height: `${height * this._options['widget-height']}px`
-			};
-
-			if (cell_column === (num_columns - 1)) {
-				// Setting right side for last column of widgets (fixes IE11 and Opera issues).
-				css = {
-					...css,
-					'width': 'auto',
-					'right': '0px'
-				};
-			}
-			else {
-				css = {
-					...css,
-					'width': `${Math.round(width / pos.width * 100 * 100) / 100}%`,
-					'right': 'auto'
-				};
-			}
-
-			if (index < iterator.children.length) {
-				iterator.children[index].div.css(css);
-			}
-			else {
-				$placeholders.eq(index - iterator.children.length).css(css);
-			}
-		}
-	}
-
 	_hasEqualProperties(object_1, object_2) {
 		if (Object.keys(object_1).length !== Object.keys(object_2).length) {
 			return false;
@@ -2209,7 +2121,7 @@ class CDashboardPage {
 					$alt_content.append(response.body);
 				}
 				iterator.content_body.append($alt_content);
-				iterator.div.addClass('iterator-alt-content');
+				iterator.getView().addClass('iterator-alt-content');
 
 				iterator.updatePager(1, 1);
 			}
@@ -2220,7 +2132,7 @@ class CDashboardPage {
 			return;
 		}
 
-		if (iterator.div.hasClass('iterator-alt-content')) {
+		if (iterator.getView().hasClass('iterator-alt-content')) {
 			// Returning from alt-content to normal mode.
 			iterator.clear();
 		}
@@ -2273,13 +2185,14 @@ class CDashboardPage {
 			}
 		}
 
-		this._addIteratorPlaceholders(iterator,
-			iterator.getNumColumns() * iterator.getNumRows() - iterator.children.length
-		);
+		iterator._addPlaceholders(iterator.getNumColumns() * iterator.getNumRows() - iterator.children.length);
+		if (this._options['kioskmode'] && iterator.getView().position().top === 0) {
+			this._slideKiosk();
+		}
 
-		this._alignIteratorContents(iterator,
-			(typeof iterator.current_pos === 'object') ? iterator.current_pos : iterator.pos
-		);
+		if (iterator.alignContents((typeof iterator.current_pos === 'object') ? iterator.current_pos : iterator.pos)) {
+			this._updateWidgetContent(iterator);
+		}
 
 		for (const child of iterator.children) {
 			/* Possible update policies for the child widgets:
@@ -2460,7 +2373,7 @@ class CDashboardPage {
 			'uniqueid': widget.uniqueid,
 			'name': (widget.header !== '') ? widget.header : undefined,
 			'initial_load': widget.initial_load ? 1 : 0,
-			'edit_mode': this._options['edit_mode'] ? 1 : 0,
+			'edit_mode': this._options.edit_mode ? 1 : 0,
 			'storage': widget.storage,
 			'view_mode': widget.view_mode
 		};
@@ -3210,7 +3123,10 @@ class CDashboardPage {
 			widget.removeInfoButtons();
 		}
 
-		widget.activate();
+		if (!widget.isActive()) {
+			widget.activate();
+			widget.getView().appendTo(this._$target);
+		}
 
 		this._makeDraggable(widget);
 		this._makeResizable(widget);
@@ -3240,21 +3156,21 @@ class CDashboardPage {
 			for (const child of widget.children) {
 				this._doAction('onWidgetDelete', child);
 				this._removeWidgetActions(child);
-				child.div.remove();
+				child.getView().remove();
 			}
 		}
 
 		if (widget.parent) {
 			this._doAction('onWidgetDelete', widget);
 			this._removeWidgetActions(widget);
-			widget.div.remove();
+			widget.getView().remove();
 		}
 		else {
 			const index = widget.getIndex();
 
 			this._doAction('onWidgetDelete', widget);
 			this._removeWidgetActions(widget);
-			widget.div.remove();
+			widget.getView().remove();
 
 			this._widgets.splice(index, 1);
 
diff --git a/ui/js/class.dashboard.widget.iterator.js b/ui/js/class.dashboard.widget.iterator.js
index efcff9e7898..11c089ecf4c 100755
--- a/ui/js/class.dashboard.widget.iterator.js
+++ b/ui/js/class.dashboard.widget.iterator.js
@@ -47,6 +47,14 @@ class CDashboardWidgetIterator extends CDashboardWidget {
 		this._min_rows = config.min_rows;
 	}
 
+	activate() {
+		super.activate();
+
+		for (const child of this.children) {
+			child.activate();
+		}
+	}
+
 	setViewMode(view_mode) {
 		if (this.view_mode !== view_mode) {
 			this.view_mode = view_mode;
@@ -65,10 +73,10 @@ class CDashboardWidgetIterator extends CDashboardWidget {
 		return this;
 	}
 
-	addWidget(child) {
-		child = new CDashboardWidget({
+	addWidget(config) {
+		const child = new CDashboardWidget({
 			view_mode: this.view_mode,
-			...child,
+			...config,
 			cell_height: this._cell_height,
 			cell_width: this._cell_width,
 			parent: this,
@@ -77,10 +85,13 @@ class CDashboardWidgetIterator extends CDashboardWidget {
 			is_new: false
 		});
 
-		this.content_body.append(child.div);
 		this.children.push(child);
 
+		child.activate();
 		child.showPreloader();
+		this.content_body.append(child.getView());
+
+		return this;
 	}
 
 	/**
@@ -186,33 +197,121 @@ class CDashboardWidgetIterator extends CDashboardWidget {
 		return this;
 	}
 
+	_makeView() {
+		super._makeView();
+
+		this._addPlaceholders(this.getNumColumns() * this.getNumRows());
+		this.alignContents(this.pos);
+	}
+
+	_addPlaceholders(count) {
+		$('.dashbrd-grid-iterator-placeholder', this.content_body).remove();
+
+		for (let index = 0; index < count; index++) {
+			this.content_body.append(
+				$('<div>', {'class': 'dashbrd-grid-iterator-placeholder'})
+					.append('<div>').on('mouseenter', () => {
+						// Set single-line header for the iterator.
+						this.div.removeClass('iterator-double-header');
+					})
+			);
+		}
+	}
+
+	/**
+	 * @returns {boolean}  Returns true, if to small state.
+	 */
+	alignContents(pos) {
+		if (this.isTooSmall(pos)) {
+			this.setTooSmallState(true);
+
+			return false;
+		}
+
+		if (this.getTooSmallState() && this.update_pending) {
+			this.setTooSmallState(false);
+			this.showPreloader();
+
+			return true;
+		}
+
+		this.setTooSmallState(false);
+
+		const $placeholders = this.content_body.find('.dashbrd-grid-iterator-placeholder');
+		const num_columns = this.getNumColumns();
+		const num_rows = this.getNumRows();
+
+		for (let index = 0, count = num_columns * num_rows; index < count; index++) {
+			const cell_column = index % num_columns;
+			const cell_row = Math.floor(index / num_columns);
+			const cell_width_min = Math.floor(pos.width / num_columns);
+			const cell_height_min = Math.floor(pos.height / num_rows);
+
+			const num_enlarged_columns = pos.width - cell_width_min * num_columns;
+			const num_enlarged_rows = pos.height - cell_height_min * num_rows;
+
+			const x = cell_column * cell_width_min + Math.min(cell_column, num_enlarged_columns);
+			const y = cell_row * cell_height_min + Math.min(cell_row, num_enlarged_rows);
+			const width = cell_width_min + (cell_column < num_enlarged_columns ? 1 : 0);
+			const height = cell_height_min + (cell_row < num_enlarged_rows ? 1 : 0);
+
+			let css = {
+				left: `${x / pos.width * 100}%`,
+				top: `${y * this._cell_height}px`,
+				width: `${width / pos.width * 100}%`,
+				height: `${height * this._cell_height}px`
+			};
+
+			if (cell_column === (num_columns - 1)) {
+				// Setting right side for last column of widgets (fixes IE11 and Opera issues).
+				css = {
+					...css,
+					'width': 'auto',
+					'right': '0px'
+				};
+			}
+			else {
+				css = {
+					...css,
+					'width': `${Math.round(width / pos.width * 100 * 100) / 100}%`,
+					'right': 'auto'
+				};
+			}
+
+			if (index < this.children.length) {
+				this.children[index].div.css(css);
+			}
+			else {
+				$placeholders.eq(index - this.children.length).css(css);
+			}
+		}
+
+		return false;
+	}
+
 	_registerEvents() {
 		super._registerEvents();
 
 		this._events = {
 			...this._events,
 
-			iteratorPreviousPage: () => {
+			previousPage: () => {
 				this.fire(WIDGET_EVENT_ITERATOR_PREVIOUS_PAGE_CLICK);
 			},
 
-			iteratorNextPage: () => {
+			nextPage: () => {
 				this.fire(WIDGET_EVENT_ITERATOR_NEXT_PAGE_CLICK);
 			}
 		}
 
-		if (!this.parent) {
-			this.$button_iterator_previous_page.on('click', this._events.iteratorPreviousPage);
-			this.$button_iterator_next_page.on('click', this._events.iteratorNextPage);
-		}
+		this.$button_previous_page.on('click', this._events.previousPage);
+		this.$button_next_page.on('click', this._events.nextPage);
 	}
 
 	_unregisterEvents() {
 		super._unregisterEvents();
 
-		if (!this.parent) {
-			this.$button_iterator_previous_page.off('click', this._events.iteratorPreviousPage);
-			this.$button_iterator_next_page.off('click', this._events.iteratorNextPage);
-		}
+		this.$button_previous_page.off('click', this._events.previousPage);
+		this.$button_next_page.off('click', this._events.nextPage);
 	}
 }
diff --git a/ui/js/class.dashboard.widget.js b/ui/js/class.dashboard.widget.js
index 3543e7125af..7e9e80bf5f9 100644
--- a/ui/js/class.dashboard.widget.js
+++ b/ui/js/class.dashboard.widget.js
@@ -96,14 +96,18 @@ class CDashboardWidget extends CBaseComponent {
 		this._is_ready = is_ready;
 
 		this._css_classes = css_classes;
-
-		this._makeView();
 	}
 
 	activate() {
 		if (!this._is_active) {
 			this._is_active = true;
 
+			if (!this._target.hasChildNodes()) {
+				this._makeView();
+				this.setDivPosition(this.pos);
+				this.showPreloader();
+			}
+
 			this._registerEvents();
 		}
 
@@ -177,6 +181,10 @@ class CDashboardWidget extends CBaseComponent {
 		}
 	}
 
+	isActive() {
+		return this._is_active;
+	}
+
 	isEditable() {
 		return this._is_editable;
 	}
@@ -195,6 +203,10 @@ class CDashboardWidget extends CBaseComponent {
 		return this._is_ready;
 	}
 
+	getView() {
+		return this.div;
+	}
+
 	/**
 	 * Update widget to ready state.
 	 *
@@ -371,12 +383,12 @@ class CDashboardWidget extends CBaseComponent {
 			}
 
 			if (this._is_iterator) {
-				this.$button_iterator_previous_page = $('<button>', {
+				this.$button_previous_page = $('<button>', {
 					'type': 'button',
 					'class': 'btn-iterator-page-previous',
 					'title': t('Previous page')
 				});
-				this.$button_iterator_next_page = $('<button>', {
+				this.$button_next_page = $('<button>', {
 					'type': 'button',
 					'class': 'btn-iterator-page-next',
 					'title': t('Next page')
@@ -395,9 +407,9 @@ class CDashboardWidget extends CBaseComponent {
 			this.content_header
 				.append(this._is_iterator
 					? $('<div>', {'class': 'dashbrd-grid-iterator-pager'}).append(
-						this.$button_iterator_previous_page,
+						this.$button_previous_page,
 						$('<span>', {'class': 'dashbrd-grid-iterator-pager-info'}),
-						this.$button_iterator_next_page
+						this.$button_next_page
 					)
 					: ''
 				)
@@ -463,6 +475,15 @@ class CDashboardWidget extends CBaseComponent {
 		this.div.append(this.container, this.mask);
 	}
 
+	setDivPosition(pos) {
+		this.div.css({
+			left: `${this._cell_width * pos.x}%`,
+			top: `${this._cell_height * pos.y}px`,
+			width: `${this._cell_width * pos.width}%`,
+			height: `${this._cell_height * pos.height}px`
+		});
+	}
+
 	_registerEvents() {
 		this._events = {