This is a migrated thread and some comments may be shown as answers.

Kendo UI TreeView remove function on newly created node.

6 Answers 351 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Miika
Top achievements
Rank 1
Miika asked on 20 Aug 2013, 07:57 AM
Hi,

I have a problem with remove newly created nodes from a treeview, in that it gives an error "TypeError: r[0] is undefined".
This only happens with newly created nodes, if a tree is reloaded after appending the node, then the removal works fine.

Versions:
<link href="//da7xgjtj801h2.cloudfront.net/2013.1.514/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="//da7xgjtj801h2.cloudfront.net/2013.1.514/styles/kendo.bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="//da7xgjtj801h2.cloudfront.net/2013.1.514/js/kendo.all.min.js" type="text/javascript"></script>

Using Firefox.


Process:

Add node:
function addToTree(id, data) {   // This works just fine.
    var treeView = $element.data("kendoTreeView");
    var getitem = treeView.dataSource.get(id);
    var selectitem = treeView.findByUid(getitem.uid);
    treeView.append(data, selectitem);
}

function removeFromTree () {
    var $parent = treeView.parent(treeView.select());
    treeView.remove(treeView.select());
    treeView.select($parent);
    treeView.trigger('select', { node: $parent });
}


// First we add to the tree
addToTree(targetId, newNode);
// Then we select the node, and display the appropriate info panel.
....
// Then we try to remove the node
removeFromTree(); // error is thrown, and it is thrown even if the parent selection code is removed leaving only the remove command.



The remove function works just fine if the tree is reloaded after adding the node, but clearly that is not a workable method. Any ideas on what is wrong with the "new node"?

6 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 22 Aug 2013, 07:26 AM
Hello,

The code looks OK. Could you check this jsBin example and let me know how it differs from your case?

Regards,
Daniel
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Miika
Top achievements
Rank 1
answered on 28 Aug 2013, 11:58 AM
The error is coming from a function "_adjustListWidth". r[0] is used to make a call to window.getComputedStyle, except that it seems that either r or r[0] is undefined. I'm using the minimized code so its a little hard to see what all its trying to do.

The sample you provided, Daniel, works just fine, as does another instance of the TreeView in a different part of my application. I've been trying to identify what the difference might be, but haven't found anything.  My tree is contained in an "off-canvas panel" along the lines of this article http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/ , and there is a select event handler for opening up details on the selected tree item.


The "r" variable is defined as follows: r=this.options.anchor   (this option value is undefined, which leads to the error when calling r[0])
0
Miika
Top achievements
Rank 1
answered on 28 Aug 2013, 01:04 PM
It seems I have found the problem. In my data item, I have the child item list, lets call it "childItems". When the tree is reloaded, and in my example that works, the childItems variable is null. On my page where the problem occurs, the node was being added with "childItems: []", which then caused problems with the remove function. Perhaps it assumes that if there is a list it must also contain children?

Changing the returned data to be null for an empty list made the problem go away. Is this a bug in the treeview? Shouldn't it treat an empty list in the same way as a null?
0
Daniel
Telerik team
answered on 30 Aug 2013, 10:57 AM
Hello again,

Are there any other widgets used with the treeview or in the treeview template? If yes, then could you provide the full code? The code for the error that your provided is not part of the treeview code.
The difference between null and [] is that the array(empty or not) will be wrapped in an observable array. 

Regards,
Daniel
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Miika
Top achievements
Rank 1
answered on 30 Aug 2013, 11:01 AM
The piece of code that throws the error can be found in https://da7xgjtj801h2.cloudfront.net/2013.1.514/js/kendo.all.min.js by searching for _adjustListWidth. But in any case, the problem is repeatable (in my system) where trying to remove a node with the childItems list = [] will throw an error, and removing nodes with either null or a populated list works just fine.
0
Daniel
Telerik team
answered on 03 Sep 2013, 08:22 AM
Hi,

The code that you described is part of the list implementation and is not used by the treeview. It is used only by widgets that have a popup select list. That is why I asked if there are any other widgets used with the treeview. I also tried to reproduce the error by modifying the jsBin to have children field with null value and a field in the data that has null value but to no avail.

Regards,
Daniel
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
TreeView
Asked by
Miika
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Miika
Top achievements
Rank 1
Share this question
or