Hi mahesh213,
Check with below sample.
Controller
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult GetData()
{
List<Item> itemLists = new List<Item>();
itemLists.Add(new Item { ItemId = 1, ItemName = "a" });
itemLists.Add(new Item { ItemId = 2, ItemName = "b" });
List<ItemDate> itemDates = new List<ItemDate>();
itemDates.Add(new ItemDate { Id = 1, ItemId = 1, Date = Convert.ToDateTime("11/02/2020") });
itemDates.Add(new ItemDate { Id = 1, ItemId = 1, Date = Convert.ToDateTime("11/06/2020") });
itemDates.Add(new ItemDate { Id = 1, ItemId = 2, Date = Convert.ToDateTime("11/04/2020") });
itemDates.Add(new ItemDate { Id = 1, ItemId = 1, Date = Convert.ToDateTime("11/08/2020") });
DateTime? Fdate = itemDates.Min(x => x.Date);
DateTime? tdate = itemDates.Max(x => x.Date);
string date = "";
for (DateTime? i = Fdate; i <= tdate; i = i.Value.AddDays(1))
{
date += i.Value.ToString("dd-MM-yyyy") + ",";
}
if (!string.IsNullOrEmpty(date))
{
date = date.Substring(0, date.Length - 1);
}
for (int i = 0; i < itemLists.Count; i++)
{
itemLists[i].Date = date;
}
ItemEntryDetail details = new ItemEntryDetail();
details.item = itemLists;
return Json(details, JsonRequestBehavior.AllowGet);
}
public class Item
{
public int ItemId { get; set; }
public string ItemName { get; set; }
public string Date { get; set; }
}
public class ItemDate
{
public int Id { get; set; }
public int ItemId { get; set; }
public DateTime Date { get; set; }
}
public class ItemEntryDetail
{
public List<Item> item { get; set; }
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<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/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', []);
app.controller('MyController', function ($scope) {
$.post("/Home/GetData/", function (r) {
$scope.items = r.item;
$scope.columns = r.item[0].Date.split(',').length;
$scope.$apply();
});
$scope.CalculateTotal = function () {
$('#lblTotalHours').html('');
var trLength = $('#tblDetails tr').length;
var tdLength = $scope.columns;
var grandTotal = 0;
for (var i = 0; i < tdLength; i++) {
var total = 0;
for (var j = 2; j < trLength - 1; j++) {
var price = $('#tblDetails tr').eq(j).find('td').eq(i + 2).find('input').val();
if (price == undefined || price == "") {
price = 0;
}
total += !isNaN(price) ? parseFloat(price) : 0;
}
grandTotal += total;
$('#tblDetails tr').eq(trLength - 1).find('td').eq(i + 1).html(total);
}
$('#lblTotalHours').html(grandTotal);
}
});
</script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
<div class="container" id="printarea">
<table class="table table-bordered" id="tblDetails">
<tr class="success">
<th>Id</th>
<th>Item</th>
<th colspan="{{columns}}" class="text-center">Date</th>
</tr>
<tr>
<td></td>
<td></td>
<td ng-repeat="i in items[0].Date.split(',')">{{i}}</td>
</tr>
<tr ng-repeat="item in items">
<td>{{item.ItemId}}</td>
<td>{{item.ItemName}}</td>
<td ng-repeat="i in item.Date.split(',')">
<input type="text" style="width: 100px" ng-keyup="CalculateTotal()" />
</td>
</tr>
<tr>
<td colspan="2" align="center">Total</td>
<td ng-repeat="i in items[0].Date.split(',')"></td>
</tr>
</table>
<br />TotalHours: <span id="lblTotalHours"></span>
</div>
</body>
</html>
Screenshot
