Develop Reference

AG-GRID & AngularJS - How to edit data externally

I am working on a single page application using Agularjs, UI-Router and AG-GRID. I can't figure out how to update AG-GRID's data from an external form.
Let me explain, from the AG-GRID data table, I added button that would grab the row data and transfert it to my form page. The form page would then populate with the data correctly. Once in the form page if I try to edit the data and go back to my main page (where I have AG-GRID) I dont see any changes.
I tried doing the $scope.gridOptions.api.refreshCells(); This doesent seem to do anything nor does it generate any errors.
This is what my setup looks like so far:
Main_controller:
App.controller('Main_Controller', function ($scope, $http, $filter, $timeout, $mdDialog, $q, $resource, $interval, $mdSidenav, $state, Service) {
var Buttons = function(params) {
return '<md-button class="md-icon-button" aria-label="Edit" ng-click="Edit(data)"> <md-icon class="material-icons">mode_edit</md-icon> </md-button>'';
}
var columnDefs = [
{ cellRenderer: Buttons, width: 165 },
{ headerName: "Data1", field: "Data1"},
{ headerName: "Data2", field: "Data2"},
];
$scope.gridOptions_incident = {
columnDefs: columnDefs,
domLayout: 'autoHeight',
enableFilter: true,
enableColResize: true,
enableSorting: true,
pagination: true,
paginationPageSize:25,
animateRows: true,
headerHeight: headerHeight,
rowHeight:rowHeight,
angularCompileRows : true,
enableCellChangeFlash: true,
debug: true,
rowData: Service.get_data()
};
$scope.Edit = function(data){
Service.current_incident(data);
$state.go('OPEN_ExternalForm');
};
});
Service:
GDI_App.factory('Service', function($http, $q, $timeout, $mdDialog, $resource, $window) {
return{
get_data: function(){
var example_data = [
{ "Data1": "123123", "Data2": "15437" },
{ "Data1": "432234", "Data2": "146" },
{ "Data1": "45654", "Data2": "3534" },
{ "Data1": "76587", "Data2": "78978" },
{ "Data1": "2342", "Data2": "5345878" },
{ "Data1": "178", "Data2": "34534" },
{ "Data1": "173838", "Data2": "354534" },
];
return example_data
}
current_incident: function(data){
Current.Data = data;
return Current.Data
}
}
});
Form Controller:
GDI_App.controller('Form_Controller', function ($scope, $http, $filter, $timeout, $mdDialog, $q, $resource, $interval, $mdSidenav, Service) {
$scope.Current.Data = Service.current_incident();
$scope.Submit = function(){
$http({
method: 'POST',
url: REST_URL,
processData: false,
contentType: "application/json;odata=verbose",
headers: HEADER_DATA,
data: $scope.Current.Data
});
}
});
Form HTML:
I have a very basic HTML form:
<div ng-controller="Form_Controller">
Data1: <input ng-model="Current.Data.Data1">
Data2: <input ng-model="Current.Data.Data2">
<button ng-click="Submit()" type="button">Submit</button>
</div>
Im not quite sure what im missing. My end goal is to be able to edit the data from an external data and then have it synced up on the AG-Grid.
Anyone have an idea?

u can update cell data like this:
var rowNode = $scope.gridOptions_incident.api.getRowNode(id);
rowNode.setDataValue('Data2', 'newData');

Show breakline in uigrid

I'm using uigrid like below:
columnDefs: [
{ name: 'CA', field: 'CA', displayName: 'CA', enableCellEdit: false }
]
the CA column has data like below :
<div> name : Jon ><br /> Job : Barber </div>
even that i have <br /> i got a result as it is , without a break line.
Any solution ? to show the result like :
name : Jon
Job : Barber

