Html Treeview Control

Here is a simple Html treeview for use in your client-side javascript applications.

We've tried to make is as simple to use as possible and also compact. The only external dependencies are JQuery. Here is a simple treeview with the child nodes populated in one call to the onNodePopulate callback.


All that is needed to create the treeview is a container element. In this example, a <div> with the Id of tree.

<!DOCTYPE html>
    <title>Vectorlight Treeview Demo</title>
    <meta charset="utf-8" />

        body {
            font-family: Arial;

    <link rel="stylesheet" type="text/css" href="Css/vectorlight.tree-1.0.0.css" />
    <script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="Scripts/vectorlight.tree-1.0.0.min.js"></script>
    <div id="tree"></div>


Now that we have our container element defined it's time to use it to create the treeview. Here we add some javascript to create some configuration data, initialize the treeview and listen for node click events which we report out to the console.

var config = {
    container: $("#tree"),
    iconRoot: "/Images/",
    rootId: "1",
    onNodePopulate: function (treeview, parentId) {
        console.log("Populate node: " + parentId);

        var nodes = [
                Id: "2", Title: "Root", Icon: "home.png", Children: [
                    { Id: "3", Title: "Child Node 1", Icon: "document.png", Children: [] },
                    { Id: "4", Title: "Child Node 2", Icon: "document.png", Children: [] },
                        Id: "5", Title: "Folder 1", Icon: "folder.png", Children: [
                            { Id: "7", Title: "Child Node 1", Icon: "document.png", Children: [] },
                            { Id: "8", Title: "Child Node 2", Icon: "document.png", Children: [] },
                            { Id: "9", Title: "Child Node 3", Icon: "document.png", Children: [] }
                    { Id: "6", Title: "Child Node 4", Icon: "document.png", Children: [] },

        treeview.populateNode(nodes, parentId, null, null);
    onNodeSelected: function (treeview, id) {
        console.log("Tree node selected: " + id);

        return true;

var tree = new VectorlightTreeView(config);

Running the Demo

When the above is run in your browser you will see the treeview with 3 levels of nodes. You can of course customize the node icon images and also the CSS to tailor the treeview to you own needs.

Node Population

As you can see we have an event handler named onNodePopulate which is responsible for passing in node data to the treeview. In the example above there are 3 levels of nodes. In most applications we would create nodes as their parents are expanded. This is straightforward to do as everytime a node is expanded, the treeview will check if the child nodes have been loaded, and if not, it will call the onNodePopulate event handler passing it the parent node Id that requires population.

Using this mechanism it is easy to make an AJAX call to some server-side component to build a dynamic treeview from a database, and other data sources.

Any comments please post them below. We'll be adding some documentation for this control very soon.

vuongn2002 wrote:

I use the treeview and use EnableCheckboxes, how do I display checkbox only on the last child node. Is there a property method which hide or disable previous nodes?

Post your Comments

Latest Games
Zombie Escape
Apr 19, 2016
Plays: 2,627

Zombie Escape ScreenshotDrive fast before the crazy mutant zombies get you!

6 Ratings/4.1 Average
Car Parking
Jan 16, 2016
Plays: 2,516

Car Parking ScreenshotGuide the car to its parking space in this fun Car Parking game.

1 Rating/5 Average
Trash It
Jan 11, 2016
Plays: 2,389

Trash It ScreenshotAim for the Trash Can and get the various items of Trash in the bin.

4 Ratings/5 Average
Sky Fly
Jan 11, 2016
Plays: 2,563

Sky Fly ScreenshotFly your plane in this colorful vertical scrolling shoot-em-up. Blast the bad guys and collect any bonus's they leave behind.

1 Rating/5 Average
Professor Snappy
Jan 11, 2016
Plays: 2,076

Professor Snappy ScreenshotPop as many bubbles as possible in this fun and colorful bubble popping game. The levels start off easy enough but gradually get harder!

1 Rating/5 Average
Monster Match Saga
Jan 10, 2016
Plays: 2,411

Monster Match Saga ScreenshotHere we have a bunch of monsters that need to be matched up. Look out for the bomb and spinning monsters that will cause special damage!

3 Ratings/4.6 Average
Fly Bird Fly
Jan 10, 2016
Plays: 2,226

Fly Bird Fly ScreenshotGuide your friendly Bird through the maze of pipes and other obstacles collecting the Stars in this cool arcade game inspired by the legendary Flappy Bird.

1 Rating/5 Average
Life In One
Jan 10, 2016
Plays: 2,410

Life In One ScreenshotYou are stranded on an Alien planet. Your goal is to build a space rocket and escape. Start by building units to create power and mine the metal patches. Build defenses to defend your base from the advancing Aliens and Zombies!

2 Ratings/3 Average
X Pool
Jan 02, 2016
Plays: 3,024

X Pool ScreenshotPlay Pool against the computer or battle against your friends in the online mode!

3 Ratings/3 Average
Fruit Slicer
Jan 02, 2016
Plays: 2,118

Fruit Slicer ScreenshotSlice the fruit that is thrown up onto the screen. Slice the fruit into multiple pieces for maximum points!

1 Rating/5 Average