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

Question

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

Answer 1

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.

Answer 2

This is a late response but worth recording none the less.

In the ADempiere implementation of ZK, the WListbox uses the WListBoxRenderer to render the rows and all the cells in the row. The class of each column is defined and applied to all rows, making the rows identical. The WListBoxRenderer uses this class to determine which component to use to display the field and which to use to edit the field. The editor is only enabled if the column is defined as read/write when the table is initialized. You can do this using the ColumnInfo structure or through the setColumnClass() and setColumnReadWrite() methods shown below.

/**
 * Set the attributes of the column.
 *
 * @param index     The index of the column to be modified
 * @param classType The class of data that the column will contain
 * @param readOnly  Whether the data in the column is read only
 * @param header    The header text for the column
 *
 * @see #setColumnClass(int, Class, boolean)
 */
public void setColumnClass (int index, Class classType, boolean readOnly, String header)
{
    WListItemRenderer renderer = (WListItemRenderer)getItemRenderer();

    setColumnReadOnly(index, readOnly);

    renderer.setColumnHeader(index, header);

    renderer.setColumnClass(index, classType);

    if (index < m_modelHeaderClass.size())
        m_modelHeaderClass.set(index, classType);
    else
        m_modelHeaderClass.add(classType);

    return;
}

/**
 *  Set Column at the specified <code>index</code> to read-only or read/write.
 *
 *  @param index    index of column to set as read-only (or not)
 *  @param readOnly Read only value. If <code>true</code> column is read only,
 *                  if <code>false</code> column is read-write
 */
public void setColumnReadOnly (int index, boolean readOnly)
{
    Integer indexObject = new Integer(index);

    //  Column is ReadWrite
    if (m_readWriteColumn.contains(indexObject))
    {
        //  Remove from list
        if (readOnly)
        {
            m_readWriteColumn.remove(indexObject);
        }   //  ReadOnly
    }
    //  current column is R/O - ReadWrite - add to list
    else if (!readOnly)
    {
        m_readWriteColumn.add(indexObject);
    }

    return;
}   //  setColumnReadOnly

Here is an example used to show the invoices in the Payment Allocation form. The IMiniTable interface is implemented by the WListBox class. Note that three of the columns are set readOnly=false so those cells are editable in the table.

public void setInvoiceColumnClass(IMiniTable invoiceTable, boolean isMultiCurrency)
{
    Vector<String> names = getInvoiceColumnNames(isMultiCurrency);
    int i = 0;
    invoiceTable.setKeyColumnIndex(i);
    invoiceTable.setColumnClass(i, IDColumn.class, true, names.get(i++));        //  0-C_Invoice_ID
    invoiceTable.setColumnClass(i, Timestamp.class, true, names.get(i++));        //  1-TrxDate
    invoiceTable.setColumnClass(i, String.class, true, names.get(i++));           //  2-Value
    if (isMultiCurrency)
    {
        invoiceTable.setColumnClass(i, String.class, true, names.get(i++));       //  3-Currency
        invoiceTable.setColumnClass(i, BigDecimal.class, true, names.get(i++));   //  4-Amt
    }
    invoiceTable.setColumnClass(i, BigDecimal.class, true, names.get(i++));       //  5-ConvAmt
    invoiceTable.setColumnClass(i, BigDecimal.class, true, names.get(i++));       //  6-ConvAmt Open
    invoiceTable.setColumnClass(i, BigDecimal.class, false, names.get(i++));      //  7-Conv Discount
    invoiceTable.setColumnClass(i, BigDecimal.class, false, names.get(i++));      //  8-Conv WriteOff
    invoiceTable.setColumnClass(i, BigDecimal.class, false, names.get(i++));      //  9-Conv Applied
    invoiceTable.setColumnClass(i, BigDecimal.class, true, names.get(i++));     //  10-Conv OverUnder
    //  Table UI
    invoiceTable.autoSize();
}