DynaTree and Ajax Loading

Posted on 2012-09-10
Last Modified: 2012-10-12

ASP.NET MVC 4, I am trying to use Dynatree, loading data via an Ajax call

Simple code follows. The Ajax call is getting three records, but nothing is making it to the treeview. Any help would be appreciated

<script type="text/javascript">
    $(function () {
            initAjax: {              
                url: "/Maintenance/_AjaxGetActiveCategories",            
                data: { key: "root",
                    mode: "all"}


<body class="example">
  <h1>Example: Init from Ajax request</h1>
  <p class="description">
    This sample initializes the IC tree from a JSON request.

  <!-- Add a <div> element where the tree should appear: -->
  <div id="tree">  </div>

//================== Ajax
 public ActionResult _AjaxGetActiveCategories([DataSourceRequest]DataSourceRequest request)
            TestDatabaseEntities db = new TestDatabaseEntities();

            var categories = (from x in db.Categories                        
                             select x).ToList();

            DataSourceResult result = categories.ToDataSourceResult(request);

            return Json(result,JsonRequestBehavior.AllowGet);
Question by:z488758
    LVL 81

    Expert Comment

    Could you confirm /Maintenance/_AjaxGetActiveCategories return something like :

        {"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": "Item 5"}

    Open in new window


    Do you have a link to see your page?

    Author Comment

    Thanks for your comments / assistance.

    I am relatively inexperienced, so please bear with me

    (a) I don't know how to interrogate the data. I can see the RESULT in the controller, which is the data in the list. I do not know how to see it when it returns as JSON ??
    (b) Not sure what the comment "do you have a link to see your page" means? I can see the page that I am drawing the treeview on which is simply a treeview with no nodes
    (c) It won't be mapped as you say. I am wanting to get the data from a database, an ajax call that returns as json, I am not sure how you map it. However, I do only want the root nodes., assuming will use lazy loading to load the children when selected

    Sorry if my responses are a bit "ignorant"
    LVL 81

    Accepted Solution

    a) I don't know how to interrogate the data.
    try to put the URL in your web browser :

    b) Not sure what the comment "do you have a link to see your page" means?

    What is the URL of your website over Interne so I can put it in my webbrowser to see your page

    Author Comment


    1. it is a development project so not published, just on development machine not publicly visible

    2. Thanks for pointing to how to see data, it is as follows. I have no idea how to map to a format dynatree is happy with?

    {"Data":[{"Id":1,"Name":"Motor Vehicle","SourceId":0,"EntityState":2,"EntityKey":{"EntitySetName":"Categories","EntityContainerName":"TestDatabaseEntities","EntityKeyValues":[{"Key":"Id","Value":1}],"IsTemporary":false}},{"Id":2,"Name":"Personal Indemnity","SourceId":0,"EntityState":2,"EntityKey":{"EntitySetName":"Categories","EntityContainerName":"TestDatabaseEntities","EntityKeyValues":[{"Key":"Id","Value":2}],"IsTemporary":false}},{"Id":3,"Name":"Category 3","SourceId":0,"EntityState":2,"EntityKey":{"EntitySetName":"Categories","EntityContainerName":"TestDatabaseEntities","EntityKeyValues":[{"Key":"Id","Value":3}],"IsTemporary":false}}],"Total":3,"AggregateResults":null,"Errors":null}

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
    In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now