Angularjs ng-click Event in Inside UI-Grid Cell

July 14, 2015

Introduction

This article explains how to set ng-click event in ui-grid cell template in AngularJS or fix problem of ng-click event in ui-grid cell template not working / firing / triggering function in controller in AngularJS. Generally ui-grid will isolate scope variable so there is no access to scope variable from row or cell template to fix this problem we need to use grid.appScope property it will allow to access scope variable from ui-grid row or cell template in AngularJS. We need to use the property like “ng-click="grid.appScope.yourfunction()"” in ui-grid cell template in AngularJS.

To set ng-click event in ui-grid cell template we need to use “grid.appScope” option in AngularJS for that we need to write the code like as shown below.

$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>' }
]
};

If you want to check it in complete example you need to write the code like as shown below

 <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>
, , , , ,
By:
Ashwani
Ashwani

This is a short biography of the post author. Maecenas nec odio et ante tincidunt tempus donec vitae sapien ut libero venenatis faucibus nullam quis ante maecenas nec odio et ante tincidunt tempus donec.

4 comments:

  1. UnknownSeptember 2, 2015 at 3:52 AM

    Hello Admin, I have been training students on AngularJS for past 6 months, and at times, I have used your blog as reference for the class training and also for my personal project development. It has been so much useful. Thank you, keep writing more:)
    Shashaa
    AngularJS courses in Chennai

    ReplyDelete
    Replies
    1. AshwaniNovember 6, 2015 at 3:13 AM

      thanks @Shashaa Tirupati for your appreciation.

      Delete
  2. UnknownOctober 25, 2016 at 6:03 AM

    Learning AngularJs course will becoming you as a web developer. Web designer and developer have great demand in today’s IT sectors.
    Regards,
    Angularjs Training | Angularjs Training in Chennai | Angularjs course in Chennai

    ReplyDelete
  3. UnknownJuly 17, 2017 at 4:59 AM

    UI Grid can be bound to any sort of Angular expression, as well as property names that would normally break an expression in handling them.
    Software testing selenium training in Chennai

    ReplyDelete

Subscribe to: Post Comments (Atom)