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 ng-grid selected Row details in Bootstrap Modal Popup in AngularJS<p>Hi&nbsp;rani,</p> <p>Check this example. Now please take its reference and correct your code.</p> <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&gt; &lt;title&gt;&lt;/title&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;link rel=&#34;stylesheet&#34; type=&#34;text/css&#34; href=&#34;//cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/ng-grid.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://code.jquery.com/jquery-2.2.3.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;//cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/build/ng-grid.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;ngGrid&#39;, &#39;ui.bootstrap&#39;]); app.controller(&#39;MyController&#39;, function ($scope, $uibModal) { $scope.Employees = [ { Id: 1, Name: &#39;Nancy Davolio&#39;, City: &#39;Seattle&#39;, Country: &#39;USA&#39; }, { Id: 2, Name: &#39;Andrew Fuller&#39;, City: &#39;Tacoma&#39;, Country: &#39;USA&#39; }, { Id: 3, Name: &#39;Janet Leverling&#39;, City: &#39;Kirkland&#39;, Country: &#39;USA&#39; }, { Id: 4, Name: &#39;Margaret Peacock&#39;, City: &#39;Redmond&#39;, Country: &#39;USA&#39; }, { Id: 5, Name: &#39;Steven Buchanan&#39;, City: &#39;London&#39;, Country: &#39;UK&#39; }, { Id: 6, Name: &#39;Michael Suyama&#39;, City: &#39;London&#39;, Country: &#39;UK&#39; }, { Id: 7, Name: &#39;Robert King&#39;, City: &#39;London&#39;, Country: &#39;UK&#39; }, { Id: 8, Name: &#39;Laura Callahan&#39;, City: &#39;Seattle&#39;, Country: &#39;USA&#39; }, { Id: 9, Name: &#39;Anne Dodsworth&#39;, City: &#39;London&#39;, Country: &#39;UK&#39; } ]; $scope.GridOptions = { data: &#39;Employees&#39;, enablePinning: false, multiSelect: false, beforeSelectionChange: function (row) { $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;md&#39;, // sm-small // md-medium // lg-large resolve: { Employee: function () { return row.entity; } } }); return true; }, columnDefs: [{ field: &#34;Id&#34;, width: 50, sortable: false, enableCellEdit: false }, { field: &#34;Name&#34;, width: 150, sortable: true, enableCellEdit: false }, { field: &#34;City&#34;, width: 100, sortable: true, enableCellEdit: false }, { field: &#34;Country&#34;, width: 100, sortable: true, enableCellEdit: false}] }; }); app.controller(&#34;ModelHandlerController&#34;, function ($scope, $uibModalInstance, Employee) { $scope.Employee = Employee; $scope.Cancel = function () { $uibModalInstance.dismiss(&#39;close&#39;); } }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div ng-app=&#34;MyApp&#34; ng-controller=&#34;MyController&#34;&gt; &lt;div ng-grid=&#34;GridOptions&#34; style=&#34;width: 400px; height: 500px&#34;&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong>Popup</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;{{Employee.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;Employee Id : &lt;/b&gt;&lt;/span&gt;{{Employee.Id}}&lt;br /&gt; &lt;span&gt;&lt;b&gt;City : &lt;/b&gt;&lt;/span&gt;{{Employee.City}}&lt;br /&gt; &lt;span&gt;&lt;b&gt;Country : &lt;/b&gt;&lt;/span&gt;{{Employee.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;">Screenshot</span></strong></p> <p><strong><span style="text-decoration: underline;"><img src="https://i.imgur.com/XM7tzup.gif" alt="" width="399" height="305" /></span></strong></p>https://www.aspforums.net:443/Threads/912986/Display-ng-grid-selected-Row-details-in-Bootstrap-Modal-Popup-in-AngularJS/https://www.aspforums.net:443/Threads/912986/Display-ng-grid-selected-Row-details-in-Bootstrap-Modal-Popup-in-AngularJS/Thu, 01 Aug 2019 03:44:55 GMT