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>
	<div viewModel="@id('vm') @init('demo.grid.inline_editing.InlineEditingViewModel')">
		<grid hflex="min" model="@init(vm.allBooks) @template('row')">
			<columns height="22px">
				<column width="330px" label="Title" iconSclass="z-icon-book" />
				<column width="120px" label="Publish Date" />
				<column width="100px" label="# Pages" />
				<column width="150px" label="Status" />
			</columns>
			<template name="row">
				<row>
					<textbox inplace="true" width="100%"
							 value="@bind(each.title)" />
					<datebox inplace="true" width="100%" format="MM/dd/yyyy"
							 value="@bind(each.publish)" />
					<spinner inplace="true" width="100%"
							 value="@bind(each.pages)" />
					<combobox inplace="true" width="100%"
							  model="@init(vm.allStatuses)" selectedItem="@bind(each.status)" />
				</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;
	}

}