title: Deleting a row using api.updateRowData(transaction) has no effect on data source
body: <p>I have a custom cell renderer to delete given entity.</p>
  <pre><code>function ActionButtonsCellRenderer() {}
  
  ActionButtonsCellRenderer.prototype.init = function(cellRenderParams) {
      var tempDiv = document.createElement('div');
    
      var deleteButton = document.createElement(&quot;a&quot;);
      deleteButton.href = &quot;javascript:void(0)&quot;;
      deleteButton.innerHTML = &quot;&lt;i class='fa fa-trash'&gt;&lt;/i&gt;&quot;;
      
      tempDiv.appendChild(deleteButton);
      
      deleteButton.addEventListener(&quot;click&quot;,function(){
          cellRenderParams.api.updateRowData({remove: [cellRenderParams.data]})
  
      });
      
      this.eGui = tempDiv.firstChild;
  };
  
  ActionButtonsCellRenderer.prototype.getGui = function() {
      return this.eGui;
  };
  </code></pre>
  <p>It actually deletes the row from GUI. No problem there.</p>
  <p>But when user adds another row using below logic;</p>
  <pre><code>function addRow() {
      var row = {t1 : &quot;test&quot;}
          
      dataSource[dataSource.length] = row;
      agGridOptions.api.setRowData(dataSource);
  }
  </code></pre>
  <p>Deleted row also became visible again in the grid. Which means that the <strong>dataSource</strong> object is not updated.</p>
  <p>What am I doing wrong here ? The <strong>dataSource</strong> must be updated in my scenario.</p>
  <p>Isn't there a two-way binding which I can use ?</p>