checkbox menu filter

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

anetkia102
21 ● 1

Hello,

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>
        <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>
            <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>
            <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>
            <auxheader label="Detail Data of Foods" colspan="3" />
        </auxhead>
        <columns>
            <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>
        </columns>
        <template name="model">
            <row>
                <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)" />
            </row>
        </template>
        <foot>
            <footer span="6" class="footer_right" label="@load(vm.footer)" />
        </foot>
    </grid>
</div>