Tree Grids Made Easy

Infragistics Team / Monday, May 22, 2017

Ignite UI for JavaScript’s Tree Grid displays your data in a tree-like tabular structure, but has all the features you would expect from a grid control, such as filtering, sorting, and paging.

The Tree grid is similar to the Hierarchal Grid, but works best when combined with data where the parent and child nodes have the same structure.

In this post, you’ll learn how with a few lines of code, Ignite UI for JavaScript Tree Grid can be added to a HTML/jQuery application.

Add Ignite UI for JavaScript References

To work with Ignite UI Tree Grid, you first need to add Ignite UI references to your application. To do this, add references of Ignite UI JS and CSS files into your HTML. Read Ignite UI’s help topic on adding CSS and JavaScript references for more information on this topic.

In this post, we are going to add references using the Ignite UI CDN option. In the head section of the HTML page, add Ignite UI references as shown in the listing below:

  
    <link href="http://cdn-na.infragistics.com/igniteui/2016.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2016.2/latest/css/structure/infragistics.css" rel="stylesheet" />

Create a Data Source

The data needed to bind the tree grid can be a JavaScript array or a JSON object array, and can be local or provided by a REST service. To create a tree grid, you need hierarchical data — meaning the data should be nested. Also, unlike the Hierarchical Grid, the tree grid parent node and child node data should have the same structure.

The listing below creates a data source:

var projectData = [
	{
	    "id": 0, "tasks": "Project Plan", "start": "6/2/2014", "finish": "8/22/2014", "duration": "60d", "progress": "32%",
	    "products": [
			{ "id": 1, "tasks": "Planning", "start": "6/2/2014", "finish": "6/4/2014", "duration": "3d", "progress": "100%" },
			{ "id": 2, "tasks": "Write a specification", "start": "6/5/2014", "finish": "6/6/2014", "duration": "2d", "progress": "100%" },
			{ "id": 3, "tasks": "Create a demo application", "start": "6/9/2014", "finish": "6/11/2014", "duration": "3d", "progress": "100%" },
			{ "id": 4, "tasks": "Collect a feedback", "start": "6/12/2014", "finish": "6/12/2014", "duration": "1d", "progress": "100%" },
			{ "id": 5, "tasks": "Design", "start": "6/13/2014", "finish": "6/19/2014", "duration": "5d", "progress": "60%",
		 "products": [
			            { "id": 8, "tasks": "Conceptual Design", "start": "6/13/2014", "finish": "6/16/2014", "duration": "2d", "progress": "100%" },
					    { "id": 9, "tasks": "Preliminary Design", "start": "6/17/2014", "finish": "6/18/2014", "duration": "2d", "progress": "65%" },
				     	{ "id": 10, "tasks": "Final Design", "start": "6/19/2014", "finish": "6/19/2014", "duration": "1d", "progress": "15%" }
			        ]
			},
			{
			    "id": 6, "tasks": "Development", "start": "6/20/2014", "finish": "8/20/2014", "duration": "44d", "progress": "5%",
			    "products": [
					{ "id": 11, "tasks": "Implementation", "start": "6/20/2014", "finish": "7/17/2014", "duration": "20d", "progress": "5%" },
					{ "id": 12, "tasks": "Testing", "start": "7/18/2014", "finish": "7/31/2014", "duration": "10d", "progress": "0%" },
					{ "id": 13, "tasks": "Bug fixing", "start": "8/1/2014", "finish": "8/14/2014", "duration": "10d", "progress": "0%" },
					{ "id": 14, "tasks": "Documenting", "start": "8/15/2014", "finish": "8/20/2014", "duration": "4d", "progress": "0%" }
			    ]
			},
			{ "id": 7, "tasks": "Project Complete", "start": "8/21/2014", "finish": "8/22/2014", "duration": "2d", "progress": "0%" }
	    ]
	}
];

In the above listing, note that data nodes are nested inside each other and each row has a “products” node. The properties of the “products” node are the same as the parent node properties. Keep in mind that you can also work with REST Services or Web API to fetch JSON data from the server.

Create the Tree Grid

To create the Tree Grid, in the HTML add an element as shown in the listing below:

    <table id="checkboxModeTreeGrid">

By using the igTreeGrid function In the JavaScript, you can convert an HTML table to an Ignite UI Tree Grid. You need to pass an object as input parameter to the igTreeGrid function to create the tree grid, as shown in the listing below:

$("#checkboxModeTreeGrid").igTreeGrid({
    width: "100%",
    dataSource: projectData,
    autoGenerateColumns: false,
    primaryKey: "id",
    columns: [
        { headerText: "ID", key: "id", width: "10%", dataType: "number", hidden: true },
        { headerText: "Tasks", key: "tasks", width: "30%", dataType: "string" },
        { headerText: "Start", key: "start", width: "20%", dataType: "string" },
        { headerText: "Finish", key: "finish", width: "20%", dataType: "string" },
        { headerText: "Duration", key: "duration", width: "20%", dataType: "string" },
        { headerText: "Progress", key: "progress", width: "10%", dataType: "string" }
    ],
    childDataKey: "products"
    
});

In the above listing, you are setting dataSource property to projectData. As you might remember, projectData is a JSON object array with the nested data in it.

You are also setting value of autoGeneratedColumns to false and configuring columns of the tree grid by passing an array in the columns property. If you do not want to configure columns, set the value of autoGeneratedColumns to true. The primary key value of the Tree Grid is set to the id column of the data source.

In the above listing, one of the most important properties is childDataKey. This property determines which field from each parent node will be the child node from the data source. Here, you are setting it to the property “products,” so “products” property in the data source will act as the child node. If any parent node does not have the “products” property, then for that particular row in the tree grid, there would be no child rows.

Running the Application

On running the application, you will find Ignite UI for JavaScript Tree Grid rendered as shown in the image below:

You can easily expand and collapse rows by clicking the plus/minus buttons.

Ignite UI Tree Grid supports other features of grid such that paging, filtering, sorting etc. You will learn to add these features in future blog posts. Meanwhile, Take a few minutes to learn more and try out Ignite UI for free.

Dhananjay Kumar works as a Developer Evangelist for Infragistics. He is a seven-time Microsoft MVP. You can reach him on Twitter: @debug_mode.