List item Change background color for some particular items based on some conditions

In this example, our list box shows user code, user name, user password and account is active or not. We will show the row in different color if the user is in active.


ZK Version :  ZK 6
Project Name : ListItemMVCConditionalCSS
Project Structure :

ListItemConditionalCSS.zul

<?xml version="1.0" encoding="UTF-8"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
<zk>
<style>
.z-listcell.red .z-listcell-cnt, .z-label.red{
    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>

users.java

package mydomain;

public class users {
    
    private String userCode;
    private String userName;
    private String userPassword;
    private String active;
    
    public String getUserCode() {
        return userCode;
    }
    public void setUserCode(String userCode) {
        this.userCode = userCode;
    }
    public String getUserName() {
        return userName;
    }
    public void setUserName(String userName) {
        this.userName = userName;
    }
    public String getUserPassword() {
        return userPassword;
    }
    public void setUserPassword(String userPassword) {
        this.userPassword = userPassword;
    }
    public String getActive() {
        return active;
    }
    public void setActive(String active) {
        this.active = active;
    }

}

ListItemCondCSS.java

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;
                
                Listcell userCodeCell = new Listcell();
                userCodeCell.setLabel(value.getUserCode());
                
                Listcell userNameCell = new Listcell();
                userNameCell.setLabel(value.getUserName());

                Listcell userPasswordCell = new Listcell();
                userPasswordCell.setLabel(value.getUserPassword());

                
                Listcell activecell = new Listcell();
                activecell.setLabel(value.getActive());
                if (value.getActive()=="N")
                {
                    userNameCell.setClass("red");
                    userCodeCell.setClass("red");
                    userPasswordCell.setClass("red");
                    activecell.setSclass("red");
                }
                item.appendChild(userCodeCell);
                item.appendChild(userNameCell);
                item.appendChild(userPasswordCell);
                item.appendChild(activecell);
                item.setValue(value);
                
            }
        });
    }

    
    public List<users> getUsers() {
        return usersAll;
    }

}

Output



Download the source as war file