Editable Grid using ngGrid

[sagw...@gmail.com]

Hi,

I'm new to AngularJS trying to create a on focus editable grid using ngGrid plugin.

The scenario will be like:

I have name, age as first two columns the third column is of pin code, I want to fetch city, state, country in 4 th , 5th and 6th column according to the pin code entered in Edit mode.

i.e. on tab out of pin code column I want to make a service call which will fetch data for me  to be displayed in 4,5,6 column.

Can anyone please help in this regard ?

It will be fine if anyone can give some pointers for calling on blur event in ngGrid when the focus of cell which is in edit mode is lost.

Thank you.

[Chris Huston]

ng-grid emits an event when the cell edit ends (using the blur event internally), so you can do something like this:

$scope.$on('ngGridEventEndCellEdit', function(evt){

var pin = evt.targetScope.row.entity.pin;

$http.post('/get_location', {'pin':pin})

.then(function(res) {

evt.targetScope.row.entity.city = res.data.city;

evt.targetScope.row.entity.city = res.data.state;

evt.targetScope.row.entity.city = res.data.country;

});

});

You will probably also want to do some error checking, but this should get you going.

Chris

[Chris Huston]

Or, if you have issues with the dataSource not updating in time, you can also use a custom edit cell template.

Here is a plunker to see this with an ng-blur directive:

http://plnkr.co/edit/gbbuQctINnVwTNt6pJPy?p=preview

Chris

[sagw...@gmail.com]

Thanks Chris... That was very helpful, can you please give me some url where I find such events for further use..

[sagw...@gmail.com]

Hi Chris,

I have one question over here how can I validate the input if the user doesn't enter anything and tabs out then he will not be able to have anything in the cell now there will be any error. Even 'evt.targetScope.row.entity.pin' will be undefined can you tell me how can I handle this ?

Thank you

On Monday, July 29, 2013 6:22:30 PM UTC+5:30, Chris Huston wrote: