checkbox menu filter

asked 2015-02-03 13:45:35 +0800

anetkia102 gravatar image anetkia102
21 1


Let's say I have a code in ZUL from data_filter example available in DEMOs on ZK Framework site (pasted below). Instead of textbox for filtering a category, I would like to have a checkbox menu, checked options will be used for filtering. Any ideas how to achieve this?

div apply="org.zkoss.bind.BindComposer" 
    viewModel="@id('vm') @init('demo.grid.data_filter.FilterViewModel')">
    <style src="/widgets/grid/data_filter/style.css" />
    <grid model="@load(vm.foodModel2)">
        <auxhead sclass="category-center">
            <auxheader label="Healthy Food List - test commit mm and now me and again from me! - are we going to test a merge?" colspan="6" />
        <auxhead sclass="category-center">
            <auxheader colspan="1">
                <image src="/widgets/grid/data_filter/img/funnel.png" />
                <textbox menupopup="auto" instant="true" width="100px"  
                    value="@bind(vm.foodFilter.category)" onChange="@command('changeFilter')" />
            <auxheader colspan="1">
                <image src="/widgets/grid/data_filter/img/funnel.png" />
                <textbox instant="true"  width="100px"
                    value="@bind(vm.foodFilter.name)" onChange="@command('changeFilter')"/>
            <auxheader colspan="1">
                <image src="/widgets/grid/data_filter/img/funnel.png" />
                <textbox instant="true" width="100px" 
                    value="@bind(vm.foodFilter.nutrients)" onChange="@command('changeFilter')"/>
            <auxheader label="Detail Data of Foods" colspan="3" />
            <column hflex="2">Category</column>
            <column hflex="2">Name</column>
            <column hflex="2">Top Nutrients</column>
            <column hflex="1">% of Daily</column>
            <column hflex="1">Calories</column>
            <column hflex="2">Quantity</column>
        <template name="model">
                <label value="@load(each.category)" />
                <label value="@load(each.name)" />
                <label value="@load(each.topNutrients)" />
                <label value="@load(each.dailyPercent)" />
                <label value="@load(each.calories)" />
                <label value="@load(each.quantity)" />
            <footer span="6" class="footer_right" label="@load(vm.footer)" />
delete flag offensive retag edit


Thank you for the answer. Although this is not exactly what I ment - what I was trying to say is: Instead of textbox I need a menu, filled with all categories from Grid. Next to each category there will be a checkbox. Additionally there will be 'check all' checkbox. When user selects one or more che

anetkia102 ( 2015-02-04 09:16:54 +0800 )edit

1 Answer

Sort by ยป oldest newest most voted

answered 2015-02-03 14:21:55 +0800

chillworld gravatar image chillworld flag of Belgium
5322 4 9

updated 2015-02-03 14:22:11 +0800

It's not so different. In stead of using

<textbox instant="true"  width="100px" value="@bind(vm.foodFilter.name)" onChange="@command('changeFilter')"/>

use :

<checkbox checked="@bind(vm.foodFilter.name)" onChange="@command('changeFilter')"/>

Of course name should be a boolean or Boolean in the filter class.

Greetz chill.

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools




Asked: 2015-02-03 13:45:35 +0800

Seen: 16 times

Last updated: Feb 03 '15

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More