Filter

Author
Sam Chuang, Engineer, Potix Corporation

Date
October 30, 2013

Version
ZK 6.5 and later

Introduction

ZK give developer the power of creating advanced component, extending the component set for your application. In this article, I will create a re-usable component: filterpopup. It's designed for working with collection component that needs filter functionality. For instance, the filterpopup component can be used with Grid, user can use it to filter out huge amount of data, search the required information quickly and intuitively.

Besides, it's also designed for highly customizable, able to integrate with different type of constrain, seamlessly works with different type of data type.

How it Works

The Filterpopup component is composed from three regions.

Regions

Top

The top region is responsible for configuration settings. The default implementation includes:

• Textbox: used for input constraint to perform filtering command.
• Checkbox: to perform select all command.

Default implementation:

		<div id="top" vflex="min">
			<vlayout>
				<textbox value="@bind(vm.constraint)" instant="true" 
						onChanging="@command('performFiltering', constraint=event.value)"></textbox>
				<checkbox checked="@load(vm.selectAll)" label="(Select All)" 
						onCheck="@command('selectAll', checked=event.checked)"></checkbox>
			</vlayout>
		</div>

Center

The center region is responsible for show the filtered result by constraint by using Listbox component.

• Default implementation:

	<div id="center" vflex="true">
		<custom-attributes org.zkoss.zul.listbox.rod="true"/>
		<listbox id="listbox" checkmark="true" model="@bind(vm.filteredByConstraintModel)" vflex="true">
			<template name="model">
				<listitem>
					<listcell label="@load(each)" />
				</listitem>
			</template>
		</listbox>
	</div>

Bottom

The bottom region is responsible for commands, such as OK button, Cancel button.

• Default implementation:

	<div id="bottom" vflex="min">
		<hbox pack="end" width="100%" spacing="5px">
			<button onClick="@command('ok')" label="OK" mold="trendy" width="75px"></button>
			<button onClick="@command('cancel')" label="Cancel" mold="trendy" width="75px"></button>
		</hbox>
	</div>

Filter by Constraint

The default constraint type is String, using Textbox component's onChanging event to perform filtering task.

Commands

• OK button
• Cancel button