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.
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 need to make 2 tables in which I can select data in one table and with submit show it in another table. Then with remove button to put it back to the first table. This is what I came up with so far. Can anyone assist me please?
<script async src="//jsfiddle.net/morka/65w7Lc96/embed/"></script>
https://jsfiddle.net/morka/65w7Lc96/
The main problem seems in your addItems function which is currently returning true or false, instead of adding items actually. You need to change your addItems function like following:
addItems: function(){
this.newItems = this.selected;
}
Also as you are just pushing names in this.selected, you have to remove .name when rendering table of newItems. You can change the code to by pushing the object in this.selected to access name ini newItems.
Check the working fiddle.
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 using ExtJS API for CRUD operations in grid. All of my code works fine except one small thing. When I add a record first time(when the page is loaded) the new record is not shown on the grid but it is added in the database. When I refreshes the page and insert a record it is shown as soon as it is added. This is a very strange behavior and I don't even have a clue what's going on here. Here is the code I am using to insert a record:
insertUser: function (button) {
var grid = Ext.ComponentQuery.query('#userlist');
var win = button.up('window');
form = win.down('form');
record = form.getRecord();
values = form.getValues();
this.getUsersStore().add(values);
this.getUsersStore().reload();//tried this.getUsersStore().load(); also
win.close();
}
Can any one point out what's wrong going on here? Thanks.
When adding a data to store it needs to be in the format of the store record.
For example
this.getUsersStore().add({username:'Sample User', userid: 210, userphone: '999-999-9000'});
In your code it seems that you are directly passing the values.
If you add the record correctly store does't need to do reload() or refreshed, if you reload() the store gets refreshed and the data you added will not be present.
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