Display data from database on a rendered Grid

Question

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

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!!

ZUL:

<div apply="main.java.grid.dynamic_renderer.ClienteRenderController">   
<grid model="${$composer.clientes}" 
    rowRenderer="main.java.grid.dynamic_renderer.ClienteRender"
    mold="paging" pageSize="10">
    <auxhead sclass="category-center">
       <auxheader colspan="6" rowspan="1">
            <image src="/img/logo.jpg" width="100%" height="220px" />
       </auxheader>
    </auxhead>  
    <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"/>
    </columns>      
</grid>

ClienteRender.java

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()));
}

ClienteRenderController

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;
}

Answer 1

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

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.

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

CORE FRAMEWORK

FEATURED COMPONENTS

TOOLS

EXPLORE ZK

RESOURCES

LEARN ZK

RESOURCES

GET HELP

RESOURCES

MORE ABOUT ZK

MORE ABOUT ZK

Display data from database on a rendered Grid

1 Answer

Comments

Question tools

Stats

Related questions