Hi,
I am going to implment nested grid view
currently probelm in my code is that
it was displaying only sub grid view
in main grid view values are not displaying
at the time of fecthing all values are coming
but here it was displaying only sub grid view values
could you please help me
@{
Layout = null;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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.filter("dateFilter", function () {
return function (item) {
if (item != null) {
return new Date(parseInt(item.substr(6)));
}
return "";
};
});
app.controller('MyController', function ($scope, $http, MyService) {
GetAllEmployees();
//To Get All Employee Records
function GetAllEmployees() {
debugger;
var getData = MyService.getemployee();
getData.then(function (emp) {
$scope.Customers = emp.data;
}, function (emp) {
alert("Records gathering failed!");
});
}
});
app.service("MyService", function ($http) {
//get All Employees
this.getemployee = function () {
debugger;
return $http.get("/nestedgridview/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>Address</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.ContactName }}</td>
<td>{{customer.Address}}</td>
</tr>
<tr class="sub" ng-show="expanded">
<td></td>
<td colspan="5">
<table class="table table-responsive">
<tr class="info">
<th>OrderDate</th>
<th>Ship Name</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.OrderDate | dateFilter | date:"dd-MM-yyyy"}}
</td>
<td>{{order.ShipName}}</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
[HttpGet]
public JsonResult GeCustomerOrders()
{
List<CustomerModel> CO = new List<CustomerModel>();
var cust = db.Customers.OrderBy(a => a.ContactName).ToList();
foreach (var i in cust)
{
var orders = db.Orders.Where(a => a.CustomerID.Equals(i.CustomerID)).OrderBy(a => a.OrderDate).ToList();
CO.Add(new CustomerModel
{
Customers = i,
Orders = orders
});
}
return new JsonResult { Data = CO, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
public class CustomerModel
{
public Customer Customers { get; set; }
public List<Order> Orders { get; set; }
}
