Make HTML Table Last Row Text bold using AngularJS in ASP.Net MVC

Last Reply 2 months ago By dharmendr

Posted 2 months ago

Hi,

In below code

Convert JSON Date to Date format using JavaScript and AngularJS in ASP.Net MVC

I am going to do some changes

I want make last row of grid view records bold

Ex: if it has 100 records

i want make entire 100 row has bold

could you please help me

Posted 2 months ago Modified on 2 months ago

Hi mahesh213,

Apply CSS property to the last row.

Check this example. Now please take its reference and correct your code.

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        return View();
    }

    public JsonResult GetEmployees()
    {
        List<object> employees = new List<object>();
        employees.Add(new { Id = 1, Name = "John Hammond", Country = "United States" });
        employees.Add(new { Id = 2, Name = "Mudassar Khan", Country = "India" });
        employees.Add(new { Id = 3, Name = "Suzanne Mathews", Country = "Russia" });
        employees.Add(new { Id = 4, Name = "Robert Schidner", Country = "France" });
        return Json(employees, JsonRequestBehavior.AllowGet);
    }
}

View

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<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", ['$scope', '$http', function ($scope, $http) {
        $http.get("/Home/GetEmployees")
        .then(function (response) {
            for (var i = 0; i < response.data.length; i++) {
                if (i == response.data.length - 1) {
                    $scope.LastRecord = response.data[i];
                }
            }
            $scope.Employees = response.data;
        });
    } ]);
</script>
<div ng-app="MyApp" ng-controller="MyController">
    <table id="tblCustomers" class="table table-responsive">
        <thead>
            <tr>
                <th ng-repeat="(header, value) in Employees[0]">
                    {{header}}
                </th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in Employees">
                <td ng-repeat="cell in row" ng-style="row == LastRecord &&{'font-weight': 'bold'}">
                    <span>{{cell}}</span>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Screenshot

IdNameCountry
1 John Hammond United States
2 Mudassar Khan India
3 Suzanne Mathews Russia
4 Robert Schidner France