editing a grid makes the selected row on a second grid become unselected

[Trevor]

I have 2 grids on my page.  The first contains a list of customers.  When a customer is selected in the first grid, a second grid populates with the customer's phone numbers.  When I edit a phone number in the second grid, the selected row in the customers grid becomes unselected.  What's causing this behavior and how can I prevent it? 

Here's a fiddle demonstrating the problem:

https://jsfiddle.net/6kdvC/139/

 

Thanks! 

[Trevor]

I worked it out.  Since the data source of the phone numbers grid was referencing an  object on the customer, updating the phone number caused the customer to update and refresh the customer grid.  Cloning the customer when it's selected from the upper grid solves the issue.  Here's an updated fiddle that shows the solution for anyone else having a similar problem.

 

https://jsfiddle.net/6kdvC/140/