ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Display HTML Table selected Row details inside Bootstrap Modal Popup in AngularJS<p>Hi&nbsp;rani,</p> <p>Using the below link i have modified the code.</p> <h1 class="header"><a class="title f16" href="https://www.aspforums.net/Threads/133115/Stored-procedure-sorting-in-angularjs/">Stored procedure sorting in angularjs</a></h1> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <p><strong>Default</strong></p> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head id=&#34;Head1&#34; runat=&#34;server&#34;&gt; &lt;title&gt;Searching Sorting and Paging in AngularJS&lt;/title&gt; &lt;style type=&#34;text/css&#34;&gt; /*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; } &lt;/style&gt; &lt;link rel=&#34;stylesheet&#34; type=&#34;text/css&#34; href=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdn.jsdelivr.net/npm/angular-utils-pagination@0.11.1/dirPagination.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;//cdnjs.cloudflare.com/ajax/libs/angular-touch/1.6.1/angular-touch.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; var app = angular.module(&#39;MyApp&#39;, [&#39;angularUtils.directives.dirPagination&#39;, &#39;ui.bootstrap&#39;]); app.controller(&#39;MyController&#39;, function ($scope, $uibModal, $http) { $scope.Customers = []; $scope.PageIndex = 1; $scope.RecordCount = 0; $scope.PageSize = 10; $scope.SearchTerm = &#34;&#34;; $scope.SortColumn = &#34;CustomerID&#34;; $scope.ReverseSort = false; $scope.SortDirection = &#34;ASC&#34;; $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(&#34;Default.aspx/GetCustomers&#34;, data, { headers: { &#39;Content-Type&#39;: &#39;application/json&#39;} }) .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 ? &#34;DESC&#34; : &#34;ASC&#34;; $scope.SortColumn = column; $scope.GetCustomers($scope.PageIndex); } $scope.GetSortClass = function (column) { if ($scope.SortColumn == column) { return $scope.ReverseSort ? &#39;arrow-down&#39; : &#39;arrow-up&#39;; } return &#39;&#39;; } $scope.GetDetails = function (customer) { $scope.modalInstance = $uibModal.open({ ariaLabelledBy: &#39;modal-title&#39;, ariaDescribedBy: &#39;modal-body&#39;, templateUrl: &#39;popup.htm&#39;, controller: &#39;ModelHandlerController&#39;, controllerAs: &#39;$ctrl&#39;, size: &#39;sm&#39;, // sm-small // md-medium // lg-large resolve: { Customer: function () { return customer; } } }); } }); app.controller(&#34;ModelHandlerController&#34;, function ($scope, $uibModalInstance, Customer) { $scope.Customer = Customer; $scope.Cancel = function () { $uibModalInstance.dismiss(&#39;close&#39;); } }); &lt;/script&gt; &lt;/head&gt; &lt;body ng-app=&#34;MyApp&#34; ng-controller=&#34;MyController&#34;&gt; &lt;div class=&#34;panel panel-primary&#34;&gt; &lt;div class=&#34;panel-body&#34;&gt; &lt;input type=&#34;text&#34; ng-model=&#34;SearchTerm&#34; ng-keyup=&#34;GetCustomers(1)&#34; class=&#34;form-control&#34; placeholder=&#34;Enter Name&#34; /&gt;&lt;br /&gt; &lt;table class=&#34;table table-bordered table-hover table-striped&#34;&gt; &lt;thead&gt; &lt;tr class=&#34;success&#34;&gt; &lt;th ng-click=&#34;SortData(&#39;CustomerID&#39;)&#34;&gt; Id&amp;nbsp;&lt;div ng-class=&#34;GetSortClass(&#39;CustomerID&#39;)&#34;&gt; &lt;/th&gt; &lt;th ng-click=&#34;SortData(&#39;ContactName&#39;)&#34;&gt; Name&amp;nbsp;&lt;div ng-class=&#34;GetSortClass(&#39;ContactName&#39;)&#34;&gt; &lt;/th&gt; &lt;th ng-click=&#34;SortData(&#39;City&#39;)&#34;&gt; City&amp;nbsp;&lt;div ng-class=&#34;GetSortClass(&#39;City&#39;)&#34;&gt; &lt;/th&gt; &lt;th ng-click=&#34;SortData(&#39;Country&#39;)&#34;&gt; Country&amp;nbsp;&lt;div ng-class=&#34;GetSortClass(&#39;Country&#39;)&#34;&gt; &lt;/th&gt; &lt;th&gt;Action&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr dir-paginate=&#34;customer in Customers|itemsPerPage:PageSize&#34; total-items=&#34;RecordCount&#34;&gt; &lt;td&gt;{{customer.Id}}&lt;/td&gt; &lt;td&gt;{{customer.Name}}&lt;/td&gt; &lt;td&gt;{{customer.City}}&lt;/td&gt; &lt;td&gt;{{customer.Country}}&lt;/td&gt; &lt;td&gt;&lt;input type=&#34;button&#34; value=&#34;View Details&#34; ng-click=&#34;GetDetails(customer)&#34; class=&#34;btn btn-primary&#34; /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;dir-pagination-controls max-size=&#34;PageSize&#34; direction-links=&#34;true&#34; boundary-links=&#34;true&#34; on-page-change=&#34;GetCustomers(newPageNumber)&#34;&gt; &lt;/dir-pagination-controls&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong>Popup.htm</strong></p> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&#34;modal-header&#34;&gt; &lt;h3 class=&#34;modal-title text-center&#34;&gt;&lt;u&gt;{{Customer.Name.trim()}}&lt;/u&gt;&amp;nbsp;details&lt;/h3&gt; &lt;/div&gt; &lt;div class=&#34;modal-body&#34; align=&#34;center&#34;&gt; &lt;span&gt;&lt;b&gt;Id : &lt;/b&gt;&lt;/span&gt;{{Customer.Id}}&lt;br /&gt; &lt;span&gt;&lt;b&gt;City : &lt;/b&gt;&lt;/span&gt;{{Customer.City}}&lt;br /&gt; &lt;span&gt;&lt;b&gt;Country : &lt;/b&gt;&lt;/span&gt;{{Customer.Country}}&lt;br /&gt; &lt;/div&gt; &lt;div class=&#34;modal-footer&#34;&gt; &lt;button class=&#34;btn btn-warning&#34; type=&#34;button&#34; ng-click=&#34;Cancel()&#34;&gt;Cancel&lt;/button&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong><span style="text-decoration: underline;">Namespaces</span></strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">using System.Collections.Generic; using System.Configuration; using System.Data; using System.Data.SqlClient; using System.Web.Services;</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">Imports System.Collections.Generic Imports System.Configuration Imports System.Data Imports System.Data.SqlClient Imports System.Web.Services</pre> <p><strong><span style="text-decoration: underline;">Code</span></strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">[WebMethod] public static CustomerData GetCustomers(string searchTerm, int pageNo, int pageSize, string sortDirection, string sortColumn) { string strConnString = ConfigurationManager.ConnectionStrings[&#34;constr&#34;].ConnectionString; List&lt;object&gt; customers = new List&lt;object&gt;(); SqlConnection con = new SqlConnection(strConnString); SqlCommand cmd = new SqlCommand(&#34;GetCustomersPageWise_Sort&#34;, con); cmd.CommandType = CommandType.StoredProcedure; cmd.Parameters.AddWithValue(&#34;@SearchTerm&#34;, searchTerm); cmd.Parameters.AddWithValue(&#34;@PageIndex&#34;, pageNo); cmd.Parameters.AddWithValue(&#34;@PageSize&#34;, pageSize); cmd.Parameters.AddWithValue(&#34;@SortDirection&#34;, sortDirection); cmd.Parameters.AddWithValue(&#34;@SortColumn&#34;, sortColumn); cmd.Parameters.Add(&#34;@RecordCount&#34;, SqlDbType.Int, 4).Direction = ParameterDirection.Output; con.Open(); SqlDataReader sdr = cmd.ExecuteReader(); while (sdr.Read()) { customers.Add(new { Id = sdr[&#34;CustomerID&#34;], Name = sdr[&#34;ContactName&#34;], City = sdr[&#34;City&#34;], Country = sdr[&#34;Country&#34;] }); } con.Close(); CustomerData tableData = new CustomerData(); tableData.Customers = customers; tableData.TotalRecords = Convert.ToInt32(cmd.Parameters[&#34;@RecordCount&#34;].Value); return tableData; } public class CustomerData { public List&lt;object&gt; Customers { get; set; } public int TotalRecords { get; set; } }</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">&lt;WebMethod()&gt; 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(&#34;constr&#34;).ConnectionString Dim customers As List(Of Object) = New List(Of Object)() Dim con As SqlConnection = New SqlConnection(strConnString) Dim cmd As SqlCommand = New SqlCommand(&#34;GetCustomersPageWise_Sort&#34;, con) cmd.CommandType = CommandType.StoredProcedure cmd.Parameters.AddWithValue(&#34;@SearchTerm&#34;, searchTerm) cmd.Parameters.AddWithValue(&#34;@PageIndex&#34;, pageNo) cmd.Parameters.AddWithValue(&#34;@PageSize&#34;, pageSize) cmd.Parameters.AddWithValue(&#34;@SortDirection&#34;, sortDirection) cmd.Parameters.AddWithValue(&#34;@SortColumn&#34;, sortColumn) cmd.Parameters.Add(&#34;@RecordCount&#34;, SqlDbType.Int, 4).Direction = ParameterDirection.Output con.Open() Dim sdr As SqlDataReader = cmd.ExecuteReader() While sdr.Read() customers.Add(New With { .Id = sdr(&#34;CustomerID&#34;), .Name = sdr(&#34;ContactName&#34;), .City = sdr(&#34;City&#34;), .Country = sdr(&#34;Country&#34;) }) End While con.Close() Dim tableData As CustomerData = New CustomerData() tableData.Customers = customers tableData.TotalRecords = Convert.ToInt32(cmd.Parameters(&#34;@RecordCount&#34;).Value) Return tableData End Function Public Class CustomerData Public Property Customers As List(Of Object) Public Property TotalRecords As Integer End Class</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><strong><span style="text-decoration: underline;"><img src="https://i.imgur.com/5t3eUM4.gif" alt="" width="394" height="237" /></span></strong></p>https://www.aspforums.net:443/Threads/138418/Display-HTML-Table-selected-Row-details-inside-Bootstrap-Modal-Popup-in-AngularJS/https://www.aspforums.net:443/Threads/138418/Display-HTML-Table-selected-Row-details-inside-Bootstrap-Modal-Popup-in-AngularJS/Tue, 30 Jul 2019 04:44:16 GMT