In my Angular apps I am using UI Grid (http://ui-grid.info/docs/#/tutorial)
How do I get the data of the selected row ?
Plunker : http://plnkr.co/edit/GpsfCHewYjhiPcwAQheA?p=preview
HTML:
<div ui-grid="gridOptions" ui-grid-selection class="grid"></div>
The grid selection module has a method to get the selected rows: getSelectedRows().
You can access this method through the gridApi if you define your options like so:
$scope.gridOptions = {
columnDefs: $scope.columns,
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
}
};
Related
I am using ui-grid in my project, I need to show the selected row index value in pagination part.
For example, there are total 100 items in my grid, it is divided into 4 pages, each page has 25 items. If I select 10th row from a page, I need show 10 of 25 items
I am using :
HTML
<div ui-grid="gridOptions" ui-grid-selection > </div>
controller:
$scope.gridOptions ={
data:'data',
coulmnDef: $scope.coulmnDef,
paginationPageSizes: [25, 50, 75,100],
paginationPageSize: 25,
};
could you please help me any one, Thanks in advance
You can get the selected rows by listening for rowSelectionChanged event, after which you can use the getSelectedRows method on gridApi's selection object. To do so, add the following to your gridOptions object:
$scope.selection = [];
$scope.gridOptions = {
enableRowSelection: true,
enableRowHeaderSelection: false,
modifierKeysToMultiSelect: true,
multiSelect: true,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope, function () {
$scope.selection = gridApi.selection.getSelectedRows();
});
}
};
Now everytime the selection changes, the selection array in your scope gets updated of which you can take the length property which gives you the selection count. Hope that helps, good luck!
Reference: http://ui-grid.info/docs/#/tutorial/210_selection
I have a grid displaying data. I want to be able to route to a new view with a click of a grid row. Right now I am unable to even register a row click/selection. I have tried in my grid definition:
onRegisterApi: function (gridApi ) {
$scope.gridApi = gridApi;
gridApi.selection.on.onRowSelectionChanged($scope, function (rows) {
$scope.mySelections = gridApi.selection.getSelectedRows();
});
},
with a call to mySelections in the html:
<p>{{mySelections}}</p>
this results in error : Cannot read property 'on' of undefined. However, I can't tell what is 'undefined'.
I have also tried a separate function:
$scope.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope, function (row) {
alert(row.isSelected);
//$scope.mySelections = gridApi.selection.getSelectedRows();
});
};
but it returns the same error.
I have added ui.grid and ui.grid.selection to my angular.module. I would love to find an actual example of using rowselect to link to a new page, but I have to find anything.
Cannot read property 'on' of undefined.
Suggests that the selection property is not available on your gridApi object, i'de double check if you really added the dependencies the right way:
angular.module('app', [
'ui.grid',
'ui.grid.selection'
]);
Next, calling gridApi.selection.on.onRowSelectionChanged won't work because the method is called rowSelectionChanged not onRowSelectionChanged. You've got that right in your second example. For the rest your code seems ok, perhaps there's something wrong in the rest of your grid definition. Here's one that works with an example using ui.router for view change:
$scope.gridOptions = {
enableRowSelection: true,
enableRowHeaderSelection: false,
multiSelect: false,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope, function (rows) {
var selection = gridApi.selection.getSelectedRows();
$state.go('item', {item: selection[0]});
});
}
};
http://plnkr.co/edit/Rs9M6pJd83vK8syr3W9g?p=preview
Don't forget to add the "ui-grid-selection" attribut to your DIV :
<div class="gridStyle" ui-grid="gridOptions" ui-grid-selection ... ></div>
I have an Angular UI grid filled with data that I pulled from Firebase. The grid table views perfectly with the $.asArray method with AngularFire, with the relevant code snippets as follows.
The Html View:
<!-- UI-Grid -->
<div ui-grid="gridOptions" class="ui-grid" ui-grid-resize-columns ui-grid-edit></div>
The Controller View:
var ref = new Firebase("https://commentme.firebaseio.com/comments");
// create an AngularFire reference to the data
var sync = $firebase(ref);
// create a synchronized array for use in our HTML code
$scope.comments = sync.$asArray();
$scope.newComment = {text: '', date: ''};
// pushes data back to Firebase Array
$scope.addComment = function(){
$scope.comments.$add($scope.newComment);
$scope.newComment = {text: '', date: ''};
// UI Grid Options
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ name: 'comments', field: 'text'},
{ name: 'date', field: 'date'}
],
data: $scope.comments
};
The problem however is when I make edits to the UI-Grid (using the ui.grid.edit module) those changes only can reflect on my DOM and cannot persist/3-way bind back to the Firebase backend.
I tried binding the ng-model and ng-change using the editableCellTemplate within ColumnDefs with a code like this but still could not get it working.
editableCellTemplate: '<input type="text" ng-model="text" ng-change="comments.$save(text)">
Would appreciate if anyone could show me how to perform a 3-way bind with Firebase if I make changes to the cells of the UI-Grid table, thanks!
EDIT
Thanks to Kato's suggestions, I have finally made the binding between UI-Grid and Firebase! The solution is as follows.
The Html View:
<!-- UI-Grid -->
<div ui-grid="gridOptions" class="ui-grid" ui-grid-resize-columns ui-grid-edit ui-grid-row-edit ui-grid-cellNav></div>
The Controller View:
$scope.gridOptions.onRegisterApi = function(gridApi){
//set gridApi on scope
$scope.gridApi = gridApi;
gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
};
$scope.saveRow = function( rowEntity ) {
//Firebase save and promise return
$scope.comments.$save(rowEntity).then(function(ref){
ref = $scope.comments;
});
// create a fake promise - normally you'd use the promise returned by $http or $resource
var promise = $q.defer();
$scope.gridApi.rowEdit.setSavePromise( $scope.gridApi.grid, rowEntity, promise.promise );
// fake a delay of 1 seconds whilst the save occurs, return error if item is empty
$interval( function() {
if (rowEntity === '' ){
promise.reject();
} else {
promise.resolve();
}
}, 1000, 1);
};
I have used a fake promise as I am not sure how to bind the returned promise from Firebase to the setSavePromise method. A promise is needed as UI-Grid will not allow you to re-edit the cells without the promise returned.
Your ng-change is attempting to save a single string as a record. You can't arbitrarily pass any value into $save; it must be a row index or the row itself.
Looking at the documentation for row editable, it looks like you can trigger an event each time a row "saves". I'd recommend giving that document a heavy poring over.
Something similar to this should do the trick, since the saveRow observable will return whatever data object exists in that spreadsheet row (i.e. the record from $asArray):
$scope.gridOptions.onRegisterApi = function(gridApi){
gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
};
$scope.saveRow = function(item) {
$scope.comments.$save(item);
};
I have tried to create a ng-grid with a button added to one its columns but I didn't get any idea that how to add a button to the column of ng-grid. Can anyone help me to add a button to the column of ng-grid using AngularJS?
Just add a custom template to the coulmnDef's cellTemplate property.
cellTemplate
<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text><button type="button" class="btn btn-primary" >Edit</button></span></div>
columnDefs
$scope.columnDefs = [
{
field:'name', displayName:'Name'
},
{
field:'age', displayName:'Age',editableCellTemplate:self.editableCellTempate ,enableCellEdit:true
},
{
displayName:'Edit',
cellTemplate: 'cellTemplate.html'
}
]
gridOptions
$scope.gridOptions = {
data: 'myData',
columnDefs: $scope.columnDefs
};
Example: Plunker
Please find the ng grid example in plunker
http://plnkr.co/edit/CncDWCktXTuBQdDVfuVv?p=preview
It will allow user to select only one row but there will be one selected row at all time. I want to deselect all rows.
ng-grid has keepLastSelected option.
Try:
keepLastSelected: false in gridOptions. This will toggle selection.
Example
$scope.gridOptions = {
data: 'myData',
selectedItems: $scope.mySelections,
multiSelect: false,
keepLastSelected: false
};
The following works for me:
Plunker
First you need store gridApi:
$scope.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApi = gridApi;
};
Then you can use:
$scope.unSelectAll = function(){
$scope.gridApi.selection.clearSelectedRows();
}
simply :
$scope.gridApi.selection.clearSelectedRows()
For Selecting ALL Rows We Use ::
$scope.GridOptions.api.selectAll()
Here $scope.GridOptions is your own grid data
And For Deselecting All Rows We use::
$scope.gridOptions.api.deselectAll();
Here (.api) is file and you get this file from
(ag-grid.js) file from internet
Url:https://cdnjs.com/libraries/ag-grid