detail row grid with popup editor

Question

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:"[e-mail]" },
        { 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

Answer 1

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

Duplicated question here.