Display ui-grid selected (checked) row details in AngularJS

Last Reply 2 months ago By dharmendr

Posted 2 months ago

How to get selected row of AngularJS ui-grid.

Posted 2 months ago Modified on 2 months ago

Hi rani,

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

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>AngularJS UI-Grid selected row details</title>
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.8.1/ui-grid.css" />
    <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="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.8.1/ui-grid.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', ['ui.grid', 'ui.grid.pagination', 'ui.grid.selection']);
        app.controller('MyController', function ($scope, $http) {
            $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 = {
                enableSorting: true,
                enableFiltering: true,
                paginationPageSizes: [5, 25, 50, 75],
                paginationPageSize: 5,
                enableRowSelection: false,
                enableSelectAll: true,
                multiSelect: false,
                columnDefs: [
                            { field: 'Id', width: '75', enableSorting: false, enableFiltering: false },
                            { field: 'Name', enableSorting: true, enableFiltering: true },
                            { field: 'City', enableSorting: true, enableFiltering: true },
                            { field: 'Country', enableSorting: true, enableFiltering: true }
                        ],
                onRegisterApi: function (gridApi) {
                    gridApi.selection.on.rowSelectionChanged($scope, function (row) {
                        if (row.isSelected) {
                            alert("Id : " + row.entity.Id +
                                  "\nName : " + row.entity.Name +
                                  "\nCity : " + row.entity.City +
                                  "\nCountry : " + row.entity.Country);
                        }
                    });
                }
            };
            $scope.gridOptions.data = $scope.Employees;
        });
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <div ui-grid="gridOptions" ui-grid-pagination ui-grid-selection style="width: 100%;height: 350px;"></div>
</body>
</html>

Screenshot