Thursday, 22 August 2013

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

8 comments:

  1. This example has helped me a lot. Thanks for the contribution!

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Thanks for this. It works.

    ReplyDelete
  4. Congratulations for the tutorial. Recently I approached zk studio and I would ask for advice: I have a grid of checkboxes and I would set the columns label with vertical orientation, it is possible? it is also possible to decrease the minimum distance between the row less than 10px?
    Greetings.
    Paul.

    ReplyDelete
  5. the sample code zip file is not longer available?.

    ReplyDelete
  6. The link to dowload the source files is not working. Can you please tell me where I can download the example? Thanks in advance

    ReplyDelete