Use jsTree with WCF Restful Service

If you try to use jsTree with WCF Restful service, you will find some difficulty. It is not as simple as drag a control from toolbox, drop it onto aspx page and bind the data source. You need to tweak the jsTree source code to use it with WCF Restful Service. Below is the snapshot of Demo application.

The demo application uses WCF restful service. The service contains a GetTreeData operation which returns a list of TreeData as a JSON. The property name of the TreeData class has to be same as declared in the demo application. jsTree uses these property name to construct the tree. I have added an additional property for custom css which is not available in the default jsTree source code. You can add a custom css for each node now.

When WCF restful service returns JSON, it adds a root property under which the actual returned object remains. So you have to tell the jsTree to use the actual JSON object. To make this happen, I have added a “dataPath” property to jsTree and changed the source a bit.

If you click on the node, it will not be expanded by default. The jsTree doesn’t support this. I have changed jsTree source to make this happen. Therefore, use the source code of JsTree included in the demo application rather than original jsTree source code.

You can download the demo application from here.

Hope this helps!