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

image
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 :
image

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


You can download the Source here