Processing...

Suggested case list:

Using timer to refresh a grid

383guest172.69.33.12125nk0uiMay 7, 2020 7:23:47 AMlink

user model to move item to another listbox

120guest162.158.193.148d0n3krApr 2, 2020 5:28:28 AMlink

Disabled list item row passed to VM-1981

296fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:44 PMlink

Disabled list item row passed to VM-1981

295fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:16 PMlink

Disabled list item row passed to VM-1981

294fatih123160.83.36.13225nk0uiFeb 13, 2018 3:30:44 PMlink

grid sample with ListModel/RowRenderer

816guest80.82.2.1312vah9ajFeb 21, 2017 11:42:21 AMlink

grid sample with ListModel/RowRenderer

809guest175.98.113.1622vah9ajJan 26, 2017 9:19:33 AMlink

grid sample with ListModel/RowRenderer

196guest79.185.142.402vah9ajApr 26, 2014 10:53:57 PMlink

grid sample with ListModel/RowRenderer

195guest79.185.142.402vah9ajApr 26, 2014 10:53:54 PMlink

grid sample with ListModel/RowRenderer

194guest79.185.142.402vah9ajApr 26, 2014 10:53:51 PMlink

grid sample with ListModel/RowRenderer

193guest79.185.142.402vah9ajApr 26, 2014 10:53:48 PMlink

grid sample with ListModel/RowRenderer

192guest79.185.142.402vah9ajApr 26, 2014 10:53:44 PMlink

grid sample with ListModel/RowRenderer

191guest79.185.142.402vah9ajApr 26, 2014 10:53:40 PMlink

Hierarchy table without using ZK PE/EE

1aaknai151.28.135.2131s871daJul 29, 2013 11:02:46 PMlink

grid sample with ListModel/RowRenderer

128aaknai151.28.135.2132vah9ajJul 29, 2013 7:20:00 PMlink

user model to move item to another listbox

1TonyQ114.25.109.94d0n3krApr 21, 2012 10:43:27 AMlink

Using timer to refresh a grid

1TonyQ220.133.44.3725nk0uiFeb 17, 2012 3:17:34 AMlink

Fire a event from child iframe

1TonyQ220.133.44.372eupjotFeb 3, 2012 5:04:52 AMlink

Textbox input restriction sample

1TonyQ72.21.245.2431b3nlr0Dec 20, 2011 10:09:10 AMlink

Test web core taglib in ZUL

1TonyQ198.203.175.175ofqkemDec 17, 2011 3:36:08 AMlink

Latest 10 Fiddles :

Multi file upload

224guest172.69.10.1922kopnr6Oct 20, 2020 12:40:27 PMlink

tree row issue

3guest172.69.35.372nhucl7Oct 20, 2020 3:39:23 AMlink

tree row issue

2guest172.69.35.372nhucl7Oct 20, 2020 3:38:58 AMlink

tree row issue

1guest172.69.35.372nhucl7Oct 20, 2020 3:27:05 AMlink

uppercase textbox

3guest162.158.123.2532f0efq3Oct 19, 2020 10:29:15 PMlink

Form Binding TreeModel

39guest162.158.167.222kvmr8fOct 19, 2020 4:14:22 AMlink

open tab with input error

3guest162.158.165.4818q1otfOct 19, 2020 3:39:25 AMlink

ZK-4011

2JamesChu172.69.33.23527n7fasOct 19, 2020 2:31:14 AMlink

test textarea

10guest172.68.146.206edgdcgOct 19, 2020 1:51:08 AMlink

generate rows

6guest172.69.135.762p5b7f8Oct 17, 2020 3:11:30 AMlink

KeiKai Demo

7bztom35172.68.142.7114s847nSep 7, 2020 8:01:15 PMlink

resources