I believe this might be close to what you want, user2848242.
JavaScript/AngularJS Controller:
var app = angular.module('app', ['ui.grid', 'ngSanitize']);
app.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
$scope.gridOptions = {
rowHeight: 40,
enableRowHeaderSelection: false,
columnDefs: [{
name: 'CA1',
field: 'CA',
displayName: 'Original CA',
enableCellEdit: false,
cellTemplate: '<span ng-bind-html="row.entity[col.field]"></span>'
}, {
name: 'CA2',
field: 'Name',
displayName: 'Alternative CA',
enableCellEdit: false,
cellTemplate: '<div>Name: {{row.entity[col.field]}}<br />Job: {{row.entity["Job"]}}</div>'
}]
}
$http.get('data.json')
.then(function(response) {
$scope.gridOptions.data = response.data;
});
}]);
The basic idea is, add a cellTemplate to your columnDefs. The tricky part is, since HTML is in your data you need to use ngSanitize to "trust" the HTML so it'll appear as HTML. Since it's best to separate HTML from data, for many reasons, I provided an alternative - hence Original CA and Alternative CA columns.
Here's a working Plunker, http://plnkr.co/edit/pkoARFr11Q7TmbBIegIT?p=preview.
Hope that helps, let me know if you have any other questions.

Angular UI grid unable to sort column which has row index

I have a grid with columns for name,price etc. To this grid I have added another column that depicts serial nos. i.e. 1,2,3... . In order to generate this I have used cellTemplate: '{{rowRenderIndex+1}}'
Now I want to sort based on this column with serial numbers. But the sorting does not work. I tried adding a type:'number' to the column definition. Still the sorting does not happen on the column which has the serial numbers.
Here is my fiddle link
http://plnkr.co/edit/zgQKyaS7KbJeZoyzPLKf?p=preview
My html
<div ng-controller="MainCtrl">
<div id="grid1" ui-grid="gridOptions1" class="grid"></div>
</div>
My jS
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
$scope.gridOptions1 = {
enableSorting: true,
columnDefs: [
{ name: 'SL NO' ,cellTemplate: '<div>{{rowRenderIndex+1}}</div>', type:'number'},
{ field: 'name' },
{ field: 'gender' },
{ field: 'company', enableSorting: false }
],
onRegisterApi: function( gridApi ) {
$scope.grid1Api = gridApi;
}
};
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function(data) {
$scope.gridOptions1.data = data;
});
}]);
I want to sort column with the name SL NO here which contains the row indexes.

Firstly, rowRenderIndex is not apt for the sorting purposes because it displays the rows index after rendering hence if you scroll down the grid you will notice the numbers automatically adjust.
Second, You could use IndexOf function to get your row indeces but it wont solve the sorting problem,
// { name: 'SL NO' ,field:'index',cellTemplate: '<div class = "ui-grid-cell-contents">{{grid.renderContainers.body.visibleRowCache.indexOf(row)}}</div>', type:'number'},
Here is the final working code snippet:-
columnDefs: [
{field:'index'},
{ field: 'name' },
{ field: 'gender' },
{ field: 'company', enableSorting: false }
],
onRegisterApi: function( gridApi ) {
$scope.grid1Api = gridApi;
}
};
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function(data) {
$scope.gridOptions1.data = data;
angular.forEach(data, function(data, index) {
data["index"] = index+1;
Here is the plunkr : http://plnkr.co/edit/LiDWg8ozwdEo290xUqNe?p=preview

Angular UI Grid onRegisterApi method call twice

Here in my code if I run this independently it works fine, but after integrate in my project the "onRegisterApi" method call twice. It seems some conflict with existing Ui-Grid.
Can Anyone have any idea? How to debug this and find the root cause. I already spend so much time on this
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pagination']);
app.controller('MainCtrl', [
'$scope', '$http', 'uiGridConstants', function($scope, $http, uiGridConstants) {
var paginationOptions = {
pageNumber: 1,
pageSize: 25,
sort: null
};
$scope.gridOptions = {
paginationPageSizes: [25, 50, 75],
paginationPageSize: 25,
useExternalPagination: true,
useExternalSorting: true,
columnDefs: [
{ name: 'name' },
{ name: 'gender', enableSorting: false },
{ name: 'company', enableSorting: false }
],
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
$scope.gridApi.core.on.sortChanged($scope, function(grid, sortColumns) {
if (sortColumns.length == 0) {
paginationOptions.sort = null;
} else {
paginationOptions.sort = sortColumns[0].sort.direction;
}
getPage();
});
gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
paginationOptions.pageNumber = newPage;
paginationOptions.pageSize = pageSize;
getPage();
});
}
};
var getPage = function() {
// server call
};
getPage();
}
]);

