diff --git a/api/etemplate.php b/api/etemplate.php
index 813f14b7aa..6648ade760 100644
--- a/api/etemplate.php
+++ b/api/etemplate.php
@@ -13,8 +13,7 @@
 use EGroupware\Api;
 
 // add et2- prefix to following widgets/tags
-/* disabling v/hbox replacement for now as it fails with nextmatch headers
-const ADD_ET2_PREFIX_REGEXP = '#<((/?)([vh]?box|textbox|button))(/?|\s[^>]*)>#m';*/
+const ADD_ET2_PREFIX_REGEXP = '#<((/?)([vh]?box|textbox|button))(/?|\s[^>]*)>#m';
 const ADD_ET2_PREFIX_REGEXP = '#<((/?)(box|textbox|button))(/?|\s[^>]*)>#m';
 
 // switch evtl. set output-compression off, as we cant calculate a Content-Length header with transparent compression
@@ -22,11 +21,11 @@ ini_set('zlib.output_compression', 0);
 
 $GLOBALS['egw_info'] = array(
 	'flags' => array(
-		'currentapp' => 'api',
-		'noheader' => true,
+		'currentapp'                  => 'api',
+		'noheader'                    => true,
 		// miss-use session creation callback to send the template, in case we have no session
 		'autocreate_session_callback' => 'send_template',
-		'nocachecontrol' => true,
+		'nocachecontrol'              => true,
 	)
 );
 
@@ -47,8 +46,8 @@ function send_template()
 	//$path = EGW_SERVER_ROOT.$_SERVER['PATH_INFO'];
 	// check for customized template in VFS
 	list(, $app, , $template, $name) = explode('/', $_SERVER['PATH_INFO']);
