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');
Related
Here I go again, with angular problems.
I have a grid in my HTML, which is just a line.
I'm copypasteing the controller.
app.controller('PanelController', function ($scope, $compile, uiGridConstants){
var actionTemplate = '<div class="ui-grid-cell-contents"><img class="addNotes" src="images/button/detail.gif" ng-click="dettaglio(row.entity)" /></div>';
$scope.dettaglio = function(ritornoSearch, inspect) {
console.log("make it function");
};
columnDefs: [
{ field: 'azioni', enableFiltering: false, width: 85, enableSorting: false, enableColumnMenu: false, cellTemplate: actionTemplate, displayName: 'Azioni'},
{ field: 'codeSubInstaller', headerCellClass: $scope.highlightFilteredHeader },
{ field: 'nomeSubInstaller', headerCellClass: $scope.highlightFilteredHeader },
{ field: 'cognSubInstaller', headerCellClass: $scope.highlightFilteredHeader },
{ field: 'codeFiscaleSubInstaller', headerCellClass: $scope.highlightFilteredHeader },
{ field: 'descStato' , headerCellClass: $scope.highlightFilteredHeader }
]
};
The question is: when I open it in my browser, the image doens't show up as clickable. If I try to click on it anyway, it doens't even provide me the console.log.
What am I missing?
Just do it like its documented in http://ui-grid.info/docs/#/tutorial/305_appScope and compare this runnable plnkr demo with your solution.
$scope.grid.appScope is available in all templates that the grid uses.
In a template, you access the scope using grid.appScope property
In that way you need to change your template into the right syntax:
ng-click="grid.appScope.dettaglio(row)":
var actionTemplate = '<div class="ui-grid-cell-contents"><img class="addNotes" src="images/button/detail.gif" ng-click="grid.appScope.dettaglio(row)" /></div>';
AngularJS application example with ui-grid:
var app = angular.module('app', ['ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$log', '$http', function ($scope, $log, $http) {
$scope.dettaglio = function (row) {
console.log(row);
alert('inside');
};
$scope.gridOptions = {};
$scope.gridOptions.columnDefs = [
{name: 'name'},
{name: 'gender'}, {
name: 'ShowScope',
cellTemplate: '<button class="btn primary" ng-click="grid.appScope.dettaglio(row)">Click Me</button>'
}
];
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json').success(function (data) {
$scope.gridOptions.data = data;
});
}]);
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
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();
}
]);
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.
I have a very simple grid and am trying to enable pagination, but paging controls do not appear. Here's what I have:
I have added 'ui.grid.pagination' as a dependency on my app module.
html:
<div ui-grid="gridOptions" ui-grid-selection ui-grid-pagination external-scopes="$scope" class="campaigns-grid"></div>
js:
$scope.gridOptions = {
data: 'campaigns',
enableRowSelection: true,
noUnselect: true,
enableRowHeaderSelection: false,
multiSelect: false,
enablePaginationControls: true,
paginationPageSize: 5,
paginationPageSizes: [5, 10, 15],
rowTemplate: '<div ng-dblclick="getExternalScopes().onDblClickRow(row)" ng-click="grid.appScope.fnOne(row)" ng-repeat="col in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ui-grid-cell></div>',
columnDefs: [
{ field: 'name', displayName: 'Name' },
{
name: 'delete',
displayName: 'Delete',
enableCellEdit: false,
width: 200,
cellTemplate: '<a href ng-click="getExternalScopes().deleteCampaign(row.entity)"><i class="fa fa-trash deleteButton"></i></a>'
}
]
};
The pagination is not available in the RC 16, you should use the latest unstable version.
https://github.com/angular-ui/ng-grid/issues/2479
EDIT:
As a unstable I don't think is included as an available version, in fact when running bower info angular-ui-grid , I see:
Available versions:
3.0.0-rc.16
3.0.0-rc.15
3.0.0-rc.14
3.0.0-rc.13
3.0.0-rc.12
3.0.0-rc.11
3.0.0-rc.10
3.0.0-rc.8
3.0.0-rc.7
3.0.0-RC.18
So it is not possible to install the unstable version via bower, either download the files or include them from the host: https://github.com/angular-ui/ng-grid#how-can-i-test-30
module = angular.module('app',
['ngTouch', 'ui.grid', 'ui.grid.edit', 'ui.grid.autoResize', 'ui.grid.pagination', 'ui.grid.grouping', 'ui.grid.cellNav', 'ui.grid.moveColumns', 'ui.grid.exporter', 'ui.grid.pinning', 'ui.grid.resizeColumns', 'ui.grid.selection', 'ui.grid.autoFitColumns', 'angularjs-dropdown-multiselect']);
module.controller("SalesOrder",
['$scope', '$filter', '$timeout', '$http', '$interval', 'uiGridConstants', 'uiGridGroupingConstants', '$q',
function ($scope, $filter, $timeout, $http, $q, uiGridConstants, uiGridGroupingConstants, $interval, $window) {