index.zulzul<zk xmlns:h="native"> <window closable="true" sizable="true" width="50%" > <hlayout width="100%" vflex="1" apply="TestComposer"> <div hflex="1" vflex="1" style="padding-left:10px"> <h:h2>Keikai</h:h2> <!-- keep higher space for a filter popup --> <spreadsheet id="ss" width="100%" height="400px" showFormulabar="true" showContextMenu="false" showToolbar="false" showSheetbar="false" maxVisibleRows="11" maxVisibleColumns="4" src="/WEB-INF/books/tradeTemplate.xlsx"/> <div style="margin: 10px 5px 10px 0px; text-align: right"> <button id="save" label="Save to Database" /> <button id="load" label="Load from Database" disabled="true"/> </div> </div> <separator bar="true" width="10px" orient="vertical" vflex="1"/> <div hflex="1" vflex="1" style="overflow:auto; padding: 0px 20px 0px 10px"> <h:h2>Database Table:</h:h2> <grid id="tableGrid" style="margin-top: 41px;" width="100%"> <columns> <column label="ID" width="40px"/> <column label="Type" width="100px" /> <column label="Salesperson" width="100px"/> <column label="Sales"/> </columns> <template name="model"> <row> <label value="${each.id}" /> <label value="${each.type}" /> <label value="${each.salesPerson}"/> <label value="${each.sale}"/> </row> </template> </grid> </div> </hlayout> </window> <script><![CDATA[ jq('.zstbtn-addCol').hide(); jq('.zstbtn-addRow').hide(); ]]></script> </zk> TestComposer.javajavaimport io.keikai.api.*; import io.keikai.api.model.*; import io.keikai.ui.*; import io.keikai.ui.event.CellMouseEvent; import io.keikai.ui.event.StopEditingEvent; import org.zkoss.zk.ui.Component; import org.zkoss.zk.ui.event.*; import org.zkoss.zk.ui.select.SelectorComposer; import org.zkoss.zk.ui.select.annotation.*; import org.zkoss.zk.ui.util.Clients; import org.zkoss.zul.*; import java.util.Map; public class TestComposer extends SelectorComposer<Component> { private MyDataService dataService = new MyDataService(); @Wire private Spreadsheet ss; @Wire private Grid tableGrid; @Wire("#load") private Button loadButton; // store those Trade modified by a user. key is trade ID private Map<Integer, Trade> modifiedTrades; //column index public static int ID = 0; public static int TYPE = 1; public static int SALESPERSON = 2; public static int SALES = 3; @Override public void doAfterCompose(Component comp) throws Exception { super.doAfterCompose(comp); reload(); Clients.showNotification("the data is loaded from the db"); } private void load(Trade trade, int row) { Sheet sheet = ss.getSelectedSheet(); Ranges.range(sheet, row, ID).setCellValue(trade.getId()); Ranges.range(sheet, row, TYPE).setCellValue(trade.getType()); Ranges.range(sheet, row, SALESPERSON).setCellValue(trade.getSalesPerson()); Ranges.range(sheet, row, SALES).setCellValue(trade.getSale()); } /** * extract data in cells into a {@link Trade} * @param row */ private Trade extract(int row ){ Sheet sheet = ss.getSelectedSheet(); Trade trade = new Trade(extractInt(Ranges.range(sheet, row, ID))); trade.setType(Ranges.range(sheet, row, TYPE).getCellEditText()); trade.setSalesPerson(Ranges.range(sheet, row, SALESPERSON).getCellEditText()); trade.setSale(extractInt(Ranges.range(sheet, row, SALES))); return trade; } private int extractInt(Range cell){ CellData cellData = cell.getCellData(); return cellData.getDoubleValue() == null ? 0 : cellData.getDoubleValue().intValue(); } @Listen("onCellClick = #ss") public void onCellClick(CellMouseEvent event){ StringBuilder info = new StringBuilder(); info.append("Click on cell ") .append(Ranges.getCellRefString(event.getRow(),event.getColumn())); //show event information... } @Listen("onCellRightClick = #ss") public void onCellRightClick(CellMouseEvent event){ //show event information... System.out.println("Right clicked on cell."); } @Listen("onCellDoubleClick = #ss") public void onCellDoubleClick(CellMouseEvent event){ //show event information... System.out.println("Double clicked on cell."); } @Listen("onClick = #load") public void load(){ reload(); modifiedTrades.clear(); } @Listen("onClick = #save") public void save(){ dataService.save(modifiedTrades); tableGrid.setModel(new ListModelList<Trade>(dataService.queryAll().values())); loadButton.setDisabled(false); } /** * When onStopEditing fired, the cell value in the book model is still not updated. So we don't extract cell data into a Trade here. * @param event */ @Listen("onStopEditing = #ss") public void update(StopEditingEvent event){ //validate input with Excel validation Events.postEvent("onAfterEditing", ss, event.getRow()); } @Listen("onAfterEditing = #ss") public void update(Event event){ Integer row = (Integer)event.getData(); //the header row is locked Trade trade = extract(row); modifiedTrades.put(trade.getId(), trade); loadButton.setDisabled(false); } /** * load data to the sheet */ public void reload(){ ss.setSrc(null); ss.setSrc("/WEB-INF/books/tradeTemplate.xlsx"); int row = 1; modifiedTrades = dataService.queryAll(); for (Map.Entry<Integer, Trade> entry : modifiedTrades.entrySet()){ load(entry.getValue(), row); row++; } ss.setMaxVisibleRows(modifiedTrades.size()+1); tableGrid.setModel(new ListModelList<Trade>(modifiedTrades.values())); applyAccessPolicy(); loadButton.setDisabled(true); } private void applyAccessPolicy() { ss.disableUserAction(AuxAction.PROTECT_SHEET, true); ss.disableUserAction(AuxAction.ADD_SHEET, true); ss.disableUserAction(AuxAction.DELETE_SHEET, true); ss.disableUserAction(AuxAction.HIDE_SHEET, true); ss.disableUserAction(AuxAction.COPY_SHEET, true); //Ranges.range(ss.getSelectedSheet()).protectSheet("", true, true, false, false, false, false, false, false, false, true, false, true, false, false, false); Ranges.range(ss.getSelectedSheet()).protectSheet("", true, //allowSelectingLockedCells true, //allowSelectingUnlockedCells, false, //allowFormattingCells false, //allowFormattingColumns false, //allowFormattingRows false, //allowInsertColumns false, //allowInsertRows false, //allowInsertingHyperlinks false, //allowDeletingColumns false, //boolean allowDeletingRows false, //allowSorting false, //allowFiltering false, //allowUsingPivotTables false, //drawingObjects false //boolean scenarios ); } }MyDataService.javajava import java.util.*; /** * A class that simulates accessing a table of a database. * @author hawk * */ public class MyDataService { private TreeMap<Integer, Trade> tradeTable = new TreeMap<Integer, Trade>(); private int sequence = 0; public MyDataService(){ save(new Trade("Beverages", "Suyama", 5122)); save(new Trade("Meat", "Davolio", 450)); save(new Trade("Produce", "Buchanan", 6328)); save(new Trade("Tools", "Suyama", 230)); save(new Trade("Vegetables", "John", 947)); } public void save(Map<Integer, Trade> changedMap){ for(Map.Entry<Integer, Trade> entry: changedMap.entrySet()) { Trade changedTrade = entry.getValue(); tradeTable.put(changedTrade.getId(), changedTrade); //simplified logic, update without comparing } } public void save(Trade trade){ if (trade.getId()==null){ trade.setId(nextId()); } tradeTable.put(trade.getId(), trade); } public Map<Integer, Trade> queryAll(){ TreeMap<Integer, Trade> result = new TreeMap<Integer, Trade>(); for (Map.Entry<Integer, Trade> entry : tradeTable.entrySet()){ result.put(entry.getKey(), new Trade(entry.getValue())); } return result; } private Integer nextId(){ return sequence++; } }Trade.javajava /** * A trade record * @author hawk * */ public class Trade { private Integer id; private String type; private int sale; private String salesPerson; public Trade(Integer id) { this.id = id; } public Trade(String type, String salesPerson, int sale){ this.type = type; this.salesPerson = salesPerson; this.sale = sale; } /** * copy constructor * @param trade */ public Trade(Trade trade){ this.id = trade.getId(); this.type = trade.getType(); this.sale = trade.getSale(); this.salesPerson = trade.getSalesPerson(); } public String getType() { return type; } public void setType(String type) { this.type = type; } public int getSale() { return sale; } public void setSale(int sale) { this.sale = sale; } public String getSalesPerson() { return salesPerson; } public void setSalesPerson(String salesPerson) { this.salesPerson = salesPerson; } public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } }