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>
Related
I am using UI grid v3.0.0 in my project. Recently I changed my code to filter grid using drop down list value. After this change, UI grid getting blank when I filter grid multiple times. This is intermittent issue and I am not getting any javascript error. when UI grid get blanked after applying filter, UI grid will remain blank till user move scroll bar of UI grid.
I am using below Grid options.
$scope.options = {
enableColumnMenus: false,
enableSelectAll: true,
enableFiltering: true,
enableHorizontalScrollbar:0,
enableRowHeaderSelection: false,
enableRowSelection: true,
data : [],
showSelectionCheckbox: true,
selectionRowHeaderWidth: 25,
rowHeight: 25,
columnDefs : $scope.columnDefs
};
$scope.options.onRegisterApi = function (gridApi) {
$scope.options = gridApi;
gridApi.selection.on.rowSelectionChanged($rootScope , function(gridApi) {
$scope.options.selected = gridApi;
});
I am also calling below grid api for refresh after filering ui grid array .
$scope.options.core.refresh();
But still it is not working. If anyone can give me the hint about how this problem can be solved, it would me much appreciated. Thanks.
I have never been able to get the core.refresh to work for me. I actually use a workaround. You can try it to see if it helps with this issue.
create Function:
$scope.refresh = false;
function refresh () {
$scope.refresh = true;
$timeout(function () {
$scope.refresh = false;
}, 0);
};
Put an ng-if on your grid div:
<div ng-if="!refresh" ui-grid="gridOptions" class="grid"></div>
Then call refresh() in your controller where/when you want to refresh the grid.
I hope this helps!
You need to set scroll position after refresh like below :
$scope.options.core.refresh();
$scope.options.core.scrollTo($scope.data[0], $scope.columnDefs[0]);
You can use $filter of angular to filter your kendo grid dataSource.
You can take the reference from following code, let me know anything else you required.
var ds = $filter('filter')($scope.grdDataSource.dataSource.data, $scope.searchText);
$scope.kendoGridOptions.dataSource.data = ds;
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 wanted to track the row edit event of the ui grid. I have gone through the gridApi but couldn't got anything related to it.
Can anybody help me with the same.
Ok, try this:
Be sure to set your column's enableCellEdit: true in your columnsDefs, then you will want to do something along the lines of...
$scope.gridOptions.onRegisterApi = function(gridApi){
//set gridApi on scope
$scope.gridApi = gridApi;
gridApi.edit.on.afterCellEdit($scope,function(rowEntity, colDef, newValue, oldValue) {
// do stuff here....
});
};
You can find more info here http://ui-grid.info/docs/#/tutorial/201_editable
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;
}
};
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);
};