ngReactGrid : Change in collection not triggering UI update

[OhenewaDotNet]

I'm creating a grid that enables users to remove rendered rows. I'm using the reactjs render method to create the remove button and hook up my click handler.

render: function(article) {
return React.DOM.a({ className: "glyphicon glyphicon-remove", href: "javascript:", onClick: (function(a, event) { a.stopPropagation(); _.remove(gridData.articles, function (articlePredicate) { return articlePredicate.id == article.id && articlePredicate.name == article.name && articlePredicate.sectorInstance.sectorNum == article.sectorInstance.sectorNum; }); }) }); }

I've done this several times with other grids and have never run into this particular issue. When the user clicks the remove icon, the click handler code is run and properly removes the selected row from the grids datasource. However, the data presented in the UI never updates to display the change in the datasource. I also attempted to reinitialize the ngReactGrid to no avail. I was able to repeat the issue on Plnkr

http://plnkr.co/edit/4f62GTKLIeezaV7UGW7c

Any suggestions would be appreciated

[josebalius]

@OhenewaDotNet take a look at this plnkr I made from your example

http://plnkr.co/edit/5TD0MWT4lIRN7nHqgc8N?p=preview

Let me know if it helps.

[OhenewaDotNet]

It works! I thought since _.remove changed the underlying datasource, the notifychange would occur and I wouldn't have to reset the grid data. In any case, this is excellent thanks!