How to update ZK Grid values from jQuery

asked 2013-05-15 11:34:15 +0800

hovanessyan gravatar image hovanessyan

updated 2013-05-15 11:38:07 +0800

I have the following case:

I have three tabs and in each tab, I have a Grid.

The data for each Grid is coming from a database, so I am using rowRenderer to populate the Grids. The following code is common for all three Grids:

<grid id="myGrid1" width="950px" sizedByContent="true" rowRenderer="com.example.renderer.MyRowRenderer">

The rows are constructed from Doublebox objects. The data is populated successfully. I need to handle a multiple-cell editing on the client side. As example let's say that the user edits first cell on the first row and the value should be propagated to all other cells on the same row. I am using jQuery to do this value propagation and it works OK.

I am passing the jQuery as follows:

doublebox.setWidgetListener(Events.ON_CHANGING, jQuerySelectors);
doublebox.setWidgetListener(Events.ON_CHANGE, jQuerySelectors);

This makes it possible to change the value in 1 cell and the change is instantly (visually) seen in all other cells filtered by jQuery selectors.

The problem is that the value is visually distributed to all the cells, but when I try to save the Grid data back to the database, the background values are the old ones. I am assuming that ZK Grid component is not aware that jQuery changed all the cell values. Nevertheless if I manually click on a cell that already has the NEW value (enter/leave/change focus) when I save the grid the NEW value is correct in that particular cell. Maybe that's a hint how can I resolve this.

Code how I extract the Grid values:

Grid tGrid = (Grid) event.getTarget().getFellow("myGrid1");
ListModel model = tGrid.getModel();
MyCustomRow tRow = (MyCustomRow)model.getElementAt(i);

The model for my Grid is a List of MyCustomRow so like:

myGrid1.setModel(new ListModelList(List<MyCustomRow> populatedList));

I have a couple of assumptions, but whatever I have tried, hasn't worked. I have in mind that jQuery events and ZK events are different and probably isolated in different contexts. (Although I have tried to fire events from jQuery and so on..)

Do you have any suggestions? As a whole is my approach correct or there's another way to do this? Thanks for your time in advance!

delete flag offensive retag edit


We can use here MVVM design but why you doing same with Jquery?

sjoshi ( 2013-08-01 11:38:11 +0800 )edit

1 Answer

Sort by ยป oldest newest most voted

answered 2013-07-31 22:48:39 +0800

chemFelix gravatar image chemFelix

I had a similar issue and solved the problem by sending the AU request telling the server about the update manually:

if (comp.$instanceof(zul.wgt.Checkbox)) {
    if (!comp.isDisabled()) {
        if (checked == undefined) {
            // toggle
            checked = !comp.isChecked();
        // fire event to update binding
        zAu.send(new zk.Event(comp, "onCheck", {
            "" : checked
        }, {

I found Firebug quite useful to learn how the AU message must look like. As a shorter alternative, you can use

comp.fire("onCheck", [{"" : checked}], {toServer:true});

of course, after minor adaption to Doublebox.

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: 2013-05-15 11:34:15 +0800

Seen: 28 times

Last updated: Jul 31 '13

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