Embedding multi button toolbar above TreeTable

Webix JS
1

Here is my definition of a two row webix.ui with the first row the toolbar and the second row the treetable but it does not render on the screen nor does it give errors. I need to have a multibutton toolbar attached to the top of the treetable. The snippet link below has two buttons which work and DO NOT flash - what am I doing wrong here?

I am most grateful for any help you can offer.

webix.ui({
rows: [
	{
		container: "gridTreeToolbar",
		view: "toolbar",
		height: 22,
		width: 1127,
		cols: [
			{ view:"button", type:"image", image:"../images/tree_insert_below.png",
				label:"Insert Above",
				width:100,
				align:"left",
				tooltip:"Insert new Subject/Action Item above current",
				click:function(){ HLF.actions.actionAddAbove() }},
			{ view:"button", type:"image", image:"../images/tree_insert_above.png",
				label:"Insert Below",
				width:100,
				align:"left",
				tooltip:"Insert new Subject/Action Item below current",
				click:function(){ HLF.actions.actionAddBelow() }},
			{ view:"button", type:"image", image:"../images/tree_append.png",
				label:"Append Indented",
				width:100,
				align:"left",
				tooltip:"Add new Action Item indented within current",
				click:function(){ HLF.actions.actionAppendIndented() }},
			{ view:"button", type:"image", image:"../images/development.png",
				label:"Developer",
				width:100,
				align:"left",
				tooltip:"Developer Tools",
				click:function(){ HLF.actions.actionDeveloper() }}
		]
	},
	{
		container: gridContainer,
		id: gridId,
		view:"treetable",
		headerRowHeight:20,
		rowHeight:32,
		select:"row",
		scrollX:true,
		scrollY:true,
		editable:true,
		editaction:"dblclick",
		columns:[
			{ id:"id", header:"Id", css:{"text-align":"center"}, width:50},
			{ id:"status", header:"Status", css:{"text-align":"center"}, width:80},
			{ id:"action", header:"Action Items", editor:"text", width:980, template:"{common.space()}{common.icon()} #value#", fillspace:1},
			{ id:"due",	header:"Due", editor:"text", width:100}
		],
		autoheight:false,
		autowidth:false,
		data: HLF.actions.actionItems[index]
	}
]
});

I am trying something like this previous snippet that was given to me:
http://webix.com/snippet/6b7f1563

I can add the toolbar by doing this above the treetable but everytime I click on a button the entire page refreshes - does not matter if I only call console.log it still flashes:

webix.ui({
container: "gridTreeToolbar",
view: "toolbar",
height: 22,
width: 1127,
cols: [
	{ view:"button", type:"image", image:"../images/tree_insert_below.png",
		label:"Insert Above",
		width:100,
		align:"left",
		tooltip:"Insert new Subject/Action Item above current",
		click:function(){ HLF.actions.actionAddAbove() }},
	{ view:"button", type:"image", image:"../images/tree_insert_above.png",
		label:"Insert Below",
		width:100,
		align:"left",
		tooltip:"Insert new Subject/Action Item below current",
		click:function(){ HLF.actions.actionAddBelow() }},
	{ view:"button", type:"image", image:"../images/tree_append.png",
		label:"Append Indented",
		width:100,
		align:"left",
		tooltip:"Add new Action Item indented within current",
		click:function(){ HLF.actions.actionAppendIndented() }},
	{ view:"button", type:"image", image:"../images/development.png",
		label:"Developer",
		width:100,
		align:"left",
		tooltip:"Developer Tools",
		click:function(){ HLF.actions.actionDeveloper() }}
]
});
2

When creating a complex UI you need to specify container only once, for top level view ( all nested views will be placed automatically )

http://webix.com/snippet/cd4c8eb6

As for page refreshing - if you are creating a UI inside of form, clicking on button can trigger form submit, that will lead to page reloading and a flashing as result.

3

I see, ok, that makes sense now. Thanks so much!