ng-grid and how to: add, edit, remove elements

[Jakub Wiśniowski]

Hi!

I've just started playing with angular. I've added ng-grid to my page and connected it to a web service. Grid fetches data and shows it. I used: http://plnkr.co/edit/XsebVSI7z4rZSV3M5cBP?p=preview as a starting point, then changed $http to $resource. It works, however now I'd like to:

1. Add a new object and have it included in the grid

I defined some inputs to gather data. I'm going to call resource's "save" method to save it. However - how can I force grid to be reloaded after data is saved?

2. Edit/delete object from grid

These are just a row level actions. I'm going to use cell templates to show "delete", "do something" buttons, but again I wonder how to refresh the grid after deletion or update?

Any hints?

Regards

Jakub

[Tim Sweet]

It should be updating automatically as long as you are directly modifying the object you initially set to "data" in your grid options(push, pop, splice, reassignment).

[Manuel Palacio]

The "Total items" number at the bottom does not seem to update when elements are removed. Is it a bug?

[Julianne Stensen]

+1

I have the same problem. 

[Tim Sweet]

what version are you running?

[Manuel Palacio]

1.9.0

[Anirudh Tom]

I mistakenly clicked on reply-to-author and had a conversation with Tim over email. He has suggested some really good points in his email and I wanted to make sure that others could get benefited from that as well. So I am copying the conversation here.

Anirudh:
I have to call $scope.$apply() each time after adding a row to the array I
initially set as 'data' to see the changes. Or otherwise if click on the
dropdown which shows search bar it refreshes the grid as well. So in short
for me it doesn't auto update. I am afraid I am doing something wrong. My
grid options is a fairly simple object with just the 'data' attribute set
and nothing else.

Tim:
are you setting the data within an ajax call or separate thread? that
is usually why. you need to use either the $http service or the
$timeout service if you don't want to run the setting of data within
an $apply(function(){$scope.data = newData;}); or calling
$scope.$digest after setting the data.

Anirudh:
Thanks for the reply. In my case the data is pushed by the server over a web socket connection. My use case demands me to show live changes in grid. Isn't there any function directly to change cells or add or delete rows?
How does the update works? Is this documented somewhere? If I update my grid contents too often and call $apply() after that will it be a huge performance issue?

Tim:
$digest is really fast, you shouldn't have performance issues. What i
would suggest is keying your data model and then updating the data
directly in the $scope array instead of giving it new data
(overwriting) every time. that way the data can be updated repeatedly
without impacting performance.

on another note, I think what we want to support in the next version
is a primaryKey property on your datamodel. that way you can give the
grid data with a primary key field and we use that to compare and
update the data instead of doing it in a referential manner. This
would make it so the grid can see if the data already exists through
the primary key and operate accordingly.

_________________________________
Thanks again to Tim for the help.

On Sunday, 13 January 2013 12:29:08 UTC+5:30, Tim Sweet wrote:

It should be updating automatically as long as you are directly modifying the object you initially set to "data" in your grid options(push, pop, splice, reassignment).:

[Andre Giannico]

Hi Jakub,

I know this is an old post - but I'm having some trouble with ngGrid 2.0.2 with respect to adding/removing rows. Were you ever able to resolve your problem? Do you have any code examples?

[Richard Scholey]

I too would really appreciate an example on the ng-grid home page. This is something that I am sure many people are doing and maybe they all have to do the same as me which is spend hours and hours searching on google and looking for a solution :-(