I am using function like : gridApi.selection.clearSelectedRows();
But how can I deselect the row in the following function event :
gridApi.selection.on.rowSelectionChanged($scope,function(row){};
The situation: I am open a popup and when I close the modalService I should unselect the last row I clicked.
Thanks
Store last selected row object
$scope.lastSelectedRow = {};
$scope.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope,function(row){
if(row.isSelected) {
// always store pointer to last row only if it is selected
$scope.lastSelectedRow = row;
}
});
}
Now you can unselect that row when you close the modal Instance
$scope.clearLastSelectedRow = function() {
$scope.gridApi.selection.unSelectRow($scope.lastSelectedRow.entity);
};
More details here
did you forget to store the gridApi? should look like below:
$scope.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApi = gridApi;
};
see this related post
Related
I need to enable and disable rowSelection for view depending on some condition. Problem here is,multiple views use the same html and controller. I need the rowSelection to be disabled for a certain view and enabled in other cases.
I have tried these.
1)Assigned a function for enableRowselection which would return boolean.(Didn't work)
2)Tried with isRowSelectable too.(Didn't work)
Code is as below.Not sure if it is implemented in right way. I'm a beginner in AngularJS and ui-grid
1)
$scope.gridOptions = {
enableRowSelection: isSelectionEnabled
}
isSelectionEnabled():boolean {
var seletionEnabled = true;
if (doesn't satisfy condition) {
seletionEnabled = false;
}
return seletionEnabled ;
}
2)
$scope.gridOptions = {
isRowSelectable: function() {
if(satisfies condition) return true;
return false;
},
}
I assume you know if you want to enable rowselection on creation of the ui-grid.
Try something like:
$scope.gridOptions.onRegisterApi = function(gridApi) {
$scope.gridApi = gridApi;
$scope.gridOptions.enableRowSelection = $scope.isSelectionEnabled();
};
$scope.isSelectionEnabled = function() {
// some logic here to determine whether to enable rowselection or not
return true; // or false
};
You can pretty much change $scope.gridOptions.enableRowSelection anywhere, once the ui-grid has been created.
See this plunker for an example and/or to try out if this is what you want.
the right property is "enableRowSelection", try the following:
$scope.gridOptions = {
enableRowSelection: function () {
if(condition){
return true
}
return false;
}
}
This issue is very similar to this below issue:
Angular js UI grid is not getting updated with new content
but, what is my problem is, on rebind, i am using different data and columns. So when i do that on button click, the grid is not refreshed.
please check this sample : http://plnkr.co/edit/NIlEiAoZbt7ZcnXDPqrb
$scope.myfunc = function()
{
alert("Rebinding the data");
$scope.gridOptions = {};
$scope.gridOptions.columnDefs = [
{ field:'firstName' },
{ field:'lastName' },
{ field:'company' },
{ field:'employed' }
];
$scope.gridOptions.data = data2;
};
on this event, only one column (which exists on both datasets are binding properly).
-- NewBuddy
I can't see data2 in your plunk and its giving error.
Although, the below code should solve your problem.
$scope.gridOptions.onRegisterApi= function(gridApi) {
$scope.gridApi = gridApi;
};
on change of data/columns call the below function:
$scope.gridApi.grid.refresh();
Hi I am using angular ui grid, I have filter and grouping in the grid
I am expanding by default all rows using following
$scope.expandAll = function(){
$scope.gridApi.treeBase.expandAllRows();
};
$timeout(function() {
$scope.expandAll();
}, 500);
now if user filter on any column which is not available in data
And then remove or cancel, It does not expand automatically
It shows like above
I need all rows to expand automatically when user clear or cancel filter data
I found there is an event filterChanged, but I don't know how to use that
I am using following plunkr for testing
http://plnkr.co/edit/hhIW9R9aX1JlFe4nodJQ?p=preview
Thanks
Modify your onRegisterApi method to the following
onRegisterApi: function( gridApi ) {
$scope.gridApi = gridApi;
$scope.gridApi.core.on.filterChanged($scope, function() {
var grid = this.grid;
var isfilterclear = true;
angular.forEach(grid.columns, function( col ) {
if(col.filters[0].term){
isfilterclear = false;
}
});
if(isfilterclear) {
$timeout(function() {
$scope.expandAll();
},500);
}
});
}
see plunkr http://plnkr.co/edit/1FWDIe?p=preview
I have to show two types of gridOptions without using two grid's trying to change the gridOptions dynamically not working(one time working).
working example http://plnkr.co/edit/4QKGIB?p=preview.
$scope.grid1=function(){
$scope.gridOptions = $scope.gridOptions1;
$scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.ALL);
}
$scope.grid2=function(){
$scope.gridOptions = $scope.gridOptions2;
$scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.ALL);
}
Basically you need to use angular.copy() while assigning columnDef to grid, which clones the array and set it to the gridOptions.
Code
$scope.gridOptions = angular.copy($scope.gridOptions1);
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.success(function(data) {
$scope.gridOptions1.data = data;
$scope.gridOptions2.data = data;
$scope.grid1();
});
$scope.grid1=function(){
$scope.gridOptions = angular.copy($scope.gridOptions1);
$scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.ALL);
}
$scope.grid2=function(){
$scope.gridOptions = angular.copy($scope.gridOptions2);
$scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.ALL);
}
Working Plunkr
I'm calling these codes at the beginning of my $scope.generateReport function hoping it would clear the data that is currently shown on the grid once I click the button. Unfortunately, it's not clearing it.
I was thinking that by setting it with undefined values, ui-grid would automatically refresh itself thereby clearing the whole grid.
$scope.generateReport = function() {
$scope.gridOptions = {};
$scope.gridOptions.data = undefined;
$scope.gridOptions.columnDefs = undefined;
$scope.gridApi.grid.refresh();
........
}
// on my html template, I have a button that has an ng-click
// ng-click="generateReport()"
Here is a plunker with an example of one way to do it:
http://plnkr.co/edit/Q1anj7jyPHz3LAXoir4E?p=preview
$scope.clear = function() {
$scope.myData.length=0;
}