TreeTable - Strange behavior Adding Items before or after current item or appended within current it

Webix JS
#1

I need to be able to add items either above, below or indented under the current user selected item.

I am able to get the index of the current item and am using 2 functions to addBelow or addAbove the current item by incrementing or decrementing the current index number as follows:

function addAbove(ndx) {
	console.log('index to add new item above: ' + ndx);
	var newId = gridItems.webix_treetable().add({ "id":"99", "type":"item", "action":"Sample Action Item Test", "due":"11/22/2014" }, ndx - 1);
	console.log('id of new item above: ' + newId);

	gridItems.webix_treetable().refresh();
}

function addBelow(ndx) {
	console.log('index to add new item below: ' + ndx);
	var newId = gridItems.webix_treetable().add({ "id":"99", "type":"item", "action":"Sample Action Item Test", "due":"11/22/2014" }, ndx + 1);
	console.log('id of new item below: ' + newId);

	gridItems.webix_treetable().refresh();
}

I would expect the addAbove function to work easily enough but it does not - it adds the new item 2 or 3 rows below - add above has a similar behavior.

Is there a simple way to do what I need to do or do I need to directly manipulate my data object? (i have added that just below)

Is there a way programattically to append an item under the current item so that it is a child of the current item?

Any help would be great and I do appreciate all the help I have received so far!

Thanks

Data object:

var actionItems = [
	{ "id":"1", "type":"section", "action":"QDRO 1", "due":"", "open":true, "data":[
		{ "id":"2", "type":"subSection", "action":"Sample Action Item 11", "due":"07/22/2014"},
		{ "id":"3", "type":"subSection", "action":"Sample Action Item 12", "due":"07/22/2014" }
	]},
	{ "id":"4", "type":"section", "action":"QDRO 2", "due":"", "open":true, "data":[
		{ "id":"5", "type":"subSection", "action":"Sample Action Item 21", "due":"08/22/2014" },
		{ "id":"6", "type":"subSection", "action":"Sample Action Item 22", "due":"08/22/2014" }
	]},
	{ "id":"7", "type":"item", "action":"Sample Action Item 3", "due":"08/22/2014" },
	{ "id":"8", "type":"item", "action":"Sample Action Item 4", "due":"08/22/2014" },
	{ "id":"9", "type":"item", "action":"Sample Action Item 5", "due":"08/22/2014" },
	{ "id":"10", "type":"item", "action":"Sample Action Item 6", "due":"08/22/2014" },
	{ "id":"11", "type":"item", "action":"Sample Action Item 7", "due":"08/22/2014" },
	{ "id":"12", "type":"item", "action":"Sample Action Item 8", "due":"08/22/2014" },
	{ "id":"13", "type":"item", "action":"Sample Action Item 9", "due":"08/22/2014" },
	{ "id":"14", "type":"item", "action":"Sample Action Item 10", "due":"08/22/2014" },
	{ "id":"15", "type":"section", "action":"QDRO 3", "due":"", "open":true, "data":[
		{ "id":"151", "type":"subSection", "action":"Sample Action Item 31", "due":"08/22/2014" },
		{ "id":"152", "type":"subSection", "action":"Sample Action Item 32", "due":"08/22/2014" }
	]},
	{ "id":"116", "type":"item", "action":"Sample Action Item 11", "due":"08/22/2014" },
	{ "id":"117", "type":"item", "action":"Sample Action Item 12", "due":"08/22/2014" },
	{ "id":"118", "type":"item", "action":"Sample Action Item 13", "due":"08/22/2014" },
	{ "id":"119", "type":"item", "action":"Sample Action Item 14", "due":"08/22/2014" },
	{ "id":"120", "type":"item", "action":"Sample Action Item 15", "due":"08/22/2014" },
	{ "id":"121", "type":"item", "action":"Sample Action Item 16", "due":"08/22/2014" },
	{ "id":"122", "type":"item", "action":"Sample Action Item 17", "due":"08/22/2014" },
	{ "id":"123", "type":"item", "action":"Sample Action Item 18", "due":"08/22/2014" },
	{ "id":"124", "type":"item", "action":"Sample Action Item 19", "due":"08/22/2014" },
	{ "id":"125", "type":"item", "action":"Sample Action Item 20", "due":"08/22/2014" }
];
#2

a) you have hardcoded ids, it can lead to the problem, if you will try to add a row with already existing id, it will result in wrong result

b) how do you getting ndx? Be sure that this is a row;s index and not a row’s ID

http://webix.com/snippet/a0320ac7

#3

A) I added autoincrement id just to see if that was the issue - it’s not
B) I am
Thanks for trying maksim!

I saw your snippet and at first I was excited you had solved the issue since it worked!
However, you were using a datatable and not a treetable and THAT is the problem!

I modified you snippet (sorry, I don’t know how to save it to the above link) and by changing the view from datatable to treetable I am able to reproduce the behavior.

You can see by my data below that I need a hierarchy and not a flat table - I had the flat table issue solved a few weeks ago.

Here is the modified code from your snippet, I removed autoconfig and added my columns in since that is how I need to have it laid out and it appears treetable does not autoconfig properly anyway or autoconfig is not for treetable:

