From Documentation

Jump to: navigation, search

The implementation of a custom renderer for a Biglistbox (MatrixRenderer) is straightforward[1]:

public class DataRenderer implements org.zkoss.zkmax.zul.MatrixRenderer<List<String>> {
    public String renderCell(Component owner, List<String> data,
            int rowIndex, int colIndex) throws Exception {
        String d = data.get(colIndex);
        d = d.replace("ZK", "<span class='red' title='ZK'>ZK</span>")
                .replace("Hello", "<span class='blue' title='Hello'>Hello</span>");
        return "<div class='images_" + (colIndex%28) + "' title='x=" +
        colIndex + ",y=" + rowIndex + "'>" + d + "</div>";
    public String renderHeader(Component owner, List<String> data,
            int rowIndex, int colIndex) throws Exception {
        return "<div class='images_" + (colIndex % 28) + "' title='"
                + images[colIndex % 28] + "'>" + data.get(colIndex)
                + "</div>";

Then, if we have a list model (MatrixModel) called data, and an instance of a custom renderer called dataRenderer, then we can put them together in a ZUML document as follows:

<biglistbox model="${data}" matrixRenderer="${dataRenderer}"/>

  1. For the concept about component, model and renderer, please refer to the Model-driven Display section.

Version History

Last Update : 2012/4/5

Version Date Content
6.0.1 March 2012 Biglistbox was introduced.

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.

You got stuck here?
Let us know how we can improve this page
For specific questions please use the forum