ZK Grid Columns change width when button pressed

Question

I placed ZK grid with certain proportions of columns as follows:

    <grid model="@load(vm.rowList)">
        <template name="model">
            <row>
                <cell width="7px">
                    <label value="@load(each.number)"/>
                </cell>

                <cell width="55px">
                    <vbox>
                        <button label="Up" width="100%"
                            onClick="@command('up',row=each)" />
                        <button label="Down" width="100%"
                            onClick="@command('down',row=each)" />
                    </vbox>
                </cell>
                <cell width="100%">
                    <label value="@load(each.text)"/>
                </cell>
            </row>
        </template>
    </grid>

It is displayed fine until i press any button the the width of each column becomes 1/3 of the grid.

I don't understand the reason. Suggest please how to keep the width constant.

Answer 1

You can try!!! Use de colums by to size every cell.

<grid model="@load(vm.rowList)">
    <columns sizable="true">
        <column width="20%"/>
        <column width="20%"/>
        <column width="20%"/>
    </columns>
    <template name="model">
        <row>
            <cell>
                <label value="@load(each.number)"/>
            </cell>

            <cell>
                <vbox>
                    <button label="Up" width="100%"
                        onClick="@command('up',row=each)" />
                    <button label="Down" width="100%"
                        onClick="@command('down',row=each)" />
                </vbox>
            </cell>
            <cell>
                <label value="@load(each.text)"/>
            </cell>
        </row>
    </template>
</grid>