Theme:
Description & Source Code

Inline Editing allows end users to inline edit each individual cell in a grid.
To make your cells editable, enable this feature by declaring inplace=true in ZK input UI Components

<zk xmlns:c="client">
	<style>
		.text-center, .z-combobox-inp, .z-datebox-inp { text-align:
		center; } div.z-grid-body { #overflow: hidden; }
		div.z-column-cnt { padding: 7px 0 5px 5px; } tr.z-row
		td.z-row-inner,div.z-row-cnt { padding: 0 2px; }
	</style>
	<div apply="org.zkoss.bind.BindComposer"
		viewModel="@id('vm') @init('demo.grid.inline_editing.InlineEditingViewModel')">
		<grid width="850px" model="@load(vm.allBooks)">
			<columns height="22px">
				<column width="150px" label="Author">
					<image
						src="/widgets/grid/inline_editing/img/ui-text-field.png" />
				</column>
				<column width="350px" label="Title">
					<image
						src="/widgets/grid/inline_editing/img/ui-text-field.png" />
				</column>
				<column width="100px" label="Publish Date"
					align="center">
					<image
						src="/widgets/grid/inline_editing/img/calendar-blue.png" />
				</column>
				<column width="150px" label="Hardcover" align="center" />
				<column width="100px" label="Status" align="center">
					<image
						src="/widgets/grid/inline_editing/img/ui-combo-box-edit.png" />
				</column>
			</columns>
			<template name="model">
				<row>
					<textbox inplace="true" value="@bind(each.author)"
						width="99%" />
					<textbox inplace="true" value="@bind(each.title)"
						width="99%" />
					<datebox inplace="true" value="@bind(each.publish)"
						width="99%" format="MM/dd/yyyy" />
					<div class='text-center'>
						<!-- Inplace is pure client action so that use client way to modify the width-->
						<spinner inplace="true"
							value="@bind(each.pages)" width="30px"
							c:onFocus='this.setWidth("55px")'
							c:onBlur='this.setWidth("30px")' />
						<label value="pages" />
					</div>
					<combobox hflex="1" inplace="true"
						model="@load(vm.allStatuses)" selectedItem="@bind(each.status)">
						<template name="model">
							<comboitem label="@load(each)" />
						</template>
					</combobox>
				</row>
			</template>
		</grid>
	</div>
</zk>
package demo.grid.inline_editing;

import java.util.List;

public class InlineEditingViewModel {
	
	private BookData data = new BookData();
	
	public List<String> getAllStatuses() {
		return BookData.STATUSES;
	}
	
	public List<Book> getAllBooks() {
		return data.getAllBooks();
	}
}
package demo.grid.inline_editing;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

public class BookData {
	
	private final Date today = new Date();
	private List<Book> allBooks = new ArrayList<Book>() {
		/**
		 * 
		 */
		private static final long serialVersionUID = -5787580068906276723L;

		{
			add(new Book("Philip Hensher", "The Fit", today, 240, "Shipped"));
			add(new Book("Philip Hensher", "Kitchen Venom", today, 336, "Awaiting"));
			add(new Book("Michael Greenberg", "Hurry Down Sunshine", today, 245, "Awaiting"));
			add(new Book("Michael Greenberg", "Painless Vocabulary", today, 292, "Ordered"));
			add(new Book("Rick Perlstein", "Nixonland: The Rise of a President and the Fracturing", today, 896, "Unavailable"));
			add(new Book("Rick Perlstein", "Nixonland", today, 845, "Awaiting"));
		}
	};
	
	public List<Book> getAllBooks() {
		return allBooks;
	}
	
	public static final List<String> STATUSES = new ArrayList<String>() {
		/**
		 * 
		 */
		private static final long serialVersionUID = 7311032015070307626L;

		{
			add("Ordered");
			add("Shipped");
			add("Awaiting");
			add("Unavailable");
		}
	};
	
	
}
package demo.grid.inline_editing;

import java.util.Date;

public class Book {
	private String author, title, status;
	private Date publish;
	private int pages;

	public Book(String author, String title, Date publish, int pages,
			String status) {
		this.author = author;
		this.title = title;
		this.publish = publish;
		this.pages = pages;
		this.status = status;
	}

	public String getAuthor() {
		return author;
	}

	public void setAuthor(String author) {
		this.author = author;
	}

	public String getTitle() {
		return title;
	}

	public void setTitle(String title) {
		this.title = title;
	}

	public String getStatus() {
		return status;
	}

	public void setStatus(String status) {
		this.status = status;
	}

	public Date getPublish() {
		return publish;
	}

	public void setPublish(Date publish) {
		this.publish = publish;
	}

	public int getPages() {
		return pages;
	}

	public void setPages(int pages) {
		this.pages = pages;
	}

}