Marvin JS Example - Toolbars with display settings

In this example, you can change layout without reloading of the editor. Select the desired layout to rerender editor toolbars.

When you take a look at the source code, you can see that a listener function is bind to the change events of radio buttons. When a change event is invoked, the updateToolbars(value) function is performed. This function assembles a JavaScript object that describes display settings and call the setDisplaySettings(settings) function of the sketcher. Only give settings that you would like to overwrite. In this case, this is the toolbars property.

		var marvinSketcherInstance;

		$(document).ready(function handleDocumentReady (e) {
			// after editor in the sketch iframe is ready store its reference 
			// and activate controls
			MarvinJSUtil.getEditor("#sketch").then(function (sketcherInstance) {
				marvinSketcherInstance = sketcherInstance;
				initControls();
			},function (error) {
				alert("Cannot retrieve sketcher instance from iframe:"+error);
			});
		});

		function initControls () {
			// change layout
			$("input[name='layout-group']").change(function(e) {
				var s = $(this).val();
				updateToolbars(s);
			});
		}

		function updateToolbars(layout) {
			marvinSketcherInstance.setDisplaySettings({
				"toolbars": layout
			});
		}