Cell template in ng-grid - angularjs

I am using cell template property of ng-grid. I am defining one function in the directive. Within the same directive I am defining my grid-options. Here is the code:
data: 'mydata',
columnDefs: [
{field:'Timeout', displayName:'Delay', cellTemplate: '<a href=""
ng-click= "Report(Alert,Key,1000,1,1);"><div class=\"ngCellText\">{{row.getProperty(col.field)}}</div></a>'}
]
and function Report is also defined within same directive.
ng-click is working whenever it gets clicked. The function is getting called but whatever the input variable I am passing (Alert and Key) is not passing to the function whereas the rest three parameters 1000,1,1 are getting passed.
Alert is the hard-coded string what I wants to pass.
Key is one of the array of integer values in 'mydata'.
I checked by using alert for these 2 specific values in function and it is showing UNDEFINED.
Please help in calling the function correctly. Thanks in advance.

Do you want something like this:
$scope.Report=function(msg,key,v1,v2,v3){
//use v1, v2, v3 for whatever you like
alert(msg+':'+key);
};
$scope.gridOptions = {
data: 'myData',
columnDefs: [
{
field: 'name',
displayName: 'Delay',
cellTemplate: '<div class=\"ngCellText\">{{row.getProperty(col.field)}}</div>'
}, {
field: 'age'
}
]
};
Note that the hardcoded string (msg) must be put in escaped quotes. I used age as example for a key. Since its a numeric value in this example, you don't need the quotes.
Here is a Plunker

Related

While forever on rows in AngularJs Grid

I'm using AngularJS's grid and in a column I call a function to return some html.
When debugging this function I noticed it is called infinitely.
I changed the function to only console.log("test") and "test" is printed like crazy.
I'm new to AngularJS and I'm working in this project of my company.
This is the column definition:
{
field: "statusId", width: '8%', enableSorting: true, displayName: "", enableHiding: false, enableFiltering: false,
cellTemplate: "<div class='ui-grid-cell-contents' ng-bind-html='grid.appScope.getIcon(row.entity.statusId)'></div>"
}
And the function:
$scope.getIcon = function (statusId) {
console.log("getIcon");
};
I don't know what code you guys need to help. Let me know in the comments.
It's seems a bug, see: Multiple grid.appScope calls when used in cellTemplate
To overcome this, you can use directives.

Handling angularjs ui grid cell template ng-click function for var ctrl = this syntax in the controller

I have the following columnDefs for my angularjs ui grid :
ctrl.temporaryRegGridOptions.columnDefs = [ {
field: 'firstName',
'displayName': 'First / Company Name',
cellTemplate: '<span ng-click="ctrl.grid.appScope.gotoRequiredState()">{{row.entity.firstName}} </span> '
}, {
field: 'lastName',
'displayName': 'Surname',
width: '150'
} ]
and I have
ctrl.gotoRequiredState = function() {
alert("next State");
}
All I need to do is, on ng-click of a cell I need to call a function.Similar to ClicMe at http://ui-grid.info/docs/#/tutorial/305_appScope. On the official website this feature is given with $scope but in my controller, I am using var ctrl = this; syntax. May be that is the reason even if I have given ng-click="grid.appScope.gotoRequiredState()">, the gotoRequiredState() function is not getting called. So I have changed it to ng-click="ctrl.grid.appScope.gotoRequiredState()"> but still no luck. Even after I click firstName cell, the gotoRequiredState() function is not getting called. Can any one help me to fix this.
The following has solved the problem :
ctrl.temporaryRegGridOptions.appScopeProvider = ctrl;
with
cellTemplate: '<span ng-click="grid.appScope.gotoRequiredState()">{{row.entity.firstName}} </span> '
works fine.
otherwise simply using :
cellTemplate: '<span ng-click="grid.appScope.$parent.$ctrl.gotoRequiredState()">{{row.entity.firstName}} </span> '
works fine without assigning ctrl to appScopeProvider. By the way I am using Angularjs 1.5 + components architecture.
From the documentation that you have shared, I presume that appScope is the parent scope of the grid directive.
If thats the case, could you try
ng-click="grid.appScope.ctrl.gotoRequiredState()" ?

$scope.gridOptions.api.setRowData not working

I am using ag-grid . But I am not able to paint the data from json using $scope.gridOptions.api.setRowData method.. Only headers are displayed.Data is not painted in UI.
Find the code below
myApp.controller("getProfitabilityDetailsController", function($scope, $http) {
var columnDefs = [
{headerName: 'quantity',field: 'quantity', width: 150},
{headerName: 'finyear',field: 'finyear', width: 150}
];
$scope.gridOptions = {
columnDefs: columnDefs
};
$http.get("partials/profitability/mock/profitability_details.json")
.then(function(result){
$scope.gridOptions.api.setRowData(result.data.response);
});
});
A classic error to check when using ag-grid :
Does the div containing the ag-grid directive has a raw height specified (raw = in px) or any parent dom element. If not add a style="height:500px" for instance.
Otherwise i need to see the html you're using and the format of your json file.
try this instead:
$http.get("partials/profitability/mock/profitability_details.json")
.then(function(result){
$scope.gridOptions.api.setRowData(result.data);
});
Looks like you had an extra property name on return

Unable to access scope property in directive

I'm building a combobox plugin in Angular, and I'm at a point where I'm getting all sorts of weird behaviors I can't figure out. Here's one of them:
I have one directive (called linksEdit) that contains within it comboboxes. In the link function of the linksEdit directive, I set the following array:
scope.levels = [
{ 'id': 'link', 'value': 'Link'},
{ 'id': 'affiliate', 'value': 'Affiliate'},
{ 'id': 'partner', 'value': 'Partner'},
];
In that directive, I have the combobox directive, passing the levels value:
<combobox data="levels" value="cb_value" search="data.level" strict></combobox>
And combobox does have an isolate scope:
scope: {
'data': '=data',
'search': '=search',
'value': '=value',
}
I have code in the combobox that sets the default value of the combobox based on what data.level is. The linksEdit directive is called once (with the new attribute set) and then is being repeated with ng-repeat (to show existing data). I added two console.logs at the beginning of my combobox directive:
console.log(scope);
console.log(scope.data);
For the first instance of linksEdit (not in the repeat), scope.data has the data I expect. In the ng-repeat, scope shows my data property, but scope.data comes up as undefined. I'm not sure why they're behaving so differently.

AngularJS ui-grid issue with directive in cellTemplate

I have hit a head scratcher! It seems like a fairly simple issue... I am using the ui-grid angular control and I'm attempting to use a custom directive in the cellTemplate. I can succesfully get it in there, but the problem is I am not able to bind correctly to the directive. I can bind properties but not functions from the parent. When I try to access a parent function which has been bound I get an object not defined error.
As far as I know I setup binding and cell template correctly:
//in columndefs:
{
name: 'item', displayName: 'Status',
width: 200, cellTemplate: '<dropdowncss item="row.entity[col.field]" do-drop="dropdowncombo"></dropdowncss>'
},
//directive declaration:
app.directive('dropdowncss', function () {
return {
restrict: 'E',
scope:
{
item: '=',
doDrop: '&'
},
controller: 'DropDownCSSCtrl',
templateUrl: 'dropdowncss.html'
};
When you click on one of the colored drop downs it should alert 'success'
Please see the simple plunker here:
http://plnkr.co/edit/HuuxxgV1GoWzfWlUvafw?p=preview
Any help would be appreciated. Thanks!
So from the scope that the cellTemplate gets compiled, you are many miles deep in scopes and your function dropdowncombo does not exist. That is why you get undefined. From that scope, Your dropdowncombo function is actually $parent.$parent.$parent.$parent.$parent.$parent.dropdowncombo. Now I would never suggest you use that so you should engineer an alternate way to pass you scoped function from that cell template.
To view your plunker working, change line 20 of app.js to
width: 200, cellTemplate: '<dropdowncss item="row.entity[col.field]" do-drop="$parent.$parent.$parent.$parent.$parent.$parent.dropdowncombo"></dropdowncss>'
I would make the edit for you, but it's just too embarrassing to have that many $parents even in this modern age of acceptance.
So there are a few ways to fix this but here's my take. Save the function from your scope that you want to execute in the column definition and then call that using col.colDef.func
Updated column definition in app.js is as follows:
{
name: 'item', displayName: 'Status',
handleClick: $scope.dropdowncombo,
width: 200,
cellTemplate: '<dropdowncss item="row.entity[col.field]" do-drop="col.colDef.handleClick"></dropdowncss>'
}
Here's an edited working plunker
This question is Old but I have a better approach -
you can use grid.appScope to access current $scope.
so change you line 20 in app.js to -
width: 200, cellTemplate: '<dropdowncss item="row.entity[col.field]" do-drop="grid.appScope.dropdowncombo"></dropdowncss>'
working Plunker is here -
http://plnkr.co/edit/5LiETuG2PEOJhvEcFypF?p=preview
In case anyone else was curious I also found the method using events. $emit can be used to broadcast an event up the whole parent scope hierarchy. So the following worked:
Adding this to the parent scope:
$scope.$on('EventDropDown', function () {
alert('passed up the event successfully');
});
And calling it from the directive like this:
<div class="divDropDown" ng-click="$emit('EventDropDown')">
That passed it up to the parent scope correctly. In contrast to $emit, $broadcast sends events down the scope hierarchy (not applicable in this scenario). There is no other hooking up things other than the event name. That makes it kind of convenient.

Resources