Stop paging propagation on a Grid

asked 2015-07-13 14:13:09 +0800

josefsabater gravatar image josefsabater
17 4


How can I stop the propagation of a page in a grid? I tried with the following code does not work:

        grid.addEventListener("onPaging", new EventListener<PagingEvent>() {

        public void onEvent(final PagingEvent event) throws Exception {
            try {
            } catch (final WrongValueException e) {
                throw e;


In addition to the method event.stopPropagation() I tested with the following method:

Events.getRealOrigin((ForwardEvent) event).stopPropagation();

but it does not work because 'event' is the type PagingEvent not ForwardEvent.

Thank You.

delete flag offensive retag edit

6 Answers

Sort by ยป oldest newest most voted

answered 2015-07-13 14:26:35 +0800

Darksu gravatar image Darksu
1991 1 4

Hello osefsabater,

Can you describe what you want to accomplish? It might help.

Best Regards,


link publish delete flag offensive edit

answered 2015-07-14 08:02:37 +0800

josefsabater gravatar image josefsabater
17 4

Hello Darksu,

what I get is that when paging a table validation of the elements of the table is made, and if this validation is not met do not go to the next page. The validation returns an exception if it encounters an error in the validation of the elements of the table.


link publish delete flag offensive edit

answered 2015-07-14 10:58:24 +0800

Darksu gravatar image Darksu
1991 1 4

Hello osefsabater,

Some food for thought.

What if you added a separate paging component that will be used with the Grid.

At the paging component you could add your validation logic, and if it fails then you will not allow an action to be made.


Best Regards,


link publish delete flag offensive edit

answered 2015-07-16 11:24:01 +0800

orebiszek gravatar image orebiszek

thanks for help

link publish delete flag offensive edit

answered 2016-01-05 13:56:22 +0800

WilliamB gravatar image WilliamB
1609 1 6

updated 2016-01-05 14:08:37 +0800

I've the same issue, I made a custom grid and had to use paging mold so I would get the paging correctly styled, as opposite as adding it at the bottom.

I've the exact same issue as the user up there.

Is there anyway, in java component itself of my grid, to stop it? As written event.stopPropagation(); doesn't work on the listener I added...

EDIT: It seems disabling the component paging all together is not even possible : http://tracker.zkoss.org/browse/ZK-1743

link publish delete flag offensive edit



William, it's possible but you can't work with the mold. Check mine github for databasepaging listbox who works as simple as the normal listbox but you can alter it for grid and alter the paging code.

chillworld ( 2016-01-06 10:29:56 +0800 )edit

Thanks Chill, however atm I'm too far far into my component (used it on many pages) to switch... I asked our paid support and they talked about overriding the 'go' method of the paging but i can't seems to do it within the the java code of my grid component.

WilliamB ( 2016-01-06 13:26:31 +0800 )edit

answered 2016-01-06 14:41:48 +0800

WilliamB gravatar image WilliamB
1609 1 6

Asked our paid support and this is the answer I got :

"I believe that the easiest way to implement the described behavior would be to add a check to the custom grid attribute on the client side before sending the page changing event. I have attached a simple example to illustrate a possible solution.

A custom grid is created, with a "_forbidNavigation" boolean attribute. When the attribute is changed, the widget is notified by smartUpdate, to make the state available on the client side. The paging widget $class.go(...) method (called to trigger onPaging) is overridden to check if its parent (the grid) have the _forbidNavigation:true state. If not, the original method is called. If the grid _forbidNavigation widget attribute is set to true, then a custom event is sent, and can be handled on server side in an event listener. I created the event handler on the custom grid for simplicity, but in a real-world solution, it would probably be defined at composer level if using MVC."

With those files :

Zul :

        public ListModelList myModel = new ListModelList(Locale.getAvailableLocales());
        zk.afterLoad('zul.mesh', function() {
            var _xPaging = {};
            zk.override(zul.mesh.Paging.prototype.$class, _xPaging, {
                go: function (anc, pgno, inp) {
                    var wgt = zk.Widget.isInstance(anc) ? anc : zk.Widget.$(anc);
                    //if() statement to block navigation if Grid._forbidNavigation is true.
                        //apply original method
                    //If navigation forbidden, send onForbidNavigation event.
                        zAu.send(new zk.Event(wgt.parent, "onForbidNavigation", null, {toServer:true}));
        <grid id="grid" model="${myModel}" mold="paging" autopaging="true" use="local.zkoss.support.Cgi.support2736.CustomGrid"/>
            <button label="Toggle Forbid Navigation"
                onClick="grid.set_forbidNavigation(!grid.get_forbidNavigation());statusLabel.setValue(grid.get_forbidNavigation().toString())" />
            <label value="navigation forbidden: "/><label id="statusLabel"/>

Component :

 package local.zkoss.support.Cgi.support2736;

import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zul.Grid;
import org.zkoss.zul.Messagebox;

public class CustomGrid extends Grid {

    private Boolean _forbidNavigation = false;
    private Messagebox myMessagebox = new Messagebox();

    public Boolean get_forbidNavigation() {
        return _forbidNavigation;

    public void set_forbidNavigation(Boolean _forbidNavigation) {
        this._forbidNavigation = _forbidNavigation;
        //send state to widget
        smartUpdate("_forbidNavigation", _forbidNavigation);

    public void onInitRender() { 
        this.addEventListener("onForbidNavigation", new EventListener<Event>() {
            public void onEvent(Event event) throws Exception {
                myMessagebox.show("navigation forbidden");

Now I can't get this code to work by moving the CDATA code inside my component with getPagingChild().setWidgetOverride().

I need all the code to be in my component java file not in the zul.

Thanks for your help

link publish delete flag offensive edit

indeed that's easiest solution to override the javascript, pitty I'm not the expert in overriding the javascripts

chillworld ( 2016-01-06 15:34:03 +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: 2015-07-13 14:13:09 +0800

Seen: 42 times

Last updated: Jan 06 '16

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