Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Angularjs ng-click Event in Inside UI-Grid Cell Template Not Trigger (Firing) Function in Controller

Jul 12, 2015
Introduction

Here I will explain 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>

Demo

Angularjs ng-click Event in Inside UI-Grid Cell Template Not Trigger (Firing) Function in Controller


If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

6 comments :

Anonymous said...

Thank you so much.

Alexander said...

thank you :-)

Anonymous said...

Thanks for Angular JS Inititaive

Taufik Ardiyan said...

Thank you so much :)

Unknown said...

Thanks for above. A question - along with above click if we want to pass the filed data - how to?

shahid said...
This comment has been removed by the author.

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.