How do I use css classes for a behaviour like the list_group example

asked 2015-01-23 12:51:35 +0800

Alcardis gravatar image Alcardis
1 1

updated 2015-01-24 16:29:51 +0800

Hi there!

I'am fairly new to web developement and I'am struggeling with a project of mine that works exactly like the example: [zkdemo/listbox/list_group] which i can't post as a link cause I'dont have enough karma

The only thing i can't get to work is the mechanic to expand and collapse the Listitems of a group.

I tried the developer tool (F12) of FireFox to look at the Code. With that I found out that the Listitems use css classes like z-listcell, z-listgroup-inner etc. But there is my problem i nearly don't know anything about the css stuff and i haven't found a documentation yet. Does anyone know how I can implement the arrow icon and the expand and collaps feature?

I only have basic css knowledg so I might need some hints ;)

The Renderer:

public class FeatureListGroupRenderer implements ListitemRenderer<Object>{

public void render(Listitem item, Object data, int index) throws Exception {
    if(item instanceof Listgroup) {
        FeatureGroupsModel.FeatureGroupInfo groupinfo = (FeatureGroupsModel.FeatureGroupInfo) data;
        Feature feature = groupinfo.getFirstChild();
        String groupTxt;
            case 0:
                groupTxt = feature.getCategory();
            case 1:
                groupTxt = feature.getName();
            case 2:
                groupTxt = feature.getDescription();
                groupTxt = feature.getCategory();
        Listcell cell = new Listcell(groupTxt);
        cell.setClass("z-listcell z-listgroup-inner");
       // item.setStyle("padding-left:20px");

        item.setClass("z-listgroup open-true");
        //item.setAttribute("onOpen", ((Listgroup) item).isOpen());

    } else if (item instanceof Listgroupfoot) {
        Listcell cell = new Listcell();
        cell.appendChild(new Label(" Groupesize: " + data));
    } else {
        Feature feature = (Feature) data;
        item.appendChild(new Listcell(feature.getName()));
        item.appendChild(new Listcell(feature.getDescription()));


The ZUL snippet:

 <div height="165px">
                                    <listbox model="@load(vm.featureGroupsModel)" checkmark="true" onSelect="@command('selectGroup', data=event.reference.value)"
                                             emptyMessage="Keine Daten gefunden." itemRenderer="de.fhdo.model.FeatureListGroupRenderer" multiple="true">
                                             <custom-attributes org.zkoss.zul.listbox.groupSelect="true" />
                                            <listheader hflex="1"/>
                                            <listheader hflex="1"/>
                                        <auxheader style="line-height: 10px; background: linear-gradient(to bottom, #d6f9ff 0%, #9ee8fa 100%);" colspan="2" label="Features"/>
                                    <template name="featuresModel">
                                        <listcell label="@bind(each)">

Codesnippet from the VM:


public void init(@ContextParam(ContextType.VIEW) Component view) {
    Selectors.wireComponents(view, this, false);    

    featureTypesList = new ListModelList<>();

    List<Feature> subfeatures = new ArrayList<>();

    for(Domainvalue feature : features)
        List<Domainvalue> dvs = null;

            dvs = createSubfeaturesFromDomainvalue(feature);
        catch(Exception e) { System.out.println(e.getMessage());}

        if(dvs != null)
            for(Domainvalue dv : dvs)
                subfeatures.add(new Feature(feature.getDomainDisplay(), dv.getDomainDisplay(), dv.getDomainCode()));
    Object[] array = subfeatures.toArray();

    Feature[] featureArray = new Feature[array.length];
    int index = 0;

    for(Object o : array)
        if(o instanceof Feature)
            featureArray[index] = (Feature)o;

    featureGroupsModel = new FeatureGroupsModel(featureArray, new FeatureComparator());

public void selectGroup(@BindingParam("data") Object data) {
    if(data instanceof FeatureGroupsModel.FeatureGroupInfo)
        FeatureGroupsModel.FeatureGroupInfo groupinfo = (FeatureGroupsModel.FeatureGroupInfo) data;
        int groupIndex = groupinfo.getGroupIndex();
        int childCount = featureGroupsModel.getChildCount(groupIndex);
        boolean added = featureGroupsModel.isSelected(groupinfo);
        for(int childIndex = 0; childIndex < childCount; childIndex++) {
            Feature feature = featureGroupsModel.getChild(groupIndex, childIndex);
            if(added) {
            } else {

GroupModel Class

public class FeatureGroupsModel extends GroupsModelArray<Feature, FeatureGroupsModel.FeatureGroupInfo, Object, Object>{

public FeatureGroupsModel(Feature[] data, Comparator<Feature> cmpr) {
    super(data, cmpr);

protected FeatureGroupInfo createGroupHead(Feature[] groupdata, int index, int col){
    return new FeatureGroupInfo(groupdata[0], index, col);

protected Object createGroupFoot(Feature[] groupdata, int index, int col)
    return groupdata.length;

public static class FeatureGroupInfo {
    private Feature firstChild;
    private int groupIndex;
    private int colIndex;

    public FeatureGroupInfo(Feature firstChild, int groupIndex, int colIndex) {
        this.firstChild = firstChild;
        this.groupIndex = groupIndex;
        this.colIndex = colIndex;

    public Feature getFirstChild() {
        return firstChild;
    public int getGroupIndex() {
        return groupIndex;
    public int getColIndex() {
        return colIndex;


delete flag offensive retag edit


The expand button normally show's when you implemented it correctly. You don't need to know css for this. Edit your question and show your code or try to make a working fiddle with your code. Then we can adjust your code.

chillworld ( 2015-01-24 13:19:03 +0800 )edit

Don't forget the demo clearly say it need ZK PE or EE.

chillworld ( 2015-01-24 13:20:49 +0800 )edit

I overlooked that the EE is needed for that feature. You could just load the example without EE and see that it dosent have the collapse and expand function. I already changed my aproach, I switched from MVVM to MVC and use a tree which works like i want it to.

Alcardis ( 2015-01-24 14:41:59 +0800 )edit

But if it's possible to get the expand/collapse to work without the EE i would still be intrestet for future projects I'll start putting the code in the question.

Alcardis ( 2015-01-24 14:43:21 +0800 )edit

is your model a groupsmodel? (AbstractGroupsModel, SimpleGroupsModel or ArrayGroupsModel)

chillworld ( 2015-01-24 15:47:13 +0800 )edit
Be the first one to answer this question!
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-01-23 12:51:35 +0800

Seen: 15 times

Last updated: Jan 24 '15

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