Thursday, 24 May 2012

MVC CRUD Application with Auto filter for List item

In the last post, We have seen how to display the data in the List item from the database. Now we remember the UI , we have a text box in the Top of the List. If the user start enters the first character of the practice name, then we will filter the records in the list. Please keep in mind, that we are not going to hit the database again and again for each character is typed.

In ZK Textbox, by using on changing Event , we can easily achieve this. For small example, please refer here.
Here is the modified ZUL Code (Please note, not many change, just we have given ID for the text box).
<?page title="Practice List" contentType="text/html;charset=UTF-8"?>
    <window title="Practice List" border="normal" sclass="listingwindow"
            <button label="Add Practice" />
        <separator />
        <groupbox height="40px">
            <label value="Practice Name" />
            <space />
            <space />
            <textbox id="practicefilter" cols="50" />
            <button id="gobutton" label="Go" />
            <space spacing="20px" />
            <checkbox label="Show only active" />
            <space spacing="20px" />
        <separator />
        <listbox id="PracticeList">
            <listhead sizable="true">
                <listheader label="Practice Name" sort="auto" />
                <listheader label="City" sort="auto" />
                <listheader label="State" sort="auto" />
                <listheader label="Zip Code" sort="auto" />

package myproject.UI;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.InputEvent;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.ListModelList;
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;
import org.zkoss.zul.Textbox;
import mydomain.*;
public class PracticeListController extends GenericForwardComposer {
    private static final long serialVersionUID = 1L;
    private Listbox PracticeList;
    private PracticeDAO practicedao;
    private Textbox practicefilter;
    @SuppressWarnings({ "unchecked" })
    public void doAfterCompose(Component comp) throws Exception {
        PracticeList.setItemRenderer(new ListitemRenderer() {
            public void render(Listitem item, Object arg1, int arg2)
                    throws Exception {
                practice value = (practice) arg1;
                item.appendChild(new Listcell(value.getPracticeName()));
                item.appendChild(new Listcell(value.getCity()));
                item.appendChild(new Listcell(value.getState()));
                item.appendChild(new Listcell(value.getZipCode()));
        practicedao = new PracticeDAO();
        PracticeList.setModel(new ListModelList(practicedao.getAll()));
    public void onChanging$practicefilter(InputEvent event) {
        /*; */
        PracticeList.setModel(new ListModelList(practicedao.getFilter()));


package mydomain;
import java.util.List;
import org.hibernate.Session;
import org.hibernate.Transaction;
import org.hibernate.Query;
import org.hibernate.hql.internal.ast.util.ASTUtil.FilterPredicate;
import java.util.ArrayList;
import java.util.*;
import HibernateUtilities.HibernateUtil;
public class PracticeDAO {
    private String filter;
    List<practice> allrecords = null;
    public void setFilter(String filter) 
        this.filter = filter;
    public List getFilter() 
         List<practice> filteredPractices=new ArrayList<practice>();
        if (filter == null || "".equals(filter)) {
        } else {
            for (practice item : allrecords) {
                if (item.getPracticeName().toLowerCase().indexOf(filter.toLowerCase()) == 0) {
        return filteredPractices;
    public List getAll() {
        Transaction trns = null;
        Session session = HibernateUtil.getSessionFactory().openSession();
        try {
            trns = session.beginTransaction();
            Query q1 = session.createQuery("from practice");
            allrecords = q1.list();
        } catch (RuntimeException e) {
            if (trns != null) {
        } finally {
        return allrecords;

Now run the application and start typing some characters for the filter text box, you can see the records are filtered in the listing.

In the Next post, we will see how to add more filters.


  1. hi.. you have great tuts here..
    nice, especially for start zk.. thx.. keep posting!!

  2. I'm still a new user of ZK, Thanks a lot, much appreciate, you made my work much easier..

  3. Senthil! Thank alot! Finally i found solution on you. Great thanks.