Display HTML Table selected Row details inside Bootstrap Modal Popup in AngularJS

Last Reply 26 days ago By dharmendr

Posted 26 days ago

How to display selected row details inside Modal Popup in AngularJS.

Server Side (Custom) Paging Searching and Sorting in HTML Table using AngularJS in ASP.Net

Posted 26 days ago

Hi rani,

Using the below link i have modified the code.

Stored procedure sorting in angularjs

HTML

Default

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Searching Sorting and Paging in AngularJS</title>
    <style type="text/css">
        /*Displays UP arrow*/
        .arrow-up
        {
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 10px solid black;
            display: inline-block;
        }
        
        /*Displays DOWN arrow*/
        .arrow-down
        {
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 10px solid black;
            display: inline-block;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/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" src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-touch/1.6.1/angular-touch.min.js"></script>
    <script type="text/javascript" src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', ['angularUtils.directives.dirPagination', 'ui.bootstrap']);
        app.controller('MyController', function ($scope, $uibModal, $http) {
            $scope.Customers = [];
            $scope.PageIndex = 1;
            $scope.RecordCount = 0;
            $scope.PageSize = 10;
            $scope.SearchTerm = "";
            $scope.SortColumn = "CustomerID";
            $scope.ReverseSort = false;
            $scope.SortDirection = "ASC";
            $scope.GetCustomers = function (index) {
                $scope.PageIndex = index;
                $scope.Customers = [];
                var data = {
                    searchTerm: $scope.SearchTerm,
                    pageNo: $scope.PageIndex,
                    pageSize: $scope.PageSize,
                    sortDirection: $scope.SortDirection,
                    sortColumn: $scope.SortColumn
                };
                $http.post("Default.aspx/GetCustomers", data, { headers: { 'Content-Type': 'application/json'} })
                .then(function (response) {
                    $scope.Customers = response.data.d.Customers;
                    $scope.RecordCount = response.data.d.TotalRecords;
                });
            }
            $scope.GetCustomers($scope.PageIndex);
            $scope.SortData = function (column) {
                $scope.ReverseSort = ($scope.SortColumn == column) ? !$scope.ReverseSort : false;
                $scope.SortDirection = $scope.ReverseSort ? "DESC" : "ASC";
                $scope.SortColumn = column;
                $scope.GetCustomers($scope.PageIndex);
            }
            $scope.GetSortClass = function (column) {
                if ($scope.SortColumn == column) {
                    return $scope.ReverseSort ? 'arrow-down' : 'arrow-up';
                }
                return '';
            }
            $scope.GetDetails = function (customer) {
                $scope.modalInstance = $uibModal.open({
                    ariaLabelledBy: 'modal-title',
                    ariaDescribedBy: 'modal-body',
                    templateUrl: 'popup.htm',
                    controller: 'ModelHandlerController',
                    controllerAs: '$ctrl',
                    size: 'sm', // sm-small // md-medium // lg-large 
                    resolve: {
                        Customer: function () {
                            return customer;
                        }
                    }
                });
            }
        });
        app.controller("ModelHandlerController", function ($scope, $uibModalInstance, Customer) {
            $scope.Customer = Customer;
            $scope.Cancel = function () {
                $uibModalInstance.dismiss('close');
            }
        });
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <div class="panel panel-primary">
        <div class="panel-body">
            <input type="text" ng-model="SearchTerm" ng-keyup="GetCustomers(1)" class="form-control"
                placeholder="Enter Name" /><br />
            <table class="table table-bordered table-hover table-striped">
                <thead>
                    <tr class="success">
                        <th ng-click="SortData('CustomerID')">
                            Id&nbsp;<div ng-class="GetSortClass('CustomerID')">
                        </th>
                        <th ng-click="SortData('ContactName')">
                            Name&nbsp;<div ng-class="GetSortClass('ContactName')">
                        </th>
                        <th ng-click="SortData('City')">
                            City&nbsp;<div ng-class="GetSortClass('City')">
                        </th>
                        <th ng-click="SortData('Country')">
                            Country&nbsp;<div ng-class="GetSortClass('Country')">
                        </th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <tr dir-paginate="customer in Customers|itemsPerPage:PageSize" total-items="RecordCount">
                        <td>{{customer.Id}}</td>
                        <td>{{customer.Name}}</td>
                        <td>{{customer.City}}</td>
                        <td>{{customer.Country}}</td>
                        <td><input type="button" value="View Details" ng-click="GetDetails(customer)" class="btn btn-primary" /></td>
                    </tr>
                </tbody>
            </table>
            <dir-pagination-controls max-size="PageSize" direction-links="true" boundary-links="true"
                on-page-change="GetCustomers(newPageNumber)">
            </dir-pagination-controls>
        </div>
    </div>
</body>
</html>

Popup.htm

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div class="modal-header">
        <h3 class="modal-title text-center"><u>{{Customer.Name.trim()}}</u>&nbsp;details</h3>
    </div>
    <div class="modal-body" align="center">
        <span><b>Id : </b></span>{{Customer.Id}}<br />
        <span><b>City : </b></span>{{Customer.City}}<br />
        <span><b>Country : </b></span>{{Customer.Country}}<br />
    </div>
    <div class="modal-footer">
        <button class="btn btn-warning" type="button" ng-click="Cancel()">Cancel</button>
    </div>
</body>
</html>

Namespaces

C#

using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;

VB.Net

Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.Services

Code

C#

[WebMethod]
public static CustomerData GetCustomers(string searchTerm, int pageNo, int pageSize, string sortDirection, string sortColumn)
{
    string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    List<object> customers = new List<object>();
    SqlConnection con = new SqlConnection(strConnString);
    SqlCommand cmd = new SqlCommand("GetCustomersPageWise_Sort", con);
    cmd.CommandType = CommandType.StoredProcedure;
    cmd.Parameters.AddWithValue("@SearchTerm", searchTerm);
    cmd.Parameters.AddWithValue("@PageIndex", pageNo);
    cmd.Parameters.AddWithValue("@PageSize", pageSize);
    cmd.Parameters.AddWithValue("@SortDirection", sortDirection);
    cmd.Parameters.AddWithValue("@SortColumn", sortColumn);
    cmd.Parameters.Add("@RecordCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output;
    con.Open();
    SqlDataReader sdr = cmd.ExecuteReader();
    while (sdr.Read())
    {
        customers.Add(new
        {
            Id = sdr["CustomerID"],
            Name = sdr["ContactName"],
            City = sdr["City"],
            Country = sdr["Country"]
        });
    }
    con.Close();
    CustomerData tableData = new CustomerData();
    tableData.Customers = customers;
    tableData.TotalRecords = Convert.ToInt32(cmd.Parameters["@RecordCount"].Value);
    return tableData;
}

public class CustomerData
{
    public List<object> Customers { get; set; }
    public int TotalRecords { get; set; }
}

VB.Net

<WebMethod()>
Public Shared Function GetCustomers(ByVal searchTerm As String, ByVal pageNo As Integer, ByVal pageSize As Integer, ByVal sortDirection As String, ByVal sortColumn As String) As CustomerData
    Dim strConnString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Dim customers As List(Of Object) = New List(Of Object)()
    Dim con As SqlConnection = New SqlConnection(strConnString)
    Dim cmd As SqlCommand = New SqlCommand("GetCustomersPageWise_Sort", con)
    cmd.CommandType = CommandType.StoredProcedure
    cmd.Parameters.AddWithValue("@SearchTerm", searchTerm)
    cmd.Parameters.AddWithValue("@PageIndex", pageNo)
    cmd.Parameters.AddWithValue("@PageSize", pageSize)
    cmd.Parameters.AddWithValue("@SortDirection", sortDirection)
    cmd.Parameters.AddWithValue("@SortColumn", sortColumn)
    cmd.Parameters.Add("@RecordCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output
    con.Open()
    Dim sdr As SqlDataReader = cmd.ExecuteReader()
    While sdr.Read()
        customers.Add(New With {
            .Id = sdr("CustomerID"),
            .Name = sdr("ContactName"),
            .City = sdr("City"),
            .Country = sdr("Country")
        })
    End While

    con.Close()
    Dim tableData As CustomerData = New CustomerData()
    tableData.Customers = customers
    tableData.TotalRecords = Convert.ToInt32(cmd.Parameters("@RecordCount").Value)
    Return tableData
End Function

Public Class CustomerData
    Public Property Customers As List(Of Object)
    Public Property TotalRecords As Integer
End Class

Screenshot