You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Jeffrey Schneller <je...@envisa.com> on 2012/03/12 17:41:46 UTC

Grouped ListView

I am looking to create a grouped listview where each group only contains a specific number of items.  For example: I have a list of 5 items and I want each group to have 3 items in it.  I would expect the html to look something like the following:

<div id="list">
                <div class="group">
                                <div class="item">
                                <div class="item">
                                <div class="item">
                </div>
                <div class="group">
                                <div class="item">
                                <div class="item">
                </div>
</div>

Any ideas on how this can be done?  I obviously can use a listview and get the entire list displayed without the grouping but I need to add the grouping.  Is there a repeater that does such a thing?

Thanks.



Re: Grouped ListView

Posted by Andrea Del Bene <ad...@ciseonweb.it>.
Hi,

you could use two nested ListView. You can write something like this in 
your markup:

<div class="group" wicket:id="groupRepeater">
<div class="item" wicket:id="itemRepeater"></div>
</div>


then in your code you can use component RepeatingView and 
WebMarkupContainer:


RepeatingView view = new RepeatingView("groupRepeater");

         List<String> itemList = Arrays.asList("a","b","c","d", "e","f");

         for(int i = 0; i * 3 < itemList.size();i++){
             WebMarkupContainer container = new 
WebMarkupContainer(view.newChildId());

             RepeatingView itemView = new RepeatingView("itemRepeater");
             itemView.add(new Label(itemView.newChildId(), 
itemList.get(i + 0)));
             itemView.add(new Label(itemView.newChildId(), 
itemList.get(i + 1)));
             itemView.add(new Label(itemView.newChildId(), 
itemList.get(i + 2)));

             container.add(itemView);

             view.add(container);
         }

         add(view);


For simplicity I didn't check if index is out of bound (i.e. list size 
is not multiple of 3).
> I am looking to create a grouped listview where each group only contains a specific number of items.  For example: I have a list of 5 items and I want each group to have 3 items in it.  I would expect the html to look something like the following:
>
> <div id="list">
>                  <div class="group">
>                                  <div class="item">
>                                  <div class="item">
>                                  <div class="item">
>                  </div>
>                  <div class="group">
>                                  <div class="item">
>                                  <div class="item">
>                  </div>
> </div>
>
> Any ideas on how this can be done?  I obviously can use a listview and get the entire list displayed without the grouping but I need to add the grouping.  Is there a repeater that does such a thing?
>
> Thanks.
>
>
>


---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org