ZK Example for inline Editing with Add New and Delete

I am quite impressed on this demo from ZK. But adding new record and delete existing record is missing as part of typical CRUD. So i thought that we can add that and see how it works. So here is the example on that


ZK Version : 6.5.2

Book.java

package demo.grid.inline_editing;

public class Book {
	private String author, title ;
	private boolean editingStatus;

	public Book(String author, String title, boolean editingStatus) {
		this.author = author;
		this.title = title;
		this.editingStatus = editingStatus;

	}

	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 boolean getEditingStatus() {
		return editingStatus;
	}

	public void setEditingStatus(boolean editingStatus) {
		this.editingStatus = editingStatus;
	}

}

BookData.java

package demo.grid.inline_editing;

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

public class BookData {
	 
	private final List<Book> allBooks = new ArrayList<Book>();

	public BookData(){
		allBooks.add(new Book("Philip Hensher", "The Fit",false ));
		allBooks.add(new Book("Philip Hensher", "Kitchen Venom",false));
		allBooks.add(new Book("Michael Greenberg", "Hurry Down Sunshine",false));
		allBooks.add(new Book("Michael Greenberg", "Painless Vocabulary",false));
		allBooks.add(new Book("Rick Perlstein", "Nixonland: The Rise of a President and the Fracturing",false));
		allBooks.add(new Book("Rick Perlstein", "Nixonland",false));
	}
	
	public List<Book> getAllBooks() {
		return allBooks;
	}

}

Zul File

<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>
		<grid id="demoGrid"
			model="@load(vm.allBooks) @template((vm.displayEdit and each.editingStatus) ? 'editable' : 'noneditable')">
			<columns>
				<column width="350px">Title</column>
				<column width="650px">Author</column>
				<column width="120px" visible="@load(vm.displayEdit)">
					Edit
				</column>
				<column width="120px" visible="@load(vm.displayEdit)">
					Delete
				</column>
			</columns>
			<template name="editable">
				<row>
					<textbox cols="60" id="titletext"
						value="@load(each.title) @save(each.title, before='confirm')" />
					<textbox
						value="@load(each.author) @save(each.author, before='confirm')" />

					<div>
						<button image="pencil-small.png"
							onClick="@command('confirm', currentBook=each)" />
						<button image="cross-small.png"
							onClick="@command('changeEditableStatus', currentBook=each )" />
					</div>
				</row>
			</template>
			<template name="noneditable">
				<row>
					<label value="@load(each.title)" />
					<label value="@load(each.author)" />
					<button image="pencil-small.png"
						onClick="@command('changeEditableStatus', currentBook=each )" />
					<button image="DeleteRecord.png"
						onClick="@command('onDelete', currentBook=each )" />
				</row>
			</template>
		</grid>
	</div>
</zk>

View Model

package demo.grid.inline_editing;

import java.util.List;

import org.zkoss.bind.BindUtils;
import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.zhtml.Messagebox;

public class InlineEditingViewModel {

	private BookData data = new BookData();

	private boolean displayEdit = true;
	private boolean isAddNew = false;

	public boolean isDisplayEdit() {
		return displayEdit;
	}

	@NotifyChange({ "allBooks", "displayEdit" })
	public void setDisplayEdit(boolean displayEdit) {
		this.displayEdit = displayEdit;
	}

	public List<Book> getAllBooks() {
		return data.getAllBooks();
	}

	@Command
	public void changeEditableStatus(@BindingParam("currentBook") Book book) {
		if (isAddNew == true) {
			data.getAllBooks().remove(book);
			isAddNew = false;
		} else
			book.setEditingStatus(!book.getEditingStatus());
		refreshRowTemplate(book);

	}

	@Command
	public void confirm(@BindingParam("currentBook") Book book) {
		if (isAddNew == true) {
			if (book.getAuthor().equalsIgnoreCase("")
					|| book.getTitle().equalsIgnoreCase("")) {
				Messagebox.show(" Please enter the values");
				return;
			} else
				isAddNew = false;
		}
		book.setEditingStatus(!book.getEditingStatus());
		refreshRowTemplate(book);
	}

	public void refreshRowTemplate(Book lcs) {
		/*
		 * This code is special and notifies ZK that the bean's value has
		 * changed as it is used in the template mechanism. This stops the
		 * entire Grid's data from being refreshed
		 */
		BindUtils.postNotifyChange(null, null, lcs, "editingStatus");
	}

	@Command
	@NotifyChange({ "allBooks", "displayEdit" })
	public void onAddNew() {
		data.getAllBooks().add(0, new Book("", "", true));
		isAddNew = true;
	}
	
	@Command
	@NotifyChange({ "allBooks", "displayEdit" })
	public void onDelete(@BindingParam("currentBook") Book book)
	{
		data.getAllBooks().remove(book);
	}
}

Output :


Video Demo
http://screencast.com/t/Lwe5GJkN3fQa

You can download the Source here