Click here to Skip to main content
12,552,460 members (46,393 online)
Click here to Skip to main content
Add your own
alternative version


10 bookmarked

Collapsible Responsive Master Child Grid Using Angular JS and Bootstrap

, 1 May 2015 CPOL
Rate this:
Please Sign up or sign in to vote.
This is a collapsible responsive master child grid using Angular JS and Bootstrap


In this article, we will be creating a responsive collapsible child grid using Angular js, bootstrap and jQuery. This tip provides only the source code for implementing master child grid.


Basic knowledge of Angular JS and bootstrap is required.

Start With HTML

Create a home.html file into your application or project and add Bootstrap stylesheet into your HTML file. So here I'm adding bootstrap CSS file from CDN source.

<link href="//" 
rel="stylesheet" type="text/css" />
<!DOCTYPE html>
<html xmlns="">
    <!--Bootstrap stylesheet link--> 
    <link href="//" 
      rel="stylesheet" type="text/css" />

Initializing Angular

We need to setup Angular module and controller first, here is the code snippet. We will create a "homeController.js" JavaScript file and add the below code which initializes angular module and "homeController" for us.

    .controller('homeController', ['$scope', function ($scope) {  }]);
Note: There is no dependency required, so I did not include any.

Setting Up $scope in JS Controller

In this "homeController", I will be creating JSON object to bind a grid. But in the real time scenario will be calling WebAPI which returns JSON.

