title: How to working with data from client side using Observables
body: <p>I am using the Grid of Kendo (Angular 2) for Add/Edit/Delete a Row in the grid:</p>
  
  <p><a href="http://www.telerik.com/kendo-angular-ui/components/grid/editing/" rel="nofollow">http://www.telerik.com/kendo-angular-ui/components/grid/editing/</a></p>
  
  <p>In the original Code, the data is obtained from a rest service like this:</p>
  
  <pre><code>    private fetch(action: string = "", data?: Product): Observable&lt;Product[]&gt;  {
          return this.jsonp
          .get(`http://demos.telerik.com/kendo-ui/service/Products/${action}?  callback=JSONP_CALLBACK${this.serializeModels(data)}`)
          .map(response =&gt; response.json());
       }
  </code></pre>
  
  <p>But, I want to work with a array for add/edit/delete rows in memory. Next, I want to do click in the button submit and send the data (with all my changes) to the server.</p>
  
  <p>My solution for this is like this:</p>
  
  <p><a href="https://gist.github.com/joedayz/9e318a47d06a7a8c2170017eb133a87e" rel="nofollow">https://gist.github.com/joedayz/9e318a47d06a7a8c2170017eb133a87e</a></p>
  
  <p><strong>Overview</strong>:</p>
  
  <p>I declare an array:</p>
  
  <p>private view: Array = [{ProductID: 1, ProductName: "pelotas", Discontinued: undefined, UnitsInStock: 80}];</p>
  
  <p>and override the fetch method like this:</p>
  
  <pre><code>  private fetch(action: string = "", data?: Product): Observable&lt;Product[]&gt;    {
  /*return this.jsonp
    .get(`http://demos.telerik.com/kendo-ui/service/Products/${action}?callback=JSONP_CALLBACK${this.serializeModels(data)}`)
    .map(response =&gt; response.json());*/
  
    debugger;
  
    if(action=="create"){
      var product : Product = new Product(-1, data.ProductName, data.Discontinued, data.UnitsInStock);
      this.view.push(product);
    }else if(action=="update"){
      var indice = this.view.indexOf(data);
  
      if(indice&gt;=0)
      this.view[indice]  = (JSON.parse(JSON.stringify(data)));
    }else if(action=="destroy"){
      var indice = this.view.indexOf(data);
  
      if(indice&gt;=0)
      this.view.splice(indice, 1);
  
    }
  
  
    return Observable.of(this.view);
   }
  </code></pre>
  
  <p>My Question is: Exists some way of communicate the create/update/delete of items in my array of a simple or reactive form to my grid?</p>