<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_row_editing.InplaceEditingViewModel')">
		<grid id="demoGrid" model="@load(vm.languageContributions) @template((vm.displayEdit and customEach.editingStatus) ? 'editable' : 'noneditable')">
			<auxhead>
				<auxheader
					label="Contributor of ZK International Message(Part)"
					colspan="4">
					<hlayout>
						<checkbox checked="@bind(vm.displayEdit)"
							label="Enable Multiple Inline Row Editing">
						</checkbox>
					</hlayout>
				</auxheader>
			</auxhead>
			<columns>
				<column>Language</column>
				<column width="300px">Contributor</column>
				<column width="200px">Charset</column>
				<column width="100px" visible="@load(vm.displayEdit)">Edit</column>
			</columns>
			<template name="editable" var="customEach">
				<row>
					<textbox value="@load(customEach.languageContribution.language) @save(customEach.languageContribution.language, before='confirm')" />
					<textbox value="@load(customEach.languageContribution.name) @save(customEach.languageContribution.name, before='confirm')" />
					<textbox value="@load(customEach.languageContribution.charset) @save(customEach.languageContribution.charset, before='confirm')" />
					<div>
						<button
							image="/widgets/grid/inline_row_editing/img/tick-small.png"
							onClick="@command('confirm', languageContributionStatus=customEach)" />
						<button
							image="/widgets/grid/inline_row_editing/img/cross-small.png"
							onClick="@command('changeEditableStatus', languageContributionStatus=customEach)" />
					</div>
				</row>
			</template>
			<template name="noneditable" var="customEach">
				<row>
					<label value="@load(customEach.languageContribution.language)" />
					<label value="@load(customEach.languageContribution.name)" />
					<label value="@load(customEach.languageContribution.charset)" />
					<button
						image="/widgets/grid/inline_row_editing/img/pencil-small.png"
						onClick="@command('changeEditableStatus', languageContributionStatus=customEach)" />
				</row>
			</template>
		</grid>
	</div>
</zk>

@template((vm.displayEdit and customEach.editingStatus) ? 'editable' : 'noneditable')