Dynamically display all columns total and grand total using AngularJS in ASP.Net MVC

mahesh213
 
on Dec 20, 2020 11:12 PM
Sample_126774.zip
581 Views

Hi,

How Display total per date and total dates hours on keypress

in below url code i am going to do changes

Dynamically add columns and set value using AngularJS in ASP.Net MVC

could you please help me

    <div class="container" id="printarea">
        <table id="tblDetails" class="table table-bordered">
            <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].Dates">{{i.Date}}</td>
            </tr>
            <tr ng-repeat="item in items">
                <td>{{item.Id}}</td>
                <td>{{item.Item}}</td>
                <td ng-repeat="i in item.Dates">
                    <input type="text" ng-model="i.Price" style="width: 100px" />
                </td>
            </tr>
            <tr>
                <td></td>
                <td>Total</td>
                <td>mahesh</td>
            </tr>
        </table>
        TotalHours:  <br />
        <input type="button" value="Save" ng-click="Save()" />
    </div>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Dec 21, 2020 07:13 AM
on Dec 21, 2020 11:31 PM

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