How to change grid default status in a ZK theme?

I have a page built with ZK. In this page there is a button that start a search. If there are some data them appear in a grid view. Every data are built in this way: v Date1 (dd/mm/yyyy) - item - item - item v Date2 (dd/mm/yyyy) - item - item

Lecter V means an arrow but I can't post an image so I use a "v" that have similar image to undestand.

It works correctely but there is a problem. I would have this situation:

Date1 (dd/mm/yyyy)

Date2 (dd/mm/yyyy)

When I click on a date I want that the arrow became "v" and all data appear. If in the first case I click on date it became close.

How to change the default view of grid items?

This is my code

<grid id="demoGrid" width="50%" height="400px" style ="float:left"
        model="@bind(vm.value)" emptyMessage="No data">
        <columns menupopup="auto">
            <column sort="auto(Hour)" label="Hour" width="150px"/>
            <column sort="auto(Value)" label="Value(bpm)" hflex="1" />             
        </columns>
        <!-- template for group -->
        <template name="model:group">
            <group label="@load(each)" />
        </template>

        <!-- template for each element in model -->
        <template name="model" >

            <row>
                <label value="@load(each.hour)" />
                <label value="@load(each.value)" />                
            </row>
        </template>

        <!-- template for footer -->
        <template name="model:groupfoot">
            <groupfoot>
                <cell colspan="5" style="text-align: right; padding-right: 15px">
                    <label value="@load(each)" style="font-weight:bold;" />
                </cell>
            </groupfoot>
        </template>

    </grid>

I try to use tag details in this subcode:

<template name="model">
    <details open="false">
        <row>
            <label value="@load(each.hour)" />
            <label value="@load(each.value)" />                
        </row>
    </details>
</template>

Try the details like this :

<template name="model">
    <row>
        <detail open="false">
            <hlayout>
                <label value="@load(each.hour)" />
                <label value="@load(each.value)" />                
            </hlayout>
        </detail>
        <label value="second column"/>
    </row>
</template>

Explication :

• Detail can have only 1 root element so that's why we set the the hlayout.
  Of course you can change this to div or whatever you want.
  
• The row tag has to be outside the detail tag.
• The detail take a column so for this example you need to provide 2 columns.

Edit :

I created a fiddle.