ZK Grid model

asked 2014-06-25 15:54:18 +0800

gsanmartin gravatar image gsanmartin
25 5

updated 2014-06-25 15:54:31 +0800

I am trying to optimize the performance on my Grid by setting a model instead of using a forEach (according to the docs it's faster that way). The problem is using



Sets each element in the listmodel as a row (as expected), but given this is a grid (like a table, with rows and cols), I don't know how to represent column elements contained within my ListModel Objects. I have used a custom RowRenderer that goes through each row and then creates each Cell programmatically, setting styles also programmatically, but I feel this is an awkward way and I would like to benefit of using declarative ZUL files and set styles a-la HTML instead of programmatically.

How would you bind a model to a grid to achieve such behavior?

delete flag offensive retag edit

4 Answers

Sort by ยป oldest newest most voted

answered 2014-07-02 15:41:16 +0800

cyiannoulis gravatar image cyiannoulis
1191 10

updated 2014-07-02 15:54:16 +0800

I have prepared a small MVVM solution. You may find the whole code here.

As you can see in the zul below i am using a template inside a template. It is really simple and fast:

<?page contentType="text/html;charset=UTF-8"?>
<window title="Workers" border="normal" width="100%" height="100%"
        viewModel="@id('vm') @init('snippets.workers.WorkersVM')"

        <separator width="200px"></separator>
        <hlayout children="@load(vm.monthDays)">
            <template name="children" var="day">
                <textbox value="@load(day)" readonly="true" 
                    inplace="true" width="20px" />
                <separator width="2px" />

    <grid model="@load(vm.workers)">

        <template name="model" var="worker" status="record">
                <cell width="50px">
                    <label value="@load(record.index)" />
                <cell width="150px">
                    <label value="@load(worker.name)" />
                    <hlayout children="@load(worker.workdays)">
                        <template name="children" var="workday">
                            <textbox value="@load(workday.type)" readonly="true" 
                                inplace="true" width="20px" />
                            <separator width="2px" />


If you run this you should see something like this: image description

Hope that helps


link publish delete flag offensive edit


Thanks, that is what I want to achieve, although Im using the MVC pattern. I guess I'll switch to MVVM, it seems simpler that way.

gsanmartin ( 2014-07-02 18:44:51 +0800 )edit

answered 2014-06-26 11:14:58 +0800

kolodz gravatar image kolodz

Same here, did see big problem of performance on grid. I did approach by putting all as static and not using RowRenderer... How your performances changed ? In my case, I did pass to 5 sec loading to less 0.5 sec for a grid 81*27 but 25k lines of code of getter/setter...

link publish delete flag offensive edit


About the same, I switched to model & rowrenderer and now it works smoothly

gsanmartin ( 2014-06-27 10:53:16 +0800 )edit

How did you do i? the problem here is that each row has 31 columns for me, so I have to fill up those columns manually via Java on the RowRenderer... Can you point me to a better solution?

gsanmartin ( 2014-06-27 11:04:05 +0800 )edit

Honestly, my solution with way worst. I did all my row/cell static accessing a specifique properties for each row/cell (it's why i have so many get/set)

kolodz ( 2014-06-27 11:20:49 +0800 )edit

answered 2014-06-27 10:25:21 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16

use paging!

@gsanmartin How many rows do you will create/load?

link publish delete flag offensive edit


around 30 rows & 31 columns. I can't use paging, it's a calendar we're talking about here

gsanmartin ( 2014-06-27 10:44:58 +0800 )edit

anyway my question was as to how to set RowRenderer to render from a zul or something instead of having to set CSS properties, events and such through Java codes

gsanmartin ( 2014-06-27 10:57:11 +0800 )edit

answered 2014-06-27 13:48:18 +0800

cyiannoulis gravatar image cyiannoulis
1191 10

Using the iterative renderer maybe?

link publish delete flag offensive edit


That would be a perfect solution -- problem is, I have a variable number of objects to be shown in columns (i.e. an ArrayList) so I need to iterate from inside the <template> bit. Do you know if this is possible?

gsanmartin ( 2014-06-27 16:26:57 +0800 )edit

You mean you need to render a collection of objects indside each column? Then maybe you may use a "children" template inside the grid's template. Can you provide a data sample?

cyiannoulis ( 2014-06-27 19:55:31 +0800 )edit

can you embed a template within a template?

I can't provide real data right now, but here's a quick sample that's similar to the data I want to represent: http://pastebin.com/7JNbcXYF Basically it's a month plan where you assign your workers to work shifts.

gsanmartin ( 2014-06-27 22:21:51 +0800 )edit

So I'll have my Workers list object where I store my Worker objects (this is the object I bind to the grid and the template tag), and whithin these Worker objects there's a list of Activity objects storing the shifts for that worker on each particular day.

gsanmartin ( 2014-06-27 22:24:30 +0800 )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: 2014-06-25 15:54:18 +0800

Seen: 37 times

Last updated: Jul 02 '14

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