detail row grid with popup editor

I read posts and seen examples but I am still strugling with setting up hierarchy grid with one popup editor form for both master/detail record(s).

I would like to setup a simple grid with html row detail where grid data source is a nested json:

persons = [
  { name:"john", surname:"smith" },
  { name:"jane", surname:"doe", 
      contact: [
        { type:"email", value:"jane.doe@domain.com" },
        { type:"phone", value:"012345678" }
      ]
  }
]

Top grid level displays name and surname where detail template shows simple list of contacts (if any).

Grid needs to be editable through a popup editor where both data (master and detail) can be edited. Name and surname are binded to one form where contacts are displayed in a simple grid binded to a separate "contact" form located above it.

<form input fields for name and surname>

<form input fields for contacts, binded to a contacts table>
<contacts table>

<save><update><cancel>

Problems:

1. in detail row initialization I only get top level data (no contacts) so I am unable to render detail row with list of contacts

2. how to handle contacts part in popup editor? how to bind data?

Thank you for all your input, Peter

Found out that editing misbehaved due to missing "record id". Once I provided unique id I am getting expected results.

Duplicated question here.