We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Hi Ferry,
Thanks for using Syncfusion products.
Query 1: “In my case I have to list the file hierarchy returned from my controller action method, not from a database, where could I find a sample of doing this?”
We have showcased this requirement in the following online documentation, please check it
Location: http://help.syncfusion.com/ug/aspnetmvc/index.html#!Documents/loadondemand1.htm
Also you can find all the sample of our Treeview with loadOnDemand concept in the following link location.
http://mvc.syncfusion.com/demos/web/treeview/loadondemand
Also if you want to know more about our Treeview component, please refer the below link.
http://help.syncfusion.com/ug/aspnetmvc/index.html#!Documents/overview59.htm
Query2: I encountered an issue that when I load the datasource through URL, the tree will show the topmost nodes only even the returned JSON completely.
We were able to reproduce the problem and confirmed this (“when I load the DataSource through URL, the tree will show the topmost nodes only even the returned JSON completely”) as a defect. Fix for this issue will be included in our upcoming main release Volume 3 which is roll out at the end of September 2015.
If you have any queries, please get back to us and we will happy to help you.
Regards,
Prasanth PHi Prasanth,The local datasource (e.g. using Viewbag) is not a real on demand loading as it will write all the data in json like this:<script type='text/javascript'>$(function($){$("#tree").ejTreeView({loadOnDemand:true,fields:{dataSource:ej.isJSON([{"Id":"1","Pid":"","Name":"Discover Music","HasChild":true,"Expanded":true},{"Id":"2","Pid":"1","Name":"Hot Singles","HasChild":false,"Expanded":false},{"Id":"3","Pid":"1","Name":"Rising Artists","HasChild":false,"Expanded":false},{"Id":"4","Pid":"1","Name":"Live Music","HasChild":false,"Expanded":false},{"Id":"6","Pid":"1","Name":"Best of 2013 So Far","HasChild":false,"Expanded":false},{"Id":"7","Pid":"","Name":"Sales and Events","HasChild":true,"Expanded":true},{"Id":"8","Pid":"7","Name":"100 Albums - $5 Each","HasChild":false,"Expanded":false},{"Id":"9","Pid":"7","Name":"Hip-Hop and R\u0026B Sale","HasChild":false,"Expanded":false},{"Id":"10","Pid":"7","Name":"CD Deals","HasChild":false,"Expanded":false},{"Id":"11","Pid":"","Name":"Categories","HasChild":true,"Expanded":false},{"Id":"12","Pid":"11","Name":"Songs","HasChild":false,"Expanded":false},{"Id":"13","Pid":"11","Name":"Bestselling Albums","HasChild":false,"Expanded":false},{"Id":"14","Pid":"11","Name":"New Releases","HasChild":false,"Expanded":false},{"Id":"15","Pid":"11","Name":"Bestselling Songs","HasChild":false,"Expanded":false},{"Id":"16","Pid":"","Name":"MP3 Albums","HasChild":true,"Expanded":false},{"Id":"17","Pid":"16","Name":"Rock","HasChild":false,"Expanded":false},{"Id":"18","Pid":"16","Name":"Gospel","HasChild":false,"Expanded":false},{"Id":"19","Pid":"16","Name":"Latin Music","HasChild":false,"Expanded":false},{"Id":"20","Pid":"16","Name":"Jazz","HasChild":false,"Expanded":false},{"Id":"21","Pid":"","Name":"More in Music","HasChild":true,"Expanded":false},{"Id":"22","Pid":"21","Name":"Music Trade-In","HasChild":false,"Expanded":false},{"Id":"23","Pid":"21","Name":"Redeem a Gift Card","HasChild":false,"Expanded":false},{"Id":"24","Pid":"21","Name":"Band T-Shirts","HasChild":false,"Expanded":false},{"Id":"25","Pid":"21","Name":"Mobile MVC","HasChild":false,"Expanded":false}]),id:"Id",parentId:"Pid",text:"Name",expanded:"Expanded",hasChild:"HasChild"},selectedNode:-1,nodeSelect:"onTreeNodeSelect"});});</script>In short, is it possible to load the child nodes from remote non-table binding datasource (like: IEunmerable<MyModel>) if and only if I expand a node?We did scan the pages you mentioned before we ask. By the way, please consider to fix the API documentation, page like http://help.syncfusion.com/CR/cref_files/mobileaspnetmvc/ejmvc/topic1458.html provide almost no information about the class or methods.Thanks
Hi Ferry,
Sorry for the inconvenience caused.
Query1: Is it possible to load the child nodes from remote non-table binding data source (like: IEunmerable<MyModel>) if and only if I expand a node?
Yes, it is possible to load the child node if and only if we expand a node using “BeforeExpand” event of the TreeView.
At the initial load, we can only load the top level parent nodes. While expanding the parent node, in the before expand event we can call the URL from where you want to load the child items. The child items which are returned from the URL are then appended to the parent element using the “addNode” method. Please refer the below code snippets
[.cshtml]
@Html.EJ().TreeView("tree").TreeViewFields(s => s.Datasource((IEnumerable<loadondemand>)ViewBag.datasource).Id("id").ParentId("pid").Text("name").HasChild("hasChild")).LoadOnDemand(true).ClientSideEvents(e => e.BeforeExpand("onBeforeExpand"))
[JS]
function onBeforeExpand(args) {
var currentTarget = args.currentElement;
var parentID = $(currentTarget)[0].id;
//Child elements will be fetched only if the parent has the "e-icon e-plus" class
if ($(currentTarget).find(' > ul li').length == 0) {
$.ajax({
url: '/Home/GetChildItems?id=' + parentID,
type: 'POST',
datatype: 'json',
success: function (child) {
//Object for TreeView is created
treeviewObj = $("#tree").data("ejTreeView");
//use this following method to add collection of nodes
treeviewObj.addNode(child, currentTarget);
currentTarget.find('.e-load').removeClass('e-load');
}
})
}
}
In the above code snippet along with the URL, we have passed the id of the parent node. This “id” can be used in the server side to filter the data based on this and return the necessary JSON result. Please refer the below code used in controller page
load.Add(new loadondemand { id = 2, pid = 1, name = "Folder 1" });
load.Add(new loadondemand { id = 3, pid = 1, name = "Folder 2" });
load.Add(new loadondemand { id = 4, pid = 1, name = "Folder 3", hasChild = true });
load.Add(new loadondemand { id = 6, pid = 4, name = "File 1" });
load.Add(new loadondemand { id = 7, pid = 4, name = "File 2", hasChild = true });
load.Add(new loadondemand { id = 8, pid = 7, name = "File 3" });
load.Add(new loadondemand { id = 9, pid = 5, name = "Folder 4", hasChild = true });
load.Add(new loadondemand { id = 10, pid = 9, name = "File 4" });
load.Add(new loadondemand { id = 11, pid = 9, name = "File 5" });
load.Add(new loadondemand { id = 13, pid = 9, name = "File 6" });
load.Add(new loadondemand { id = 14, pid = 5, name = "Folder 5" });
load.Add(new loadondemand { id = 15, pid = 5, name = "Folder 6" });
load.Add(new loadondemand { id = 16, pid = 12, name = "Folder 7", hasChild = true });
load.Add(new loadondemand { id = 17, pid = 16, name = "File 7" });
load.Add(new loadondemand { id = 18, pid = 16, name = "File 8" });
load.Add(new loadondemand { id = 19, pid = 16, name = "File 9" });
load.Add(new loadondemand { id = 20, pid = 12, name = "Folder 8" });
load.Add(new loadondemand { id = 21, pid = 12, name = "Folder 9" });
var childData = load.Where(t => t.pid == id);
return Json(childData, JsonRequestBehavior.AllowGet);
For your reference we have attached a sample in the following location to showcase your requirement please check with it.
Sample Location: Tree on demand sample
Query2: We did scan the pages you mentioned before we ask. By the way, please consider to fix the API documentation, page like http://help.syncfusion.com/CR/cref_files/mobileaspnetmvc/ejmvc/topic1458.html provide almost no information about the class or methods.
Currently our MVC class reference documentation only showcases the methods and events name. We have not provided the description and parameter details for the classes or methods. We will update this documentation with necessary information and publish it soon.
Since our MVC components are just a wrapper for the JS components, most of the methods, events and API names will be same. You can refer the following API reference documentation of JS to know about the event parameters available in every component.
http://helpjs.syncfusion.com/js/api/ejaccordion
Please let us know if you have further queries and we happy to help you.
Regards,
Prasanth P.
Hi Ferry,
Thanks for using patience.
Query: We found that the line treeviewObj.addNode(child, currentTarget); may have bug that the child object need to have "ParentId" attribute in order to have the tree add the node to correct parent node.
We are unable to reproduce the specified issue at our end. The "addNode" method is used to add a single node or a collection of nodes dynamically. This method receives two arguments,
1) String text or JSON object
2) Target to which the node(s) has to be added as child nodes.
If we specify target node, then the given nodes are added as a child node of target node, else nodes are appended to TreeView. The first argument is mandatory, the second argument is optional.
There is no need for ParentID attribute in the child object which is obtained in AJAX success.
If still you face any problem means, please give more details about that issue or please tell us the replication procedure to reproduce the issue in our end. This would be helpful for us to serve you.
Query2: We also found that the ParentId value cannot contains "/", it will throw exception otherwise.
We are unable to reproduce the specified issue at our end. Please share with your code snippet for how you are using the parentId. This would be more helpful for us to serve you.
Regards,
Prasanth P
SIGN IN To post a reply.4/18/2024 02:31:47 PMSat, 03 December 2022 16:59:00 UTC12/03/2022 04:59:00 AMWed, 16 Feb 2022 04:59:00 UTC
