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

Last Reply 4 months ago By dharmendr

Posted 4 months 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 4 months 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