Thursday, 22 August 2013

ZK List box inline Editing with Add New and Delete action

In my previous example, i showed how to add New record and delete existing record in the inline Editing of grid. This one is same as previous, but i have used ZK List box. Only zul file has been changed, rest all the same code.

<zk>
<style>
.z-label { display:block; } tr.z-row td.z-row-inner { padding:
2px 5px; } .z-row-cnt, .z-column-cnt { text-align: center; }

</style>
<div apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('demo.grid.inline_editing.InlineEditingViewModel')">
<separator></separator>
<separator></separator>
<button onClick="@command('onAddNew')" label="Add New" />
<separator></separator>
<listbox id="demoGrid"
model="@load(vm.allBooks) @template((vm.displayEdit and each.editingStatus) ? 'editable' : 'noneditable')">
<listhead sizable="true">
<listheader label="Title" />
<listheader label="Author" />
<listheader visible="@load(vm.displayEdit)" />
<listheader visible="@load(vm.displayEdit)" />
</listhead>
<template name="editable">
<listitem>
<listcell>
<textbox cols="60" id="titletext"
value="@load(each.title) @save(each.title, before='confirm')" />
</listcell>
<listcell>
<textbox
value="@load(each.author) @save(each.author, before='confirm')" />
</listcell>
<listcell>
<div>
<button image="pencil-small.png"
onClick="@command('confirm', currentBook=each)" />
<button image="cross-small.png"
onClick="@command('changeEditableStatus', currentBook=each )" />
</div>
</listcell>
</listitem>
</template>
<template name="noneditable">
<listitem>
<listcell>
<label value="@load(each.title)" />
</listcell>
<listcell>
<label value="@load(each.author)" />
</listcell>
<listcell>
<button image="pencil-small.png"
onClick="@command('changeEditableStatus', currentBook=each )" />
</listcell>
<listcell>
<button image="DeleteRecord.png"
onClick="@command('onDelete', currentBook=each )" />
</listcell>
</listitem>
</template>
</listbox>
</div>
</zk>

1 comment:

Passing Parameter between two files using MVVM

This examples shows how to pass parameter between two zul screens. In this example, we are passing some parameters from the parent vm to...