Implement Nested HTML Table with Expand Collapse using AngularJS in ASP.Net MVC

Last Reply 7 months ago By dharmendr

Posted 7 months ago


I am going to implement nested grid view on form

I have 2 tables on database



Id      Name     Code

1        mahesh   c1

2        mahesh1  c2



OrderId     EId      OrderName   Place

1                1          a                 bb

2                1           b                 cc

3                 1           c                 dd

4                 2            d               ee

5                 2             e              ff

    Layout = null;

<h2>Part7 - Nested Tabuler Data using AngularJS</h2>
<div ng-app="myApp" ng-controller="MyController">
    <table class="tableData" border="0" cellspacing="0" cellpadding="0">
        <tbody dir-paginate="O in Orders|orderBy:sortKey:reverse|filter:search|itemsPerPage:10" >
            <tr ng-class-even="'even'" ng-class-odd="'odd'">
                <td class="CX"><span>+</span></td>
            <tr class="sub">
                <td colspan="5">
                    <table class="tableData" border="0" cellspacing="0" cellpadding="0">
                        <tr dir-paginate="a in O.Orders|orderBy:sortKey:reverse|filter:search|itemsPerPage:10"  ng-class-even="'even'" ng-class-odd="'odd'">
                                <input type="hidden" ng-model="a.OrderId" />
                                <input type="hidden" ng-model="a.EId" />
    <script src="~/scripts/angular.js"></script>
    <script src="~/scripts/angular.min.js"></script>
    <script src="~/masters/jquery-1.12.4.js"></script>
    <script src="~/masters/dirpagination.js"></script>
    //angular.module('MyApp')  //extending angular module from first part
    var app = angular.module('myApp', ['angularUtils.directives.dirPagination']);
    app.controller('MyController', function ($scope, OrderService) { //explained about controller in Part2

        //To Get All EmployeePay Records  
        function GetAllEmployeePays() {
            var getData = OrderService.getemployeepays();
            getData.then(function (ep) {
                $scope.Orders =;
            }, function (ep) {
                alert("Records gathering failed!");

    app.service("OrderService", function ($http) {
             //get All EmployeePay
             this.getemployeepays = function () {
                 return $http.get("/employeepay/getAll");
        $(function () {
            $('body').on('click', '.CX span', function () {
                //When Click On + sign
                if ($(this).text() == '+') {
                else {
                $(this).closest('tr') // row of + sign
                .next('tr') // next row of + sign
                .toggle(); // if show then hide else show

Could you please help me

This question does not have replies that have been liked.