Using ng-grid I want to show a newly added row by scrolling to it when it is added to the bottom of the list.
please see the plunk: http://plnkr.co/edit/4jgy9wwr2HRhfhgKMKcX?p=preview
var grid = $scope.gridOptions.ngGrid;
grid.$viewport.scrollTop((($scope.myData.length - 1)* grid.config.rowHeight));
I don’t understand why the grid won’t scroll all the way down. I tried adding the rowHeight ever subtracting it but every time the grid just will not scroll to the very last row.
I know by adding the records to the top of the list will solve the problem by I am sorting the grid and by its nature the empty record will be pushed to the bottom.
You dont need the "ngGridEventData", and if you log it you will notice he is fired for each existing row on your grid, wich is not optimal.
As already answered, you can use the $timeout service whith a 0 delay. It sounds a bit tricky, and it's maybe not a best practice but it works.
Load it in your controller :
app.controller('MyCtrl', function($scope, $timeout) {
//load
}
Then in your addNew() :
$scope.addNew = function () {
$scope.myData.push({ name: "new", age: 100 });
$timeout(function () {
var grid = $scope.gridOptions.ngGrid;
$scope.gridOptions.selectItem($scope.myData.length - 1, true);
grid.$viewport.scrollTop((($scope.myData.length - 1) * grid.config.rowHeight));
}, 0);
};
Check the result here : http://plnkr.co/edit/4HNqFh7uu9IWCjDVt5WR?p=preview
Actually Bug lies in ng-grid js file to calculate correct scrolling offset.
Please follow link
http://pushkarkinikar.wordpress.com/2014/07/03/ng-grid-scrolling-issue/
where
I have explained it in detail
Related
There are lots of ways to set a row dirty on edit. I need to set the row dirty on adding it to the grid. Here is what I have so far:
$scope.gridOptions.data.push(someNewRow); //this new row is imported from some external source
One option would be to use a function in rowEdit to set a row dirty, but it requires a rowEntity object. I could do this:
var newRowsEntityObject = ____? // I would need this
$scope.gridApi.rowEdit.setRowsDirty([newRowsEntityObject]);
But I need to get a rowEntity object for the new row I'm adding. Other thoughts to get it to work are welcome if my initial direction will not work.
Ah, shoot. Didn't read the documentation clearly for setRowsDirty:
[N]ote that if you have only just inserted the rows into your data you will need to wait for a $digest cycle before the gridRows are present - so often you would wrap this call in a $interval or $timeout
So I did:
$interval(function () {
$scope.gridApi.rowEdit.setRowsDirty(myNewRows);
}, 0, 1);
and it worked fine as they suggested...
I have created two ui grids on the same html(both are same).
I'm trying to get selected row on click of submit button. I'm able to get selected row for second grid but not able to get it for the first grid.
I'm getting selected rows like this:
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
$scope.mySelectedRows = $scope.gridApi.selection.getSelectedRows();
}
Plunker: http://plnkr.co/edit/SgYh9QzjCQDOKMMXATlF?p=info
Is there any way to get selected row of both the grids?
Thanks in advance.
That is because the API registers when the grid loads in the DOM. Since you have two grids with the same scope, when the second loads, it's API becomes what is defined by $scope.gridApi. Therefore anything you do with that API is interacting with the second grid instance.
The solution here would be to separate the grids out, maybe $scope.gridOptions1, $scope.gridOptions2. For anything that must occur on both, you can call each API independently within the function.
This is what I would do:
http://plnkr.co/edit/nLLR63L4H4NqLoZsGpkS?p=preview
For your submit function, assuming you want a single array with the results, I've updated the function such that it provides one result:
$scope.submitData = function() {
var selectedRows1 = $scope.gridApi1.selection.getSelectedRows(),
selectedRows2 = $scope.gridApi2.selection.getSelectedRows(),
selectedRows = selectedRows1.concat(selectedRows2);
console.warn(selectedRows);
alert(selectedRows.length)
if (selectedRows.length === 0)
alert('Please select an item from grid');
else
alert(JSON.stringify(selectedRows));
}
I am looking for an advice on how to proceed and wanted to see if anyone has implemented similar requirement.
Please provide some suggestions on the potential approach.
I have a angular ui-grid which is changed a little bit to replace OK button with checkboxes.
Its working fine to click "select all" which selects all rows in the UI-grid. But I am looking to scope the selection to current page in the pagination.
Selection should retain while moving from page to page.
User selects Page 1 "select all checkbox". Then goes to Page 2 and might select "select all checkbox". At this point both Page 1 and Page 2 should be selected. There might be more than the selected 2 pages but only the pages on which select all is checked should be selected.
Thanks for your time in reading and providing suggestions
Here is a Plunker link with the pagination and checkboxes.
[http://plnkr.co/edit/Ji7gLbfQTohnEj04mYFM?p=preview][1]
Thanks a lot
Selecting visible rows and limiting selection:
In order to detect the selection of all rows on a page:
enableSelectionBatchEvent in gridOptions should be set to true.
$scope.gridOptions.onRegisterApi = function(gridApi){
//set gridApi on scope
$scope.gridApi = gridApi;
// detect bulk selection
gridApi.selection.on.rowSelectionChangedBatch($scope,function(rows){
//logic to save the selected visible rows.
});
ui.grid.selection public api provides a method called selectAllVisibleRows(event) which selects only the visible rows
Once this selection scope is limited, you can use the saveState feature provided by UI grid
The gridOptions provide property called saveSelection which saves the currently selected rows and defaults to true
Once you navigate to page 2, you should save data like this -
Saving data:
$scope.state = {};
$scope.state = $scope.gridApi.saveState.save();
On loading page 2, you should restore the data like this -
Restore Saved data:
$scope.gridApi.saveState.restore( $scope, $scope.state );
Please follow these tutorials for details:
Selecting rows
Save Selection
Yes, the ui-grid v4.4.9 API has a selectAllVisibleRows(event) method. Unfortunately, it considers all rows that are not filtered to be visible. It does not exclude rows that are not rendered on the current grid page. Thus, we are forced to take matters into our own hands:
onRegisterApi: function (gridApi) {
gridApi.selection.on.rowSelectionChangedBatch(null, function (rows) {
var grid = this.grid;
// you'll need ui-grid v4.4.9 or better
// otherwise you'll need to invert getSelectAllState()
// as explained at https://github.com/angular-ui/ui-grid/issues/5411
var isAllSelected = grid.api.selection.getSelectAllState();
// when select all is checked, the default behavior is to select all grid rows on all pages
// so we have to deselect them all first before we select just the ones on the visible page
grid.api.selection.clearSelectedRows(null);
if (isAllSelected) {
// select only the rows displayed in the current grid page
var startIndex = (grid.options.paginationCurrentPage - 1) * grid.options.paginationPageSize;
var endIndex = startIndex + grid.options.paginationPageSize;
for (let i = startIndex; i < endIndex; i++) {
let row = grid.rows[i];
row.isSelected = true;
}
}
});
},
//How to reset a pagination to first page on filter change in ui-grid.
$scope.gridApi.core.on.filterChanged( $scope, function() {
var grid = this.grid;
//var fdata = grid.columns.field;
if(paginationOptions.pageNumber > 1){
// how to reset the pagination page to first page if pagenumber is greater then zero(0)
}
});
I am not sure why you would want to do this because if the user wants to go to the second page they will be sent back to the first page so why have pagination in the first place? Anyway I have not tested this but it seems like you can use the seek function.
$scope.gridApi.pagination.seek(The page you want to go to);
In your case I think it would be
$scope.gridApi.core.on.filterChanged( $scope, function() {
if($scope.gridApi.pagination.getPage() > 1){
$scope.gridApi.pagination.seek(1);
}
});
I am not 100% on this because I have never used the pagination functionality of ui-grid or tested this code but I hope this helps. Also if it does not work you should use your browsers developer tools and step through each line to see what is happening which will help you debug and get what you want.
use these links to get a better understanding of the functionality for ui-grid
http://ui-grid.info/docs/#/tutorial/214_pagination
http://ui-grid.info/docs/#/api/ui.grid.pagination.api:PublicAPI
https://github.com/angular-ui/ui-grid/issues/2061
I am having grid with multiple column ,I want to add new random row to it on button click without taking any input externally (from user) in ng-grid using angular Js. please provide me solution. Thanks in advance.
You don't need to add rows to your grid. Just add more data to your data-source.
Angular and ng-grid will find out by them self if the data has changed and redraw the grid.
$scope.addRow = function() {
$scope.myData.push($scope.myData[Math.floor((Math.random() * $scope.myData.length) + 1)])
}
This function will add (duplicate) some random entry from myData to the end of the grid.
Here is the Plunker
Update:
This is of course a very rough randomizer and may sometimes add empty entries.
To add exact rows from an existing array you should write the function like this:
$scope.addRow = function(index) {
$scope.myData.push($scope.myData[index])
}
Where index is the index of you json array. (obviously)
Btw. Next time give us more Information what you have tried and how your code is written.