javazkadempiere

How to set a cell editable when row is selected in WLISTBOX ZK?


i want to make a specific cell editable when row is selected in WLISTBOX in ZK framework?


Solution

  • Because there was no answer of you wanted it MVVM or MVC I decided to go for MVVM.

    Here is a working fiddle.
    I'm pasting the most important code here for when the link shouldn't work anymore :

    <listbox model="@load(vm.items)" selectedItem="@bind(vm.selected)" hflex="true" height="300px">
        <listhead>
            <listheader label="Name" width="80px"/>
            <listheader label="Price" align="center" width="80px" />
            <listheader label="Quantity" align="center" width="80px" />
        </listhead>
        <template name="model" var="item">
            <listitem >
                <listcell>
                    <label visible="@load(vm.selected ne item)" value="@load(item.name)" />
                    <textbox visible="@load(vm.selected eq item)" value="@bind(item.name)" />
                </listcell>
                <listcell>
                    <label visible="@load(vm.selected ne item)" value="@load(item.price)" />
                    <intbox visible="@load(vm.selected eq item)" readonly="true" value="@bind(item.price)" />
                </listcell>
                <listcell>
                    <label visible="@load(vm.selected ne item)" value="@load(item.quantity)" />
                    <intbox visible="@load(vm.selected eq item)" readonly="true" value="@bind(item.quantity)" />
                </listcell>
            </listitem>
        </template>
    </listbox>
    

    Little explication, if working previous ZK 8 you can use this.
    So we check in the zul if the selected item equals (eq) or don't equals (ne) to the rendered item.
    We change the visibility of that component then.
    If working ZK8 or higher you can use the <if test="load(vm.selected eq item)">.
    With this it's working with shadow elements and the condition what isn't true will not be rendered(not in the DOM), while working with visible it will be in the DOM.

    Use the if attribute in early ZK8 only in combination with ${} expressions, the MVVM syntax won't work.
    And because it's only static you can't use it to switch realtime.
    So that's the reason why we need to use visible attribute.