Master Detail/Child grid using AngularJS

Master Child Grid using AngularJS

When do you need a Master Child Relational Table?

In many cases, data is represented in the form of tables. Problem is, some users do not understand the objective of using a table and display irrelevant data into the table. In technical terms, tables can be referred to as Grids. So, if the user understands what a table actually does, the user will perceive correctly the use and importance of a Master Child grid, also known as, Master Detail Grid.

In a Normal Grid, there is the Master Row and the Sub-records under the Master Row. Now, if the user wants to alter the Sub-record within a Master row, the user will have to navigate to another Master Grid UI, alter the data of the related sub-record and then navigate back to the initial Master UI and work on the Master rows. Subsequently, the user has to repeat this for each sub-record within the Master row.

This process is tedious and hence not user-friendly. The user may even face many problems when switching between one Grid to another.
To avoid these issues, the user can use the Master Detail Grid. The user can easily view all Master related data in a single Grid UI without any glitches. This is why it is good to focus on using a Master Child Grid for more flexibility and easy access.

Master Child Grids

This grid provides options for visualizing the relationship between the parent and child records by displaying table data in a hierarchical order. This feature allows you to load the ‘detail component’. The ‘detail component’ contains the corresponding Child Grid records of the Parent record that the user has selected.

Real-Time Analogy

Assume an apartment complex consisting of many buildings and each building contains multiple floors. In a Master Child relationship, the Child represents the floor details like as Floor#, No. of rooms on the floor etc and the Master represents the Building Details like Building Name, Building Number etc.

There are many paid tools available to achieve Master Detail grid structures, like kendo, DevExtreme, DevExpress, etc. However, I will be showing you how to build a Master Child Grid using just HTML, CSS and Angularjs.

Advantages of using a grid to represent a Master and Child relationship:

  • The Grid provides options for visualizing the relationship between the Parent and Child records by displaying the table data in a hierarchical order using Angularjs.
  • Easily comprehensible for the user. In the example of the multiple floor building, a user can easily understand how many floors are present in each building without any confusion.
  • The Children (i.e., tree) of a Master row are on display only after selecting the action click/ expand in Master grid.
  • The Child Grid is visible only when it is not empty. For example, when a Master data does not contain any Child records, the Child rows will be not be displayed. In this way, the user can easily understand that there is no Child record based on Master relationship.
  • Children are still part of a Master Grid’s data and the user can download and upload them from/to the Master Grid.
  • For the Child grid, you need to specify the layout without any data or with a user row. The layout, however, is visible even if no data is shown in Child grid.
  • The layout of the Child grid does not need to be the same as of Master grid.
  • One master grid can have many Child grids, and a Child grid can have as many records.
  • The Master and Child grid displays data in a hierarchical tree structure. The user could mention and control the Detail attributes so as to specify which records are to be shown in the Child Grid.

Steps to Create a Master Child Grid

  1. Create a Project Folder.
  2. Download JS and Bootstrap file and store it in your project folder.
  3. Create an HTML file and copy paste the below code in the file.
  4. Create a javascript file named “Controller.js”.
  5. Refer your Angular.js, Bootstrap and Controller.js files to index.html.


Master Child gridFig. 1



A snippet of the code is shown below for a basic understanding.

1. Index.html

2. Controller.js

You can view the entire code by downloading the file below.

Build a Master detail grid

This post should have given you a proper understanding of the purpose and advantages of a Master Child Grid. Look forward to more posts on AngularJS and please do comment below if you have any questions.

Leave a Reply

Your email address will not be published. Required fields are marked *