-	$path = Api\Etemplate::rel2path(Api\Etemplate::relPath($app.'.'.basename($name, '.xet'), $template));
-	if (empty($path) || !file_exists($path) || !is_readable($path))
+	$path = Api\Etemplate::rel2path(Api\Etemplate::relPath($app . '.' . basename($name, '.xet'), $template));
+	if(empty($path) || !file_exists($path) || !is_readable($path))
 	{
 		http_response_code(404);
 		exit;
@@ -60,27 +59,28 @@ function send_template()
 	{
 		$cache_read = microtime(true);
 	}
-	else*/if (($str = file_get_contents($path)) !== false)
+	else*/
+	if(($str = file_get_contents($path)) !== false)
 	{
 		// fix <menulist...><menupopup type="select-*"/></menulist> --> <select type="select-*" .../>
 		$str = preg_replace('#<menulist([^>]*)>[\r\n\s]*<menupopup([^>]+>)[\r\n\s]*</menulist>#', '<select$1$2', $str);
 
-		$str = preg_replace_callback(ADD_ET2_PREFIX_REGEXP, static function(array $matches)
-			{
-				return '<'.$matches[2].'et2-'.$matches[3].
-					// web-components must not be self-closing (no "<et2-button .../>", but "<et2-button ...></et2-button>")
-					(substr($matches[4], -1) === '/' ? substr($matches[4], 0, -1).'></et2-'.$matches[3] : $matches[4]).'>';
-			}, $str);
+		$str = preg_replace_callback(ADD_ET2_PREFIX_REGEXP, static function (array $matches)
+		{
+			return '<' . $matches[2] . 'et2-' . $matches[3] .
+				// web-components must not be self-closing (no "<et2-button .../>", but "<et2-button ...></et2-button>")
+				(substr($matches[4], -1) === '/' ? substr($matches[4], 0, -1) . '></et2-' . $matches[3] : $matches[4]) . '>';
+		},                           $str);
 
 		$processing = microtime(true);
 
-		if (isset($cache) && (file_exists($cache_dir=dirname($cache)) || mkdir($cache_dir, 0755, true)))
+		if(isset($cache) && (file_exists($cache_dir = dirname($cache)) || mkdir($cache_dir, 0755, true)))
 		{
 			file_put_contents($cache, $str);
 		}
 	}
 	// stop here for not existing file path-traversal for both file and cache here
-	if (empty($str) || strpos($path, '..') !== false)
+	if(empty($str) || strpos($path, '..') !== false)
 	{
 		http_response_code(404);
 		exit;
@@ -92,29 +92,30 @@ function send_template()
 	Header('ETag: ' . $etag);
 
 	// if servers send a If-None-Match header, response with 304 Not Modified, if etag matches
-	if (isset($_SERVER['HTTP_IF_NONE_MATCH']) && $_SERVER['HTTP_IF_NONE_MATCH'] === $etag)
+	if(isset($_SERVER['HTTP_IF_NONE_MATCH']) && $_SERVER['HTTP_IF_NONE_MATCH'] === $etag)
 	{
 		header("HTTP/1.1 304 Not Modified");
 		exit;
 	}
 
 	// we run our own gzip compression, to set a correct Content-Length of the encoded content
-	if (function_exists('gzencode') && in_array('gzip', explode(',', $_SERVER['HTTP_ACCEPT_ENCODING']), true))
+	if(function_exists('gzencode') && in_array('gzip', explode(',', $_SERVER['HTTP_ACCEPT_ENCODING']), true))
 	{
 		$gzip_start = microtime(true);
 		$str = gzencode($str);
 		header('Content-Encoding: gzip');
-		$gziping = microtime(true)-$gzip_start;
+		$gziping = microtime(true) - $gzip_start;
 	}
-	header('X-Timing: header-include='.number_format($header_include-$GLOBALS['start'], 3).
-		(empty($processing) ? ', cache-read='.number_format($cache_read-$header_include, 3) :
-			', processing='.number_format($processing-$header_include, 3)).
-		(!empty($gziping) ? ', gziping='.number_format($gziping, 3) : '').
-		', total='.number_format(microtime(true)-$GLOBALS['start'], 3));
+	header('X-Timing: header-include=' . number_format($header_include - $GLOBALS['start'], 3) .
+		   (empty($processing) ? ', cache-read=' . number_format($cache_read - $header_include, 3) :
+			   ', processing=' . number_format($processing - $header_include, 3)) .
+		   (!empty($gziping) ? ', gziping=' . number_format($gziping, 3) : '') .
+		   ', total=' . number_format(microtime(true) - $GLOBALS['start'], 3)
+	);
 
 	// Content-Length header is important, otherwise browsers dont cache!
 	Header('Content-Length: ' . bytes($str));
 	echo $str;
 
-	exit;	// stop further processing eg. redirect to login
+	exit;    // stop further processing eg. redirect to login
 }
\ No newline at end of file
diff --git a/api/js/etemplate/Et2Box.ts b/api/js/etemplate/Et2Box.ts
index 1bfefdf630..2892fa2ec0 100644
--- a/api/js/etemplate/Et2Box.ts
+++ b/api/js/etemplate/Et2Box.ts
@@ -42,7 +42,12 @@ export class Et2Box extends Et2Widget(LitElement)
             </div> `;
 	}
 
-	_createNamespace(): boolean
+	set_label(new_label)
+	{
+		// Boxes don't have labels
+	}
+
+	_createNamespace() : boolean
 	{
 		return true;
 	}
diff --git a/api/js/etemplate/Et2Button.ts b/api/js/etemplate/Et2Button.ts
index 3ad63b0b1a..a303620bd5 100644
--- a/api/js/etemplate/Et2Button.ts
+++ b/api/js/etemplate/Et2Button.ts
@@ -16,9 +16,9 @@ import {Et2Widget} from "./Et2Widget";
 
 export class Et2Button extends Et2InputWidget(Et2Widget(LionButton))
 {
-	protected _created_icon_node: HTMLImageElement;
-	protected clicked: boolean = false;
-	private image: string;
+	protected _created_icon_node : HTMLImageElement;
+	protected clicked : boolean = false;
+	private image : string;
 
 	static get styles()
 	{
@@ -43,8 +43,7 @@ export class Et2Button extends Et2InputWidget(Et2Widget(LionButton))
 	{
 		return {
 			...super.properties,
-			image: {type: String},
-			onclick: {type: Function}
+			image: {type: String}
 		}
 	}
 
@@ -74,7 +73,7 @@ export class Et2Button extends Et2InputWidget(Et2Widget(LionButton))
 
 		//this.classList.add("et2_button")
 
-		if (this.image)
+		if(this.image)
 		{
 			this._created_icon_node.src = egw.image(this.image);
 			this.appendChild(this._created_icon_node);
@@ -84,21 +83,21 @@ export class Et2Button extends Et2InputWidget(Et2Widget(LionButton))
 	}
 
 
-	_handleClick(event: MouseEvent): boolean
+	_handleClick(event : MouseEvent) : boolean
 	{
 		debugger;
 		// ignore click on readonly button
-		if (this.disabled) return false;
+		if(this.disabled) return false;
 
 		this.clicked = true;
 
 		// Cancel buttons don't trigger the close confirmation prompt
-		if (this.classList.contains("et2_button_cancel"))
+		if(this.classList.contains("et2_button_cancel"))
 		{
 			this.getInstanceManager()?.skip_close_prompt();
 		}
 
-		if (!super._handleClick(event))
+		if(!super._handleClick(event))
 		{
 			this.clicked = false;
 			return false;
@@ -136,7 +135,7 @@ export class Et2Button extends Et2InputWidget(Et2Widget(LionButton))
 
 	getValue()
 	{
-		if (this.clicked)
+		if(this.clicked)
 		{
 			return true;
 		}
diff --git a/api/js/etemplate/Et2Widget.ts b/api/js/etemplate/Et2Widget.ts
index a4c5ad16ba..1a3a9a98b4 100644
--- a/api/js/etemplate/Et2Widget.ts
+++ b/api/js/etemplate/Et2Widget.ts
@@ -21,28 +21,28 @@ import {LitElement} from "@lion/core";
  * @see Mixin explanation https://lit.dev/docs/composition/mixins/
  */
 
-type Constructor<T = {}> = new (...args: any[]) => T;
-export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) =>
+type Constructor<T = {}> = new (...args : any[]) => T;
+export const Et2Widget = <T extends Constructor<LitElement>>(superClass : T) =>
 {
 	class Et2WidgetClass extends superClass implements et2_IDOMNode
 	{
 
 		/** et2_widget compatability **/
-		protected _mgrs: et2_arrayMgr[] = [];
-		protected _parent: Et2WidgetClass | et2_widget | null = null;
-		private _inst: etemplate2 | null = null;
+		protected _mgrs : et2_arrayMgr[] = [];
+		protected _parent : Et2WidgetClass | et2_widget | null = null;
+		private _inst : etemplate2 | null = null;
 		private supportedWidgetClasses = [];
 
 		/**
 		 * Not actually required by et2_widget, but needed to keep track of non-webComponent children
 		 */
-		private _legacy_children: et2_widget[] = [];
+		private _legacy_children : et2_widget[] = [];
 
 		/**
 		 * Properties
 		 */
-		private label: string = "";
-		private statustext: string = "";
+		private label : string = "";
+		private statustext : string = "";
 
 
 		/** WebComponent **/
@@ -75,7 +75,7 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) =>
 		 *
 		 * @param args
 		 */
-		constructor(...args: any[])
+		constructor(...args : any[])
 		{
 			super(...args);
 		}
@@ -86,7 +86,7 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) =>
 
 			this.set_label(this.label);
 
-			if (this.statustext)
+			if(this.statustext)
 			{
 				this.egw().tooltipBind(this, this.statustext);
 			}
@@ -111,13 +111,13 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) =>
 
 			// Remove old
 			let oldLabels = this.getElementsByClassName("et2_label");
-			while (oldLabels[0])
+			while(oldLabels[0])
 			{
 				this.removeChild(oldLabels[0]);
 			}
 
 			this.label = value;
-			if (value)
+			if(value)
 			{
 				let label = document.createElement("span");
 				label.classList.add("et2_label");
@@ -139,13 +139,13 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) =>
 		 * @param _ev
 		 * @returns
 		 */
-		_handleClick(_ev: MouseEvent): boolean
+		_handleClick(_ev : MouseEvent) : boolean
 		{
 			if (typeof this.onclick == 'function')
 			{
 				// Make sure function gets a reference to the widget, splice it in as 2. argument if not
 				var args = Array.prototype.slice.call(arguments);
-				if (args.indexOf(this) == -1) args.splice(1, 0, this);
+				if(args.indexOf(this) == -1) args.splice(1, 0, this);
 
 				return this.onclick.apply(this, args);
 			}
@@ -159,7 +159,7 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) =>
 			// Not really needed, use the disconnectedCallback() and let the browser handle it
 		}
 
-		isInTree(): boolean
+		isInTree() : boolean
 		{
 			// TODO: Probably should watch the state or something
 			return true;
@@ -173,19 +173,19 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) =>
 		loadFromXML(_node)
 		{
 			// Load the child nodes.
-			for (var i = 0; i < _node.childNodes.length; i++)
+			for(var i = 0; i < _node.childNodes.length; i++)
 			{
 				var node = _node.childNodes[i];
 				var widgetType = node.nodeName.toLowerCase();
 
-				if (widgetType == "#comment")
+				if(widgetType == "#comment")
 				{
 					continue;
 				}
 
-				if (widgetType == "#text")
+				if(widgetType == "#text")
 				{
-					if (node.data.replace(/^\s+|\s+$/g, ''))
+					if(node.data.replace(/^\s+|\s+$/g, ''))
 					{
 						this.innerText = node.data;
 					}
@@ -214,7 +214,7 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) =>
 		createElementFromNode(_node, _name?)
 		{
 			var attributes = {};
-			debugger;
+
 			// Parse the "readonly" and "type" flag for this element here, as they
 			// determine which constructor is used
 			var _nodeName = attributes["type"] = _node.getAttribute("type") ?
@@ -226,15 +226,15 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) =>
 
 			// Check to see if modifications change type
 			var modifications = this.getArrayMgr("modifications");
-			if (modifications && _node.getAttribute("id"))
+			if(modifications && _node.getAttribute("id"))
 			{
-				let entry: any = modifications.getEntry(_node.getAttribute("id"));
-				if (entry == null)
+				let entry : any = modifications.getEntry(_node.getAttribute("id"));
+				if(entry == null)
 				{
 					// Try again, but skip the fancy stuff
 					// TODO: Figure out why the getEntry() call doesn't always work
 					entry = modifications.data[_node.getAttribute("id")];
-					if (entry)
+					if(entry)
 					{
 						this.egw().debug("warn", "getEntry(" + _node.getAttribute("id") + ") failed, but the data is there.", modifications, entry);
 					}
@@ -244,7 +244,7 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) =>
 						entry = modifications.getRoot().getEntry(_node.getAttribute("id"));
 					}
 				}
-				if (entry && entry.type && typeof entry.type === 'string')
+				if(entry && entry.type && typeof entry.type === 'string')
 				{
 					_nodeName = attributes["type"] = entry.type;
 				}
@@ -253,18 +253,18 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) =>
 
 			// if _nodeName / type-attribute contains something to expand (eg. type="@${row}[type]"),
 			// we need to expand it now as it defines the constructor and by that attributes parsed via parseXMLAttrs!
-			if (_nodeName.charAt(0) == '@' || _nodeName.indexOf('$') >= 0)
+			if(_nodeName.charAt(0) == '@' || _nodeName.indexOf('$') >= 0)
 			{
 				_nodeName = attributes["type"] = this.getArrayMgr('content').expandName(_nodeName);
 			}
 
 			let widget = null;
-			if (undefined == window.customElements.get(_nodeName))
+			if(undefined == window.customElements.get(_nodeName))
 			{
 				// Get the constructor - if the widget is readonly, use the special "_ro"
 				// constructor if it is available
 				var constructor = et2_registry[typeof et2_registry[_nodeName] == "undefined" ? 'placeholder' : _nodeName];
-				if (readonly === true && typeof et2_registry[_nodeName + "_ro"] != "undefined")
+				if(readonly === true && typeof et2_registry[_nodeName + "_ro"] != "undefined")
 				{
 					constructor = et2_registry[_nodeName + "_ro"];
 				}
@@ -286,7 +286,7 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) =>
 			{
 				widget = this.loadWebComponent(_nodeName, _node);
 
-				if (this.addChild)
+				if(this.addChild)
 				{
 					// webcomponent going into old et2_widget
 					this.addChild(widget);
@@ -300,30 +300,30 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) =>
 		 * @param _nodeName
 		 * @param _node
 		 */
-		loadWebComponent(_nodeName: string, _node): HTMLElement
+		loadWebComponent(_nodeName : string, _node) : HTMLElement
 		{
 			let widget = <Et2WidgetClass>document.createElement(_nodeName);
 			widget.textContent = _node.textContent;
 
 			const widget_class = window.customElements.get(_nodeName);
-			if (!widget_class)
+			if(!widget_class)
 			{
 				throw Error("Unknown or unregistered WebComponent '" + _nodeName + "', could not find class");
 			}
 			widget.setParent(this);
 			var mgr = widget.getArrayMgr("content");
-			debugger;
+
 			// Apply any set attributes - widget will do its own coercion
 			_node.getAttributeNames().forEach(attribute =>
 			{
 				let attrValue = _node.getAttribute(attribute);
 
 				// If there is not attribute set, ignore it.  Widget sets its own default.
-				if (typeof attrValue === "undefined") return;
+				if(typeof attrValue === "undefined") return;
 
 				// If the attribute is marked as boolean, parse the
 				// expression as bool expression.
-				if (widget_class.getPropertyOptions(attribute).type == "Boolean")
+				if(widget_class.getPropertyOptions(attribute).type == "Boolean")
 				{
 					attrValue = mgr.parseBoolExpression(attrValue);
 				}
@@ -334,12 +334,12 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) =>
 				widget.setAttribute(attribute, attrValue);
 			});
 
-			if (widget_class.getPropertyOptions("value") && widget.set_value)
+			if(widget_class.getPropertyOptions("value") && widget.set_value)
 			{
-				if (mgr != null)
+				if(mgr != null)
 				{
 					let val = mgr.getEntry(widget.id, false, true);
-					if (val !== null)
+					if(val !== null)
 					{
 						widget.set_value(val);
 					}
@@ -364,32 +364,32 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) =>
 		parseXMLAttrs(_attrsObj, _target, _proto)
 		{
 			// Check whether the attributes object is really existing, if not abort
-			if (typeof _attrsObj == "undefined")
+			if(typeof _attrsObj == "undefined")
 			{
 				return;
 			}
 
 			// Iterate over the given attributes and parse them
 			var mgr = this.getArrayMgr("content");
-			for (var i = 0; i < _attrsObj.length; i++)
+			for(var i = 0; i < _attrsObj.length; i++)
 			{
 				var attrName = _attrsObj[i].name;
 				var attrValue = _attrsObj[i].value;
 
 				// Special handling for the legacy options
-				if (attrName == "options" && _proto.constructor.legacyOptions && _proto.constructor.legacyOptions.length > 0)
+				if(attrName == "options" && _proto.constructor.legacyOptions && _proto.constructor.legacyOptions.length > 0)
 				{
 					let legacy = _proto.constructor.legacyOptions || [];
 					let attrs = et2_attribute_registry[Object.getPrototypeOf(_proto).constructor.name] || {};
 					// Check for modifications on legacy options here.  Normal modifications
 					// are handled in widget constructor, but it's too late for legacy options then
-					if (_target.id && this.getArrayMgr("modifications").getEntry(_target.id))
+					if(_target.id && this.getArrayMgr("modifications").getEntry(_target.id))
 					{
-						var mod: any = this.getArrayMgr("modifications").getEntry(_target.id);
-						if (typeof mod.options != "undefined") attrValue = _attrsObj[i].value = mod.options;
+						var mod : any = this.getArrayMgr("modifications").getEntry(_target.id);
+						if(typeof mod.options != "undefined") attrValue = _attrsObj[i].value = mod.options;
 					}
 					// expand legacyOptions with content
-					if (attrValue.charAt(0) == '@' || attrValue.indexOf('$') != -1)
+					if(attrValue.charAt(0) == '@' || attrValue.indexOf('$') != -1)
 					{
 						attrValue = mgr.expandName(attrValue);
 					}
@@ -397,13 +397,13 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) =>
 					// Parse the legacy options (as a string, other types not allowed)
 					var splitted = et2_csvSplit(attrValue + "");
 
-					for (var j = 0; j < splitted.length && j < legacy.length; j++)
+					for(var j = 0; j < splitted.length && j < legacy.length; j++)
 					{
 						// Blank = not set, unless there's more legacy options provided after
-						if (splitted[j].trim().length === 0 && legacy.length >= splitted.length) continue;
+						if(splitted[j].trim().length === 0 && legacy.length >= splitted.length) continue;
 
 						// Check to make sure we don't overwrite a current option with a legacy option
-						if (typeof _target[legacy[j]] === "undefined")
+						if(typeof _target[legacy[j]] === "undefined")
 						{
 							attrValue = splitted[j];
 
@@ -411,7 +411,7 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) =>
 						If more legacy options than expected, stuff them all in the last legacy option
 						Some legacy options take a comma separated list.
 							 */
-							if (j == legacy.length - 1 && splitted.length > legacy.length)
+							if(j == legacy.length - 1 && splitted.length > legacy.length)
 							{
 								attrValue = splitted.slice(j);
 							}
@@ -420,11 +420,11 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) =>
 
 							// If the attribute is marked as boolean, parse the
 							// expression as bool expression.
-							if (attr.type == "boolean")
+							if(attr.type == "boolean")
 							{
 								attrValue = mgr.parseBoolExpression(attrValue);
 							}
-							else if (typeof attrValue != "object")
+							else if(typeof attrValue != "object")
 							{
 								attrValue = mgr.expandName(attrValue);
 							}
@@ -432,20 +432,20 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) =>
 						}
 					}
 				}
-				else if (attrName == "readonly" && typeof _target[attrName] != "undefined")
+				else if(attrName == "readonly" && typeof _target[attrName] != "undefined")
 				{
 					// do NOT overwrite already evaluated readonly attribute
 				}
 				else
 				{
 					let attrs = et2_attribute_registry[_proto.constructor.name] || {};
-					if (mgr != null && typeof attrs[attrName] != "undefined")
+					if(mgr != null && typeof attrs[attrName] != "undefined")
 					{
 						var attr = attrs[attrName];
 
 						// If the attribute is marked as boolean, parse the
 						// expression as bool expression.
-						if (attr.type == "boolean")
+						if(attr.type == "boolean")
 						{
 							attrValue = mgr.parseBoolExpression(attrValue);
 						}
@@ -461,9 +461,9 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) =>
 			}
 		}
 
-		iterateOver(_callback: Function, _context, _type)
+		iterateOver(_callback : Function, _context, _type)
 		{
-			if (et2_implements_registry[_type] && et2_implements_registry[_type](this))
+			if(et2_implements_registry[_type] && et2_implements_registry[_type](this))
 			{
 				_callback.call(_context, this);
 			}
@@ -484,16 +484,16 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) =>
 			 * rest themselves with their normal lifecycle (especially connectedCallback(), which is kind
 			 * of the equivalent of doLoadingFinished()
 			 */
-			if (this.getParent() instanceof et2_widget)
+			if(this.getParent() instanceof et2_widget)
 			{
 				this.getParent().getDOMNode(this).append(this);
 			}
 
-			for (let i = 0; i < this._legacy_children.length; i++)
+			for(let i = 0; i < this._legacy_children.length; i++)
 			{
 				let child = this._legacy_children[i];
 				let child_node = typeof child.getDOMNode !== "undefined" ? child.getDOMNode(child) : null;
-				if (child_node && child_node !== this)
+				if(child_node && child_node !== this)
 				{
 					this.append(child_node);
 				}
@@ -503,20 +503,20 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) =>
 
 		getWidgetById(_id)
 		{
-			if (this.id == _id)
+			if(this.id == _id)
 			{
 				return this;
 			}
 		}
 
-		setParent(new_parent: Et2WidgetClass | et2_widget)
+		setParent(new_parent : Et2WidgetClass | et2_widget)
 		{
 			this._parent = new_parent;
 
-			if (this.id)
+			if(this.id)
 			{
 				// Create a namespace for this object
-				if (this._createNamespace())
+				if(this._createNamespace())
 				{
 					this.checkCreateNamespace();
 				}
@@ -524,12 +524,12 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) =>
 
 		}
 
-		getParent(): HTMLElement | et2_widget
+		getParent() : HTMLElement | et2_widget
 		{
 			let parentNode = this.parentNode;
 
 			// If parent is an old et2_widget, use it
-			if (this._parent)
+			if(this._parent)
 			{
 				return this._parent;
 			}
@@ -537,16 +537,24 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) =>
 			return <HTMLElement>parentNode;
 		}
 
-		addChild(child: et2_widget | Et2WidgetClass)
+		addChild(child : et2_widget | Et2WidgetClass)
 		{
-			if (child instanceof et2_widget)
+			if(child instanceof et2_widget)
 			{
 				child._parent = this;
 
 				// During legacy widget creation, the child's DOM node won't be available yet.
 				this._legacy_children.push(child);
-				let child_node = typeof child.getDOMNode !== "undefined" ? child.getDOMNode(child) : null;
-				if (child_node && child_node !== this)
+				let child_node = null;
+				try
+				{
+					child_node = typeof child.getDOMNode !== "undefined" ? child.getDOMNode(child) : null;
+				}
+				catch(e)
+				{
+					// Child did not give up its DOM node nicely but errored instead
+				}
+				if(child_node && child_node !== this)
 				{
 					this.append(child_node);
 				}
@@ -567,23 +575,52 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) =>
 			return this._legacy_children;
 		}
 
-		getType(): string
+		getType() : string
 		{
 			return this.nodeName;
 		}
 
-		getDOMNode(): HTMLElement
+		getDOMNode() : HTMLElement
 		{
 			return this;
 		}
 
+		/**
+		 * Creates a copy of this widget.
+		 *
+		 * @param {et2_widget} _parent parent to set for clone, default null
+		 */
+		clone(_parent?) : Et2WidgetClass
+		{
+			// Default _parent to null
+			if(typeof _parent == "undefined")
+			{
+				_parent = null;
+			}
+
+			// Create the copy
+			var copy = <Et2WidgetClass>this.cloneNode(true);
+
+			// Create a clone of all child widgets of the given object
+			for(var i = 0; i < copy.getChildren().length; i++)
+			{
+				copy.addChild(copy.getChildren()[i].clone(this));
+			}
+
+			// Copy a reference to the content array manager
+			copy.setArrayMgrs(this.getArrayMgrs());
+
+			return copy;
+		}
+
+
 		/**
 		 * Sets the array manager for the given part
 		 *
 		 * @param {string} _part which array mgr to set
 		 * @param {object} _mgr
 		 */
-		setArrayMgr(_part: string, _mgr: et2_arrayMgr)
+		setArrayMgr(_part : string, _mgr : et2_arrayMgr)
 		{
 			this._mgrs[_part] = _mgr;
 		}
@@ -593,13 +630,13 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) =>
 		 *
 		 * @param {string} managed_array_type name of array mgr to return
 		 */
-		getArrayMgr(managed_array_type: string): et2_arrayMgr | null
+		getArrayMgr(managed_array_type : string) : et2_arrayMgr | null
 		{
-			if (this._mgrs && typeof this._mgrs[managed_array_type] != "undefined")
+			if(this._mgrs && typeof this._mgrs[managed_array_type] != "undefined")
 			{
 				return this._mgrs[managed_array_type];
 			}
-			else if (this.getParent())
+			else if(this.getParent())
 			{
 				return this.getParent().getArrayMgr(managed_array_type);
 			}
@@ -623,25 +660,25 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) =>
 		 *
 		 * @param _mgrs is used internally and should not be supplied.
 		 */
-		getArrayMgrs(_mgrs?: object)
+		getArrayMgrs(_mgrs? : object)
 		{
-			if (typeof _mgrs == "undefined")
+			if(typeof _mgrs == "undefined")
 			{
 				_mgrs = {};
 			}
 
 			// Add all managers of this object to the result, if they have not already
 			// been set in the result
-			for (var key in this._mgrs)
+			for(var key in this._mgrs)
 			{
-				if (typeof _mgrs[key] == "undefined")
+				if(typeof _mgrs[key] == "undefined")
 				{
 					_mgrs[key] = this._mgrs[key];
 				}
 			}
 
 			// Recursively applies this function to the parent widget
-			if (this._parent)
+			if(this._parent)
 			{
 				this._parent.getArrayMgrs(_mgrs);
 			}
@@ -661,20 +698,20 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) =>
 			// Get the content manager
 			var mgrs = this.getArrayMgrs();
 
-			for (var key in mgrs)
+			for(var key in mgrs)
 			{
 				var mgr = mgrs[key];
 
 				// Get the original content manager if we have already created a
 				// perspective for this node
-				if (typeof this._mgrs[key] != "undefined" && mgr.perspectiveData.owner == this)
+				if(typeof this._mgrs[key] != "undefined" && mgr.perspectiveData.owner == this)
 				{
 					mgr = mgr.parentMgr;
 				}
 
 				// Check whether the manager has a namespace for the id of this object
 				var entry = mgr.getEntry(this.id);
-				if (typeof entry === 'object' && entry !== null || this.id)
+				if(typeof entry === 'object' && entry !== null || this.id)
 				{
 					// The content manager has an own node for this object, so
 					// create an own perspective.
@@ -696,11 +733,11 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) =>
 		 */
 		getInstanceManager()
 		{
-			if (this._inst != null)
+			if(this._inst != null)
 			{
 				return this._inst;
 			}
-			else if (this.getParent())
+			else if(this.getParent())
 			{
 				return this.getParent().getInstanceManager();
 			}
@@ -717,19 +754,19 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) =>
 			var path = this.getArrayMgr("content").getPath();
 
 			// Prevent namespaced widgets with value from going an extra layer deep
-			if (this.id && this._createNamespace() && path[path.length - 1] == this.id) path.pop();
+			if(this.id && this._createNamespace() && path[path.length - 1] == this.id) path.pop();
 
 			return path;
 		}
 
-		_createNamespace(): boolean
+		_createNamespace() : boolean
 		{
 			return false;
 		}
 
-		egw(): IegwAppLocal
+		egw() : IegwAppLocal
 		{
-			if (this.getParent() != null && !(this.getParent() instanceof HTMLElement))
+			if(this.getParent() != null && !(this.getParent() instanceof HTMLElement))
 			{
 				return (<et2_widget>this.getParent()).egw();
 			}
@@ -737,10 +774,10 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) =>
 			// Get the window this object belongs to
 			var wnd = null;
 			// @ts-ignore Technically this doesn't have implements(), but it's mixed in
-			if (this.implements(et2_IDOMNode))
+			if(this.implements(et2_IDOMNode))
 			{
 				var node = (<et2_IDOMNode><unknown>this).getDOMNode();
-				if (node && node.ownerDocument)
+				if(node && node.ownerDocument)
 				{
 					wnd = node.ownerDocument.parentNode || node.ownerDocument.defaultView;
 				}
@@ -751,13 +788,13 @@ export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) =>
 		}
 	};
 
-	function applyMixins(derivedCtor: any, baseCtors: any[])
+	function applyMixins(derivedCtor : any, baseCtors : any[])
 	{
 		baseCtors.forEach(baseCtor =>
 		{
 			Object.getOwnPropertyNames(baseCtor.prototype).forEach(name =>
 			{
-				if (name !== 'constructor')
+				if(name !== 'constructor')
 				{
 					derivedCtor.prototype[name] = baseCtor.prototype[name];
 				}
diff --git a/api/js/etemplate/et2_widget_grid.ts b/api/js/etemplate/et2_widget_grid.ts
index 7c15e5f2c1..34b04dd1c5 100644
--- a/api/js/etemplate/et2_widget_grid.ts
+++ b/api/js/etemplate/et2_widget_grid.ts
@@ -96,14 +96,14 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 			description: "Defines sortable start callback function"
 		}
 	};
-	private table: JQuery;
-	private thead: JQuery;
-	private tfoot: JQuery;
-	private tbody: JQuery;
+	private table : JQuery;
+	private thead : JQuery;
+	private tfoot : JQuery;
+	private tbody : JQuery;
 
 	// Counters for rows and columns
-	private rowCount: number = 0;
-	private columnCount: number = 0;
+	private rowCount : number = 0;
+	private columnCount : number = 0;
 
 	// 2D-Array which holds references to the DOM td tags
 	private cells = [];
@@ -116,9 +116,10 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 
 	// Wrapper div for height & overflow, if needed
 	private wrapper = null;
-	private lastRowNode: null;
+	private lastRowNode : null;
 
 	private sortablejs : Sortable = null;
+
 	/**
 	 * Constructor
 	 *
@@ -139,19 +140,20 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 			.appendTo(this.table);
 	}
 
-	_initCells(_colData : ColumnEntry[], _rowData : RowEntry[]) {
+	_initCells(_colData : ColumnEntry[], _rowData : RowEntry[])
+	{
 		// Copy the width and height
 		const w = _colData.length;
 		const h = _rowData.length;
 
 		// Create the 2D-Cells array
 		const cells = new Array(h);
-		for (let y = 0; y < h; y++)
+		for(let y = 0; y < h; y++)
 		{
 			cells[y] = new Array(w);
 
 			// Initialize the cell description objects
-			for (let x = 0; x < w; x++)
+			for(let x = 0; x < w; x++)
 			{
 				// Some columns (nm) we do not parse into a boolean
 				const col_disabled = _colData[x].disabled;
@@ -178,7 +180,7 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 
 	_getColDataEntry() : ColumnEntry
 	{
-		return  {
+		return {
 			width: "auto",
 			class: "",
 			align: "",
@@ -200,10 +202,10 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 
 	_getCell(_cells, _x, _y)
 	{
-		if ((0 <= _y) && (_y < _cells.length))
+		if((0 <= _y) && (_y < _cells.length))
 		{
 			const row = _cells[_y];
-			if ((0 <= _x) && (_x < row.length))
+			if((0 <= _x) && (_x < row.length))
 			{
 				return row[_x];
 			}
@@ -214,7 +216,7 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 
 	_forceNumber(_val)
 	{
-		if (isNaN(_val))
+		if(isNaN(_val))
 		{
 			throw(_val + " is not a number!");
 		}
@@ -226,7 +228,7 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 	{
 		// Some things cannot be done inside a nextmatch - nm will do the expansion later
 		var nm = false;
-		let widget: et2_widget = this;
+		let widget : et2_widget = this;
 		while(!nm && widget != this.getRoot())
 		{
 			nm = (widget.getType() == 'nextmatch');
@@ -234,14 +236,15 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 		}
 
 		// Parse the columns tag
-		et2_filteredNodeIterator(columns, function(node, nodeName) {
+		et2_filteredNodeIterator(columns, function(node, nodeName)
+		{
 			const colDataEntry = this._getColDataEntry();
 			// This cannot be done inside a nm, it will expand it later
 			colDataEntry["disabled"] = nm ?
-				et2_readAttrWithDefault(node, "disabled", "") :
-				this.getArrayMgr("content")
-					.parseBoolExpression(et2_readAttrWithDefault(node, "disabled", ""));
-			if (nodeName == "column")
+									   et2_readAttrWithDefault(node, "disabled", "") :
+									   this.getArrayMgr("content")
+										   .parseBoolExpression(et2_readAttrWithDefault(node, "disabled", ""));
+			if(nodeName == "column")
 			{
 				colDataEntry["width"] = et2_readAttrWithDefault(node, "width", "auto");
 				colDataEntry["class"] = et2_readAttrWithDefault(node, "class", "");
@@ -266,11 +269,12 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 		}, this);
 
 		// Parse the rows tag
-		et2_filteredNodeIterator(rows, function(node, nodeName) {
+		et2_filteredNodeIterator(rows, function(node, nodeName)
+		{
 			const rowDataEntry = this._getRowDataEntry();
 			rowDataEntry["disabled"] = this.getArrayMgr("content")
-					.parseBoolExpression(et2_readAttrWithDefault(node, "disabled", ""));
-			if (nodeName == "row")
+				.parseBoolExpression(et2_readAttrWithDefault(node, "disabled", ""));
+			if(nodeName == "row")
 			{
 				// Remember this row for auto-repeat - it'll eventually be the last one
 				this.lastRowNode = node;
@@ -300,8 +304,8 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 		if(this.getArrayMgr("content"))
 		{
 			const content = this.getArrayMgr("content");
-			var rowDataEntry = rowData[rowData.length-1];
-			rowIndex = rowData.length-1;
+			var rowDataEntry = rowData[rowData.length - 1];
+			rowIndex = rowData.length - 1;
 			// Find out if we have any content rows, and how many
 			let cont = true;
 			while(cont)
@@ -313,7 +317,7 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 					rowIndex++;
 				}
 
-				else if (this.lastRowNode != null)
+				else if(this.lastRowNode != null)
 				{
 					// Have to look through actual widgets to support const[$row]
 					// style names - should be avoided so we can remove this extra check
@@ -328,41 +332,49 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 
 					// Not in a nextmatch, so we can expand with abandon
 					const currentPerspective = jQuery.extend({}, content.perspectiveData);
-					const check = function (node, nodeName) {
-						if (nodeName == 'box' || nodeName == 'hbox' || nodeName == 'vbox') {
+					const check = function(node, nodeName)
+					{
+						if(nodeName == 'box' || nodeName == 'hbox' || nodeName == 'vbox')
+						{
 							return et2_filteredNodeIterator(node, check, this);
 						}
 						content.perspectiveData.row = rowIndex;
-						for (let attr in node.attributes) {
+						for(let attr in node.attributes)
+						{
 							const value = et2_readAttrWithDefault(node, node.attributes[attr].name, "");
 							// Don't include first char, those should be handled by normal means
 							// and it would break nextmatch
-							if (value.indexOf('@') > 0 || value.indexOf('$') > 0) {
+							if(value.indexOf('@') > 0 || value.indexOf('$') > 0)
+							{
 								// Ok, we found something.  How many? Check for values.
 								let ident = content.expandName(value);
 								// expandName() handles index into content (@), but we have to look up
 								// regular values
-								if (value[0] != '@') {
+								if(value[0] != '@')
+								{
 									// Returns null if there isn't an actual value
 									ident = content.getEntry(ident, false, true);
 								}
-								while (ident != null && rowIndex < 1000) {
+								while(ident != null && rowIndex < 1000)
+								{
 									rowData[rowIndex] = jQuery.extend({}, rowDataEntry);
 									content.perspectiveData.row = ++rowIndex;
 									ident = content.expandName(value);
-									if (value[0] != '@') {
+									if(value[0] != '@')
+									{
 										// Returns null if there isn't an actual value
 										ident = content.getEntry(ident, false, true);
 									}
 								}
-								if (rowIndex >= 1000) {
+								if(rowIndex >= 1000)
+								{
 									egw.debug("error", "Problem in autorepeat fallback: too many rows for '%s'.  Use a nextmatch, or start debugging.", value);
 								}
 								return;
 							}
 						}
 					};
-					et2_filteredNodeIterator(this.lastRowNode, check,this);
+					et2_filteredNodeIterator(this.lastRowNode, check, this);
 					cont = false;
 					content.perspectiveData = currentPerspective;
 				}
@@ -381,7 +393,8 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 		}
 	}
 
-	_fillCells(cells, columns : object[], rows : object[]) {
+	_fillCells(cells, columns : object[], rows : object[])
+	{
 		const h = cells.length;
 		const w = (h > 0) ? cells[0].length : 0;
 		const currentPerspective = jQuery.extend({}, this.getArrayMgr("content").perspectiveData);
@@ -389,10 +402,12 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 		// Read the elements inside the columns
 		let x = 0;
 
-		et2_filteredNodeIterator(columns, function(node, nodeName) {
+		et2_filteredNodeIterator(columns, function(node, nodeName)
+		{
 
-			function _readColNode(node, nodeName) {
-				if (y >= h)
+			function _readColNode(node, nodeName)
+			{
+				if(y >= h)
 				{
 					this.egw().debug("warn", "Skipped grid cell in column, '" +
 						nodeName + "'");
@@ -402,7 +417,7 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 				const cell = this._getCell(cells, x, y);
 
 				// Read the span value of the element
-				if (node.getAttribute("span"))
+				if(node.getAttribute("span"))
 				{
 					cell.rowSpan = node.getAttribute("span");
 				}
@@ -412,7 +427,7 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 					cell.autoRowSpan = true;
 				}
 
-				if (cell.rowSpan == "all")
+				if(cell.rowSpan == "all")
 				{
 					cell.rowSpan = cells.length;
 				}
@@ -423,7 +438,7 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 				const widget = this.createElementFromNode(node, nodeName);
 
 				// Fill all cells the widget is spanning
-				for (let i = 0; i < span && y < cells.length; i++, y++)
+				for(let i = 0; i < span && y < cells.length; i++, y++)
 				{
 					this._getCell(cells, x, y).widget = widget;
 				}
@@ -432,7 +447,7 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 			// If the node is a column, create the widgets which belong into
 			// the column
 			var y = 0;
-			if (nodeName == "column")
+			if(nodeName == "column")
 			{
 				et2_filteredNodeIterator(node, _readColNode, this);
 			}
@@ -455,10 +470,12 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 			nm = (widget.getType() == 'nextmatch');
 			widget = widget.getParent();
 		}
-		et2_filteredNodeIterator(rows, function(node, nodeName) {
+		et2_filteredNodeIterator(rows, function(node, nodeName)
+		{
 
-			readRowNode = function _readRowNode(node, nodeName) {
-				if (x >= w)
+			readRowNode = function _readRowNode(node, nodeName)
+			{
+				if(x >= w)
 				{
 					if(nodeName != "description")
 					{
@@ -473,7 +490,7 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 				let cell = this._getCell(cells, x, y);
 
 				// Read the span value of the element
-				if (node.getAttribute("span"))
+				if(node.getAttribute("span"))
 				{
 					cell.colSpan = node.getAttribute("span");
 				}
@@ -483,7 +500,7 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 					cell.autoColSpan = true;
 				}
 
-				if (cell.colSpan == "all")
+				if(cell.colSpan == "all")
 				{
 					cell.colSpan = cells[y].length;
 				}
@@ -491,13 +508,13 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 				const span = cell.colSpan = this._forceNumber(cell.colSpan);
 
 				// Read the align value of the element
-				if (node.getAttribute("align"))
+				if(node.getAttribute("align"))
 				{
 					cell.align = node.getAttribute("align");
 				}
 
 				// store id of nextmatch-*headers, so it is available for disabled widgets, which get not instanciated
-				if (nodeName.substr(0, 10) == 'nextmatch-')
+				if(nodeName.substr(0, 10) == 'nextmatch-')
 				{
 					cell.nm_id = node.getAttribute('id');
 				}
@@ -540,10 +557,10 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 				}
 
 				// Fill all cells the widget is spanning
-				for (let i = 0; i < span && x < cells[y].length; i++, x++)
+				for(let i = 0; i < span && x < cells[y].length; i++, x++)
 				{
 					cell = this._getCell(cells, x, y);
-					if (cell.widget == null)
+					if(cell.widget == null)
 					{
 						cell.widget = widget;
 					}
@@ -562,7 +579,7 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 			{
 				return;
 			}
-			if (nodeName == "row")
+			if(nodeName == "row")
 			{
 				// Adjust for the row
 				for(var name in this.getArrayMgrs())
@@ -570,7 +587,7 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 					//this.getArrayMgr(name).perspectiveData.row = y;
 				}
 
-				let cell = this._getCell(cells, x,y);
+				let cell = this._getCell(cells, x, y);
 				if(cell.rowData.id)
 				{
 					this.getArrayMgr("content").expandName(cell.rowData.id);
@@ -595,7 +612,8 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 		}, this);
 
 		// Extra content rows
-		for(y; y < h; y++) {
+		for(y; y < h; y++)
+		{
 			x = 0;
 
 			et2_filteredNodeIterator(this.lastRowNode, readRowNode, this);
@@ -614,15 +632,15 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 
 		// Determine the last cell in each row and expand its span value if
 		// the span has not been explicitly set.
-		for (var y = 0; y < h; y++)
+		for(var y = 0; y < h; y++)
 		{
-			for (var x = w - 1; x >= 0; x--)
+			for(var x = w - 1; x >= 0; x--)
 			{
 				var cell = _cells[y][x];
 
-				if (cell.widget != null)
+				if(cell.widget != null)
 				{
-					if (cell.autoColSpan)
+					if(cell.autoColSpan)
 					{
 						cell.colSpan = w - x;
 					}
@@ -633,15 +651,15 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 
 		// Determine the last cell in each column and expand its span value if
 		// the span has not been explicitly set.
-		for (var x = 0; x < w; x++)
+		for(var x = 0; x < w; x++)
 		{
-			for (var y = h - 1; y >= 0; y--)
+			for(var y = h - 1; y >= 0; y--)
 			{
 				var cell = _cells[y][x];
 
-				if (cell.widget != null)
+				if(cell.widget != null)
 				{
-					if (cell.autoRowSpan)
+					if(cell.autoRowSpan)
 					{
 						cell.rowSpan = h - y;
 					}
@@ -655,6 +673,7 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 	{
 		return true;
 	}
+
 	/**
 	 * As the does not fit very well into the default widget structure, we're
 	 * overwriting the loadFromXML function and doing a two-pass reading -
@@ -662,7 +681,8 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 	 *
 	 * @param {object} _node xml node to process
 	 */
-	loadFromXML(_node ) {
+	loadFromXML(_node)
+	{
 		// Keep the node for later changing / reloading
 		this.template_node = _node;
 
@@ -670,12 +690,12 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 		const rowsElems = et2_directChildrenByTagName(_node, "rows");
 		const columnsElems = et2_directChildrenByTagName(_node, "columns");
 
-		if (rowsElems.length == 1 && columnsElems.length == 1)
+		if(rowsElems.length == 1 && columnsElems.length == 1)
 		{
 			const columns = columnsElems[0];
 			const rows = rowsElems[0];
-			const colData: ColumnEntry[] = [];
-			const rowData: RowEntry[] = [];
+			const colData : ColumnEntry[] = [];
+			const rowData : RowEntry[] = [];
 
 			// Fetch the column and row data
 			this._fetchRowColData(columns, rows, colData, rowData);
@@ -698,7 +718,7 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 		}
 	}
 
-	createTableFromCells(_cells, _colData: any[], _rowData: any[])
+	createTableFromCells(_cells, _colData : any[], _rowData : any[])
 	{
 		this.managementArray = [];
 		this.cells = _cells;
@@ -710,19 +730,19 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 		const w = this.columnCount = (h > 0) ? _cells[0].length : 0;
 
 		// Create the table rows.
-		for (let y = 0; y < h; y++)
+		for(let y = 0; y < h; y++)
 		{
 			let parent = this.tbody;
 			switch(this.rowData[y]["part"])
 			{
 				case 'header':
-					if (!this.tbody.children().length && !this.tfoot.children().length)
+					if(!this.tbody.children().length && !this.tfoot.children().length)
 					{
 						parent = this.thead;
 					}
 					break;
 				case 'footer':
-					if (!this.tbody.children().length)
+					if(!this.tbody.children().length)
 					{
 						parent = this.tfoot;
 					}
@@ -731,17 +751,17 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 			const tr = jQuery(document.createElement("tr")).appendTo(parent)
 				.addClass(this.rowData[y]["class"]);
 
-			if (this.rowData[y].disabled)
+			if(this.rowData[y].disabled)
 			{
 				tr.hide();
 			}
 
-			if (this.rowData[y].height != "auto")
+			if(this.rowData[y].height != "auto")
 			{
 				tr.height(this.rowData[y].height);
 			}
 
-			if (this.rowData[y].valign)
+			if(this.rowData[y].valign)
 			{
 				tr.attr("valign", this.rowData[y].valign);
 			}
@@ -752,31 +772,39 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 			}
 			// Create the cells. x is incremented by the colSpan value of the
 			// cell.
-			for (let x = 0; x < w;)
+			for(let x = 0; x < w;)
 			{
 				// Fetch a cell from the cells
 				const cell = this._getCell(_cells, x, y);
 
-				if (cell.td == null && cell.widget != null)
+				if(cell.td == null && cell.widget != null)
 				{
 					// Create the cell
 					const td = jQuery(document.createElement("td")).appendTo(tr)
 						.addClass(cell["class"]);
 
-					if (cell.disabled)
+					if(cell.disabled)
 					{
 						td.hide();
-						cell.widget.options.disabled = cell.disabled;
+						// Need to do different things with webComponents
+						if(typeof cell.widget.options !== "undefined")
+						{
+							cell.widget.options.disabled = cell.disabled;
+						}
+						else if(cell.widget.nodeName)
+						{
+							cell.widget.disabled = cell.disabled;
+						}
 					}
 
-					if (cell.width != "auto")
+					if(cell.width != "auto")
 					{
 						td.width(cell.width);
 					}
 
-					if (cell.align)
+					if(cell.align)
 					{
-						td.attr("align",cell.align);
+						td.attr("align", cell.align);
 					}
 
 					// Add the entry for the widget to the management array
@@ -791,18 +819,20 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 					const rs = (y == h - 1) ? h - y : Math.min(h - y, cell.rowSpan);
 
 					// Set the col and row span values
-					if (cs > 1) {
+					if(cs > 1)
+					{
 						td.attr("colspan", cs);
 					}
 
-					if (rs > 1) {
+					if(rs > 1)
+					{
 						td.attr("rowspan", rs);
 					}
 
 					// Assign the td to the cell
-					for (let sx = x; sx < x + cs; sx++)
+					for(let sx = x; sx < x + cs; sx++)
 					{
-						for (let sy = y; sy < y + rs; sy++)
+						for(let sy = y; sy < y + rs; sy++)
 						{
 							this._getCell(_cells, sx, sy).td = td;
 						}
@@ -822,15 +852,15 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 	{
 		// If the parent class functions are asking for the DOM-Node, return the
 		// outer table.
-		if (_sender == this || typeof _sender == 'undefined')
+		if(_sender == this || typeof _sender == 'undefined')
 		{
 			return this.wrapper != null ? this.wrapper[0] : this.table[0];
 		}
 
 		// Check whether the _sender object exists inside the management array
-		for (let i = 0; i < this.managementArray.length; i++)
+		for(let i = 0; i < this.managementArray.length; i++)
 		{
-			if (this.managementArray[i].widget == _sender)
+			if(this.managementArray[i].widget == _sender)
 			{
 				return this.managementArray[i].cell;
 			}
@@ -839,22 +869,22 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 		return null;
 	}
 
-	isInTree(_sender?:et2_widget) : boolean
+	isInTree(_sender? : et2_widget) : boolean
 	{
 		let vis = true;
 
-		if (typeof _sender != "undefined" && _sender != this)
+		if(typeof _sender != "undefined" && _sender != this)
 		{
 			vis = false;
 
 			// Check whether the _sender object exists inside the management array
-			for (let i = 0; i < this.managementArray.length; i++)
+			for(let i = 0; i < this.managementArray.length; i++)
 			{
-				if (this.managementArray[i].widget == _sender)
+				if(this.managementArray[i].widget == _sender)
 				{
 					vis = !(typeof this.managementArray[i].disabled === 'boolean' ?
-						this.managementArray[i].disabled :
-						this.getArrayMgr("content").parseBoolExpression(this.managementArray[i].disabled)
+							this.managementArray[i].disabled :
+							this.getArrayMgr("content").parseBoolExpression(this.managementArray[i].disabled)
 					);
 					break;
 				}
@@ -873,7 +903,7 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 	 *
 	 * @param {string} _value Overflow value, must be a valid CSS overflow value, default 'visible'
 	 */
-	set_overflow(_value: string)
+	set_overflow(_value : string)
 	{
 		let wrapper = this.wrapper || this.table.parent('[id$="_grid_wrapper"]');
 
@@ -881,7 +911,7 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 
 		if(wrapper.length == 0 && _value && _value !== 'visible')
 		{
-			this.wrapper = wrapper = this.table.wrap('<div id="'+this.id+'_grid_wrapper"></div>').parent();
+			this.wrapper = wrapper = this.table.wrap('<div id="' + this.id + '_grid_wrapper"></div>').parent();
 			if(this.height)
 			{
 				wrapper.css('height', this.height);
@@ -889,7 +919,8 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 		}
 		wrapper.css('overflow', _value);
 
-		if(wrapper.length && (!_value || _value === 'visible')) {
+		if(wrapper.length && (!_value || _value === 'visible'))
+		{
 			this.table.unwrap();
 		}
 	}
@@ -906,7 +937,7 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 	 * @param {Object} [_value.sel_options] New select options
 	 * @param {Object} [_value.readonlys] New read-only values
 	 */
-	set_value(_value : {content? : object, sel_options? : object, readonlys? : object})
+	set_value(_value : { content? : object, sel_options? : object, readonlys? : object })
 	{
 		// Destroy children, empty grid
 		for(let i = 0; i < this.managementArray.length; i++)
@@ -943,7 +974,7 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 	 *
 	 * @param {boolean|function} sortable Callback or false to disable
 	 */
-	set_sortable(sortable: boolean | Function)
+	set_sortable(sortable : boolean | Function)
 	{
 		const self = this;
 		let tbody = this.getDOMNode().getElementsByTagName('tbody')[0];
@@ -954,32 +985,37 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 			return;
 		}
 
-		for (let i =0; i < tbody.children.length; i++)
+		for(let i = 0; i < tbody.children.length; i++)
 		{
-			if (!tbody.children[i].classList.contains('th') && !tbody.children[i].id)
+			if(!tbody.children[i].classList.contains('th') && !tbody.children[i].id)
 			{
 				tbody.children[i].setAttribute('id', i.toString());
 			}
 		}
 
-		this.sortablejs = new Sortable(tbody,{
+		this.sortablejs = new Sortable(tbody, {
 			group: this.options.sortable_connectWith,
 			draggable: "tr:not(.th)",
 			filter: this.options.sortable_cancel,
 			ghostClass: this.options.sortable_placeholder,
 			dataIdAttr: 'id',
-			onAdd:function (event) {
-				if (typeof self.options.sortable_recieveCallback == 'function') {
+			onAdd: function(event)
+			{
+				if(typeof self.options.sortable_recieveCallback == 'function')
+				{
 					self.options.sortable_recieveCallback.call(self, event, this, self.id);
 				}
 			},
-			onStart: function (event, ui) {
-				if (typeof self.options.sortable_startCallback == 'function') {
+			onStart: function(event, ui)
+			{
+				if(typeof self.options.sortable_startCallback == 'function')
+				{
 					self.options.sortable_startCallback.call(self, event, this, self.id);
 				}
 			},
-			onSort: function (event) {
-				self.egw().json(sortable,[
+			onSort: function(event)
+			{
+				self.egw().json(sortable, [
 						self.getInstanceManager().etemplate_exec_id,
 						self.sortablejs.toArray(),
 						self.id],
@@ -998,13 +1034,14 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 	 */
 	_link_actions(actions : object[])
 	{
-		 // Get the top level element for the tree
+		// Get the top level element for the tree
 		// get appObjectManager for the actual app, it might not always be the current app(e.g. running app content under admin tab)
 		// @ts-ignore
 		let objectManager = egw_getAppObjectManager(true, this.getInstanceManager().app);
-		objectManager = objectManager.getObjectById(this.getInstanceManager().uniqueId,2) || objectManager;
+		objectManager = objectManager.getObjectById(this.getInstanceManager().uniqueId, 2) || objectManager;
 		let widget_object = objectManager.getObjectById(this.id);
-		if (widget_object == null) {
+		if(widget_object == null)
+		{
 			// Add a new container to the object manager which will hold the widget
 			// objects
 			widget_object = objectManager.insertObject(false, new egwActionObject(
@@ -1024,7 +1061,7 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 		let i = 0, r = 0;
 		for(; i < this.rowData.length; i++)
 		{
-			if (this.rowData[i].part != 'body') continue;
+			if(this.rowData[i].part != 'body') continue;
 			const content = this.getArrayMgr('content').getEntry(i);
 			if(content)
 			{
@@ -1073,33 +1110,33 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 	_getColumnName()
 	{
 		const ids = [];
-		for(let r=0; r < this.cells.length; ++r)
+		for(let r = 0; r < this.cells.length; ++r)
 		{
 			const cols = this.cells[r];
-			for(let c=0; c < cols.length; ++c)
+			for(let c = 0; c < cols.length; ++c)
 			{
-				if (cols[c].nm_id) ids.push(cols[c].nm_id);
+				if(cols[c].nm_id) ids.push(cols[c].nm_id);
 			}
 		}
 		return ids.join('_');
 	}
 
-	resize (_height)
+	resize(_height)
 	{
-		if (typeof this.options != 'undefined' && _height
-				&& typeof this.options.resize_ratio != 'undefined' && this.options.resize_ratio)
+		if(typeof this.options != 'undefined' && _height
+			&& typeof this.options.resize_ratio != 'undefined' && this.options.resize_ratio)
 		{
 			// apply the ratio
-			_height = (this.options.resize_ratio != '')? _height * this.options.resize_ratio: _height;
-			if (_height != 0)
+			_height = (this.options.resize_ratio != '') ? _height * this.options.resize_ratio : _height;
+			if(_height != 0)
 			{
-				if (this.wrapper)
+				if(this.wrapper)
 				{
 					this.wrapper.height(this.wrapper.height() + _height);
 				}
 				else
 				{
-					this.table.height(this.table.height() + _height );
+					this.table.height(this.table.height() + _height);
 				}
 			}
 
@@ -1119,28 +1156,32 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 	 */
 	getRow(_sender : et2_widget) : et2_widget
 	{
-		if (!_sender || !this.cells) return;
+		if(!_sender || !this.cells) return;
 
-		for(let r=0; r < this.cells.length; ++r)
+		for(let r = 0; r < this.cells.length; ++r)
 		{
 			const row = this.cells[r];
-			for(var c=0; c < row.length; ++c)
+			for(var c = 0; c < row.length; ++c)
 			{
-				if (!row[c].widget) continue;
+				if(!row[c].widget) continue;
 
 				let found = row[c].widget === _sender;
-				if (!found) row[c].widget.iterateOver(function(_widget) {if (_widget === _sender) found = true;});
-				if (found)
+				if(!found) row[c].widget.iterateOver(function(_widget)
+				{
+					if(_widget === _sender) found = true;
+				});
+				if(found)
 				{
 					// return a fake row object allowing to iterate over it's children
-					const row_obj: et2_widget = new et2_widget(this, {});
-					for(var c=0; c < row.length; ++c)
+					const row_obj : et2_widget = new et2_widget(this, {});
+					for(var c = 0; c < row.length; ++c)
 					{
-						if (row[c].widget) row_obj.addChild(row[c].widget);
+						if(row[c].widget) row_obj.addChild(row[c].widget);
 					}
 					row_obj.isInTree = jQuery.proxy(this.isInTree, this);
 					// we must not free the children!
-					row_obj.destroy = function(){
+					row_obj.destroy = function()
+					{
 						// @ts-ignore
 						delete row_obj._children;
 					};
@@ -1153,28 +1194,30 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
 	/**
 	 * Needed for the align interface, but we're not doing anything with it...
 	 */
-	get_align(): string {
+	get_align() : string
+	{
 		return "";
 	}
 }
+
 et2_register_widget(et2_grid, ["grid"]);
 
 interface ColumnEntry
 {
 	id? : string,
-	width: string | number, // 'auto'
-	class: string,          // "",
-	align: string,          // "",
-	span: string | number   // "1",
-	disabled: boolean       // false
+	width : string | number, // 'auto'
+	class : string,          // "",
+	align : string,          // "",
+	span : string | number   // "1",
+	disabled : boolean       // false
 }
 
 interface RowEntry
 {
 	id? : string
-	height: string | number, // "auto",
-	class: string,           // "",
-	valign: string,          // "top",
-	span: string | number,   // "1",
-	disabled: boolean        // false
+	height : string | number, // "auto",
+	class : string,           // "",
+	valign : string,          // "top",
+	span : string | number,   // "1",
+	disabled : boolean        // false
 }
\ No newline at end of file