Tuesday, July 14, 2015

Angularjs ng-click Event in Inside UI-Grid Cell

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>

8 comments:

  1. 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. thanks @Shashaa Tirupati for your appreciation.

      Delete
  2. Hii author nice post! AngularJs is the best framework which is supported by google! I have personally used angularJs for my previous web app developement project and I'am quite satisfied by the output.
    Angulars training | Angularjs training in Chennai | AngularJs training institute in Chennai

    ReplyDelete
  3. The strategy you have posted on this technology helped me to get into the next level and had lot of information in it. The python programming language is very popular and most widely used.
    Python Training in Chennai | Python Course in Chennai

    ReplyDelete
  4. 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
  5. Thanks for sharing this unique and informative content which provided me the required information.
    Java Training in Chennai | JAVA Course in Chennai

    ReplyDelete
  6. 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
  7. Really it was an awesome article...very interesting to read..You have provided an nice article....Thanks for sharing..
    Android Training in Chennai
    Ios Training in Chennai

    ReplyDelete