$$(...) Undefined and How to Get the current Index In the TreeTable

Webix JS
1

I have the following toolbar and treetable.

Clicking on the Toolbar buttons I get $$(…) not defined

In addition, I need to know how to get the index (not id) of the treetable item clicked on so I can insert before, after or indented:

webix.ready(function(){
	webix.ui({
		container: "gridTreeToolbar",
		view: "toolbar",
		height: 22,
		width: 1127,
		cols: [
			{ view:"button", type:"image", image:"../images/tree_insert_above.png",
				label:"Insert Above",
				width:100,
				align:"left",
				tooltip:"Insert new Subject/Action Item above current",
				click:addAbove(1)},
			{ view:"button", type:"image", image:"../images/tree_insert_below.png", 
				label:"Insert Below", 
				width:100, 
				align:"left", 
				tooltip:"Insert new Subject/Action Item below current",
				click:addBelow(1)},
			{ 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:addAppended(1)},
		]
	});

	var grida = new webix.ui({
		container:"gridTree",
		view:"treetable",
		headerRowHeight:20,
		select:"row",
		scrollX:true,
		scrollY:true,
		editable:true,
		editaction:"dblclick",
		columns:[
			{ id:"id", header:"Id", css:{"text-align":"center"}, width:50},
			{ id:"type", header:"Type", css:{"text-align":"left"}, 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: actionItems
	});

	grida.hideColumn("id");

// grida.hideColumn(“type”);
grida.attachEvent(“onItemClick”, function(id, e, node){
console.log("id: " + id);
});

	function addAbove(ndx) {
		//$$('gridTree').add({ title: "New one "})
	}

	function addBelow(ndx) {
		//$$('gridTree').add({ title: "New one "})
	}

	function addAppended(ndx) {
		//$$('gridTree').add({ title: "New one "})
	}
});
2

I found number getIndexById(id id); to get the index by id for the row

$$(…) undefined is still an issue

3

You need to use

click:addAbove },

or

click:function(){ addAbove(1) }},
4

Tried that and still get two things:

Entire page refreshes - should the click event just call the javascript instead of refreshing the entire grid/page?

Also, $$(‘gridTree’).add({ title: "New one "}) still errors out in the function below - $$(…) undefined.
The function is defined within the webix.ready function but outside of the toolbar or grid definitions

	function addAbove(ndx) {
		console.log('id to add new item above: ' + _rowID);
		$$('gridTree').add({ title: "New one "})
	}
5

Got rid of the toolbar and rolled my own but the $$(…) still is undefined and the grid flashes as if the entired page is being refreshed

6

Sorry, I have missed the second part of the problem
You need to use

var grida = new webix.ui({
        container:"gridTree",
        id:"gridTree",

The $$ command locates view by its id, not by the html container name

7

Works perfect - thanks for clarifying! I appreciate your help!