How to handle selectedItem on hirarchy grid ZK - mvvm

Question

I got a problem with hirarchy grid, i am following this zk live demo,so i am using grid for header data and listbox for detail data, but when i am using the selectedItem property in listbox detail the second row detail become selected too,Here is my UI design
This is my code i am using mvvm
<grid model="#load(vm.headers )">
<columns>
<column width="40px" />
<column label="Nomor Part" sort="auto(name)" style="color:black"/>
<column label="Description" sort="auto(averageHigh)" align="center" style="color:black"/>
<column label="Hotline" sort="auto(averageVolume)" align="center" style="color:black"/>
</columns>
<template name="model" var="item" >
<row>
<custom-attributes details="${item.details}" hotline="${item.hotline}" partNumber="${item.partNumber}"/>
<detail open="false" fulfill="onOpen">
<!--<include src="/widgets/grid/hierarchy/season.zul" details="${details}" hotline="${item.hotline}"/>-->
<include src="/widgets/grid/hierarchy/season.zul" details="#bind(item.details)" hotline="#bind(item.hotline)" partNumber="#bind(item.partNumber)"/>
</detail>
<label value="${item.partNumber}" />
<label value="${item.partDescription}"/>
<checkbox checked="#bind(item.hotline)" onCheck="#command('checkHotline',hotline=item.hotline)"></checkbox>
</row>
</template>
</grid>
And here is my list detail code :
<vbox>
<listbox width="100%" height="300px" model="#load(details)" mold="paging" pageSize="5"
emptyMessage="no data found" >
<listhead style = "text-align: center">
<listheader label="Kode Dealer"/>
<listheader label="Nama Dealer"/>
<listheader label="Alamat"/>
<listheader label="Jarak"/>
<listheader label="Aksi"/>
</listhead>
<template name="model" var="dtl">
<listitem style = "text-align: center" >
<listcell label="#bind(dtl.dealerCode)"/>
<listcell label="#bind(dtl.dealerName)"/>
<listcell label="#bind(dtl.address)"/>
<listcell label="#bind(dtl.distance)"/>
<listcell>
<checkbox checked="#bind(dtl.selectedDealer)" oncheck="#command('onSelectDealer',partNumber)" visible="#load(not hotline)"/>
</listcell>
</listitem>
</template>
</listbox>
<div align="right">
<button label="Cancel" onClick="#command('onSelectDealer',partNumber=partNumber)"/>
</div>
</vbox>

Answer 1

It's hard to provide advice without seeing your code. I would pay careful attention to the row expander code (from the demo)
<!-- use custom-attributes to store quarters and stock in row,
so it can be accessed later when detail onOpen -->
<custom-attributes quarters="${each.quarters}" stock="${each}" />
<detail open="false" fulfill="onOpen">
<include src="/widgets/grid/hierarchy/season.zul"
stock="${stock}" quarters="${quarters}" />
</detail>