title: How do I update data on Kendo-UI grid and persist hierarchy selection using Angular?
body: <p>I have an Angular single page app with a kendo grid that is bound to a RESTful API. When this data is updated externally, I have a web socket (PubNub) function I am triggering with the intent to refresh and display externally changed data while preserving the hierarchy of the grid as well as selected row. </p>
  
  <p>I can get the data grid to refresh but this doesn't refresh the datasource with the changed data from the API.   If I include a dataSource.read(), then it seems to prevent my persistence of the hierarchy, IE it closes previously opened hierarchical grids.</p>
  
  <p>I have an tried to use the example from the Telerik Docs for this listed here: <a href="http://docs.telerik.com/kendo-ui/web/grid/how-to/persist-expanded-rows" rel="nofollow">Persist expanded rows after refresh</a></p>
  
  <pre><code>vm.savestate = function(e) {
  
          console.log('save pressed:');
          var grid = $scope.responseGrid;
          var expanded = $.map(grid.tbody.children(":has(&gt; .k-hierarchy-cell .k-minus)"), function(row) {
  
              console.log(row);
              console.log($(row).data("uid"));
              return $(row).data("uid");
  
          });
  
          grid.one("dataBound", function() {
              grid.expandRow(grid.tbody.children().filter(function(idx, row) {
                  return $.inArray($(row).data("uid"), expanded) &gt;= 0;
              }));
          });
  
           grid.refresh();
  
  
      };
  </code></pre>