Как изменить статус сетки по умолчанию в теме ZK?

Question

У меня есть страница, созданная с помощью ZK. На этой странице есть кнопка, которая запускает поиск. Если есть некоторые данные, они отображаются в виде сетки. Все данные строятся следующим образом: v Дата1 (дд / мм / гггг) - элемент - элемент - элемент v Дата2 (дд / мм / гггг) - элемент - элемент

Lecter V означает стрелку, но я не могу опубликовать изображение, поэтому я использую "v", у которого есть похожее изображение, чтобы понять.

Работает корректно, но есть проблема. У меня была бы такая ситуация:

Дата1 (дд / мм / гггг)

Дата2 (дд / мм / гггг)

Когда я нажимаю на дату, я хочу, чтобы стрелка стала "v" и все данные появились. Если в первом случае я нажимаю на дату, то она закрывается.

Как изменить вид элементов сетки по умолчанию?

Это мой код

<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>

Я пытаюсь использовать детали тега в этом субкоде:

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

Answer 1

Попробуйте детали, как это:

<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>

Экспликация:

• Деталь может иметь только 1 корневой элемент, поэтому мы устанавливаем hlayout,
  Конечно, вы можете изменить это на div или как хотите.
  
• row тег должен быть вне тега детализации.
• detail Возьмите столбец, поэтому для этого примера вам нужно предоставить 2 столбца.

Редактировать:

Я создал скрипку.