|
Theme:
Description & Source Code
Inline Editing allows end users to inline edit each individual cell in a grid. <zk xmlns:c="client">
<style>
.text-center, .z-combobox-inp, .z-datebox-inp { text-align:
center; } div.z-grid-body { #overflow: hidden; }
div.z-column-cnt { padding: 7px 0 5px 5px; } tr.z-row
td.z-row-inner,div.z-row-cnt { padding: 0 2px; }
</style>
<div apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('demo.grid.inline_editing.InlineEditingViewModel')">
<grid width="850px" model="@load(vm.allBooks)">
<columns height="22px">
<column width="150px" label="Author">
<image
src="/widgets/grid/inline_editing/img/ui-text-field.png" />
</column>
<column width="350px" label="Title">
<image
src="/widgets/grid/inline_editing/img/ui-text-field.png" />
</column>
<column width="100px" 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.author)"
width="99%" />
<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'>
<!-- Inplace is pure client action so that use client way to modify the width-->
<spinner inplace="true"
value="@bind(each.pages)" width="30px"
c:onFocus='this.setWidth("55px")'
c:onBlur='this.setWidth("30px")' />
<label value="pages" />
</div>
<combobox hflex="1" inplace="true"
model="@load(vm.allStatuses)" selectedItem="@bind(each.status)">
<template name="model">
<comboitem label="@load(each)" />
</template>
</combobox>
</row>
</template>
</grid>
</div>
</zk>package demo.grid.inline_editing;
import java.util.List;
public class InlineEditingViewModel {
private BookData data = new BookData();
public List<String> getAllStatuses() {
return BookData.STATUSES;
}
public List<Book> getAllBooks() {
return data.getAllBooks();
}
}
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 List<Book> allBooks = new ArrayList<Book>() {
/**
*
*/
private static final long serialVersionUID = -5787580068906276723L;
{
add(new Book("Philip Hensher", "The Fit", today, 240, "Shipped"));
add(new Book("Philip Hensher", "Kitchen Venom", today, 336, "Awaiting"));
add(new Book("Michael Greenberg", "Hurry Down Sunshine", today, 245, "Awaiting"));
add(new Book("Michael Greenberg", "Painless Vocabulary", today, 292, "Ordered"));
add(new Book("Rick Perlstein", "Nixonland: The Rise of a President and the Fracturing", today, 896, "Unavailable"));
add(new Book("Rick Perlstein", "Nixonland", today, 845, "Awaiting"));
}
};
public List<Book> getAllBooks() {
return allBooks;
}
public static final List<String> STATUSES = new ArrayList<String>() {
/**
*
*/
private static final long serialVersionUID = 7311032015070307626L;
{
add("Ordered");
add("Shipped");
add("Awaiting");
add("Unavailable");
}
};
}
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;
}
}
|
|
Theme:
|