jQuery jsTree plugin does not display tree

 Hi everybody,

I am new to Javascript and jQuery.  Trying to learn.  So, forgive me if this appears to be a silly mistake.

I have a jsTree component on one of my aspx page. The tree gets its data via an ajax call to a WebService Method.  I can see in the debugger that my WebService method does get called and it returns the data as expected.  But the tree doesn’t display at all.
What am I doing wrong?  I have pasted the relevant parts of the files here.  The server side is in C# code.

Parts from my aspx file:

  <link href="tree_component.css" rel="stylesheet" type="text/css" />
  <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
  <script src="Scripts/tree_component.js" type="text/javascript"></script>
  <script src="Scripts/css.js" type="text/javascript"></script>

  <script type="text/javascript">
    $(document).ready(function()
    {
      $("#jsTree").tree({
        data: {
          type: "json",
          method: "POST",
          async_data: function(NODE) { return { parentId : jQuery(NODE).attr("parentId") || 0 } },
          url: "JSTreeService.asmx/GetJSCategories",
          async: true
        }
      });
    });
  </script>

<body>
    <form id="form1" runat="server">
    <div id="jsTree">
    </div>
    </form>
</body>

My WebService Method "JSTreeService.asmx/GetJSCategories":

  [WebMethod]
  [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
  public List<JSTreeNode> GetJSCategories(int parentId)
  {
    TaxonomiesDataContext catDC = new TaxonomiesDataContext();
    IEnumerable<Category> cats;
    List<JSTreeNode> nodes = new List<JSTreeNode>();
    if (parentId == 0)
      cats = catDC.Categories.AsEnumerable()
            .Where(t => (t.PKId == t.ParentId) && (t.PKId > 0));
    else
      cats = catDC.Categories.AsEnumerable()
            .Where(t => (parentId == t.ParentId) && (t.PKId != t.ParentId));
    foreach (Category eCat in cats)
    {
      JSTreeNode node = new JSTreeNode();
      node.attributes = new Attributes();
      node.attributes.id = "Cat" + eCat.PKId.ToString();
      node.attributes.parentId = parentId.ToString();
      node.hasChildren = eCat.Categories.Count() > 1;
      node.attributes.rel = node.hasChildren ? "folder" : "";
      node.data = new Data();
      node.data.title = eCat.Name;
      node.state = "open";
      node.attributes.mdata = "{draggable : true}";
      nodes.Add(node);
    }
    return nodes;
  }

And the relevant classes that make up the "JSTreeNode":

  [Serializable]
  public class Attributes
  {
    string _id;
    public string id
    { get { return _id; } set { _id = value; } }

    string _parentId;
    public string parentId
    { get { return _parentId; } set { _parentId = value; } }

    string _rel;
    public string rel { get { return _rel; } set { _rel = value; } }

    string _mdata;
    public string mdata { get { return _mdata; } set { _mdata = value; } }
  }

  [Serializable]
  public class Data
  {
    string _title;
    public string title { get { return _title; } set { _title = value; } }

    string _icon;
    public string icon { get { return _icon; } set { _icon = value; } }
  }

  [Serializable]
  public class JSTreeNode
  {
    public JSTreeNode()
    {
    }
    Attributes _attributes;
    public Attributes attributes {get{return _attributes;}set{_attributes = value;}}

    Data _data;
    public Data data { get { return _data; } set { _data = value; } }

    string _state;
    public string state { get { return _state; } set { _state = value; } }

    bool _hasChildren = false;
    public bool hasChildren { get { return _hasChildren; } set { _hasChildren = value; } }

    List<JSTreeNode> _children;
    public List<JSTreeNode> children { get { return _children; } set { _children = value; } }
  }

I know this is an old thread but in case this helps anyone there is a good example of how to do this at

http://code.zyky.com/jsTreeView/Default.aspx
and

http://asp-net-elephant.blogspot.com/2012/01/how-to-use-jstree-in-aspnet-web-forms.html 

Leave a Reply