Angular JS ui-grid cellTemplate's ng-click not firing when scope function tries to pass the cell info as params

I can't seem to get ng-click to fire for me and I've been trying for hours. I've read a bunch of similar issues on SO, but none seem to fix my issue. Note that if I change ng-click to onclick the event fires.
My JS:
var app = angular.module('app', ['ngTouch', 'ngAnimate', 'ui.grid', 'ui.grid.moveColumns', 'ui.grid.resizeColumns']);
app.controller('matterController', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
var industryFields,
departmentFields,
regionFields;
$scope.gridOptions = {
enableFiltering: true,
enableColumnResizing: true,
enableSorting: true,
columnDefs: [
{ name: 'Client_Name', width: 120, enableHiding: false },
{ name: 'Client_Number', width: 140, enableHiding: false },
{ name: 'Matter_Name', width: 130, enableHiding: false },
{ name: 'Matter_Number', width: 140, enableHiding: false },
{ name: 'Billing_Partner', width: 250, enableHiding: false },
{ name: 'Matter_Descriptions', width: 180, enableHiding: false
, cellTemplate: '<div class="ui-grid-cell-contents"><a ng-href="#" ng-click="displayDescription(\'{{COL_FIELD}}\');">View Description</a></div>' },
{ name: 'Industries', width: 120, enableHiding: false },
{ name: 'Departments', width: 130, enableHiding: false },
{ name: 'Regions', width: 120, enableHiding: false }
],
showGroupPanel: true
};
function loadData() {
$http.get('api/ClientMatter/')
.success(function (data) {
$scope.gridOptions.data = data;
});
$http.get('Home/GetIndustries')
.success(function (data) {
industryFields = data;
});
$http.get('Home/GetDepartments')
.success(function (data) {
departmentFields = data;
});
$http.get('Home/GetRegions')
.success(function (data) {
regionFields = data;
});
}
$scope.displayDescription = function(data) {
alert(data);
}
loadData();
}]);
The "Matter_Descriptions" column has a custom cell template which needs to call the "displayDescription" method. So far I can't get it to fire at all.
My HTML:
<div class="screen-container" ng-controller="matterController">
<button onclick="location.href = '#Url.Action("Create", "Home")'; return false;" style="float: right;">New Matter</button>
<br/><br/>
<div id="home-grid" ui-grid="gridOptions" class="grid" ui-grid-move-columns ui-grid-resize-columns></div>
</div>
And here is a screen shot of the hyperlink at runtime showing the data exactly as I want it:
Pretty basic. Any help is appreciated! Thanks!

You DO NOT NEED BRACES because you are inside ng already when you apply ng-directive's:
<button ng-click = 'yourscopefn(yourscopevars,,)'>buttonface</button>
you don't do this :
<button ng-click = 'yourscopefn({{yourscopevars}},,)'>buttonface</button>
wrong!!
All you need to do for your ui-grid column def celltemplate is:
{ name: 'yourcolumn', cellTemplate:
' <a ng-href="#" ng-click="grid.appScope.yourfunction(COL_FIELD);">{{COL_FIELD}}</a>' }

I found the solution thanks to this post on SO: Button click does not work in Celltemplate angular grid
It turns out I needed to change:
ng-click="displayDescription(\'{{COL_FIELD}}\');
To:
ng-click=\'grid.appScope.displayDescription("{{COL_FIELD}}");
I couldn't tell you why this works, but my application is now working as expected. Thanks to those who commented.