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.
Description:
In previous articles I explained Angularjs show ui-grid no records found, Angularjs tutorial with simple hello world example, Angularjs convert number to currency format, Angularjs get dropdownlist selected value, Angularjs convert text to uppercase while typing, Angularjs refresh div for every 1 second using interval mode and many articles relating to AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to set ng-click event in ui-grid cell template to access function in controller using AngularJS.
In previous articles I explained Angularjs show ui-grid no records found, Angularjs tutorial with simple hello world example, Angularjs convert number to currency format, Angularjs get dropdownlist selected value, Angularjs convert text to uppercase while typing, Angularjs refresh div for every 1 second using interval mode and many articles relating to AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to set ng-click event in ui-grid cell template to access function in controller using 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
|
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
|
|
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 Email
|
|||
6 comments :
Thank you so much.
thank you :-)
Thanks for Angular JS Inititaive
Thank you so much :)
Thanks for above. A question - along with above click if we want to pass the filed data - how to?
Note: Only a member of this blog may post a comment.