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

Last Reply one month ago By dharmendr

Posted one month ago

Hi,

I am going to implement nested grid view on form

I have 2 tables on database

Employee

..................

Id      Name     Code

1        mahesh   c1

2        mahesh1  c2

Orders

..............

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;
}

<style>
<h2>Part7 - Nested Tabuler Data using AngularJS</h2>
<div ng-app="myApp" ng-controller="MyController">
    <table class="tableData" border="0" cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <th></th>
                <th>Name</th>
                <th>Code</th>              
            </tr>
        </thead>
        <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>
                <td>{{O.Name}}</td>
                <td>{{O.Code}}</td>
               
            </tr>
            <tr class="sub">
                <td></td>
                <td colspan="5">
                    <table class="tableData" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <th>OrderName</th>
                            <th>Place</th>
                         
                        </tr>
                        <tr dir-paginate="a in O.Orders|orderBy:sortKey:reverse|filter:search|itemsPerPage:10"  ng-class-even="'even'" ng-class-odd="'odd'">
                            <td>
                                <input type="hidden" ng-model="a.OrderId" />
                                <input type="hidden" ng-model="a.EId" />
                            {{a.OrderName}}</td>                            
                            <td>{{a.Place}}</td>                           
                        </tr>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
    <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>
     <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
        GetAllEmployeePays();

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

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

Could you please help me

You are viewing reply posted by: dharmendr one month ago.
Posted one month ago Modified on one month ago

Hi mahesh213,

Check this example. Now please take its reference and correct your code.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

Model

public class CustomerModel
{
    public string CustomerId { get; set; }
    public string Name { get; set; }
    public string Country { get; set; }
    public List<Orders> Orders { get; set; }
}

public class Orders
{
    public int OrderId { get; set; }
    public decimal? Freight { get; set; }
    public string ShipCountry { get; set; }
}

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        NorthwindEntities entities = new NorthwindEntities();
        return View();
    }

    public JsonResult GeCustomerOrders()
    {
        using (NorthwindEntities entites = new NorthwindEntities())
        {
            entites.ContextOptions.LazyLoadingEnabled = false;
            List<CustomerModel> model = new List<CustomerModel>();
            foreach (Customer customer in entites.Customers.Take(5))
            {
                model.Add(new CustomerModel
                {
                    CustomerId = customer.CustomerID,
                    Name = customer.ContactName,
                    Country = customer.Country,
                    Orders = entites.Orders
                    .Where(o => o.CustomerID == customer.CustomerID)
                    .Take(3)
                    .Select(x => new Orders
                    {
                        OrderId = x.OrderID,
                        Freight = x.Freight,
                        ShipCountry = x.ShipCountry
                    }).ToList()
                });
            }

            return Json(model, JsonRequestBehavior.AllowGet);
        }
    }
}

View

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/angular-utils-pagination@0.11.1/dirPagination.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', ['angularUtils.directives.dirPagination']);
        app.controller('MyController', function ($scope, $http, MyService) {
            MyService.CustomerOrders().then(function (response) {
                $scope.Customers = response.data;
            });
        });
        app.service("MyService", function ($http) {
            this.CustomerOrders = function () {
                return $http.get("/Home/GeCustomerOrders");
            };
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <table class="table table-responsive">
            <thead>
                <tr class="success">
                    <th></th>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Country</th>
                </tr>
            </thead>
            <tbody dir-paginate="customer in Customers|orderBy:sortKey:reverse|filter:search|itemsPerPage:10">
                <tr ng-class-even="'even'" ng-class-odd="'odd'">
                    <td>
                        <button type="button" ng-click="expanded = !expanded" class="btn btn-default">
                            <span ng-bind="expanded ? '-' : '+'"></span>
                        </button>
                    </td>
                    <td>{{customer.CustomerId}}</td>
                    <td>{{customer.Name}}</td>
                    <td>{{customer.Country}}</td>
                </tr>
                <tr class="sub" ng-show="expanded">
                    <td>
                    </td>
                    <td colspan="5">
                        <table class="table table-responsive">
                            <tr class="info">
                                <th>Freight</th>
                                <th>Ship Country</th>
                            </tr>
                            <tr dir-paginate="order in customer.Orders|orderBy:sortKey:reverse|filter:search|itemsPerPage:10"
                                ng-class-even="'even'" ng-class-odd="'odd'">
                                <td><input type="hidden" ng-model="order.OrderId" />
                                    {{order.Freight}}
                                </td>
                                <td>{{order.ShipCountry}}</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Screenshot