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

Last Reply one year ago By dharmendr

Posted one year 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

This question does not have replies that have been liked.