How do I create a grid of div using a model

asked 2015-08-13 22:34:19 +0800

michaelh gravatar image michaelh
27 1


I've been task with trying to implement a page that displays a group of articles on a given topic. The number of articles may vary for a given topic. The group of articles are to be displayed in a grid fashion (not a grid component) that utilizes a bootstrap grid implementation in order to keep is responsive for mobile views. For a mobile view, the each box/article would be stacked vertically, one under the other.

Each article is a box on a page, that has own color, displays the type of content, the title, and author. For a desktop view, there will be 3 boxes per row and a new row created for every 3 articles. Here's a example layout.

 +--------+        +---------+     +--------+
 | title  |        |  title  |     |  title |
 |        |        |         |     |        |
 +--------+        +---------+     +--------+
 +--------+        +---------+     +--------+
 |  title |        |  title  |     |  title |
 |        |        |         |     |        |
 +--------+        +---------+     +--------+
 |  title | 
 |        | 

How can I best implement this in a zul to enable the web designer to customize style instead of implementing this completely in a view model. I believe I can utilize templates to customize each box by content type but I can't seem figure out how to implement in a way a new row create after every 3rd item. I can't use an if attribute based on a each index value as the children of the row wouldn't get created. Is there a way for a forEach to skip every 3 in the index?

Any ideas?

delete flag offensive retag edit

3 Replies

Sort by ยป oldest newest

answered 2015-08-14 14:22:34 +0800

cyiannoulis gravatar image cyiannoulis
1191 10

updated 2015-08-14 14:26:05 +0800

I think a solution in your case is to use the bootstrap grid system directly inside your zul page. The following snippet would give you a hint:

<?style href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" ?>
<window border="none" height="100%" width="100%" apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('test.IndexVM')">

    .first-article-in-row {
        font-weight: bold; color: #990000;

    .normal-article {
        color: #007A29;

<div sclass="container">
 <div children="@load(vm.articles) 
    @template(forEachStatus.index % 3 eq 0 ? 'row-template' : 'cell-template')">

   <template name="row-template">                   
      <div sclass="row" />
      <div sclass="col-sm-4 first-article-in-row">
          <label value="@load(each.referenceNo)" />
          <label value="@load(each.name)" style="font-weight: bold; color: grey;"/>

   <template name="cell-template">              
      <div sclass="col-sm-4 normal-article">
          <label value="@load(each.referenceNo)"  />
          <label value="@load(each.name)" style="font-weight: bold;" />


In this example we render three articles per row. We use the children pattern to populate a div with data from the view model. The trick is that we use two dynamic templates depending on the index of each element in the list:

@template(forEachStatus.index % 3 eq 0 ? 'row-template' : 'cell-template')

So, every three elements the system will render a new row. If you try this example with some data you should see a responsive page like this: image description image description

Hope that helps


link publish delete flag offensive edit

answered 2015-08-18 15:10:16 +0800

michaelh gravatar image michaelh
27 1

Just wanted to follow up and tell you that your solution worked perfectly for us. Thank you!

link publish delete flag offensive edit

answered 2015-08-18 16:14:40 +0800

cyiannoulis gravatar image cyiannoulis
1191 10

I am glad to hear. Happy coding!


link publish delete flag offensive edit
Your reply
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-13 22:34:19 +0800

Seen: 47 times

Last updated: Aug 18 '15

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