Not sure how to hit toolbar methods

Suite and Optimus
#1

Greets again, another probably silly question.

I create a toolbar and want to access the methods in the docs, but the console says they don’t exist … dumpster diving the object in the console confirms. What am I missing?

Thanks!

Here is my little chunk of code … note the console.warn where I’m looking at the object in question…

<script>
	let ndToolBar = new dhx.Toolbar("nd-toolbar-target", {
		css: "dhx_widget--bordered",
		data: [
		    { "id": "nd-home", "icon": "fa fa-home" },
		    { "id": "nd-favorites", "icon": "fa fa-heart" },
		    { "id": "nd-search", "icon": "fa fa-search" },
		    { "id": "nd-back", "icon": "fa fa-arrow-left" },
		    { "id": "nd-up", "icon": "fa fa-arrow-up" },
		    { "id": "nd-forward", "icon": "fa fa-arrow-right" },
		    { "type": "separator" },
		    { id: "nd-nrlBox", type: "input", label: "nrlx://", width: 100 },
		    { id: "nd-history", type: "selectButton", value: "", items: [{ value: "-=< No history yet >=-" }]}
		]
	});

	const handleResize = function() {
		let w = window.innerWidth - 360;
console.warn(ndToolBar);
		ndToolBar.setWidth('nd-nrlxBox', w);
	};

	$('window').on('resize', function() { handleResize(); });
	handleResize();
</script>
#2

As reference, here’s the docs page I’m getting my info from …

https://docs.dhtmlx.com/api__refs__dhtmlxtoolbar.html

#3

… aaaaaand I came up with a solution, although I don’t know if this is the best practice way of doing things. I modified config.data[elemIDX].width then ask for a paint. Thoughts?

#4 
<script>
	let ndToolBar = new dhx.Toolbar("nd-toolbar-target", {
		css: "dhx_widget--bordered",
		data: [
		    { "id": "nd-home", "icon": "fa fa-home" },
		    { "id": "nd-favorites", "icon": "fa fa-heart" },
		    { "id": "nd-search", "icon": "fa fa-search" },
		    { "id": "nd-back", "icon": "fa fa-arrow-left" },
		    { "id": "nd-up", "icon": "fa fa-arrow-up" },
		    { "id": "nd-forward", "icon": "fa fa-arrow-right" },
		    { "type": "separator" },
			{ id: "nd-nrlBox", type: "input", label: "nrlx://", width: window.innerWidth - 360 },
		    { id: "nd-history", type: "selectButton", value: "", items: [{ value: "-=< No history yet >=-" }]}
		]
	});

	const handleResize = function() {
		let w = window.innerWidth - 360;
		ndToolBar.config.data[7].width = w;
		ndToolBar.paint();
	};

	$(window).resize(function() { handleResize(); });
	handleResize();
</script>
#5

You may use the update() method for your toolbar data collection:

#6

Thank you for the post, sematik … it looks like that is not available for toolbar - the docs you hit me with are for the Tree collection. And it looked so elegant, I liked the idea.

#7

toolbar uses the tree collection for the data so the mentioned method can be used for the toolbar.
https://snippet.dhtmlx.com/s274i8ko

#8

Ah I missed that it’s toolbar.data.update … that makes a lot of sense and I’ll give it another go. Thanks mate!