Сгруппировать строки в сетке zk framework

Question

Я пытаюсь сгруппировать строки в сетке с помощью следующего кода. Модель содержит список классов pojo. Когда я пытаюсь добавить группу в строки. Строки заполняются, но метка группы не отображается. Если я помещаю метка группы внутри шаблона выдает следующую ошибку.

  <grid id="returnEntries" mold="paging"
              pageSize="5" width="100%" height="100%">
            <columns>
                <column width="12%" sclass="oms-widget-createreturnrequest-listbox-header">
                    <label value="${labels.customersupportbackoffice.createreturnrequest.productcode}"
                           width="100%"/>
                </column>
                <column width="10%" sclass="oms-widget-createreturnrequest-listbox-header">
                    <label value="${labels.customersupportbackoffice.createreturnrequest.productname}"
                           width="100%"/>
                </column>
                <column width="8%" sclass="oms-widget-createreturnrequest-listbox-header">
                    <label value="${labels.customersupportbackoffice.createreturnrequest.currency}"
                           width="100%"/>
                </column>
                <column width="8%" sclass="oms-widget-createreturnrequest-listbox-header">
                    <label value="${labels.customersupportbackoffice.createreturnrequest.itemprice}"
                           width="100%"/>
                </column>
                <column width="10%" sclass="oms-widget-createreturnrequest-listbox-header">
                    <label value="${labels.customersupportbackoffice.createreturnrequest.qtypending}" width="100%"
                           style="text-align: center;"/>
                </column>
                <column width="10%" sclass="oms-widget-createreturnrequest-listbox-header">
                    <label value="${labels.customersupportbackoffice.createreturnrequest.qtyrrefund}" width="100%"/>
                </column>
                <column width="12%" sclass="oms-widget-createreturnrequest-listbox-header">
                    <label value="${labels.customersupportbackoffice.createreturnrequest.refundamount}"
                           width="100%"/>
                </column>
                <column width="18%" sclass="oms-widget-createreturnrequest-listbox-header">
                    <combobox id="globalReason"
                              placeholder="${labels.customersupportbackoffice.createreturnrequest.popup.placeholder.reason}"
                              readonly="true"/>
                </column>
                <column width="20%" sclass="oms-widget-createreturnrequest-listbox-header">
                    <textbox id="globalComment" maxlength="255" width="97%" style="margin-bottom:4px"
                             placeholder="${labels.customersupportbackoffice.createreturnrequest.popup.placeholder.comment}"/>
                </column>
                <column width="8%" sclass="oms-widget-createreturnrequest-listbox-header">
                    <label value=""
                           width="100%"/>
                </column>
            </columns>
            <rows>
                <group label="refund" />
                <template name="model">
                    <row>
                        <!-- <checkbox style="margin-left: 3px;"/> -->
                        <label value="${each.refundEntry.orderEntry.product.code}" width="100%"/>
                        <label value="${each.refundEntry.orderEntry.product.name}" width="100%"/>
                        <label value="${each.refundEntry.orderEntry.order.currency.isocode}" width="100%"
                               style="text-align:center;"/>
                        <label value="${each.refundEntry.orderEntry.basePrice}" width="100%" style="text-align:right;"/>
                        <label value="${each.returnableQuantity}" width="100%"
                               style="text-align:center;"/>
                        <intbox name="quantityToRefundBox" value="${each.quantityToRefund}" width="50%" style="margin-left: 25%;text-align: center;"
                                constraint="no empty,no negative: Quantity Must be Greater Than Zero" />
                        <doublebox value="${each.refundEntry.amount}" style="margin-left: 10%;text-align:right;" format="0.00"
                                   constraint="no empty,no negative: Quantity Must be Greater Than Zero"/>
                        <combobox xmlns:w="client" w:onSelect="CockpitNG.sendEvent(this.uuid,'onCustomChange',this._value)"
                                  model="${each.reasonsModel}" style="padding-right:4px;padding-left:4px;"
                                  placeholder="${labels.customersupportbackoffice.createreturnrequest.popup.placeholder.reason}"
                                  readonly="true">
                            <template name="model">
                                <comboitem label="${each}"/>
                            </template>
                        </combobox>
                        <textbox value="${each.refundEntryComment}" maxlength="255" width="93%" style="margin-left: 4px;"
                                 placeholder="${labels.customersupportbackoffice.createreturnrequest.popup.placeholder.comment}"/>
                        <button width="100%"
                                label="Return"
                                sclass="oms-widget-createreturnrequest-configuration-button oms-widget-createreturnrequest-configuration-save-button"/>

                    </row>
                </template>
            </rows>
        </grid>

У модели есть список объектов pojo. Когда я пытаюсь получить доступ к странице. Это дает следующую ошибку.

ERROR [hybrisHTTP25] [UiEngineImpl]
org.zkoss.zk.ui.UiException: The model template must have exactly one 
 row, not 2     

Любые входы?

Answer 1

Если вы посмотрите на этот пример: https://www.zkoss.org/zkdemo/grid/grouping
вы заметите следующую настройку:

<rows>
    <group label="Dell" />
    <row>
        <label value="Dell E4500 2.2GHz" style="padding-left:15px"/>
        <label value="Intel Core 2 Duo" />
        <label value="4GB RAM" />
        <label value="$261.00" style="color:green" />
        <label value="500GB" />
    </row>
    <group label="Compaq" />
    <row>
        <label value="Compaq SR5113WM" style="padding-left:15px" />
        <label value="Intel Core Duo" />
        <label value="2GB RAM" />
        <label value="$279.00" style="color:green" />
        <label value="160GB" />               
    </row>

Теперь тег шаблона с MVVM выглядит так:

<template name="model" >
    <row>
        <label value="@bind(forEachStatus.index)" />
        <label value="@bind(each.name)" />
    </row>
</template>

Итак <rows> заменяется <template>,
Установка в <template> результаты в более чем 1 группировке.
Установка его вне <template>рендеринг выше <rows>,

Таким образом, единственное решение немного похоже на это:

<template name="model">
      <zk if="${forEachStatus.index == 0}">
            <group label="refund" />
      </zk>
      <row if ="${forEachStatus.index != 0}">
        <cell>
        <label value="${forEachStatus.index}" />
        </cell>
        <cell>
        <label value="${each}" />
        </cell>
     </row>
</template>

И не забывайте, что в первой строке вам нужно нулевое значение, потому что ваша первая строка не будет отображена.
Причина в том, что если вы отрендерите оба в шаблоне, у вас будет ошибка, говорящая о том, что вы не можете добавить 2 строки в шаблон.

Надеюсь это поможет.