Display data from database on a rendered Grid

asked 2020-01-10 00:15:14 +0800

pablo123 gravatar image pablo123
35 2

Hi! I'm new in ZK and im trying to learn by myself, so my knolwedge is quite basic, also in java.

I need to display the data from my database at the time I open the web page. Im working in a simple Grid using render (I don't know how should I call it properly).

I have the database working already, tested doing a query in the main. All I need to know is how to bind the data to my project. What do I need, how should I start, which classes do the work?

Thank you!!


<div apply="main.java.grid.dynamic_renderer.ClienteRenderController">   
<grid model="${$composer.clientes}" 
    mold="paging" pageSize="10">
    <auxhead sclass="category-center">
       <auxheader colspan="6" rowspan="1">
            <image src="/img/logo.jpg" width="100%" height="220px" />
    <columns menupopup = "auto-keep">
        <column width="6%" label="ID"/> 
        <column sort="auto(cliente)" tooltiptext="Ordenar" label="Clientes"/>
        <column sort="auto(fecha)" tooltiptext="Ordenar" label="Fecha"/>
        <column sort="auto(importe)" tooltiptext="Ordenar" width="10%" label="Importe"/>
        <column sort="auto(condiciones)" tooltiptext="Ordenar" label="Condiciones"/>
        <column sort="auto(metodo_pago)" tooltiptext="Ordenar" label="Método de pago"/>


public class ClienteRender implements RowRenderer<Cliente>{

public void render(Row row, Cliente data, int index) { 

    row.appendChild(new Label(Integer.toString(index)));
    row.appendChild(new Label(data.getCliente()));
    row.appendChild(new Label(data.getFecha()));
    row.appendChild(new Label(data.getImporte()));
    row.appendChild(new Label(data.getCondiciones()));
    row.appendChild(new Label(data.getMetodo_pago()));


public class ClienteRenderController extends SelectorComposer<Component>{

private static final long serialVersionUID = 1L;

private final ListModel<Cliente> clientes = new ListModelList<Cliente>(new ClienteData().getClientes());

public ListModel<Cliente> getClientes() {
    return clientes;
delete flag offensive retag edit

1 Answer

Sort by » oldest newest most voted

answered 2020-01-10 12:48:29 +0800

MDuchemin gravatar image MDuchemin
2480 1 6
ZK Team

Hi Pablo123,

Welcome to the forum :)

I haven't ran your code, but it looks like a solid first attempt. Do you encounter any specific issue at the moment?

I can see that you are already using ListModel / ListModelList for your model data, which is a good choice. ListModels will automatically update the view if you add or remove entries in the list, so it's pretty easy to update the content after user operations.

I also see that you are using a renderer to generate each row. Also good and standard. If you prefer the zul notation to java code, you could consider using a template instead. It's mostly the same, with a different syntax though :D For each entry in your ListModel, the grid will use the renderer or the template to generate a row (and fill in variables as you declared).

As for "how to bind the data", it looks to me that you have already done everything necessary? Assuming that new ClienteData().getClientes() returns your dataset, then it should be used by the grid based on what I read here.

A good thing to know if you want to do a more complicated ListModel init is that Composers have a overridable doAfterCompose() method, which is called when the components have been created, but before the page is rendered. It's a good place to do any data operation, such as retrieving database content, filling ListModels or updating the page properties.

Hope that helps :) Let me know if you'd like a more in-depth look into specific part of that grid loading from DB ;)

PS: there is also a bunch of resources available in the documentations. If you have already read the getting started guides, then you will find more info in the developer reference here.

link publish delete flag offensive edit


As a side note, you are assigning the model to the grid using $composer in zul. A more efficient way would be to use @Bind annotation in composer to have access to the grid component in your composer. From there, you can do myGrid.setModel(myModel) in java code directly.

MDuchemin ( 2020-01-10 18:29:45 +0800 )edit

This said, if you like the databinding notation, you could read-up on MVVM pattern for ZK. (You are using a composer, which is typically and MVC pattern tool). Both MVC and MVVM have valid use cases. I like MVVM slightly more for the model / view separation, but that's personal tastes.

MDuchemin ( 2020-01-10 18:32:18 +0800 )edit

Thank you for your response. I managed to get the grid working with my database. Now I'm encountering problems with the functionalities of the grid (like sorting, editing in row, etc). I searched a bit and considering your words I'll take a look at the Model thing you mentioned. Thank you so much :D

pablo123 ( 2020-01-11 00:22:51 +0800 )edit

just noticed an error in my previous comment "use @Bind annotation in composer to have access to the grid component in your composer" should have been @Wire annotation

MDuchemin ( 2022-10-12 16:40:58 +0800 )edit

how are things going on your side? did you get the sorting and other features you wanted going? :)

MDuchemin ( 2022-10-12 16:41:32 +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

1 follower



Asked: 2020-01-10 00:15:14 +0800

Seen: 23 times

Last updated: Sep 29 '22

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