0

ZK List Box with Dynamic Template

asked 2014-05-26 08:49:24 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2623 3 8
http://emrpms.blogspot.in...

updated 2014-05-26 09:09:03 +0800

Hello

I have been using Dynamic template in list box as shown in this example

The problem is, my first template has different number of columns and second template has different number of columns. For the template, i need to show the footer (List Foot). So i include the Listfoot inside the template, it shows the error.

So what is the solution, how we can specify different columns and footers for each template ?

I think definition of column and footers should also be inside the template

delete flag offensive retag edit

5 Answers

Sort by ยป oldest newest most voted
1

answered 2014-05-26 11:16:58 +0800

vincentjian gravatar image vincentjian
2245 6

Hi Senthil,

You can use children binding for Listhead and Listfoot. Please check the sample on zkfiddle.

link publish delete flag offensive edit
0

answered 2014-05-26 09:33:12 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2623 3 8
http://emrpms.blogspot.in...

Simple requirment. In the screen , we have given Layout1, Layout2 as option. On Clicking Layout1, we just need 5 columns with footers and on clicking Layout2, we need 10 columns with footers. The Modal has all 15 columns, same table, etc.

link publish delete flag offensive edit

Comments

was just playing myself with the template tag in header and footer. It's not that great as I thought it should be. Maybe 2 listboxes with the if attribute http://books.zkoss.org/wiki/ZKDeveloper%27sGuide/FundamentalZK/ZKUserInterfaceMarkupLanguage/ZKAttributes#TheifAttribute

chillworld ( 2014-05-26 10:12:41 +0800 )edit
0

answered 2014-05-26 11:04:42 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

updated 2014-05-27 17:53:45 +0800

Hi Senthil,

thanks to Robert from Pottix. He have post a ZKFiddle example here: [http://zkfiddle.org/sample/2bnblo2/2-children-binding-with-dummy-item-and-template]

you can change the line:

'<'div children="@load('1') @template('simple')" >

to

'<'div children="@load('1') @template(vm.type)">

and get the needed template from your viewModel. Tested and runs well.

best Stephan

PS: updated. Must be @load instead of @init.

link publish delete flag offensive edit
0

answered 2014-05-26 23:32:54 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2623 3 8
http://emrpms.blogspot.in...

updated 2014-05-27 08:56:39 +0800

cor3000 gravatar image cor3000
6280 2 7

Hi Stephan.

It does not work. Here is the code

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
<window id="listboxdynamic" border="none"
    apply="org.zkoss.bind.BindComposer"
    viewModel="@id('vm') @init('com.product.webapp.examples.ListBoxDynamicVM')">
    <custom-attributes listenKeys="willlistenforKeys" />
    <separator />
    <button label="Template 1" onClick="@command('onTemplate',type='simple')"></button>
    <space></space>
    <button label="Template 2" onClick="@command('onTemplate',type='simple2')"></button>
    <space></space>
    <button label="Template 3" onClick="@command('onTemplate',type='simple3')"></button>
    <space></space>
    <separator></separator>
    <div children="@init('1') @template(vm.templatetype)">
        <template name="simple">
            <listbox id="" mold="paging"
                model="@load(vm.persons)">
                <listhead sizable="true">
                    <listheader label="First Name" />
                    <listheader label="Last Name" />
                </listhead>
                <template name="model" var="p1">
                    <listitem>
                        <listcell label="@load(p1.firstName)" />
                        <listcell label="@load(p1.lastName)" />
                    </listitem>
                </template>
            </listbox>
        </template>
        <template name="simple2">
            <listbox id="" mold="paging"
                model="@load(vm.persons)">
                <listhead sizable="true">
                    <listheader label="First Name" />
                    <listheader label="Last Name" />
                    <listheader label="Address1" />
                </listhead>
                <template name="model" var="p1">
                    <listitem>
                        <listcell label="@load(p1.firstName)" />
                        <listcell label="@load(p1.lastName)" />
                        <listcell label="@load(p1.address1)" />
                    </listitem>
                </template>
            </listbox>
        </template>

        <template name="simple3">3333</template>
    </div>
</window>

</zk>

View Model

package com.product.webapp.examples;

import java.util.ArrayList;
import java.util.List;

import org.zkoss.bind.annotation.AfterCompose;
import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.select.Selectors;
import org.zkoss.zul.Messagebox;

public class ListBoxDynamicVM {

    private String templatetype;
    private List<Person> persons;

    public List<Person> getPersons() {
        return persons;
    }

    public void setPersons(List<Person> persons) {
        this.persons = persons;
    }

    public String getTemplatetype() {
        return templatetype;
    }

    public void setTemplatetype(String templatetype) {
        this.templatetype = templatetype;
    }

    @AfterCompose
    public void initSetup(@ContextParam(ContextType.VIEW) Component view) {
        Selectors.wireComponents(view, this, false);

        System.out.println("starting creating list");
        persons = new ArrayList<Person>();
        for (int i = 0; i < 10; i++) {
            persons.add(new Person("firstname_" + i, "lastname_" + i,
                    "address_" + i, "city_" + i));
        }

        this.templatetype = "simple";
    }

    @NotifyChange("templatetype")
    @Command
    public void onTemplate(@BindingParam("type") String type) {

        this.templatetype = type;
        Messagebox.show(" " + templatetype);
    }

    public static class Person {
        private String firstName;
        private String lastName;
        private String address1;
        private String city;

        public Person(String firstName, String lastName, String address1,
                String city) {
            this.firstName = firstName;
            this.lastName = lastName;
            this.address1 = address1;
            this.city = city;

        }

        public String getFirstName() {
            return firstName;
        }

        public void setFirstName(String firstName) {
            this.firstName = firstName;
        }

        public String getLastName() {
            return lastName;
        }

        public void setLastName(String lastName) {
            this.lastName = lastName;
        }

        public String getAddress1() {
            return address1;
        }

        public void setAddress1(String address1) {
            this.address1 = address1;
        }

        public String getCity() {
            return city;
        }

        public void setCity(String city) {
            this.city = city;
        }

    }
}
link publish delete flag offensive edit
0

answered 2014-05-27 00:05:12 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2623 3 8
http://emrpms.blogspot.in...

Sorry it works.

> Here is the example code

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

Follow
1 follower

RSS

Stats

Asked: 2014-05-26 08:49:24 +0800

Seen: 142 times

Last updated: May 27 '14

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