Theme:
Processing...
Description & Source Code

Inline Row Editing allows end users to inline edit multiple rows.
In this example we used ZK's databinding to deliver the ability to edit the entire row purely using ZK's MVVM based databinding.
Using databinding to deliver this functionality ensures a clean and easy to read code which delivers a powerful feature. The feature works by making use of two templates, one which outputs textboxes so the values can be edited and one which outputs labels which doesn't allow editing functionality.

inline_row_editing.zul
<zk>
	<style src="/widgets/grid/inline_row_editing/style.css" />
	<div apply="org.zkoss.bind.BindComposer"
		viewModel="@id('vm') @init('demo.grid.inline_row_editing.InplaceEditingViewModel')">
		<grid id="demoGrid" 
			model="@load(vm.languageContributions) @template((vm.displayEdit and each.editingStatus) ? 'editable' : 'noneditable')">
			<auxhead>
				<auxheader colspan="4"
					label="Contributor of ZK International Message(Part)">
					<hlayout>
						<checkbox checked="@bind(vm.displayEdit)"
							label="Enable Multiple Inline Row Editing">
						</checkbox>
					</hlayout>
				</auxheader>
			</auxhead>
			<columns>
				<column>Language</column>
				<column width="250px">Contributor</column>
				<column width="180px">Charset</column>
				<column width="120px" visible="@load(vm.displayEdit)">Edit</column>
			</columns>
			<template name="editable">
				<row>
					<textbox 
						value="@load(each.languageContribution.language) @save(each.languageContribution.language, before='confirm')" />
					<textbox 
						value="@load(each.languageContribution.name) @save(each.languageContribution.name, before='confirm')" />
					<textbox 
						value="@load(each.languageContribution.charset) @save(each.languageContribution.charset, before='confirm')" />
					<div>
						<button
							image="/widgets/grid/inline_row_editing/img/tick-small.png"
							onClick="@command('confirm', languageContributionStatus=each)" />
						<button
							image="/widgets/grid/inline_row_editing/img/cross-small.png"
							onClick="@command('changeEditableStatus', languageContributionStatus=each)" />
					</div>
				</row>
			</template>
			<template name="noneditable">
				<row>
					<label value="@load(each.languageContribution.language)" />
					<label value="@load(each.languageContribution.name)" />
					<label value="@load(each.languageContribution.charset)" />
					<button
						image="/widgets/grid/inline_row_editing/img/pencil-small.png"
						onClick="@command('changeEditableStatus', languageContributionStatus=each)" />
				</row>
			</template>
		</grid>
	</div>
</zk>
InplaceEditingViewModel.java
package demo.grid.inline_row_editing;

import java.util.ArrayList;
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.zul.ListModelList;

import demo.data.ContributorData;
import demo.data.pojo.LanguageContribution;

public class InplaceEditingViewModel {
	private final ContributorData contributorData = new ContributorData();
	private final ListModelList<LanguageContributionStatus> contributionStatuses = 
			generateStatusList(contributorData.getLanguageContributors());
	private boolean displayEdit = true;
	
	public boolean isDisplayEdit() {
		return displayEdit;
	}
	
	@NotifyChange({"languageContributions", "displayEdit"})
	public void setDisplayEdit(boolean displayEdit) {
		this.displayEdit = displayEdit;
	}

	public List<LanguageContributionStatus> getLanguageContributions() {
		return contributionStatuses;
	}
	
	@Command
	public void changeEditableStatus(@BindingParam("languageContributionStatus") LanguageContributionStatus lcs) {
		lcs.setEditingStatus(!lcs.getEditingStatus());
		refreshRowTemplate(lcs);
	}
	
	@Command
	public void confirm(@BindingParam("languageContributionStatus") LanguageContributionStatus lcs) {
		changeEditableStatus(lcs);
		refreshRowTemplate(lcs);
	}
	
	public void refreshRowTemplate(LanguageContributionStatus lcs) {
		//replace the element in the collection by itself to trigger a model update
		contributionStatuses.set(contributionStatuses.indexOf(lcs), lcs);		
	}
	
	
	private static ListModelList<LanguageContributionStatus> generateStatusList(List<LanguageContribution> contributions) {
		ListModelList<LanguageContributionStatus> contribs = new ListModelList<LanguageContributionStatus>();
		for(LanguageContribution lc : contributions) {
			contribs.add(new LanguageContributionStatus(lc, false));
		}
		return contribs;
	}
}
LanguageContributionStatus.java
package demo.grid.inline_row_editing;

import demo.data.pojo.LanguageContribution;

public class LanguageContributionStatus {
	private LanguageContribution lc;
	private boolean editingStatus;
	
	public LanguageContributionStatus(LanguageContribution lc, boolean editingStatus) {
		this.lc = lc;
		this.editingStatus = editingStatus;
	}
	
	public LanguageContribution getLanguageContribution() {
		return lc;
	}
	
	public boolean getEditingStatus() {
		return editingStatus;
	}
	
	public void setEditingStatus(boolean editingStatus) {
		this.editingStatus = editingStatus;
	}
}
ContributorData.java
package demo.data;

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

import demo.data.pojo.Contributor;
import demo.data.pojo.LanguageContribution;

public class ContributorData {

