CODEWITHSUNDEEP
angularjsangular-ui-grid
Rolando
Rolando

Reputation: 62704

How to get click and get row contents or at least the index with angular-ui-grid?

I am using ui-grid in angular, I want to have a "click me" button that when clicked, alerts or logs the contents of the specific row data or index that is associated. How do I get to that? Right now I can trigger an alert box, but not get the actual contents of the row (or even for example, a specific key).

 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Angularjs Show No Records Found in UI Grid</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
<script type="text/javascript">
var myApp = angular.module('sampleapp', ['ui.grid', 'ui.grid.selection', 'ui.grid.exporter']);
myApp.controller("appcontroller", function ($scope, $http) {
$scope.gridOptions = {
data: 'sampledata',
columnDefs: [
{ field: 'name' },
{ field: 'gender' },
{ field: 'company' },
{ field: 'click', cellTemplate: '<button class="btn primary" ng-click="grid.appScope.sampledetails()">Click Me</button>' }
]
};
$scope.sampledata = { "data": [] };
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function (data) {
$scope.sampledata = data;
});
$scope.sampledetails = function () {
alert('Hi Click is working');
return false;
};
});
</script>
<style type="text/css">
.grid {
width: 500px;
height: 400px;
}
.nodatatxt {
position: absolute;
top : 80px;
opacity: 0.25;
font-size: 1.5em;
width: 100%;
text-align: center;
z-index: 1000;
}
</style>
</head>
<body>
<form id="form1">
<div ng-app="sampleapp" ng-controller="appcontroller">
<br /><br />
<div ui-grid="gridOptions" ui-grid-selection ui-grid-exporter class="grid">
<div class="nodatatxt" ng-if="sampledata.data.length==0">No Records Found</div>
</div>
</div>
</form>
</body>
</html>

Upvotes: 0

Views: 1335

Answers (1)

Boris Parnikel
Boris Parnikel

Reputation: 863

At first, your code is unreadable. Use embedded code snippets, jsfiddle, codepen or plunkr

Secondly, if you will take a look at template of your ui-grid, you will see that it just uses ng-repeat. Something like this:

ng-repeat="(rowRenderIndex, row) in rowContainer.renderedRows track by $index"

So you can override cell template:

var actionCellTemplate = '<div class="ui-grid-cell-contents"' + 
                         'ng-model="row.entity.username"' +
                         'ng-click="clickMe(row)">....</div>'

$scope.gridOptions = {
    columnDefs: [
        ....
        {
            name: 'action',
            cellTemplate: actionCellTemplate
        }
    ]
};

Upvotes: 1

Related Questions