Theme:
Processing...
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

inline_editing.zul
<zk xmlns:c="client">
<!-- 	<style src="/widgets/grid/inline_editing/style.css" /> -->
	<div apply="org.zkoss.bind.BindComposer"
		viewModel="@id('vm') @init('demo.grid.inline_editing.InlineEditingViewModel')">
		<grid hflex="min" model="@load(vm.allBooks)">
			<columns height="22px">
				<column width="330px" label="Title">
					<image
						src="/widgets/grid/inline_editing/img/ui-text-field.png" />
				</column>
				<column width="120px" 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.title)" width="99%" />
					<datebox inplace="true" 
						value="@bind(each.publish)" width="99%" format="MM/dd/yyyy" />
					<div class='text-center'>
						<spinner inplace="true"
							value="@bind(each.pages)" width="98%"/>
					</div>
					<combobox inplace="true"
						model="@load(vm.allStatuses)" selectedItem="@bind(each.status)" hflex="1" >
						<template name="model">
							<comboitem label="@load(each)" />
						</template>
					</combobox>
				</row>
			</template>
		</grid>
	</div>
</zk>
InlineEditingViewModel.java
package demo.grid.inline_editing;

import java.util.List;

public class InlineEditingViewModel {
	
	private BookData data = new BookData();
	
	public List<String> getAllStatuses() {
		return data.getStatuses();
	}
	
	public List<Book> getAllBooks() {
		return data.getAllBooks();
	}
}
BookData.java
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 final List<Book> allBooks = new ArrayList<Book>();
	private final List<String> statuses = new ArrayList<String>();

	public BookData(){
		allBooks.add(new Book("Philip Hensher", "The Fit", today, 240, "Shipped"));
		allBooks.add(new Book("Philip Hensher", "Kitchen Venom", today, 336, "Awaiting"));
		allBooks.add(new Book("Michael Greenberg", "Hurry Down Sunshine", today, 245, "Awaiting"));
		allBooks.add(new Book("Michael Greenberg", "Painless Vocabulary", today, 292, "Ordered"));
		allBooks.add(new Book("Rick Perlstein", "Nixonland: The Rise of a President and the Fracturing", today, 896, "Unavailable"));
		allBooks.add(new Book("Rick Perlstein", "Nixonland", today, 845, "Awaiting"));
		
		statuses.add("Ordered");
		statuses.add("Shipped");
		statuses.add("Awaiting");
		statuses.add("Unavailable");
	}
	
	public List<Book> getAllBooks() {
		return allBooks;
	}
	
	public List<String> getStatuses(){
		return statuses;
	}
}
Book.java
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;
	}

}