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

Last Reply 5 months ago By dharmendr

Posted 5 months 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 5 months ago.
Posted 5 months ago Modified on 5 months 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