Dynamically generating the tree data

[Rich Allen]

Hey guys, since you were all very helpful with my previous question
I'm hoping you can help with a new one.

I have the jsTree working great as a stand-alone test using an xml
file, but in my project I need to be able to generate the tree data in
memory, server-side, and get that data into jsTree somehow so the user
can maniuplate it. Then get the tree data back out of the jsTree
object and send it back to server side code. The hitch is I have to
use ASP.Net C# code to do all of this, and I can't store anything on
the file system.

I assume I would need to create a JSON object and insert it into the
HTML somehow, but I'm obviously not sure how to do it. Any help or
pointers to sites with help would be very much appreciated.

[vakata]

Hi,

Take a look at the examples.
You can do a few things:
Depending on your data format (just go for what is easier for you to
generate) set the data.type property in your config.
Then point the data.url to your ASP file:

data : {
type : "xml_flat",
url : "/your-path/your-asp-page.asp"
}

If you need to load tree nodes on the fly (as the user opens them) set
the async property to "true".
data : {
type : "xml_flat",
url : "/your-path/your-asp-page.asp",
async : true
}
If you go for this one - check out the documentation and examples!

As of version 0.9.2 you can also specify an async_data function, so
that you can configure additional GET/POST parameters to send to the
server.
BUT - only use async if you need it - if the first example is file for
you - go with it!

If you prefer JSON - do this:
data : {
type : "json",
url : "/your-path/your-asp-page.asp"
}

And to extract the tree in JSON format and send it to the server -
check this thread:
http://groups.google.com/group/jstree/browse_thread/thread/253996c79af311cd

I hope this helps!

Regards,
Ivan

[starmonkey]

Hi Rich,

I've just started playing with jsTree for a prototype application, and
I've gone with json for async tree loading. My server-side code is in
php, but the concept is basic: pass an id (in my case, a directory
path relative to a document root, eg '/about' or '/docs') to a url
that's only requested via jsTree and return the children of that path
via json.

This process allows me to display the top level folders ('/'), then
when you click to expand a folder, another request is made (eg '/
about') and that folder's contents are displayed in the tree.

I learnt how to wire up the async code with jsTree via the examples:

http://www.jstree.com/jsTree/examples/_data/async.html

So you'll need to get a package in C# for json encoding - I guess
google will point the way. With PHP it was trivial - build up an
associative array, then call a json_encode function and I was done! :)
The quick 'n dirty option is to just hand crank the json like the
above example does.

My next step will be to start wiring up actions from the jsTree to the
server, eg renames, deletes, moves. For that, you have to wire up some
ajaxy style javascript to your server using jsTree's callback system,
which is explained nicely in the docs: http://www.jstree.com/documentation

For the "ajax" style functions, I just use jQuery's inbuilt post
functionality:

http://docs.jquery.com/Ajax/jQuery.post

These js functions that I write (such as "doRename" for example) will
post to my server and pass some parameters - the server will
physically perform the action (after checking that user is allowed to)
and return a status code to the client, which I will inspect and
update the UI or display a message to the user, etc.

Hope all that information helps in some way!

// SM

[Rich Allen]

Thanks guys, but it's a bit more complicated than that.

First, I'm using ASP.Net, not classic ASP, so a .asp file won't work.
I don't need async or AJAX, so at least I don't have to deal with that
complexity, but I still don't know how to create a JSON object
using .Net c# code so that the jsTree javascript in the aspx page will
be able to use it. I think I'm going to have to create a new web
service just for this, which sucks but I don't see any way around it.

I have the code done that creates the JSON string, that's no problem.
It's the interop stuff that I'm having problems with. I would really
like to get the thing from server side to client side without having
to set up a new web service.

Rich

[vakata]

Maybe you could do it like this (in the config):
data : {
type : "json",
json : 'your generated JSON object'
}

This actually includes the data in the config - maybe this will work
for you?

Best regards,
Ivan

[bimsimsala]

Hey Rich,

i'm using asp.net too.
My data config-section for the jsTree looks like that

data:{
type : "json",
async : true,
url : "treeService.aspx",
async_data : function (NODE) { return { id : jQuery(NODE).attr
("id") || -1, treeId : <%= TreeId %> } }
}

As you can see i need to pass the TreeId, because there are different
trees to display in our app.

The treeService.aspx is called using the id of the clicked node and
the treeId, which i get from the Property TreeId in the code behind.

Inside treeService.aspx i fetch the underlying nodes from the database
and build a list of TTreeItem objects.

The TreeItem class looks like that:

public class TTreeItem {

public TTreeItem() {
this.attributes = new Dictionary<string, object>();
this.children = new List<TTreeItem>();
}

public string data {
get;
set;
}
public Dictionary<string, object> attributes {
get;
set;
}
public List<TTreeItem> children {
get;
set;
}
public string icons {
get;
set;
}
public string state {
get;
set;
}
}

This a c# represantation of a tree item that is used by jsTree. The
proerties data and id must be set.

Then you basically have to write the JSON serialized list into the
response stream. I'm using the JavaScriptSerializer from the .Net-
Framework (System.Web.Script.Serialization.JavaScriptSerializer),
like
JavaScriptSerializer serializer = new JavaScriptSerializer();
Response.Write(serializer.Serialize(list.ToArray()));
to return the list of TreeItems.

Don't forget to set the response type to json data
(Response.ContentType = "application/json";)

Did that help you?

[Rich Allen]

This part with the JavaScriptSerializer is the part I was missing.
THANK YOU!!! :) I think I've got everything I need now, I really
appreciate everyone's help.

Rich

On Jan 11, 10:30 am, bimsimsala <elstefan...@gmail.com> wrote:
<snip>