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...
Related
I have an issue with Extjs remote filter that I excpect you could help to clarify.
I've created a grid with a remote filter that works great, but if I update the grid info, the filter keeps the previous loaded data.
I've tried everything: store.doDestroy, store.removeAll, even assign a new store to the var with Ex.create, but I didn't succeed.
I've created a Fiddle to try to reproduce my issue:
First load default info (Simpsons)
Then open the 'Hobbie' filter (Simulates a select distinct). You get Jazz, Skate, Beer and Knit.
After that, update the grid data (Switch to Van Houtens)
Finally, try to get Van Houtens hobbies (Videogames, Margaritas and None), but you get Simpsons Hobbies (Jazz, Skate..), cause the filter was previously loaded. (Notice how there was not a loading mask).
Now restart the test skipping step 2 (and 5 to avoid infinite loop XD) and notice how the right hobbies are shown.
I need to 'reset' that previous store load.
Notes:
If I just do a store.load, the request is triggered, but the returned values are not bound to the filter list.
If try to bind the store with this bind:{store:'{filterStore}'}, noting happens
You just need to "rebind" the filters for each column like this:
var grid = this.up('grid');
//Clear the current filters before changing
grid.getPlugins()[0].clearFilters();
var store = grid.getStore();
setStoreFilter(store, 'Van Houten');
//Setting the store filters is not enough
setStoreFilter(filterStore, 'Van Houten');
setStoreFilter(hobbiesStore, 'Van Houten');
//You need to "rebind" the store, it needs a little delay to work properly
setTimeout(function(){ grid.getColumns()[3].filter.bindMenuStore(hobbiesStore); }, 1000);
Here is the updated FIDDLE
This .selectRow() on line #2 doesn't work:
$scope.gridOptions.data = MyResource.query();
$scope.gridApi.selection.selectRow( $scope.gridOptions.data[0] ); // Select first row
I'm guessing it doesn't work because the grid hasn't finished refreshing yet, or hasn't even started refreshing because it is still waiting for data from MyResource.query().
The following doesn't work either and I have no idea why:
$scope.gridApi.grid.modifyRows(MyResource.query());
$scope.gridApi.selection.selectRow( $scope.gridOptions.data[0] ); // Select first row
What's going wrong exactly? Thanks in advance.
Try using $scope.gridApi.grid.modifyRows($scope.gridOptions.data);
I am not sure if you have already solved this, but I think the problem is that you are trying to select the row before it is there. You can do this in two steps. First load the data and then broadcast an event when it is done, and then get the row when you listen to the broadcast.
So step 1 would be some thing like this:
$scope.gridOptions.data = MyResource.query();
$rootScope.$broadcast('data_loaded', $scope.gridOptions.data);
And then listen to the broadcast:
$scope.$on('data_shared',function(event, data) {
$scope.gridApi.selection.selectRow( $scope.gridOptions.data[0] );
});
I hope it helps.
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.
I'm using angular chosen with angularstrap and i'm having problems with the initial value of the selector to be selected. The way i got it to work is i set a Timeout on the model attached to the selector to wait for the dom and then set the model value. So my guess is that chosen needs to wait for the dom to be created before it can initialize the selected option.
$scope.showModal = function() {
myModal.$promise.then(myModal.show);
// hack to make chosen load
$timeout(function () {
myModal.$scope.SelectedColor = "green";
}, 500 );
};
in my opinion this timeout solution is not a good one and i would like to find a better way to set the model after the dom has been created.
This is because chosen directive is calling trigger("chosen:updated") before the DOM is actually loaded. A fix would be adding $timeout() to the $watchCollection trigger.
This has been discussed and looks like the solution is here in the answer from kirliam.
Someone should issue a pull request for this issue.
edit: I issued a pull request for a fix regarding this issue. Hope it gets merged in.
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