Skip to main content

Working with JsTree : Create a tree

jstree is one of the most popular javascript tree user control around.  However, using it is not so straight forward. Let's go ahead and create your first jsTree. There are several ways to create a jstree either through HTML or via JSON. This is really just a matter of loading the proper plugin. Think of plugin as feature for your jstree.

Please include jquery and jquery.jstree.js in your page. The code sample below show how to create a simple jsTree, JSON way.

$("#" + treeDivControlName).jstree({
"json_data" : {
"data" : [
c1.node, c2.node, companyNode.node
"plugins" : [ "themes", "json_data", "ui", "checkbox", "crrm", "contextmenu" ]
}).bind("select_node.jstree", function (e, data)
 alert("id") +  ":" +"nodeType"));

Check out the plugin section - you can see we have checkbox, contextmenu. These are also known as features. For example, checkbox plugin renders checkbox for each tree node. Context menu popups a menu whenever user right click on the tree.

Using Method in jstree.

There are two different ways of calling methods in JsTree as indicated by the docs.

Method #1 and samples

Noticed the bold method name passed in as string. This method create a new node in your tree. Please refer to doc to get more.

$("#" + treeDivControlName).jstree("create", selectedNode, "inside", createNode.node);

Method #2 and samples 

These methods are basically perceded by underscore ( _ ) which typically used by internal developers for testing and debugging purposes.

Sample code to call _get_children(node);

var treeInstance = $.jstree._reference($("#"+ treeDivControlName));
var child = treeInstance._get_children(selectedNode);

If you refer to the documentation, i think you will know how to get most of the call right.

That's all for now, till next time.


Popular posts from this blog

Android Programmatically apply style to your view

Applying style to your view (button in this case) dynamically is pretty easy. All you have to do is place the following in your layout folder (res/layout)
Let's call this file : buttonstyle.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android=""> <item android:state_pressed="true" > <shape> <solid android:color="#449def" /> <stroke android:width="1dp" android:color="#2f6699" /> <corners android:radius="3dp" /> <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" /> </shape> </item> <item> <shape> <gradient android:startColor="#449def" a…

DataTable does not have AsEnumerable

I have problem locating my AsEnumerable extension method in my DataTabe (System.Data). Thank god for this post by Angel

I was able to find this method once i have added reference to the following assembly.

C:\Program Files\Reference Assemblies\Microsoft\Framework\v3.5\System.Data.DataSetExtensions.dll

Try to do a dummy Build and you should be able to get it.

OpenCover code coverage for .Net Core

I know there are many post out there getting code coverage for .dotnetcore. I'm using opencover to address this needs.

In case, you do no want to use opencover and wanted to stick with vs2015 code coverage, you can try to copy Microsoft.VisualStudio.CodeCoverage.Shim.dll from C:\Program Files (x86)\Microsoft Visual Studio 14.0\Team Tools\Dynamic Code Coverage Tools\coreclr\ and drop it into your project "bin\Debug\netcoreapp1.0" folder.  Please note : you need to be on VS2015 Enterprise to do this. 

To get started, I guess we need to add OpenCover and ReportGenerator for our test projects, as shown in diagram below :-

When nuget packge gets restored, we will have some binaries downloaded to our machine and we going to use this to generate some statistics. I think the biggest issue is to getting those command lines work.

In dotnetcore, we run test project using "dotnet test" (assuming you are in the test project folder - if not please go there)  So we add this …