Now, I'm adding products JSON object with the following sample data inside the controller. This JSON object contains product and items data. We will use this for creating product master grid and items child grid creation.

   .controller('homeController', ['$scope', function ($scope) {

    $scope.products = [{
                       "productid": 1001456,
                       "productname": "Spring Season Gift",
                       "amount": 250,
                       "orderDate": "2015-02-15T00:00:00Z",
                       "items": [
                                       {"prodDetailId": 17890,
                                           "prodDetailDesc": "PS 3",
                                           "amount": "150",
                                       },{"prodDetailId": 17891,
                                           "prodDetailDesc": "Heart shape Ring",
                                           "amount": "100",
                                           "qty": 1
                        },{"productid": 1001457,
                            "productname": "Christmas Season Gift",
                            "amount": 349,
                            "orderDate": "2015-04-15T00:00:00Z",
                            "availablity": 1,
                            "items": [{
                                                "prodDetailId": 17900,
                                                "prodDetailDesc": "Choclate Giftbox",
                                                "amount": "150",
                                                "qty": 1
                                                "prodDetailId": 17901,
                                                "prodDetailDesc": "Xbox 360",
                                                "amount": "199",
                                                "qty": 1

                            "productid": 1001458,
                            "productname": "Birthday Gift",
                            "availablity": "N/A",
                            "amount": 200

Adding Script Files in HTML

We should add all the dependency JavaScript files below <body> tag, here I'm adding Angular js , bootstrap and jQuery files from CDN source.

<script type="text/javascript"

Now, we should add our "homeController.js" file into the home.html file.

<script type="text/javascript" src="homeController.js"></script>

Binding Angular in HTML

We will associate our angular module "app" into home.html file, for this will use "data-ng-app" directive in the <html> tag.

For e.g.,

<html xmlns="" data-ng-app="app">

Finally, we will bind our "homeController" against the div tag.

For e.g.,

<div data-ng-controller="homeController">
<!DOCTYPE html>
<html xmlns="" data-ng-app="app">
    <link href="//" 
     rel="stylesheet" type="text/css" />
    <link href="../css/customizedbs.css" rel="stylesheet" type="text/css" />
     <div data-ng-controller="homeController">
       <!--Our grid code comes here -->
     <!-- Add script files here-->

    <script type="text/javascript" 
    <script src=""></script>

    <script src=""></script>
    <script src=""></script>


Adding Header

Let's add the header for the master grid called "Product", I have used bootstrap CSS class to achieve responsive design "col-sm-1 col-xs-12".

Note: I'm wrapping my grid with a container div.

<div class="container">
    <div class="row panel-heading bgOrg">
        <div class="col-sm-1 col-xs-12 pull-left">#</div>
        <div class="col-sm-2 col-xs-12">Product ID</div>
        <div class="col-sm-3 col-xs-12">Product Name</div>
        <div class="col-sm-2 col-xs-12">Amount</div>
        <div class="col-sm-2 col-xs-12">Order Date</div>
        <div class="col-sm-2 col-xs-12">#Avail</div>
    <!-- Populate Grid using ng repeat-->

Populate Grid

We will bind our master grid called "Product" by using "data-ng-repeat" directive to populate the grid. Here, I'm using bootstrap collapse, so I need to specify my child grid id, which is not ready yet. We will discuss this in the below section.

<div ng-repeat="product in products">
    <div class="row panel panel-body">
        <div class="col-xs-1">
            <div class="handpointer glyphicon glyphicon-chevron-right"
             data-ng-click="collapse($event)" data-target="#view_{{product.productid}}"
             data-toggle="collapse" aria-expanded="false"
        <div class="col-sm-2 col-xs-12" data-ng-bind="product.productid"></div>
        <div class="col-sm-3 col-xs-12" data-ng-bind="product.productname"></div>
        <div class="col-sm-2 col-xs-12" data-ng-bind="product.amount | currency"></div>
        <div class="col-sm-2 col-xs-12" data-ng-bind="product.orderDate |
         date: 'MM/dd/yyyy'"></div>
        <div class="col-xs-2 col-xs-1" data-ng-bind="product.availablity"></div>

Note: Below div tag is our "expand icon", our goal is on click show child grid.

<div class="handpointer glyphicon glyphicon-chevron-right"
data-ng-click="collapse($event)" data-toggle="collapse"
?aria-expanded="false" aria-controls="view_{{product.productid}}">

Our child grid data is called "Items" inside the Product JSON, we should show expand icon only if child record exists. So I have added "data-ng-if" directive inside the div tag to do this check.

For e.g.,


We should show a different icon ("glyphicon-chevron-down") on collapse, this is handled using "collapse" function inside the controller. Now we will add "data-ng-click" directive in expand icon div tag to invoke "collapse($event)". To change the CSS against div, we are passing $event to the collapse function.

Now add the below code in the homeController.js file:

$scope.collapse = function (event) {

Child Grid and Collapse

Here I'm binding the child grid called "Items", now we need a unique id to address the child grid. This is needed to show child grid on click of the parent grid record. So, we will add unique product id against the child grid.

Decorate child grid with collapse class, so that it will be collapsed on page load.

<div class="collapse" id="view_{{product.productid}}" data-ng-if="product.items!=null">
    <div class="col-sm-offset-1">
        <table class="table-condensed responsive-table">
            <tr class="row">
            <tr class="row" ng-repeat="item in product.items">
                <td data-ng-bind="item.prodDetailId"></td>
                <td data-ng-bind="item.prodDetailDesc"></td>
                <td data-ng-bind="item.amount | currency"></td>
                <td data-ng-bind="item.qty"></td>

Our goal is, on "expand icon" click show child grid. In order to map this, we have to specify the child grid target id against the parent grid "expand icon" div.

This is accomplished by specifying "data-target" attribute with "#view_{{product.productid}}" child grid id , so this is required for mapping "product" master and "items" child grid.

<div class="handpointer glyphicon glyphicon-chevron-right"
data-ng-click="collapse($event)" data-target="#view_{{product.productid}}"
?data-toggle="collapse" aria-expanded="false" >
Note: data-target="#id" - # represents selector

Custom Stylesheet

Here, I have added my custom stylehseet to decorate the grid, used handpointer class to show hand icon against "product" grid expand click icon.

.handpointer {

.responsive-table {
  color: #000;
  overflow: hidden;
  border-radius: 5px;
.responsive-table tr {
      border-bottom: 1px solid #dcdfe5;
.responsive-table th,.responsive-table td {
    padding-left: 15px !important;

.responsive-table tr:last-child {
    border-bottom: 0px;
a:focus {
  -moz-outline-style: none;

a, a:active, a:focus {
outline: none;

.bgOrg {


This article just provides the source code for implementing master child grid using Angular JS.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer (Senior) Numentica
United States United States
I'm working as a Sr Software engineer in US and having 11+ years of experience in Software Development, Analysis, Implementation and Website Design in Microsoft .NET technologies using WCF, ASP.NET, C#, VB.NET, ADO.NET, SQL Server, ASP.Net MVC, LINQ, Entity Framework, HTML, CSS

Moderate experience in Angular JS, Bootstrap, Javascript.

You may also be interested in...


Comments and Discussions

QuestionChild grid is not getting displayed upon clicking on the arrow Pin
Member 1263781517-Jul-16 7:03
memberMember 1263781517-Jul-16 7:03 
AnswerRe: Child grid is not getting displayed upon clicking on the arrow Pin
Ramesh.Jaganathan21-Jul-16 7:27
memberRamesh.Jaganathan21-Jul-16 7:27 
Question5 Stars Pin
SelvaGanesh G7-May-15 11:27
memberSelvaGanesh G7-May-15 11:27 
AnswerRe: 5 Stars Pin
Ramesh.Jaganathan7-May-15 14:34
memberRamesh.Jaganathan7-May-15 14:34 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.161021.1 | Last Updated 1 May 2015
Article Copyright 2015 by Ramesh.Jaganathan
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid