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;
}
}
Related
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();
Here is the sample code. I have a cell template (text box) within ui-grid. I would like to use ng-blur event when the value of text box changes but this event does not fire.
{
name: "Amount", displayName: "Amount", enableFiltering: false,
cellTemplate: '<input type="text" ng-model="row.entity.Amount" ng-blur="updateEntity(row.entity)"></input>'
}
Has anyone cross this scenario or used ng-blur within ui-grid's cell template. Thank you.
u can use native api for that:
$scope.gridOptions.onRegisterApi = function(gridApi){
//set gridApi on scope
$scope.gridApi = gridApi;
gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
};
$scope.saveRow = function( rowEntity ) {
// create a fake promise - normally you'd use the promise returned by $http or $resource
var promise = $q.defer();
$scope.gridApi.rowEdit.setSavePromise( rowEntity, promise.promise );
// or call your logics here with returning promise.reject() - on error or promise.resolve() - on success
// fake a delay of 3 seconds whilst the save occurs, return error if gender is "male"
$interval( function() {
if (rowEntity.gender === 'male' ){
promise.reject();
} else {
promise.resolve();
}
}, 3000, 1);
tutorial link http://ui-grid.info/docs/#/tutorial/205_row_editable
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 a grid that the first column is a checkbox, and I need to bring the checkbox marked, but when I load my grid sometimes the checkbox comes checked and sometimes not comes checked,
someone could help me ??
var item = record.data;
grid.store.load({
callback: function(response){
Ext.each(response, function(records) {
Ext.each(item.links, function (valor){
if(records.data.id == valor.id){
var row = records.index;
grid.getSelectionModel().select(row);
}
});
});
}
});
form.loadRecord(record);
Problem solved with event beforerefresh. Thanks for all.
var item = record.data;
grid.store.load({
callback: function(response){
grid.getView().on('beforerefresh', function(view) {
Ext.each(response, function(records) {
Ext.each(item.links, function (valor){
if(records.data.id == valor.id){
var row = records.index;
grid.getSelectionModel().select(row, true);
}
});
});
});
}
});
form.loadRecord(record);
I have a page where I can't modify HTML. I can only attach angular modules to it.
Page contains uibAccordion, with "close-others" set to "true". I need to somehow set it to "false".
<uib-accordion close-others="true">
The only way that came to my mind was to use a Decorator, but I don't know how to modify the attribute:
angular.module('guide', ['ui.bootstrap'])
.config(['$provide', Decorate]);
function Decorate($provide) {
$provide.decorator('uibAccordionDirective', ['$delegate', function($delegate) {
$delegate[0].closeOthers = function(openGroup) {
var closeOthers = false;
};
return $delegate;
}]);
}
Can anyone suggest how to accomplish this?
Should be able to modify the function https://github.com/angular-ui/bootstrap/blob/master/src/accordion/accordion.js:
...
$delegate.closeOthers = function(openGroup) {
var closeOthers = false;
// var closeOthers = angular.isDefined($attrs.closeOthers) ?
// $scope.$eval($attrs.closeOthers) : accordionConfig.closeOthers;
if (closeOthers) { // Obviously you can remove this whole line
angular.forEach(this.groups, function(group) {
if (group !== openGroup) {
group.isOpen = false;
}
});
}
};
return $delegate;
https://docs.angularjs.org/guide/decorators#what-are-decorators-
Patch the $Delegate section - it replaces the someFn like you want to replace the closeOthers.