Hi,
I am trying to use a telerik treeview component which is populated with data using datasource. The information populates properly. I need to save some information into fields which will need the parent and children information. When I drag a node(test 1) under another node (test 0), it gives me the proper information, If I then slide a third node(test 2) under the second node(test 1) I cannot seem to find a way to see who's child the third node is or who its parent is. In the first image added, it works properly because they are all children to the parent node. The second image is where I am not getting the proper information. It gives me the first node as the parent(test 0) and the second node(test 1) as the child, the other nodes I cannot find information on. Am I missing something and is there a way to find the id,s of all of the children or information regarding those children? I've attached my code as well.
Hi,
Could you explain little about your use case what you are trying achieve by using this kendo tree view component?.. In your case you should try to get parentId recursive way normal loop doesn't help you as tree node can be nested "N" times. However you can include parentId in your data model helps you to easily get parentId instead of running a recursive code every time your drag event is end. I created a simple code snippet to achieve this. If you need more details on this please explain us your use case so that we can help you better on this.
<div id="treeview-left"></div>
<script>
rb.newui.util.addEventListener('rbs_pageRender',function(){
$("#treeview-left").kendoTreeView({
dragAndDrop: true,
dataSource: [
{ text: "test1", id:1,expanded: true, items: [
{ text: "test1-1",id:11 ,parentId:1},
{ text: "test1-2",id:12,parentId:1 },
{ text: "test1-3",id:13 ,parentId:1}
] },
{ text: "test2",id:2 ,items: [
{ text: "test2-1" ,id:21,parentId:2},
{ text: "test2-2",id:22,parentId:2 },
{text: "test2-3",id:23,parentId:2 ,items:[{text:"test2-3-1",id:231,parentId:23},{text:"test2-3-2",id:232,parentId:23}]}
] }
],
dragend:function(e){
console.log(e);
var treeeView = e.sender;
var dataItem = treeeView.dataItem(e.sourceNode);
console.log("Id: "+dataItem.id);
console.log("ParentId: "+dataItem.parentId);
}
});
});
</script>
Thanks,
Vimal.
Thank you for your reply,
The data coming in that is being populated into the datasource could is always different, so there is not a set amount of ids that come through. For example: It could be 1 or it could be 50. In order for the treeview to save the position/parent/children I believe I have to reset the fields using the setfield api and set it each time someone is drag and dropped(drag end). The nodes won't contain items, they will simply contain the nodes that have been dragged under itself. Does this make sense?
<div id="example">
<div class="demo-section k-content">
<h4>Treeview One</h4>
<div id="treeview-left"></div>
<h4 style="padding-top: 2em;">Treeview Two</h4>
<div id="treeview-right"></div>
</div>
<script>
$(document).ready(function () {
info();
});
function info()
{
var info = [];
var info = rbf_selectQuery("SELECT id, name FROM call_tree_position where R72433=" + "{!id}", 100, doit) ;
function doit(info)
{
var buff =[];
for (var i = 0; i < info.length; i++) {
buff.push({ id : info[i][0] , text : info[i][1] + " " + info[i][0] + "<i class='fa fa-trash fa-lg'></i>"});
}
var local = new kendo.data.HierarchicalDataSource({
data:
buff
,
schema: {
model: {
id: "id"
//expanded: true
}
}
});
var tree = $("#treeview-left").kendoTreeView({
dragAndDrop: true,
dataSource: local,
dataTextField:["text"],
dragend: function(e) {
var length = $("#treeview-left").find(".k-item").length; //The length of the list
var callers = local.data();
console.log(callers)
for (var i=0;i<length;i++)
{
if(callers[i]!=null && callers[i].hasChildren == true)
{
console.log(callers[i].id + "parents")
for (var h=0;h<callers[i].children.data().length;h++)
{
console.log(callers[i].children.data()[h].id +"children id")
console.log(callers[i].children.data().length + "children length")
}
}
//rbf_setField(objName, id, fieldName, fieldValue, useIds, callback)
//rbf_setField("call_tree_position", callers[i].item_id, "call_pos_order", i+1);
//rbf_setField("call_tree_position", callers[i].item_id, "Pcall_tree_position", callers[i].parent_id);
}
}
//rbf_setField("call_tree_position", callers[i].item_id, "call_pos_order", i+1);
//rbf_setField("call_tree_position", callers[i].item_id, "Pcall_tree_position", callers[i].parent_id);
});
}
}
</script>
<style>
#treeview-left,
#treeview-right
{
overflow: visible;
}
</style>
</div>
Hi,
If I read you correct, you have two trees one on left side and another one at right side when you drag and drop fields from one tree to another you want to update its parent , position and children details, am I right?.. If I am right can you confirm do you want to store this details in DB or just at client side ?. Can you share your app.xml with your requirement in a short note so that we can try to help you quick on this?.
Thanks,
Vimal.
Hi Vimal,
I apologize this is the latest code, I simply had the right treeview in there and was not using it. So it's even simpler. Its one treeview. I need to store every parent and every child in the DB using the setField api. When I drag each node under each other it only reads the top parent and its one child. callers[i].children.data().length shows the length as one. So it does not iterate down any further. If I console.log var callers = local.data(); and go into children it actually says a total of 3, but only shows the child that is under the first index. The second picture in my code is where I run into an issue. The first picture works because each node is under the parent which is indexed. The purpose of this code is its a call tree. So the children is who is being called and the parent is who is calling the children. I also need their position in the call tree.
<div id="example">
<div class="demo-section k-content">
<div id="treeview-left"></div>
</div>
<script>
$(document).ready(function () {
info();
});
function info()
{
var info = [];
var info = rbf_selectQuery("SELECT id, name FROM call_tree_position where R72433=" + "{!id}", 100, doit) ;
function doit(info)
{
var buff =[];
for (var i = 0; i < info.length; i++) {
buff.push({ id : info[i][0] , text : "test" + " " + i});
}
var local = new kendo.data.HierarchicalDataSource({
data:
buff
,
schema: {
model: {
id: "id"
}
}
});
var tree = $("#treeview-left").kendoTreeView({
dragAndDrop: true,
dataSource: local,
dataTextField:["text"],
dragend: function(e) {
var length = $("#treeview-left").find(".k-item").length; //The length of the list
var callers = local.data();
for (var i=0;i<callers.length;i++)
{
if(callers[i]!=null)
{
if(callers[i].hasChildren == true )
{
console.log (callers[i].children.data().length +"children length")
for (var h=0;h<callers[i].children.data().length;h++)
{
// console.log(callers[i].children.data()[h].id + "childs id"+ callers[i].id + "parents id")
}
}
}
}
}
});
}
}
</script>
<style>
#treeview-left,
{
overflow: visible;
}
</style>
</div>
Hi,
Now I understand your use case , but how you build your data doesn't seems to me correct, because you created one array and pushing all your items that ideally going to be only one level of nodes. When you have child item under a node you should add it as array of node object to items config,
Something like this in hierarchical way,
//You can build your data by running a for loop based on your returned record count, this is just a sample.
var data=[ {text:"test1",items:[ {text:"test1-1"},
{text:"test1-2",items:[ {text:"test1-2-1},{text:"test1-2-2"}]
}]
}]
Refer this kendo doc and example how you can create a hierarchical tree structure
demos.telerik.com/.../local-data-binding
It will be great if you can generate Application XML for this Call Tree Application from Rollbase and send us to help you further. We can directly fix what you are asking and share the XML again.
Thanks,
Vimal.