Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi
I want to change the background color of the listitems based on condition. After looking the demo, i came to know this can be done if we our own render er.
I have created the sample, but it is working properly. Here is the code.
Zul File
<?xml version="1.0" encoding="UTF-8"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
<zk>
<style>
.red {
background-color:red;
}
</style>
<window id='myWin' title="MVC example" border="normal"
apply="mydomainUI.ListItemCondCSS">
Example ListItem Conditional CSS Setting for some particular Rows
<listbox id="listUsers"
model="@{myWin$ListItemCondCSS.users}">
<listhead sizable="true">
<listheader label="User Code" width="100px" />
<listheader label="User Name" width="285px" />
<listheader label="User Password" width="285px" />
<listheader label="Active" width="285px" />
</listhead>
<listitem self="@{each=p1}" >
<listcell label="@{p1.userCode}" />
<listcell label="@{p1.userName}" />
<listcell label="@{p1.userPassword}" />
<listcell label="@{p1.active}" />
</listitem>
</listbox>
</window>
</zk>
MVC Controller
package mydomainUI;
import java.util.ArrayList;
import java.util.List;
import mydomain.users;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.sys.ComponentsCtrl;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Listbox;
import org.zkoss.zul.Listcell;
import org.zkoss.zul.Listitem;
import org.zkoss.zul.ListitemRenderer;
import org.zkoss.zul.Messagebox;
@SuppressWarnings({ "rawtypes", "serial" })
public class ListItemCondCSS extends GenericForwardComposer {
private List<users> usersAll = new ArrayList<users>();
private Listbox listUsers;
@SuppressWarnings("unchecked")
public void doAfterCompose(Component comp) throws Exception {
super.doAfterCompose(comp);
users u1 = new users();
u1.setUserName("John");
u1.setUserCode("User101");
u1.setUserPassword("xxxxx");
u1.setActive("Y");
usersAll.add(u1);
u1 = new users();
u1.setUserName("Robert");
u1.setUserCode("User102");
u1.setUserPassword("xxxxx");
u1.setActive("Y");
usersAll.add(u1);
u1 = new users();
u1.setUserName("Sean");
u1.setUserCode("User103");
u1.setUserPassword("xxxxx");
u1.setActive("N");
usersAll.add(u1);
u1 = new users();
u1.setUserName("Marry");
u1.setUserCode("User104");
u1.setUserPassword("xxxxx");
u1.setActive("N");
usersAll.add(u1);
listUsers.setItemRenderer(new ListitemRenderer() {
@Override
public void render(Listitem item, Object arg1, int arg2)
throws Exception {
users value = (users) arg1;
item.appendChild(new Listcell(value.getUserCode()));
item.appendChild(new Listcell(value.getUserName()));
item.appendChild(new Listcell(value.getUserPassword()));
item.appendChild(new Listcell(value.getActive()));
item.setValue(value);
if (value.getActive()=="N")
{
Messagebox.show("inside");
item.setSclass("red");
}
}
});
}
public List<users> getUsers() {
return usersAll;
}
}
Hi
Again, i am back. I have achieved the above by setting up the style for individual cell, instead of trying to apply at the list item level.
Is there any way, we can set by listitem itself. You can see my example here
I write an example with ZK 6.0.1, check it:
<zk>
<style>
.myColor {
color: red;
}
div.z-listcell-cnt {
color: inherit;
}
</style>
<listbox id="listUsers">
<listhead sizable="true">
<listheader label="User Code" width="100px" />
<listheader label="User Name" width="285px" />
<listheader label="User Password" width="285px" />
<listheader label="Active" width="285px" />
</listhead>
<listitem>
<listcell label="user0" />
<listcell label="John" />
<listcell label="*****" />
<listcell label="N" />
</listitem>
<listitem zclass="myColor">
<listcell label="user1" />
<listcell label="Mary" />
<listcell label="*****" />
<listcell label="Y" />
</listitem>
</listbox>
</zk>
Asked: 2012-06-09 09:32:31 +0800
Seen: 488 times
Last updated: Jul 13 '12