Search code examples
jqueryasp.net-mvc-3dynatree

Dynatree using asp.net mvc3


I am having a Dynatree that loads up data from a ASP.NET MVC3 controller. For the first call the tree needs to load data and then on wards the tree must load on an on demand basis (lazy loading). The problem I am facing is that for the first time, when the data is returned back from the controller on to the tree the data is not getting displayed properly. Basically the node names are coming NULL. But I checked the controller is returning data correctly. How do I format the data that I receive on the client side.

I am using the following code base :

treeElement.dynatree({
            title: "Lazy loading sample",
            fx: { height: "toggle", duration: 200 },
            autoFocus: false, 
            initAjax: {
                url: "/DataManager/ViewNodes",
                data: { mode: 'all' }
                //Here after I receive the data, how do I show the nodes ?? 
            },

            onActivate: function (node) {
                alert(node.getKeyPath());
            },

            onLazyRead: function (node) {

                node.appendAjax({
                    url: ""
                });
            }
        });

The json that is returned from the controller is having the following structure:

 [

  {"ChildNodes":     [],"Parent":null,"Type":9,"HasRaps":false,"HasReports":false,"TotalChildCount":0,"NodePaths":null,"ID":2,"Name":"Omega",},

 {"ChildNodes":[{"ChildNodes":          [],"Parent":null,"Type":0,"HasRaps":false,"HasReports":false,"TotalChildCount":0,"NodePaths":null,"ID":0,"Name":"LoadingData..."}],"Parent":null,"Type":8,"HasRaps":false,"HasReports":false,"TotalChildCount":1,"NodePaths":null,"ID":14,"Name":"PARIS"}
 ]

Can anyone help .

Thanks, Anirban


Solution

  • The dynatree callback initAjax and appendAjax expect JSON data in a specific format, e.g.

    [
        {"title": "Item 1"},
        {"title": "Folder 2", "isFolder": true, "key": "folder2",
            "children": [
                {"title": "Sub-item 2.1"},
                {"title": "Sub-item 2.2"}
                ]
            },
        {"title": "Folder 3", "isFolder": true, "key": "folder3",
            "children": [
                {"title": "Sub-item 3.1"},
                {"title": "Sub-item 3.2"}
                ]
            },
        {"title": "Lazy Folder 4", "isFolder": true, "isLazy": true, "key": "folder4"},
        {"title": "Item 5"}
    ]
    

    If you can't deliver this, then you may use standard jQuery.ajax calls, re-format the result and call node.addChild(). See als http://wwWendt.de/tech/dynatree/doc/dynatree-doc.html#h5.5.1