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
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;
}
}
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
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
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);