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.
Unfortunately, activation email could not send to your email. Please try again.

On demand loading child nodes from controller action method

Thread ID:

Created:

Updated:

Platform:

Replies:

120020 Aug 24,2015 10:38 AM Aug 31,2015 09:39 AM ASP.NET MVC 5
loading
Tags: TreeView
Ferry To
Asked On August 24, 2015 10:38 AM

From the samples I see the TreeView component can load the child nodes on demand if there is a datasource linked to a specific table.

However 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?

Also I encountered an issue that when I load the datasource like:

@(Html.EJ().TreeView("tree")

        .TreeViewFields(f => f.Datasource(

                ds => ds.URL("/MyController/GetPathList"))

        .Id("Id").ParentId("Pid").Text("Name").Expanded("Expanded").HasChild("HasChild"))

                        .LoadOnDemand(true) 

The tree will show the topmost nodes even the returned JSON is as below:

[{"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&B 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}]


The JSON is the same from the TreeView sample and if I write:


var controller = new MyController();

@(Html.EJ().TreeView("tree")

        .TreeViewFields(f => f.Datasource(controller.GetPathList())

        .Id("Id").ParentId("Pid").Text("Name").Expanded("Expanded").HasChild("HasChild"))

                        .LoadOnDemand(true) 
then the TreeView can populate the child nodes correctly.

Can someone explain why? Thanks.

Prasanth Palani [Syncfusion]
Replied On August 26, 2015 10:25 AM

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 P

Ferry To
Replied On August 26, 2015 10:48 PM

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 P

Hi 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

Prasanth Palani [Syncfusion]
Replied On August 27, 2015 12:58 PM

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.

Ferry To
Replied On August 28, 2015 04:38 AM

Hi Prasanth,

The example is very useful. It does exactly what we really wanted to do.

Thanks a lot.

By the way 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. Even we had set "Pid" in

@(Html.EJ().TreeView("tree")

        .TreeViewFields(ViewBag.datasource)

        .Id("Id").ParentId("Pid").Text("Name"))

We also found that the ParentId value cannot contains "/", it will throw exception otherwise.


Prasanth Palani [Syncfusion]
Replied On August 31, 2015 09:39 AM

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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;