You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by simonm <si...@redbend.com> on 2008/12/17 18:45:54 UTC

Expanding table row - need idea

Hi guys,
My goal is to create a table (with few simple columns) such that each row
can be expanded (and then collapsed. for example, when the user clicks on a
link icon or on a ‘+’ link sign)., this way I can show further details (such
that the content of the details span on all columns)
Simply – I need some ideas how to implement that.
My thoughts are: Creating a “simple” table using ListView. When clicking on
the ‘+’ link sign I will instantiate an “ExtendRowPanel” class that will
contains the row item details (I can put anything there) and then switching
with the visibility of the item (of the panel?) being rendered (within
onPopulateItem()) and updating it via Ajax.
I tried to implements the above but encountered many problems. 
I would like to know if I’m in the correct path for my solution and continue
with that approach or looking for something else. 
I looked at the ajax tree table example in wicket stuff using TreeTable &
IColumn but it seems to me not compatible since the “design” of the table is
done within PropertyRenderableColumn and not via a css file (I noticed that
the html contains only the wicket table ID). I prefer defining the table
with its columns in the HTML file.

I will be grateful for ANY idea (or a link to any sample for such case).
BTW: I also looked at the following example 
http://swik.net/Peter-Thomas/Incremental+Operations/Wicket+and+GWT+compared+with+code/cdpvw
http://swik.net/Peter-Thomas/Incremental+Operations/Wicket+and+GWT+compared+with+code/cdpvw 
but that implementation switches between two panels: the expanded one and
the collapsed one. In my case, I need only to add a panel…

Simon.

-- 
View this message in context: http://www.nabble.com/Expanding-table-row---need-idea-tp21057904p21057904.html
Sent from the Wicket - User mailing list archive at Nabble.com.

Re: Expanding table row - need idea

Posted by Martin Makundi <ma...@koodaripalvelut.com>.
Ofcourse with the relevant markup ofcourse:

<wicket:border>
	<fieldset style="padding: 0px;">
	<legend>
	  <input type="button" wicket:id="toggle_contents_button"
class="kuvanappi" value="">
	  <span wicket:id="legend"></span>
	</legend>
	
	<span wicket:id="contents">
		<wicket:body />
	</span>
	
	</fieldset>

</wicket:border>

2008/12/17 Martin Makundi <ma...@koodaripalvelut.com>:
> Well.. here is a showhideborder that you can use.. you know how to use borders?
>

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


Re: Expanding table row - need idea

Posted by Martin Makundi <ma...@koodaripalvelut.com>.
Well.. here is a showhideborder that you can use.. you know how to use borders?

public class ShowHideBorder extends Border implements WebPageConstants {
  /**  */
  public static final String TOGGLE_CONTENTS_BUTTON = "toggle_contents_button";
  /**  */
  public static final String CONTENTS = "contents";
  /**  */
  final Component toggleContentsButton;
  /**
   * @param id
   * @param form
   * @param maximizeByDefault
   * @param listener
   */
  public ShowHideBorder(String id, Form<?> form, boolean
maximizeByDefault, final AjaxRequestListenerInterface listener) {
    super(id);
    setOutputMarkupPlaceholderTag(true).setRenderBodyOnly(false);
    add(new Label(LEGEND, getString(getId())));

    final WebMarkupContainer contents;

    add(contents = new WebMarkupContainer(CONTENTS));
    contents.setVisible(maximizeByDefault).setOutputMarkupPlaceholderTag(true).setRenderBodyOnly(false);
    contents.add(getBodyContainer());
    final MiniMaxButtonAttributeModifier toggleButtonModel = new
MiniMaxButtonAttributeModifier(!maximizeByDefault);

    toggleContentsButton = new
AjaxFallbackButton(TOGGLE_CONTENTS_BUTTON, form) {
      @Override
      protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
        toggleButtonModel.toggleButton();
        contents.setVisible(toggleButtonModel.isVisible());
        if (target != null) {
          target.addComponent(toggleContentsButton);
          target.addComponent(contents);
          listener.addComponents(target);
        }
      }
    }.setDefaultFormProcessing(false).setOutputMarkupId(true).add(new
AttributeModifier("style", true, toggleButtonModel))
    .add(MarkupUtils.getTooltip(getString("toggle_information")));

    add(toggleContentsButton);
  }
}



**
Martin

2008/12/17 simonm <si...@redbend.com>:
>
> Hi guys,
> My goal is to create a table (with few simple columns) such that each row
> can be expanded (and then collapsed. for example, when the user clicks on a
> link icon or on a '+' link sign)., this way I can show further details (such
> that the content of the details span on all columns)
> Simply – I need some ideas how to implement that.
> My thoughts are: Creating a "simple" table using ListView. When clicking on
> the '+' link sign I will instantiate an "ExtendRowPanel" class that will
> contains the row item details (I can put anything there) and then switching
> with the visibility of the item (of the panel?) being rendered (within
> onPopulateItem()) and updating it via Ajax.
> I tried to implements the above but encountered many problems.
> I would like to know if I'm in the correct path for my solution and continue
> with that approach or looking for something else.
> I looked at the ajax tree table example in wicket stuff using TreeTable &
> IColumn but it seems to me not compatible since the "design" of the table is
> done within PropertyRenderableColumn and not via a css file (I noticed that
> the html contains only the wicket table ID). I prefer defining the table
> with its columns in the HTML file.
>
> I will be grateful for ANY idea (or a link to any sample for such case).
> BTW: I also looked at the following example
> http://swik.net/Peter-Thomas/Incremental+Operations/Wicket+and+GWT+compared+with+code/cdpvw
> http://swik.net/Peter-Thomas/Incremental+Operations/Wicket+and+GWT+compared+with+code/cdpvw
> but that implementation switches between two panels: the expanded one and
> the collapsed one. In my case, I need only to add a panel…
>
> Simon.
>
> --
> View this message in context: http://www.nabble.com/Expanding-table-row---need-idea-tp21057904p21057904.html
> Sent from the Wicket - User mailing list archive at Nabble.com.
>

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