	private List<String> titles = new ArrayList<String>();
	private List<Contributor> contributors = new ArrayList<Contributor>();
	private List<LanguageContribution> languageContributions = new ArrayList<LanguageContribution>();

	public ContributorData() {
		titles.add("Code");
		titles.add("Bug");
		titles.add("Docs");
		titles.add("Arts");

		contributors.add(new Contributor("Kaleb", "Leonel", titles.get(0).toString(), 321));
		contributors.add(new Contributor("Balu", "Haben", titles.get(0).toString(), 321));
		contributors.add(new Contributor("Trey", "Wyatt", titles.get(0).toString(), 323));
		contributors.add(new Contributor("Balu", "Chen", titles.get(0).toString(), 324));
		contributors.add(new Contributor("Terry", "Tornado", titles.get(0).toString(), 711));
		contributors.add(new Contributor("Jesse", "Miles", titles.get(1).toString(), 712));
		contributors.add(new Contributor("Sadira", "Jobs", titles.get(1).toString(), 713));
		contributors.add(new Contributor("Jaquan", "Frederick", titles.get(2).toString(), 451));
		contributors.add(new Contributor("Avery", "Katrina", titles.get(2).toString(), 453));
		contributors.add(new Contributor("Heidi", "Nikolas", titles.get(2).toString(), 455));
		contributors.add(new Contributor("Katelyn", "Clara", titles.get(2).toString(), 457));
		contributors.add(new Contributor("Branden", "Shane", titles.get(2).toString(), 459));
		contributors.add(new Contributor("Dacey", "Obert", titles.get(2).toString(), 450));
		contributors.add(new Contributor("Julianna", "Allison", titles.get(3).toString(), 643));
		contributors.add(new Contributor("Rachel", "Elisabeth", titles.get(3).toString(), 644));
		contributors.add(new Contributor("Clarissa", "Francesca", titles.get(3).toString(), 645));
		contributors.add(new Contributor("Gabby", "Taffy", titles.get(3).toString(), 646));
		
		languageContributions.add(new LanguageContribution("Arabic (ar)", "Ayman Elgharabawy", "iso-8859-6"));
		languageContributions.add(new LanguageContribution("Hungarian (hu)", "Andreas Klein", "iso-8859-2"));
		languageContributions.add(new LanguageContribution("Italian (it)", "Matteo Barbieri", "iso-8859-1"));
		languageContributions.add(new LanguageContribution("Indonesian (id)", "James Liam Supangkat", "iso-8859-1"));
		languageContributions.add(new LanguageContribution("Japanese (ja)", "Poli Lee", " iso-2022-jp"));
		languageContributions.add(new LanguageContribution("Korean (ko)", "Deok-su Lee", "euc-kr"));
		languageContributions.add(new LanguageContribution("Dutch (nl)", "Wido Jansen", "iso-8859-1"));
		languageContributions.add(new LanguageContribution("Portuguese (pt)", "Airton Carrara", "iso-8859-1"));
		languageContributions.add(new LanguageContribution("Brazilian Portugese (pt_BR)", "Airton Carrara", "iso-8859-1"));
		languageContributions.add(new LanguageContribution("Romanian (ro)", "Calin Vaida", "iso-8859-2"));
		languageContributions.add(new LanguageContribution("Russian (ru)", "Denis Yarkovoy", "iso-8859-1"));
		languageContributions.add(new LanguageContribution("French (fr)", "Jêrôme Vergereau", "iso-8859-1"));
		languageContributions.add(new LanguageContribution("Spanish (es)", "Daniel Octavio Ruiz Rodriguez", "iso-8859-1"));
		languageContributions.add(new LanguageContribution("German (de)", "H.-Dirk Schmitt", "iso-8859-1"));
		languageContributions.add(new LanguageContribution("Czech (cs)", "Pavel Mica", "iso-8859-2"));
		languageContributions.add(new LanguageContribution("Catalan (ca)", "Xavier Covas O'Ryan", "iso-8859-1"));
		languageContributions.add(new LanguageContribution("Bulgarian (bg) ", "Boril Yonchev", "iso-8859-5"));
		languageContributions.add(new LanguageContribution("Ukrainian (uk)", "Denis Yarkovoy", "iso-8859-5"));
		languageContributions.add(new LanguageContribution("Turkish (tr)", "Kursat Kurt", "iso-8859-9"));
		languageContributions.add(new LanguageContribution("Swedish (sv)", "Easit AB", "iso-8859-1"));
		languageContributions.add(new LanguageContribution("Slovenian (sl) ", "Ziga", "iso-8859-2"));
	}

	public List<String> getTitles() {
		return titles;
	}

	public List<Contributor> getContributors() {
		return contributors;
	}

	public List<LanguageContribution> getLanguageContributors() {
		return languageContributions;
	}

}
LanguageContribution.java
package demo.data.pojo;

public class LanguageContribution {
	private String language, name, charset;

	public LanguageContribution(String language, String name, String charset) {
		this.language = language;
		this.name = name;
		this.charset = charset;
	}
	
	public String getLanguage() {
		return language;
	}

	public void setLanguage(String language) {
		this.language = language;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getCharset() {
		return charset;
	}

	public void setCharset(String charset) {
		this.charset = charset;
	}
}