var actionItems = [
{ “id”:“1”, “type”:“section”, “action”:“QDRO 1”, “due”:"", “open”:true, “data”:[
{ “id”:“2”, “type”:“subSection”, “action”:“Sample Action Item 11”, “due”:“07/22/2014”},
{ “id”:“3”, “type”:“subSection”, “action”:“Sample Action Item 12”, “due”:“07/22/2014” }
]},
{ “id”:“4”, “type”:“section”, “action”:“QDRO 2”, “due”:"", “open”:true, “data”:[
{ “id”:“5”, “type”:“subSection”, “action”:“Sample Action Item 21”, “due”:“08/22/2014” },
{ “id”:“6”, “type”:“subSection”, “action”:“Sample Action Item 22”, “due”:“08/22/2014” }
]},
{ “id”:“7”, “type”:“item”, “action”:“Sample Action Item 3”, “due”:“08/22/2014” },
{ “id”:“8”, “type”:“item”, “action”:“Sample Action Item 4”, “due”:“08/22/2014” },
{ “id”:“9”, “type”:“item”, “action”:“Sample Action Item 5”, “due”:“08/22/2014” },
{ “id”:“10”, “type”:“item”, “action”:“Sample Action Item 6”, “due”:“08/22/2014” },
{ “id”:“11”, “type”:“item”, “action”:“Sample Action Item 7”, “due”:“08/22/2014” },
{ “id”:“12”, “type”:“item”, “action”:“Sample Action Item 8”, “due”:“08/22/2014” },
{ “id”:“13”, “type”:“item”, “action”:“Sample Action Item 9”, “due”:“08/22/2014” },
{ “id”:“14”, “type”:“item”, “action”:“Sample Action Item 10”, “due”:“08/22/2014” },
{ “id”:“15”, “type”:“section”, “action”:“QDRO 3”, “due”:"", “open”:true, “data”:[
{ “id”:“151”, “type”:“subSection”, “action”:“Sample Action Item 31”, “due”:“08/22/2014” },
{ “id”:“152”, “type”:“subSection”, “action”:“Sample Action Item 32”, “due”:“08/22/2014” }
]},
{ “id”:“116”, “type”:“item”, “action”:“Sample Action Item 11”, “due”:“08/22/2014” },
{ “id”:“117”, “type”:“item”, “action”:“Sample Action Item 12”, “due”:“08/22/2014” },
{ “id”:“118”, “type”:“item”, “action”:“Sample Action Item 13”, “due”:“08/22/2014” },
{ “id”:“119”, “type”:“item”, “action”:“Sample Action Item 14”, “due”:“08/22/2014” },
{ “id”:“120”, “type”:“item”, “action”:“Sample Action Item 15”, “due”:“08/22/2014” },
{ “id”:“121”, “type”:“item”, “action”:“Sample Action Item 16”, “due”:“08/22/2014” },
{ “id”:“122”, “type”:“item”, “action”:“Sample Action Item 17”, “due”:“08/22/2014” },
{ “id”:“123”, “type”:“item”, “action”:“Sample Action Item 18”, “due”:“08/22/2014” },
{ “id”:“124”, “type”:“item”, “action”:“Sample Action Item 19”, “due”:“08/22/2014” },
{ “id”:“125”, “type”:“item”, “action”:“Sample Action Item 20”, “due”:“08/22/2014” }
];

function addAbove(ndx) {
console.log('index to add new item above: ’ + ndx);
var newId = $$(“table”).add({ “id”:“99”, “type”:“above”, “action”:“Sample Action Item Test”, “due”:“11/22/2014” }, ndx);
console.log('id of new item above: ’ + newId);

 $$("table").refresh();

}

function addBelow(ndx) {
console.log('index to add new item below: ’ + ndx);
var newId = $$(“table”).add({ “id”:“99”, “type”:“below”, “action”:“Sample Action Item Test”, “due”:“11/22/2014” }, ndx + 1);
console.log('id of new item below: ’ + newId);

 $$("table").refresh();

}

webix.ui({ rows:[
{ view:“button”, value:“add above”, click:function(){
var table = $$(“table”);
var ndx = table.getIndexById( table.getSelectedId());
addAbove(ndx)
}},
{ view:“button”, value:“add below”, click:function(){
var table = $$(“table”);
var ndx = table.getIndexById( table.getSelectedId());
addBelow(ndx)
}},
{
view:“treetable”, data:actionItems, select:“row”, 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}
], id:“table”
}]})

#4

Check the updated snippet http://webix.com/snippet/6b7f1563

In case of treetable it is a bit more complicated

  • you need to use getBranchIndex to get index in the current tree branch
  • you need to use parent id as last parameter in the add command
  • index in the add command will be a “branch” index, not the global index

Also, to save an updated snippet - just press share button, it will give you the url of the updated snippet.

#5

Perfect! Wow, never knew it could be so simple - you helped alot.
So, sorry to say, I have one more question that I forgot to mention:

Is there a way to append children to a top level node - ie. if I have a level 0 entry and I want to add children under it so I can build a tree programatically.

I only need to add children at 1 level indented below the parent and not any deeper

Again, I apologize for not asking this earlier

Thanks about the info for the snippets - very helpful

#6

I figured it out - I set the pid (parent id) to id of item I want to append to - works!
Thanks so much for all the help!