Using MVVM to dynamically create listbox

asked 2015-08-18 00:47:50 +0800

Joluamsa gravatar image Joluamsa
3 1

updated 2015-08-18 00:48:20 +0800

Hi guys, I'm moving this to a discussion panel, I'm a stranger to MVVM and as it was pointed out to me is the way to create dynamically a listbox in ZK, I'm not only needing to add rows as I can with MVC, I'm also needing to create the columns in the listbox from my database, anyone knows how to do this and have the kindness give me a hand setting up? What do I need to add to my project so I can use this and where, and more importantly how am I coding this?

Hope you can help me, Gladly appreciate it

delete flag offensive retag edit

2 Answers

Sort by ยป oldest newest most voted

answered 2015-08-18 01:17:13 +0800

MDuchemin gravatar image MDuchemin
1336 1 4
ZK Team

updated 2015-08-18 01:22:36 +0800

Hi Joluamsa,

If you are going to use more than one column, I would recommend that you take a look at the grid component, as it might be more suitable for your needs, and is easier to handle.

In MVVM, you have 2 different notions: Model (server side) : ListModelList (for example, can be other types like TreeModel depending on your needs) Component (client side) : grid, listbox, etc.

What you need to do is to bind the values of the Model to the component (using @bind, @load, ...) and update your model. If the model updates, and is properly bind, your row will be added to the component (display) edit : you also need to use the @NotifyChange annotation send updates to the view from your viewmodel.

As for the rendering(columns, and what to put inside), you can either create a template (in the zul file) or a custom renderer (on the viewmodel side) If you are starting and just want to show values in a list/grid, I would recommend the template option.

You will find details about these here : http://books.zkoss.org/zk-mvvm-book/8.0/introductionofmvvm.html I recommend that you take a look at the whole book if you are not familiar with MVVM.

link publish delete flag offensive edit

answered 2015-08-24 15:11:23 +0800

cyiannoulis gravatar image cyiannoulis
1191 10

You have to familiarize yourself with the MVVM but since you have already an MVC background, the MVVM will be a piece of cake. Anyway, here is a small example on how to create a grid with dynamic number of columns using MVVM.

I suppose that first you will need a simple configuration bean representing the configuration parameters for each column:

public class ColumnConf {

    private String label;
    private String width;

    public String getLabel() {
        return label;
    public void setLabel(String label) {
        this.label = label;
    public String getWidth() {
        return width;
    public void setWidth(String width) {
        this.width = width;

    public ColumnConf(String label, String width) {
        this.label = label;
        this.width = width;

Now lets go into the ViewModel of your page and add some code inside the @init method: (that is the one that will be executed when page is loaded)

public class DynamicGridColumnsVM {

    private List<ColumnConf> columns;

    public void init() {        
        columns = new ArrayList<ColumnConf>();

        ColumnConf c = new ColumnConf("Status", "45px");
        c = new ColumnConf("Ref", "80px");
        c = new ColumnConf("Question", null);

        return columns;

    public List<ColumnConf> getColumns() {
        return columns;


As you see we create a simple collection of column configuration beans. In your case the @init method should fetch these configuration objects from the database.

And now the final step which is our page:

<window border="none" height="100%" width="100%"
        viewModel="@id('vm') @init('test.DynamicGridColumnsVM')">

<grid vflex="true">

   <columns children="@load(vm.columns)">
      <template name="children" var="col">
          <column label="@load(col.label)" width="@load(col.width)" />



That's all! Now you have a grid (the same can be done with a listbox) which renders columns dynamically from a list of column configurations. Of course i have omitted the rows template but this is something that you can find easily in ZK demo samples.

Hope that helps.


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

1 follower



Asked: 2015-08-18 00:47:50 +0800

Seen: 60 times

Last updated: Aug 24 '15

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