<zk>
    <library-property>
        <name>org.zkoss.zul.nativebar</name>
        <value>true</value>
    </library-property>
</zk>

<?meta http-equiv="X-UA-Compatible" content="IE=edge"?>

<div width="100%" height="100%"
    apply="org.zkoss.bind.BindComposer"
    viewModel="@id('vm') @init('pkg$.TestViewModel')">
    <listbox
        model="@init(vm.rows)"
        mold="paging" pageSize="25"
        sizedByContent="true"
        span="true" hflex="1" vflex="1">
        <custom-attributes org.zkoss.zul.listbox.autohidePaging="false" />

        <listhead 
            children="@load(vm.headers)"
            sizable="true">
            <template name="children" var="columnHeader">
                <listheader hflex="min">
                    <label value="@load(columnHeader)"
                           style="white-space: nowrap;" />
                </listheader>
            </template>
        </listhead>

        <template name="model" var="row">
            <listitem children="@load(row.columns)">
                <template name="children">
                    <listcell label="@load(each)" />
                </template>
            </listitem>
        </template>             
    </listbox>

    <grid 
        model="@init(vm.rows)"
        mold="paging" pageSize="25"
        sizedByContent="true"
        span="true" hflex="1" vflex="1">
        <columns 
            children="@load(vm.headers)" 
            sizable="true">
            <template name="children" var="columnHeader">
                <column hflex="min">
                    <label value="@load(columnHeader)" 
                        style="white-space: nowrap;" />
                </column> 
            </template>
        </columns>
        <rows>
            <template name="model" var="row">
                <row children="@load(row.columns)">
                    <template name="children">
                        <cell><label value="@load(each)"/></cell>
                    </template>
                </row>
            </template>
        </rows>
    </grid>
</div>

package pkg$;

import java.util.ArrayList;
import java.util.List;

import org.zkoss.bind.annotation.Init;

public class TestViewModel {

    private final List<Row> rows = new ArrayList<Row>();

    @Init
    public void init() {
        for (int i = 0; i < 5 * 25; i++) {
            this.rows.add(new Row());
        }
    }

    public List<Row> getRows() {
        return this.rows;
    }

    public List<String> getHeaders() {
        final List<String> headers = new ArrayList<String>();
        for (int i = 1; i < 11; i++) {
            headers.add("Extra long column header label " + i);
        }
        return headers;
    }

    public class Row {

        private final List<String> columns = new ArrayList<String>();;

        public Row() {
            for (int i = 1; i < 11; i++) {
                this.columns.add("Column " + i);
            }
        }

        public List<String> getColumns() {
            return this.columns;
        }
    }
}

<script><![CDATA[
if (zk.ie9_) {
    zk.afterLoad('zul.mesh', function() {
        var _mesh = {};
        zk.override(zul.mesh.MeshWidget.prototype, _mesh, {
            _onScrollPos: function() {
                if (this.ebody) {
                    this._left = this.ebody.scrollLeft;
                    this._top = this.ebody.scrollTop;
                }
                _mesh._onScrollPos.apply(this, arguments);
            },
            onAfterSize: function() {
                _mesh.onAfterSize.apply(this, arguments);
                var wgt = this;
                setTimeout(function() {
                    if (wgt.ebody) {
                        wgt.ebody.scrollLeft = wgt._left || 0;
                        wgt.ebody.scrollTop = wgt._top || 0;
                    }
                    if (wgt.ehead)
                        wgt.ehead.scrollLeft = wgt._left || 0;
                    if (wgt.efoot)
                        wgt.efoot.scrollLeft = wgt._left || 0;
                }, 300);
            }
        });
    });
}]]></script>