Display ng-grid selected Row details in Bootstrap Modal Popup in AngularJS

Last Reply 20 days ago By dharmendr

Posted 21 days ago

How to display ng-grid selected row details in modal popup in angularjs.

Bind (Populate) ng-grid from Database using AngularJS in ASP.Net

You are viewing reply posted by: dharmendr 20 days ago.
Posted 20 days ago

Hi rani,

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

HTML

Default

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="//cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/ng-grid.css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <script type="text/javascript" src="//cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/build/ng-grid.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', ['ngGrid', 'ui.bootstrap']);
        app.controller('MyController', function ($scope, $uibModal) {
            $scope.Employees = [
                    { Id: 1, Name: 'Nancy Davolio', City: 'Seattle', Country: 'USA' },
                    { Id: 2, Name: 'Andrew Fuller', City: 'Tacoma', Country: 'USA' },
                    { Id: 3, Name: 'Janet Leverling', City: 'Kirkland', Country: 'USA' },
                    { Id: 4, Name: 'Margaret Peacock', City: 'Redmond', Country: 'USA' },
                    { Id: 5, Name: 'Steven Buchanan', City: 'London', Country: 'UK' },
                    { Id: 6, Name: 'Michael Suyama', City: 'London', Country: 'UK' },
                    { Id: 7, Name: 'Robert King', City: 'London', Country: 'UK' },
                    { Id: 8, Name: 'Laura Callahan', City: 'Seattle', Country: 'USA' },
                    { Id: 9, Name: 'Anne Dodsworth', City: 'London', Country: 'UK' }
                ];

            $scope.GridOptions = {
                data: 'Employees',
                enablePinning: false,
                multiSelect: false,
                beforeSelectionChange: function (row) {
                    $scope.modalInstance = $uibModal.open({
                        ariaLabelledBy: 'modal-title',
                        ariaDescribedBy: 'modal-body',
                        templateUrl: 'popup.htm',
                        controller: 'ModelHandlerController',
                        controllerAs: '$ctrl',
                        size: 'md', // sm-small // md-medium // lg-large
                        resolve: {
                            Employee: function () {
                                return row.entity;
                            }
                        }
                    });
                    return true;
                },
                columnDefs: [{ field: "Id", width: 50, sortable: false, enableCellEdit: false },
                            { field: "Name", width: 150, sortable: true, enableCellEdit: false },
                            { field: "City", width: 100, sortable: true, enableCellEdit: false },
                            { field: "Country", width: 100, sortable: true, enableCellEdit: false}]
            };
        });
        app.controller("ModelHandlerController", function ($scope, $uibModalInstance, Employee) {
            $scope.Employee = Employee;
            $scope.Cancel = function () {
                $uibModalInstance.dismiss('close');
            }
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <div ng-grid="GridOptions" style="width: 400px; height: 500px">
        </div>
    </div>
</body>
</html>

Popup

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

Screenshot