You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Mark Doyle <ma...@googlemail.com> on 2010/10/21 12:31:17 UTC

Accessing the cells in a row of a DataTable

Hi all,

I'm having a bit of trouble wrapping my head around the DataTable with
regards to what I need to do.

The perfect example of my goal is in Wicket Examples, namely, the Ajax
Editable Tree Table:
http://wicketstuff.org/wicket14/ajax/tree/table/editable.0

<http://wicketstuff.org/wicket14/ajax/tree/table/editable.0>Rather than use
the Tree table I must alter an existing DataTable.  I was thinking that
I could create an editable textfield for the cells which I could enable or
disable using an edit link in the first column.

A bit like this:

Edit | col1 | col2
============
edit | text  | ksfuh
-------------------------
edit | text  | fsdkl

Using the edit link I can get the model object of the row but I'm not sure
how I can get the row that represents this and set it's cells to editable.

The Editable text field is much like the one in the example and with the
entire table wrapped in a form.  This means I can deal with the submission
of the changes easy enough.


Perhaps this is the wrong way to go about it....hmmm, thoughts?

Re: Accessing the cells in a row of a DataTable

Posted by Mark Doyle <ma...@googlemail.com>.
Well, with the AjaxEditableLabel and Choice from extensions I don;t even
need an edit link any more.  You just click the label and it flips to an
editable field complete with some handy methods (onEdit, onSubmit, onCancel
etc).

I would have gone with the fragment though.

On Wed, Oct 27, 2010 at 4:27 PM, James Carman <ja...@carmanconsulting.com>wrote:

> Did you end up using a Fragment or did you go with the more
> heavyweight solution and use a panel?
>
> On Wed, Oct 27, 2010 at 9:22 AM, Mark Doyle
> <ma...@googlemail.com> wrote:
> > I think I may have circumnavigated this issue by discovering the wonders
> of
> > AjaxEditableLabel and AjaxEditableChoiceLabel :D
> >
> > I'll post my results when I've tested it.  Hopefully this will be helpful
> to
> > somebody else in the future.
> >
> > On Wed, Oct 27, 2010 at 10:59 AM, Mark Doyle
> > <ma...@googlemail.com>wrote:
> >
> >> Of course, here is the entire Panel constructor:
> >>
> >> private DropDownChoice<String> dropdown;
> >>
> >> public AjaxDropDownChoicePanel(String id, IModel<String> model,
> >> IModel<List<String>> choicesModel) {
> >>     super(id);
> >>     System.out.println("dropdown model = " + model.getObject());
> >>
> >>     dropdown = new DropDownChoice<String>("dropdown", model,
> choicesModel);
> >>     dropdown.setOutputMarkupId(true);
> >>     dropdown.add(new AjaxFormComponentUpdatingBehavior("onchange") {
> >>         private static final long serialVersionUID = 1L;
> >>
> >>         protected void onUpdate(AjaxRequestTarget target) {
> >>             dropdown.setEnabled(false);
> >>             System.err.println("Not yet implemented but you selected " +
> >> dropdown.getDefaultModelObjectAsString());
> >>             target.addComponent(dropdown);
> >>         }
> >>     });
> >>     add(dropdown);
> >> }
> >>
> >> On Wed, Oct 27, 2010 at 4:54 AM, Jeremy Thomerson <
> >> jeremy@wickettraining.com> wrote:
> >>
> >>> Show the code for the dropdownchoice creation (in your panel)
> >>>
> >>> On Tue, Oct 26, 2010 at 6:14 PM, Mark Doyle <
> markjohndoyle@googlemail.com
> >>> >wrote:
> >>>
> >>> > I suppose this is related so I'll keep the thread going.
> >>> >
> >>> > As part of the above use case I have created a custom PropertyColumn
> >>> that
> >>> > uses a DropDownChoice.
> >>> >
> >>> > Everything seems to be working except for the initial display, this
> is
> >>> > always set to "Choose One".
> >>> >
> >>> > The code that builds the dropdown is in the populateItem method of
> the
> >>> > custom Property Column.  As you can see it has a model set
> >>> (propertyModel)
> >>> > which wraps a String.
> >>> >
> >>> > PropertyModel<String> propertyModel = new
> >>> PropertyModel<String>(rowModel,
> >>> > getPropertyExpression());
> >>> > System.out.println("propertyModel value = " +
> >>> propertyModel.getObject());
> >>> > AjaxDropDownChoicePanel cp = new AjaxDropDownChoicePanel(componentId,
> >>> > propertyModel, selectionOptionsModel);
> >>> >
> >>> > The AjaxDropDownChoicePanel is simply a panel that wraps the DropDown
> in
> >>> a
> >>> > some select tags.  It instantiates a DropDownChoice with the passed
> in
> >>> > parameters.  The DropDownChoice is instantiated is of type String,
> that
> >>> > is, DropDownChoice<String>.
> >>> >
> >>> > NOTE: The syso is printing the expected value.
> >>> >
> >>> >
> >>> >
> >>> > On Sat, Oct 23, 2010 at 10:18 PM, James Carman
> >>> > <ja...@carmanconsulting.com>wrote:
> >>> >
> >>> > > Use a fragment.  Search this list for my FragmentColumn.  I think
> I've
> >>> > > posted it before
> >>> > > On Oct 23, 2010 4:04 PM, "Mark Doyle" <
> markjohndoyle@googlemail.com>
> >>> > > wrote:
> >>> > > > Ok, I've nearly got this finished.
> >>> > > >
> >>> > > > Does anybody know how to add a link in populateItem() that
> doesn't
> >>> > render
> >>> > > as
> >>> > > > "[cell]"? I could create a customised Panel I suppose but it
> seems
> >>> like
> >>> > > > overkill.
> >>> > > >
> >>> > > > Maybe a fragment...hmmm
> >>> > > >
> >>> > > >
> >>> > > > On Fri, Oct 22, 2010 at 11:56 AM, Mark Doyle
> >>> > > > <ma...@googlemail.com>wrote:
> >>> > > >
> >>> > > >> Oh and the table isn't the parent:
> >>> > > >>
> >>> > > >> // get the table to rerender
> >>> > > >> target.addComponent(this.getParent());
> >>> > > >>
> >>> > > >> I had to do a six step "parental grab"; I'm sure there is a
> better
> >>> > way!
> >>> > > :D
> >>> > > >>
> >>> > > >>
> >>> > > >>
> >>> > > >> On Fri, Oct 22, 2010 at 11:54 AM, Mark Doyle <
> >>> > > markjohndoyle@googlemail.com
> >>> > > >> > wrote:
> >>> > > >>
> >>> > > >>> Thanks Mike, this was definitely a great pointer in the right
> >>> > > direction;
> >>> > > >>> I'm beginning to grasp the column system now.
> >>> > > >>>
> >>> > > >>> I do have some issues though as detailed below.
> >>> > > >>>
> >>> > > >>> Firstly, my business model is out of my control so I had to
> wrap
> >>> that
> >>> > > in
> >>> > > a
> >>> > > >>> class that contains the editable state. I don't like doing that
> it
> >>> > but
> >>> > > it's
> >>> > > >>> useful to see if I can get it to work and it shouldn't effect
> the
> >>> > > process on
> >>> > > >>> the whole.
> >>> > > >>>
> >>> > > >>> The main difference is I'm attempting to do this using
> different
> >>> > > columns,
> >>> > > >>> that is, not having a custom column that takes a type and
> >>> switches.
> >>> > The
> >>> > > >>> problem is that the models for each column seem to wrap
> different
> >>> > > instances
> >>> > > >>> of the business object.
> >>> > > >>>
> >>> > > >>> The code below shows how I'm creating the columns. The link in
> the
> >>> > > >>> AbstractColumn grabs the business object and toggles editable.
> >>> > > >>> The EditablePropertyColumn's populateItem method then get's
> it's
> >>> > > rowModel
> >>> > > >>> object (the business object) and checks the editable state.
> This
> >>> is
> >>> > > where
> >>> > > >>> it goes wrong as each column seems to have it's own copy of the
> >>> rows
> >>> > > >>> business model object. I guess this is how the columns with
> with
> >>> > > datagrid.
> >>> > > >>>
> >>> > > >>> /**
> >>> > > >>> * Creates the columns for the synonym data table
> >>> > > >>> *
> >>> > > >>> * @return
> >>> > > >>> */
> >>> > > >>> @SuppressWarnings("serial")
> >>> > > >>> private List<IColumn<EditStateSynonymWrapper>> createColumns()
> {
> >>> > > >>> List<IColumn<EditStateSynonymWrapper>> columns = new
> >>> > > >>> ArrayList<IColumn<EditStateSynonymWrapper>>();
> >>> > > >>>
> >>> > > >>> columns.add(new AbstractColumn<EditStateSynonymWrapper>(new
> >>> > > >>> Model<String>("Edit")) {
> >>> > > >>> public void
> >>> > populateItem(Item<ICellPopulator<EditStateSynonymWrapper>>
> >>> > > >>> cellItem, String componentId, IModel<EditStateSynonymWrapper>
> >>> model)
> >>> > {
> >>> > > >>> AjaxFallbackLink<EditStateSynonymWrapper> editLink = new
> >>> > > >>> AjaxFallbackLink<EditStateSynonymWrapper>(componentId, model) {
> >>> > > >>> @Override
> >>> > > >>> public void onClick(AjaxRequestTarget target) {
> >>> > > >>> EditStateSynonymWrapper selected = (EditStateSynonymWrapper)
> >>> > > >>> getDefaultModelObject();
> >>> > > >>> System.out.println("selected value = " +
> >>> > > selected.wrappedSynonym.value);
> >>> > > >>> selected.setEditing(!selected.isEditing());
> >>> > > >>>
> >>> > > >>> // FIXME WHAT!? There must be a better way than this to get the
> >>> > parent
> >>> > > >>> table. :D
> >>> > > >>> MarkupContainer dataTable =
> >>> > > >>>
> >>> > >
> >>>
> getParent().getParent().getParent().getParent().getParent().getParent();
> >>> > > >>> target.addComponent(dataTable);
> >>> > > >>> }
> >>> > > >>> };
> >>> > > >>> cellItem.add(editLink);
> >>> > > >>> // cellItem.add(new EditLinkFragment(componentId,
> >>> > > SynonymAdminPanel.this,
> >>> > > >>> model));
> >>> > > >>> }
> >>> > > >>> });
> >>> > > >>>
> >>> > > >>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
> >>> > > >>> Model<String>("Category"), "wrappedSynonym.category"));
> >>> > > >>> // columns.add(new
> >>> > EditablePropertyColumn<EditStateSynonymWrapper>(new
> >>> > > >>> Model<String>("State"),
> >>> > > >>> // "wrappedSynonym.state", new PropertyModel<Synonym>(this,
> >>> > > "selected")));
> >>> > > >>> columns.add(new
> >>> EditablePropertyColumn<EditStateSynonymWrapper>(new
> >>> > > >>> Model<String>("State"), "wrappedSynonym.state"));
> >>> > > >>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
> >>> > > >>> Model<String>("Root"), "wrappedSynonym.root"));
> >>> > > >>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
> >>> > > >>> Model<String>("Value"), "wrappedSynonym.value"));
> >>> > > >>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
> >>> > > >>> Model<String>("Rational"), "wrappedSynonym.rational"));
> >>> > > >>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
> >>> > > >>> Model<String>("Taxonomy parent"),
> >>> "wrappedSynonym.taxonomyParent"));
> >>> > > >>>
> >>> > > >>> return columns;
> >>> > > >>> }
> >>> > > >>>
> >>> > > >>>
> >>> > > >>>
> >>> > > >>> On Thu, Oct 21, 2010 at 3:50 PM, Michael O'Cleirigh <
> >>> > > >>> michael.ocleirigh@rivulet.ca> wrote:
> >>> > > >>>
> >>> > > >>>> Hi Mark,
> >>> > > >>>>
> >>> > > >>>> The cell's of a datatable are created by the IColumn. So you
> need
> >>> to
> >>> > > >>>> create a wrapping object or additional IModel that contains
> the
> >>> > > edit-ability
> >>> > > >>>> of each row and then use that inside the populateItem(...)
> method
> >>> of
> >>> > > the
> >>> > > >>>> column to figure out which case to show (i.e. the label or the
> >>> > > textfield).
> >>> > > >>>>
> >>> > > >>>> One way to persist the change immediately is to use an
> >>> > > >>>> AjaxFormComponentUpdatingBehavior on the onblur event of the
> >>> > textfield
> >>> > > to
> >>> > > >>>> push the changes through.
> >>> > > >>>>
> >>> > > >>>> Do something like this:
> >>> > > >>>>
> >>> > > >>>> class MyColumn extends AbstractColumn<BusinessObject> {
> >>> > > >>>>
> >>> > > >>>> public static enum ColumnType { LINK, COL1, COL2 };
> >>> > > >>>>
> >>> > > >>>> private ColumnType type;
> >>> > > >>>>
> >>> > > >>>> public MyColumn (IModel<String>header, ColumnType type) {
> >>> > > >>>> super (header);
> >>> > > >>>> this.type = type;
> >>> > > >>>> }
> >>> > > >>>> @Override
> >>> > > >>>> public void populateItem(Item<ICellPopulator<BusinessObject>>
> >>> > > >>>> cellItem,
> >>> > > >>>> String componentId, IModel<BusinessObject> rowModel) {
> >>> > > >>>>
> >>> > > >>>>
> >>> > > >>>> switch (this.type) {
> >>> > > >>>>
> >>> > > >>>> case LINK :
> >>> > > >>>> // add in the ajax link to the cell item
> >>> > > >>>> // inside the onclick do:
> >>> > > >>>> // get the row model object and then set its editable
> >>> > > >>>> field.
> >>> > > >>>> cellItem.add(new AjaxLink(componentId) {
> >>> > > >>>> public void onClick(AjaxRequestTarget target) {
> >>> > > >>>> BusinessObject bo =
> >>> > > >>>> rowModel.getObject();
> >>> > > >>>>
> >>> > > >>>>
> >>> > > >>>> bo.setEditable(true);
> >>> > > >>>> // get the table to rerender
> >>> > > >>>> target.addComponent(this.getParent());
> >>> > > >>>> }
> >>> > > >>>> });
> >>> > > >>>>
> >>> > > >>>> break;
> >>> > > >>>>
> >>> > > >>>> case COL1:
> >>> > > >>>> case COL2:
> >>> > > >>>>
> >>> > > >>>> BusinessObject bo = rowModel.getObject();
> >>> > > >>>>
> >>> > > >>>>
> >>> > > >>>> if (bo.isEditable()) {
> >>> > > >>>> // this might not work as textfield wants an input
> >>> > > >>>> tag but you can put the field on a panel and then add in the
> >>> panel
> >>> > > here.
> >>> > > >>>> cellItem.add (new TextField(componentId, )
> >>> > > >>>> }
> >>> > > >>>> else {
> >>> > > >>>> cellItem.add(new Label(componentId, ...)
> >>> > > >>>> }
> >>> > > >>>>
> >>> > > >>>> }
> >>> > > >>>>
> >>> > > >>>> }
> >>> > > >>>> };
> >>> > > >>>>
> >>> > > >>>> Regards,
> >>> > > >>>>
> >>> > > >>>> Mike
> >>> > > >>>>
> >>> > > >>>> Hi all,
> >>> > > >>>>>
> >>> > > >>>>> I'm having a bit of trouble wrapping my head around the
> >>> DataTable
> >>> > > with
> >>> > > >>>>> regards to what I need to do.
> >>> > > >>>>>
> >>> > > >>>>> The perfect example of my goal is in Wicket Examples, namely,
> >>> the
> >>> > > Ajax
> >>> > > >>>>> Editable Tree Table:
> >>> > > >>>>> http://wicketstuff.org/wicket14/ajax/tree/table/editable.0
> >>> > > >>>>>
> >>> > > >>>>> <http://wicketstuff.org/wicket14/ajax/tree/table/editable.0
> >>> >Rather
> >>> > > than
> >>> > > >>>>> use
> >>> > > >>>>> the Tree table I must alter an existing DataTable. I was
> >>> thinking
> >>> > > that
> >>> > > >>>>> I could create an editable textfield for the cells which I
> could
> >>> > > enable
> >>> > > >>>>> or
> >>> > > >>>>> disable using an edit link in the first column.
> >>> > > >>>>>
> >>> > > >>>>> A bit like this:
> >>> > > >>>>>
> >>> > > >>>>> Edit | col1 | col2
> >>> > > >>>>> ============
> >>> > > >>>>> edit | text | ksfuh
> >>> > > >>>>> -------------------------
> >>> > > >>>>> edit | text | fsdkl
> >>> > > >>>>>
> >>> > > >>>>> Using the edit link I can get the model object of the row but
> >>> I'm
> >>> > not
> >>> > > >>>>> sure
> >>> > > >>>>> how I can get the row that represents this and set it's cells
> to
> >>> > > >>>>> editable.
> >>> > > >>>>>
> >>> > > >>>>> The Editable text field is much like the one in the example
> and
> >>> > with
> >>> > > the
> >>> > > >>>>> entire table wrapped in a form. This means I can deal with
> the
> >>> > > >>>>> submission
> >>> > > >>>>> of the changes easy enough.
> >>> > > >>>>>
> >>> > > >>>>>
> >>> > > >>>>> Perhaps this is the wrong way to go about it....hmmm,
> thoughts?
> >>> > > >>>>>
> >>> > > >>>>>
> >>> > > >>>>
> >>> > > >>>>
> >>> > ---------------------------------------------------------------------
> >>> > > >>>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> >>> > > >>>> For additional commands, e-mail: users-help@wicket.apache.org
> >>> > > >>>>
> >>> > > >>>>
> >>> > > >>>
> >>> > > >>
> >>> > >
> >>> >
> >>>
> >>>
> >>>
> >>> --
> >>> Jeremy Thomerson
> >>> http://wickettraining.com
> >>> *Need a CMS for Wicket?  Use Brix! http://brixcms.org*
> >>>
> >>
> >>
> >
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>

Re: Accessing the cells in a row of a DataTable

Posted by James Carman <ja...@carmanconsulting.com>.
Did you end up using a Fragment or did you go with the more
heavyweight solution and use a panel?

On Wed, Oct 27, 2010 at 9:22 AM, Mark Doyle
<ma...@googlemail.com> wrote:
> I think I may have circumnavigated this issue by discovering the wonders of
> AjaxEditableLabel and AjaxEditableChoiceLabel :D
>
> I'll post my results when I've tested it.  Hopefully this will be helpful to
> somebody else in the future.
>
> On Wed, Oct 27, 2010 at 10:59 AM, Mark Doyle
> <ma...@googlemail.com>wrote:
>
>> Of course, here is the entire Panel constructor:
>>
>> private DropDownChoice<String> dropdown;
>>
>> public AjaxDropDownChoicePanel(String id, IModel<String> model,
>> IModel<List<String>> choicesModel) {
>>     super(id);
>>     System.out.println("dropdown model = " + model.getObject());
>>
>>     dropdown = new DropDownChoice<String>("dropdown", model, choicesModel);
>>     dropdown.setOutputMarkupId(true);
>>     dropdown.add(new AjaxFormComponentUpdatingBehavior("onchange") {
>>         private static final long serialVersionUID = 1L;
>>
>>         protected void onUpdate(AjaxRequestTarget target) {
>>             dropdown.setEnabled(false);
>>             System.err.println("Not yet implemented but you selected " +
>> dropdown.getDefaultModelObjectAsString());
>>             target.addComponent(dropdown);
>>         }
>>     });
>>     add(dropdown);
>> }
>>
>> On Wed, Oct 27, 2010 at 4:54 AM, Jeremy Thomerson <
>> jeremy@wickettraining.com> wrote:
>>
>>> Show the code for the dropdownchoice creation (in your panel)
>>>
>>> On Tue, Oct 26, 2010 at 6:14 PM, Mark Doyle <markjohndoyle@googlemail.com
>>> >wrote:
>>>
>>> > I suppose this is related so I'll keep the thread going.
>>> >
>>> > As part of the above use case I have created a custom PropertyColumn
>>> that
>>> > uses a DropDownChoice.
>>> >
>>> > Everything seems to be working except for the initial display, this is
>>> > always set to "Choose One".
>>> >
>>> > The code that builds the dropdown is in the populateItem method of the
>>> > custom Property Column.  As you can see it has a model set
>>> (propertyModel)
>>> > which wraps a String.
>>> >
>>> > PropertyModel<String> propertyModel = new
>>> PropertyModel<String>(rowModel,
>>> > getPropertyExpression());
>>> > System.out.println("propertyModel value = " +
>>> propertyModel.getObject());
>>> > AjaxDropDownChoicePanel cp = new AjaxDropDownChoicePanel(componentId,
>>> > propertyModel, selectionOptionsModel);
>>> >
>>> > The AjaxDropDownChoicePanel is simply a panel that wraps the DropDown in
>>> a
>>> > some select tags.  It instantiates a DropDownChoice with the passed in
>>> > parameters.  The DropDownChoice is instantiated is of type String, that
>>> > is, DropDownChoice<String>.
>>> >
>>> > NOTE: The syso is printing the expected value.
>>> >
>>> >
>>> >
>>> > On Sat, Oct 23, 2010 at 10:18 PM, James Carman
>>> > <ja...@carmanconsulting.com>wrote:
>>> >
>>> > > Use a fragment.  Search this list for my FragmentColumn.  I think I've
>>> > > posted it before
>>> > > On Oct 23, 2010 4:04 PM, "Mark Doyle" <ma...@googlemail.com>
>>> > > wrote:
>>> > > > Ok, I've nearly got this finished.
>>> > > >
>>> > > > Does anybody know how to add a link in populateItem() that doesn't
>>> > render
>>> > > as
>>> > > > "[cell]"? I could create a customised Panel I suppose but it seems
>>> like
>>> > > > overkill.
>>> > > >
>>> > > > Maybe a fragment...hmmm
>>> > > >
>>> > > >
>>> > > > On Fri, Oct 22, 2010 at 11:56 AM, Mark Doyle
>>> > > > <ma...@googlemail.com>wrote:
>>> > > >
>>> > > >> Oh and the table isn't the parent:
>>> > > >>
>>> > > >> // get the table to rerender
>>> > > >> target.addComponent(this.getParent());
>>> > > >>
>>> > > >> I had to do a six step "parental grab"; I'm sure there is a better
>>> > way!
>>> > > :D
>>> > > >>
>>> > > >>
>>> > > >>
>>> > > >> On Fri, Oct 22, 2010 at 11:54 AM, Mark Doyle <
>>> > > markjohndoyle@googlemail.com
>>> > > >> > wrote:
>>> > > >>
>>> > > >>> Thanks Mike, this was definitely a great pointer in the right
>>> > > direction;
>>> > > >>> I'm beginning to grasp the column system now.
>>> > > >>>
>>> > > >>> I do have some issues though as detailed below.
>>> > > >>>
>>> > > >>> Firstly, my business model is out of my control so I had to wrap
>>> that
>>> > > in
>>> > > a
>>> > > >>> class that contains the editable state. I don't like doing that it
>>> > but
>>> > > it's
>>> > > >>> useful to see if I can get it to work and it shouldn't effect the
>>> > > process on
>>> > > >>> the whole.
>>> > > >>>
>>> > > >>> The main difference is I'm attempting to do this using different
>>> > > columns,
>>> > > >>> that is, not having a custom column that takes a type and
>>> switches.
>>> > The
>>> > > >>> problem is that the models for each column seem to wrap different
>>> > > instances
>>> > > >>> of the business object.
>>> > > >>>
>>> > > >>> The code below shows how I'm creating the columns. The link in the
>>> > > >>> AbstractColumn grabs the business object and toggles editable.
>>> > > >>> The EditablePropertyColumn's populateItem method then get's it's
>>> > > rowModel
>>> > > >>> object (the business object) and checks the editable state. This
>>> is
>>> > > where
>>> > > >>> it goes wrong as each column seems to have it's own copy of the
>>> rows
>>> > > >>> business model object. I guess this is how the columns with with
>>> > > datagrid.
>>> > > >>>
>>> > > >>> /**
>>> > > >>> * Creates the columns for the synonym data table
>>> > > >>> *
>>> > > >>> * @return
>>> > > >>> */
>>> > > >>> @SuppressWarnings("serial")
>>> > > >>> private List<IColumn<EditStateSynonymWrapper>> createColumns() {
>>> > > >>> List<IColumn<EditStateSynonymWrapper>> columns = new
>>> > > >>> ArrayList<IColumn<EditStateSynonymWrapper>>();
>>> > > >>>
>>> > > >>> columns.add(new AbstractColumn<EditStateSynonymWrapper>(new
>>> > > >>> Model<String>("Edit")) {
>>> > > >>> public void
>>> > populateItem(Item<ICellPopulator<EditStateSynonymWrapper>>
>>> > > >>> cellItem, String componentId, IModel<EditStateSynonymWrapper>
>>> model)
>>> > {
>>> > > >>> AjaxFallbackLink<EditStateSynonymWrapper> editLink = new
>>> > > >>> AjaxFallbackLink<EditStateSynonymWrapper>(componentId, model) {
>>> > > >>> @Override
>>> > > >>> public void onClick(AjaxRequestTarget target) {
>>> > > >>> EditStateSynonymWrapper selected = (EditStateSynonymWrapper)
>>> > > >>> getDefaultModelObject();
>>> > > >>> System.out.println("selected value = " +
>>> > > selected.wrappedSynonym.value);
>>> > > >>> selected.setEditing(!selected.isEditing());
>>> > > >>>
>>> > > >>> // FIXME WHAT!? There must be a better way than this to get the
>>> > parent
>>> > > >>> table. :D
>>> > > >>> MarkupContainer dataTable =
>>> > > >>>
>>> > >
>>> getParent().getParent().getParent().getParent().getParent().getParent();
>>> > > >>> target.addComponent(dataTable);
>>> > > >>> }
>>> > > >>> };
>>> > > >>> cellItem.add(editLink);
>>> > > >>> // cellItem.add(new EditLinkFragment(componentId,
>>> > > SynonymAdminPanel.this,
>>> > > >>> model));
>>> > > >>> }
>>> > > >>> });
>>> > > >>>
>>> > > >>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
>>> > > >>> Model<String>("Category"), "wrappedSynonym.category"));
>>> > > >>> // columns.add(new
>>> > EditablePropertyColumn<EditStateSynonymWrapper>(new
>>> > > >>> Model<String>("State"),
>>> > > >>> // "wrappedSynonym.state", new PropertyModel<Synonym>(this,
>>> > > "selected")));
>>> > > >>> columns.add(new
>>> EditablePropertyColumn<EditStateSynonymWrapper>(new
>>> > > >>> Model<String>("State"), "wrappedSynonym.state"));
>>> > > >>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
>>> > > >>> Model<String>("Root"), "wrappedSynonym.root"));
>>> > > >>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
>>> > > >>> Model<String>("Value"), "wrappedSynonym.value"));
>>> > > >>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
>>> > > >>> Model<String>("Rational"), "wrappedSynonym.rational"));
>>> > > >>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
>>> > > >>> Model<String>("Taxonomy parent"),
>>> "wrappedSynonym.taxonomyParent"));
>>> > > >>>
>>> > > >>> return columns;
>>> > > >>> }
>>> > > >>>
>>> > > >>>
>>> > > >>>
>>> > > >>> On Thu, Oct 21, 2010 at 3:50 PM, Michael O'Cleirigh <
>>> > > >>> michael.ocleirigh@rivulet.ca> wrote:
>>> > > >>>
>>> > > >>>> Hi Mark,
>>> > > >>>>
>>> > > >>>> The cell's of a datatable are created by the IColumn. So you need
>>> to
>>> > > >>>> create a wrapping object or additional IModel that contains the
>>> > > edit-ability
>>> > > >>>> of each row and then use that inside the populateItem(...) method
>>> of
>>> > > the
>>> > > >>>> column to figure out which case to show (i.e. the label or the
>>> > > textfield).
>>> > > >>>>
>>> > > >>>> One way to persist the change immediately is to use an
>>> > > >>>> AjaxFormComponentUpdatingBehavior on the onblur event of the
>>> > textfield
>>> > > to
>>> > > >>>> push the changes through.
>>> > > >>>>
>>> > > >>>> Do something like this:
>>> > > >>>>
>>> > > >>>> class MyColumn extends AbstractColumn<BusinessObject> {
>>> > > >>>>
>>> > > >>>> public static enum ColumnType { LINK, COL1, COL2 };
>>> > > >>>>
>>> > > >>>> private ColumnType type;
>>> > > >>>>
>>> > > >>>> public MyColumn (IModel<String>header, ColumnType type) {
>>> > > >>>> super (header);
>>> > > >>>> this.type = type;
>>> > > >>>> }
>>> > > >>>> @Override
>>> > > >>>> public void populateItem(Item<ICellPopulator<BusinessObject>>
>>> > > >>>> cellItem,
>>> > > >>>> String componentId, IModel<BusinessObject> rowModel) {
>>> > > >>>>
>>> > > >>>>
>>> > > >>>> switch (this.type) {
>>> > > >>>>
>>> > > >>>> case LINK :
>>> > > >>>> // add in the ajax link to the cell item
>>> > > >>>> // inside the onclick do:
>>> > > >>>> // get the row model object and then set its editable
>>> > > >>>> field.
>>> > > >>>> cellItem.add(new AjaxLink(componentId) {
>>> > > >>>> public void onClick(AjaxRequestTarget target) {
>>> > > >>>> BusinessObject bo =
>>> > > >>>> rowModel.getObject();
>>> > > >>>>
>>> > > >>>>
>>> > > >>>> bo.setEditable(true);
>>> > > >>>> // get the table to rerender
>>> > > >>>> target.addComponent(this.getParent());
>>> > > >>>> }
>>> > > >>>> });
>>> > > >>>>
>>> > > >>>> break;
>>> > > >>>>
>>> > > >>>> case COL1:
>>> > > >>>> case COL2:
>>> > > >>>>
>>> > > >>>> BusinessObject bo = rowModel.getObject();
>>> > > >>>>
>>> > > >>>>
>>> > > >>>> if (bo.isEditable()) {
>>> > > >>>> // this might not work as textfield wants an input
>>> > > >>>> tag but you can put the field on a panel and then add in the
>>> panel
>>> > > here.
>>> > > >>>> cellItem.add (new TextField(componentId, )
>>> > > >>>> }
>>> > > >>>> else {
>>> > > >>>> cellItem.add(new Label(componentId, ...)
>>> > > >>>> }
>>> > > >>>>
>>> > > >>>> }
>>> > > >>>>
>>> > > >>>> }
>>> > > >>>> };
>>> > > >>>>
>>> > > >>>> Regards,
>>> > > >>>>
>>> > > >>>> Mike
>>> > > >>>>
>>> > > >>>> Hi all,
>>> > > >>>>>
>>> > > >>>>> I'm having a bit of trouble wrapping my head around the
>>> DataTable
>>> > > with
>>> > > >>>>> regards to what I need to do.
>>> > > >>>>>
>>> > > >>>>> The perfect example of my goal is in Wicket Examples, namely,
>>> the
>>> > > Ajax
>>> > > >>>>> Editable Tree Table:
>>> > > >>>>> http://wicketstuff.org/wicket14/ajax/tree/table/editable.0
>>> > > >>>>>
>>> > > >>>>> <http://wicketstuff.org/wicket14/ajax/tree/table/editable.0
>>> >Rather
>>> > > than
>>> > > >>>>> use
>>> > > >>>>> the Tree table I must alter an existing DataTable. I was
>>> thinking
>>> > > that
>>> > > >>>>> I could create an editable textfield for the cells which I could
>>> > > enable
>>> > > >>>>> or
>>> > > >>>>> disable using an edit link in the first column.
>>> > > >>>>>
>>> > > >>>>> A bit like this:
>>> > > >>>>>
>>> > > >>>>> Edit | col1 | col2
>>> > > >>>>> ============
>>> > > >>>>> edit | text | ksfuh
>>> > > >>>>> -------------------------
>>> > > >>>>> edit | text | fsdkl
>>> > > >>>>>
>>> > > >>>>> Using the edit link I can get the model object of the row but
>>> I'm
>>> > not
>>> > > >>>>> sure
>>> > > >>>>> how I can get the row that represents this and set it's cells to
>>> > > >>>>> editable.
>>> > > >>>>>
>>> > > >>>>> The Editable text field is much like the one in the example and
>>> > with
>>> > > the
>>> > > >>>>> entire table wrapped in a form. This means I can deal with the
>>> > > >>>>> submission
>>> > > >>>>> of the changes easy enough.
>>> > > >>>>>
>>> > > >>>>>
>>> > > >>>>> Perhaps this is the wrong way to go about it....hmmm, thoughts?
>>> > > >>>>>
>>> > > >>>>>
>>> > > >>>>
>>> > > >>>>
>>> > ---------------------------------------------------------------------
>>> > > >>>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>>> > > >>>> For additional commands, e-mail: users-help@wicket.apache.org
>>> > > >>>>
>>> > > >>>>
>>> > > >>>
>>> > > >>
>>> > >
>>> >
>>>
>>>
>>>
>>> --
>>> Jeremy Thomerson
>>> http://wickettraining.com
>>> *Need a CMS for Wicket?  Use Brix! http://brixcms.org*
>>>
>>
>>
>

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


Re: Accessing the cells in a row of a DataTable

Posted by Mark Doyle <ma...@googlemail.com>.
I think I may have circumnavigated this issue by discovering the wonders of
AjaxEditableLabel and AjaxEditableChoiceLabel :D

I'll post my results when I've tested it.  Hopefully this will be helpful to
somebody else in the future.

On Wed, Oct 27, 2010 at 10:59 AM, Mark Doyle
<ma...@googlemail.com>wrote:

> Of course, here is the entire Panel constructor:
>
> private DropDownChoice<String> dropdown;
>
> public AjaxDropDownChoicePanel(String id, IModel<String> model,
> IModel<List<String>> choicesModel) {
>     super(id);
>     System.out.println("dropdown model = " + model.getObject());
>
>     dropdown = new DropDownChoice<String>("dropdown", model, choicesModel);
>     dropdown.setOutputMarkupId(true);
>     dropdown.add(new AjaxFormComponentUpdatingBehavior("onchange") {
>         private static final long serialVersionUID = 1L;
>
>         protected void onUpdate(AjaxRequestTarget target) {
>             dropdown.setEnabled(false);
>             System.err.println("Not yet implemented but you selected " +
> dropdown.getDefaultModelObjectAsString());
>             target.addComponent(dropdown);
>         }
>     });
>     add(dropdown);
> }
>
> On Wed, Oct 27, 2010 at 4:54 AM, Jeremy Thomerson <
> jeremy@wickettraining.com> wrote:
>
>> Show the code for the dropdownchoice creation (in your panel)
>>
>> On Tue, Oct 26, 2010 at 6:14 PM, Mark Doyle <markjohndoyle@googlemail.com
>> >wrote:
>>
>> > I suppose this is related so I'll keep the thread going.
>> >
>> > As part of the above use case I have created a custom PropertyColumn
>> that
>> > uses a DropDownChoice.
>> >
>> > Everything seems to be working except for the initial display, this is
>> > always set to "Choose One".
>> >
>> > The code that builds the dropdown is in the populateItem method of the
>> > custom Property Column.  As you can see it has a model set
>> (propertyModel)
>> > which wraps a String.
>> >
>> > PropertyModel<String> propertyModel = new
>> PropertyModel<String>(rowModel,
>> > getPropertyExpression());
>> > System.out.println("propertyModel value = " +
>> propertyModel.getObject());
>> > AjaxDropDownChoicePanel cp = new AjaxDropDownChoicePanel(componentId,
>> > propertyModel, selectionOptionsModel);
>> >
>> > The AjaxDropDownChoicePanel is simply a panel that wraps the DropDown in
>> a
>> > some select tags.  It instantiates a DropDownChoice with the passed in
>> > parameters.  The DropDownChoice is instantiated is of type String, that
>> > is, DropDownChoice<String>.
>> >
>> > NOTE: The syso is printing the expected value.
>> >
>> >
>> >
>> > On Sat, Oct 23, 2010 at 10:18 PM, James Carman
>> > <ja...@carmanconsulting.com>wrote:
>> >
>> > > Use a fragment.  Search this list for my FragmentColumn.  I think I've
>> > > posted it before
>> > > On Oct 23, 2010 4:04 PM, "Mark Doyle" <ma...@googlemail.com>
>> > > wrote:
>> > > > Ok, I've nearly got this finished.
>> > > >
>> > > > Does anybody know how to add a link in populateItem() that doesn't
>> > render
>> > > as
>> > > > "[cell]"? I could create a customised Panel I suppose but it seems
>> like
>> > > > overkill.
>> > > >
>> > > > Maybe a fragment...hmmm
>> > > >
>> > > >
>> > > > On Fri, Oct 22, 2010 at 11:56 AM, Mark Doyle
>> > > > <ma...@googlemail.com>wrote:
>> > > >
>> > > >> Oh and the table isn't the parent:
>> > > >>
>> > > >> // get the table to rerender
>> > > >> target.addComponent(this.getParent());
>> > > >>
>> > > >> I had to do a six step "parental grab"; I'm sure there is a better
>> > way!
>> > > :D
>> > > >>
>> > > >>
>> > > >>
>> > > >> On Fri, Oct 22, 2010 at 11:54 AM, Mark Doyle <
>> > > markjohndoyle@googlemail.com
>> > > >> > wrote:
>> > > >>
>> > > >>> Thanks Mike, this was definitely a great pointer in the right
>> > > direction;
>> > > >>> I'm beginning to grasp the column system now.
>> > > >>>
>> > > >>> I do have some issues though as detailed below.
>> > > >>>
>> > > >>> Firstly, my business model is out of my control so I had to wrap
>> that
>> > > in
>> > > a
>> > > >>> class that contains the editable state. I don't like doing that it
>> > but
>> > > it's
>> > > >>> useful to see if I can get it to work and it shouldn't effect the
>> > > process on
>> > > >>> the whole.
>> > > >>>
>> > > >>> The main difference is I'm attempting to do this using different
>> > > columns,
>> > > >>> that is, not having a custom column that takes a type and
>> switches.
>> > The
>> > > >>> problem is that the models for each column seem to wrap different
>> > > instances
>> > > >>> of the business object.
>> > > >>>
>> > > >>> The code below shows how I'm creating the columns. The link in the
>> > > >>> AbstractColumn grabs the business object and toggles editable.
>> > > >>> The EditablePropertyColumn's populateItem method then get's it's
>> > > rowModel
>> > > >>> object (the business object) and checks the editable state. This
>> is
>> > > where
>> > > >>> it goes wrong as each column seems to have it's own copy of the
>> rows
>> > > >>> business model object. I guess this is how the columns with with
>> > > datagrid.
>> > > >>>
>> > > >>> /**
>> > > >>> * Creates the columns for the synonym data table
>> > > >>> *
>> > > >>> * @return
>> > > >>> */
>> > > >>> @SuppressWarnings("serial")
>> > > >>> private List<IColumn<EditStateSynonymWrapper>> createColumns() {
>> > > >>> List<IColumn<EditStateSynonymWrapper>> columns = new
>> > > >>> ArrayList<IColumn<EditStateSynonymWrapper>>();
>> > > >>>
>> > > >>> columns.add(new AbstractColumn<EditStateSynonymWrapper>(new
>> > > >>> Model<String>("Edit")) {
>> > > >>> public void
>> > populateItem(Item<ICellPopulator<EditStateSynonymWrapper>>
>> > > >>> cellItem, String componentId, IModel<EditStateSynonymWrapper>
>> model)
>> > {
>> > > >>> AjaxFallbackLink<EditStateSynonymWrapper> editLink = new
>> > > >>> AjaxFallbackLink<EditStateSynonymWrapper>(componentId, model) {
>> > > >>> @Override
>> > > >>> public void onClick(AjaxRequestTarget target) {
>> > > >>> EditStateSynonymWrapper selected = (EditStateSynonymWrapper)
>> > > >>> getDefaultModelObject();
>> > > >>> System.out.println("selected value = " +
>> > > selected.wrappedSynonym.value);
>> > > >>> selected.setEditing(!selected.isEditing());
>> > > >>>
>> > > >>> // FIXME WHAT!? There must be a better way than this to get the
>> > parent
>> > > >>> table. :D
>> > > >>> MarkupContainer dataTable =
>> > > >>>
>> > >
>> getParent().getParent().getParent().getParent().getParent().getParent();
>> > > >>> target.addComponent(dataTable);
>> > > >>> }
>> > > >>> };
>> > > >>> cellItem.add(editLink);
>> > > >>> // cellItem.add(new EditLinkFragment(componentId,
>> > > SynonymAdminPanel.this,
>> > > >>> model));
>> > > >>> }
>> > > >>> });
>> > > >>>
>> > > >>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
>> > > >>> Model<String>("Category"), "wrappedSynonym.category"));
>> > > >>> // columns.add(new
>> > EditablePropertyColumn<EditStateSynonymWrapper>(new
>> > > >>> Model<String>("State"),
>> > > >>> // "wrappedSynonym.state", new PropertyModel<Synonym>(this,
>> > > "selected")));
>> > > >>> columns.add(new
>> EditablePropertyColumn<EditStateSynonymWrapper>(new
>> > > >>> Model<String>("State"), "wrappedSynonym.state"));
>> > > >>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
>> > > >>> Model<String>("Root"), "wrappedSynonym.root"));
>> > > >>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
>> > > >>> Model<String>("Value"), "wrappedSynonym.value"));
>> > > >>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
>> > > >>> Model<String>("Rational"), "wrappedSynonym.rational"));
>> > > >>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
>> > > >>> Model<String>("Taxonomy parent"),
>> "wrappedSynonym.taxonomyParent"));
>> > > >>>
>> > > >>> return columns;
>> > > >>> }
>> > > >>>
>> > > >>>
>> > > >>>
>> > > >>> On Thu, Oct 21, 2010 at 3:50 PM, Michael O'Cleirigh <
>> > > >>> michael.ocleirigh@rivulet.ca> wrote:
>> > > >>>
>> > > >>>> Hi Mark,
>> > > >>>>
>> > > >>>> The cell's of a datatable are created by the IColumn. So you need
>> to
>> > > >>>> create a wrapping object or additional IModel that contains the
>> > > edit-ability
>> > > >>>> of each row and then use that inside the populateItem(...) method
>> of
>> > > the
>> > > >>>> column to figure out which case to show (i.e. the label or the
>> > > textfield).
>> > > >>>>
>> > > >>>> One way to persist the change immediately is to use an
>> > > >>>> AjaxFormComponentUpdatingBehavior on the onblur event of the
>> > textfield
>> > > to
>> > > >>>> push the changes through.
>> > > >>>>
>> > > >>>> Do something like this:
>> > > >>>>
>> > > >>>> class MyColumn extends AbstractColumn<BusinessObject> {
>> > > >>>>
>> > > >>>> public static enum ColumnType { LINK, COL1, COL2 };
>> > > >>>>
>> > > >>>> private ColumnType type;
>> > > >>>>
>> > > >>>> public MyColumn (IModel<String>header, ColumnType type) {
>> > > >>>> super (header);
>> > > >>>> this.type = type;
>> > > >>>> }
>> > > >>>> @Override
>> > > >>>> public void populateItem(Item<ICellPopulator<BusinessObject>>
>> > > >>>> cellItem,
>> > > >>>> String componentId, IModel<BusinessObject> rowModel) {
>> > > >>>>
>> > > >>>>
>> > > >>>> switch (this.type) {
>> > > >>>>
>> > > >>>> case LINK :
>> > > >>>> // add in the ajax link to the cell item
>> > > >>>> // inside the onclick do:
>> > > >>>> // get the row model object and then set its editable
>> > > >>>> field.
>> > > >>>> cellItem.add(new AjaxLink(componentId) {
>> > > >>>> public void onClick(AjaxRequestTarget target) {
>> > > >>>> BusinessObject bo =
>> > > >>>> rowModel.getObject();
>> > > >>>>
>> > > >>>>
>> > > >>>> bo.setEditable(true);
>> > > >>>> // get the table to rerender
>> > > >>>> target.addComponent(this.getParent());
>> > > >>>> }
>> > > >>>> });
>> > > >>>>
>> > > >>>> break;
>> > > >>>>
>> > > >>>> case COL1:
>> > > >>>> case COL2:
>> > > >>>>
>> > > >>>> BusinessObject bo = rowModel.getObject();
>> > > >>>>
>> > > >>>>
>> > > >>>> if (bo.isEditable()) {
>> > > >>>> // this might not work as textfield wants an input
>> > > >>>> tag but you can put the field on a panel and then add in the
>> panel
>> > > here.
>> > > >>>> cellItem.add (new TextField(componentId, )
>> > > >>>> }
>> > > >>>> else {
>> > > >>>> cellItem.add(new Label(componentId, ...)
>> > > >>>> }
>> > > >>>>
>> > > >>>> }
>> > > >>>>
>> > > >>>> }
>> > > >>>> };
>> > > >>>>
>> > > >>>> Regards,
>> > > >>>>
>> > > >>>> Mike
>> > > >>>>
>> > > >>>> Hi all,
>> > > >>>>>
>> > > >>>>> I'm having a bit of trouble wrapping my head around the
>> DataTable
>> > > with
>> > > >>>>> regards to what I need to do.
>> > > >>>>>
>> > > >>>>> The perfect example of my goal is in Wicket Examples, namely,
>> the
>> > > Ajax
>> > > >>>>> Editable Tree Table:
>> > > >>>>> http://wicketstuff.org/wicket14/ajax/tree/table/editable.0
>> > > >>>>>
>> > > >>>>> <http://wicketstuff.org/wicket14/ajax/tree/table/editable.0
>> >Rather
>> > > than
>> > > >>>>> use
>> > > >>>>> the Tree table I must alter an existing DataTable. I was
>> thinking
>> > > that
>> > > >>>>> I could create an editable textfield for the cells which I could
>> > > enable
>> > > >>>>> or
>> > > >>>>> disable using an edit link in the first column.
>> > > >>>>>
>> > > >>>>> A bit like this:
>> > > >>>>>
>> > > >>>>> Edit | col1 | col2
>> > > >>>>> ============
>> > > >>>>> edit | text | ksfuh
>> > > >>>>> -------------------------
>> > > >>>>> edit | text | fsdkl
>> > > >>>>>
>> > > >>>>> Using the edit link I can get the model object of the row but
>> I'm
>> > not
>> > > >>>>> sure
>> > > >>>>> how I can get the row that represents this and set it's cells to
>> > > >>>>> editable.
>> > > >>>>>
>> > > >>>>> The Editable text field is much like the one in the example and
>> > with
>> > > the
>> > > >>>>> entire table wrapped in a form. This means I can deal with the
>> > > >>>>> submission
>> > > >>>>> of the changes easy enough.
>> > > >>>>>
>> > > >>>>>
>> > > >>>>> Perhaps this is the wrong way to go about it....hmmm, thoughts?
>> > > >>>>>
>> > > >>>>>
>> > > >>>>
>> > > >>>>
>> > ---------------------------------------------------------------------
>> > > >>>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>> > > >>>> For additional commands, e-mail: users-help@wicket.apache.org
>> > > >>>>
>> > > >>>>
>> > > >>>
>> > > >>
>> > >
>> >
>>
>>
>>
>> --
>> Jeremy Thomerson
>> http://wickettraining.com
>> *Need a CMS for Wicket?  Use Brix! http://brixcms.org*
>>
>
>

Re: Accessing the cells in a row of a DataTable

Posted by Mark Doyle <ma...@googlemail.com>.
Of course, here is the entire Panel constructor:

private DropDownChoice<String> dropdown;

public AjaxDropDownChoicePanel(String id, IModel<String> model,
IModel<List<String>> choicesModel) {
    super(id);
    System.out.println("dropdown model = " + model.getObject());

    dropdown = new DropDownChoice<String>("dropdown", model, choicesModel);
    dropdown.setOutputMarkupId(true);
    dropdown.add(new AjaxFormComponentUpdatingBehavior("onchange") {
        private static final long serialVersionUID = 1L;

        protected void onUpdate(AjaxRequestTarget target) {
            dropdown.setEnabled(false);
            System.err.println("Not yet implemented but you selected " +
dropdown.getDefaultModelObjectAsString());
            target.addComponent(dropdown);
        }
    });
    add(dropdown);
}

On Wed, Oct 27, 2010 at 4:54 AM, Jeremy Thomerson <jeremy@wickettraining.com
> wrote:

> Show the code for the dropdownchoice creation (in your panel)
>
> On Tue, Oct 26, 2010 at 6:14 PM, Mark Doyle <markjohndoyle@googlemail.com
> >wrote:
>
> > I suppose this is related so I'll keep the thread going.
> >
> > As part of the above use case I have created a custom PropertyColumn that
> > uses a DropDownChoice.
> >
> > Everything seems to be working except for the initial display, this is
> > always set to "Choose One".
> >
> > The code that builds the dropdown is in the populateItem method of the
> > custom Property Column.  As you can see it has a model set
> (propertyModel)
> > which wraps a String.
> >
> > PropertyModel<String> propertyModel = new PropertyModel<String>(rowModel,
> > getPropertyExpression());
> > System.out.println("propertyModel value = " + propertyModel.getObject());
> > AjaxDropDownChoicePanel cp = new AjaxDropDownChoicePanel(componentId,
> > propertyModel, selectionOptionsModel);
> >
> > The AjaxDropDownChoicePanel is simply a panel that wraps the DropDown in
> a
> > some select tags.  It instantiates a DropDownChoice with the passed in
> > parameters.  The DropDownChoice is instantiated is of type String, that
> > is, DropDownChoice<String>.
> >
> > NOTE: The syso is printing the expected value.
> >
> >
> >
> > On Sat, Oct 23, 2010 at 10:18 PM, James Carman
> > <ja...@carmanconsulting.com>wrote:
> >
> > > Use a fragment.  Search this list for my FragmentColumn.  I think I've
> > > posted it before
> > > On Oct 23, 2010 4:04 PM, "Mark Doyle" <ma...@googlemail.com>
> > > wrote:
> > > > Ok, I've nearly got this finished.
> > > >
> > > > Does anybody know how to add a link in populateItem() that doesn't
> > render
> > > as
> > > > "[cell]"? I could create a customised Panel I suppose but it seems
> like
> > > > overkill.
> > > >
> > > > Maybe a fragment...hmmm
> > > >
> > > >
> > > > On Fri, Oct 22, 2010 at 11:56 AM, Mark Doyle
> > > > <ma...@googlemail.com>wrote:
> > > >
> > > >> Oh and the table isn't the parent:
> > > >>
> > > >> // get the table to rerender
> > > >> target.addComponent(this.getParent());
> > > >>
> > > >> I had to do a six step "parental grab"; I'm sure there is a better
> > way!
> > > :D
> > > >>
> > > >>
> > > >>
> > > >> On Fri, Oct 22, 2010 at 11:54 AM, Mark Doyle <
> > > markjohndoyle@googlemail.com
> > > >> > wrote:
> > > >>
> > > >>> Thanks Mike, this was definitely a great pointer in the right
> > > direction;
> > > >>> I'm beginning to grasp the column system now.
> > > >>>
> > > >>> I do have some issues though as detailed below.
> > > >>>
> > > >>> Firstly, my business model is out of my control so I had to wrap
> that
> > > in
> > > a
> > > >>> class that contains the editable state. I don't like doing that it
> > but
> > > it's
> > > >>> useful to see if I can get it to work and it shouldn't effect the
> > > process on
> > > >>> the whole.
> > > >>>
> > > >>> The main difference is I'm attempting to do this using different
> > > columns,
> > > >>> that is, not having a custom column that takes a type and switches.
> > The
> > > >>> problem is that the models for each column seem to wrap different
> > > instances
> > > >>> of the business object.
> > > >>>
> > > >>> The code below shows how I'm creating the columns. The link in the
> > > >>> AbstractColumn grabs the business object and toggles editable.
> > > >>> The EditablePropertyColumn's populateItem method then get's it's
> > > rowModel
> > > >>> object (the business object) and checks the editable state. This is
> > > where
> > > >>> it goes wrong as each column seems to have it's own copy of the
> rows
> > > >>> business model object. I guess this is how the columns with with
> > > datagrid.
> > > >>>
> > > >>> /**
> > > >>> * Creates the columns for the synonym data table
> > > >>> *
> > > >>> * @return
> > > >>> */
> > > >>> @SuppressWarnings("serial")
> > > >>> private List<IColumn<EditStateSynonymWrapper>> createColumns() {
> > > >>> List<IColumn<EditStateSynonymWrapper>> columns = new
> > > >>> ArrayList<IColumn<EditStateSynonymWrapper>>();
> > > >>>
> > > >>> columns.add(new AbstractColumn<EditStateSynonymWrapper>(new
> > > >>> Model<String>("Edit")) {
> > > >>> public void
> > populateItem(Item<ICellPopulator<EditStateSynonymWrapper>>
> > > >>> cellItem, String componentId, IModel<EditStateSynonymWrapper>
> model)
> > {
> > > >>> AjaxFallbackLink<EditStateSynonymWrapper> editLink = new
> > > >>> AjaxFallbackLink<EditStateSynonymWrapper>(componentId, model) {
> > > >>> @Override
> > > >>> public void onClick(AjaxRequestTarget target) {
> > > >>> EditStateSynonymWrapper selected = (EditStateSynonymWrapper)
> > > >>> getDefaultModelObject();
> > > >>> System.out.println("selected value = " +
> > > selected.wrappedSynonym.value);
> > > >>> selected.setEditing(!selected.isEditing());
> > > >>>
> > > >>> // FIXME WHAT!? There must be a better way than this to get the
> > parent
> > > >>> table. :D
> > > >>> MarkupContainer dataTable =
> > > >>>
> > >
> getParent().getParent().getParent().getParent().getParent().getParent();
> > > >>> target.addComponent(dataTable);
> > > >>> }
> > > >>> };
> > > >>> cellItem.add(editLink);
> > > >>> // cellItem.add(new EditLinkFragment(componentId,
> > > SynonymAdminPanel.this,
> > > >>> model));
> > > >>> }
> > > >>> });
> > > >>>
> > > >>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
> > > >>> Model<String>("Category"), "wrappedSynonym.category"));
> > > >>> // columns.add(new
> > EditablePropertyColumn<EditStateSynonymWrapper>(new
> > > >>> Model<String>("State"),
> > > >>> // "wrappedSynonym.state", new PropertyModel<Synonym>(this,
> > > "selected")));
> > > >>> columns.add(new EditablePropertyColumn<EditStateSynonymWrapper>(new
> > > >>> Model<String>("State"), "wrappedSynonym.state"));
> > > >>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
> > > >>> Model<String>("Root"), "wrappedSynonym.root"));
> > > >>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
> > > >>> Model<String>("Value"), "wrappedSynonym.value"));
> > > >>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
> > > >>> Model<String>("Rational"), "wrappedSynonym.rational"));
> > > >>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
> > > >>> Model<String>("Taxonomy parent"),
> "wrappedSynonym.taxonomyParent"));
> > > >>>
> > > >>> return columns;
> > > >>> }
> > > >>>
> > > >>>
> > > >>>
> > > >>> On Thu, Oct 21, 2010 at 3:50 PM, Michael O'Cleirigh <
> > > >>> michael.ocleirigh@rivulet.ca> wrote:
> > > >>>
> > > >>>> Hi Mark,
> > > >>>>
> > > >>>> The cell's of a datatable are created by the IColumn. So you need
> to
> > > >>>> create a wrapping object or additional IModel that contains the
> > > edit-ability
> > > >>>> of each row and then use that inside the populateItem(...) method
> of
> > > the
> > > >>>> column to figure out which case to show (i.e. the label or the
> > > textfield).
> > > >>>>
> > > >>>> One way to persist the change immediately is to use an
> > > >>>> AjaxFormComponentUpdatingBehavior on the onblur event of the
> > textfield
> > > to
> > > >>>> push the changes through.
> > > >>>>
> > > >>>> Do something like this:
> > > >>>>
> > > >>>> class MyColumn extends AbstractColumn<BusinessObject> {
> > > >>>>
> > > >>>> public static enum ColumnType { LINK, COL1, COL2 };
> > > >>>>
> > > >>>> private ColumnType type;
> > > >>>>
> > > >>>> public MyColumn (IModel<String>header, ColumnType type) {
> > > >>>> super (header);
> > > >>>> this.type = type;
> > > >>>> }
> > > >>>> @Override
> > > >>>> public void populateItem(Item<ICellPopulator<BusinessObject>>
> > > >>>> cellItem,
> > > >>>> String componentId, IModel<BusinessObject> rowModel) {
> > > >>>>
> > > >>>>
> > > >>>> switch (this.type) {
> > > >>>>
> > > >>>> case LINK :
> > > >>>> // add in the ajax link to the cell item
> > > >>>> // inside the onclick do:
> > > >>>> // get the row model object and then set its editable
> > > >>>> field.
> > > >>>> cellItem.add(new AjaxLink(componentId) {
> > > >>>> public void onClick(AjaxRequestTarget target) {
> > > >>>> BusinessObject bo =
> > > >>>> rowModel.getObject();
> > > >>>>
> > > >>>>
> > > >>>> bo.setEditable(true);
> > > >>>> // get the table to rerender
> > > >>>> target.addComponent(this.getParent());
> > > >>>> }
> > > >>>> });
> > > >>>>
> > > >>>> break;
> > > >>>>
> > > >>>> case COL1:
> > > >>>> case COL2:
> > > >>>>
> > > >>>> BusinessObject bo = rowModel.getObject();
> > > >>>>
> > > >>>>
> > > >>>> if (bo.isEditable()) {
> > > >>>> // this might not work as textfield wants an input
> > > >>>> tag but you can put the field on a panel and then add in the panel
> > > here.
> > > >>>> cellItem.add (new TextField(componentId, )
> > > >>>> }
> > > >>>> else {
> > > >>>> cellItem.add(new Label(componentId, ...)
> > > >>>> }
> > > >>>>
> > > >>>> }
> > > >>>>
> > > >>>> }
> > > >>>> };
> > > >>>>
> > > >>>> Regards,
> > > >>>>
> > > >>>> Mike
> > > >>>>
> > > >>>> Hi all,
> > > >>>>>
> > > >>>>> I'm having a bit of trouble wrapping my head around the DataTable
> > > with
> > > >>>>> regards to what I need to do.
> > > >>>>>
> > > >>>>> The perfect example of my goal is in Wicket Examples, namely, the
> > > Ajax
> > > >>>>> Editable Tree Table:
> > > >>>>> http://wicketstuff.org/wicket14/ajax/tree/table/editable.0
> > > >>>>>
> > > >>>>> <http://wicketstuff.org/wicket14/ajax/tree/table/editable.0
> >Rather
> > > than
> > > >>>>> use
> > > >>>>> the Tree table I must alter an existing DataTable. I was thinking
> > > that
> > > >>>>> I could create an editable textfield for the cells which I could
> > > enable
> > > >>>>> or
> > > >>>>> disable using an edit link in the first column.
> > > >>>>>
> > > >>>>> A bit like this:
> > > >>>>>
> > > >>>>> Edit | col1 | col2
> > > >>>>> ============
> > > >>>>> edit | text | ksfuh
> > > >>>>> -------------------------
> > > >>>>> edit | text | fsdkl
> > > >>>>>
> > > >>>>> Using the edit link I can get the model object of the row but I'm
> > not
> > > >>>>> sure
> > > >>>>> how I can get the row that represents this and set it's cells to
> > > >>>>> editable.
> > > >>>>>
> > > >>>>> The Editable text field is much like the one in the example and
> > with
> > > the
> > > >>>>> entire table wrapped in a form. This means I can deal with the
> > > >>>>> submission
> > > >>>>> of the changes easy enough.
> > > >>>>>
> > > >>>>>
> > > >>>>> Perhaps this is the wrong way to go about it....hmmm, thoughts?
> > > >>>>>
> > > >>>>>
> > > >>>>
> > > >>>>
> > ---------------------------------------------------------------------
> > > >>>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> > > >>>> For additional commands, e-mail: users-help@wicket.apache.org
> > > >>>>
> > > >>>>
> > > >>>
> > > >>
> > >
> >
>
>
>
> --
> Jeremy Thomerson
> http://wickettraining.com
> *Need a CMS for Wicket?  Use Brix! http://brixcms.org*
>

Re: Accessing the cells in a row of a DataTable

Posted by Mark Doyle <ma...@googlemail.com>.
Of course, here is the entire Panel constructor:

private DropDownChoice<String> dropdown;

public AjaxDropDownChoicePanel(String id, IModel<String> model,
IModel<List<String>> choicesModel) {
    super(id);
    System.out.println("dropdown model = " + model.getObject());

    dropdown = new DropDownChoice<String>("dropdown", model, choicesModel);
    dropdown.setOutputMarkupId(true);
    dropdown.add(new AjaxFormComponentUpdatingBehavior("onchange") {
        private static final long serialVersionUID = 1L;

        protected void onUpdate(AjaxRequestTarget target) {
            dropdown.setEnabled(false);
            System.err.println("Not yet implemented but you selected " +
dropdown.getDefaultModelObjectAsString());
            target.addComponent(dropdown);
        }
    });
    add(dropdown);
}

On Wed, Oct 27, 2010 at 4:54 AM, Jeremy Thomerson <jeremy@wickettraining.com
> wrote:

> Show the code for the dropdownchoice creation (in your panel)
>
> On Tue, Oct 26, 2010 at 6:14 PM, Mark Doyle <markjohndoyle@googlemail.com
> >wrote:
>
> > I suppose this is related so I'll keep the thread going.
> >
> > As part of the above use case I have created a custom PropertyColumn that
> > uses a DropDownChoice.
> >
> > Everything seems to be working except for the initial display, this is
> > always set to "Choose One".
> >
> > The code that builds the dropdown is in the populateItem method of the
> > custom Property Column.  As you can see it has a model set
> (propertyModel)
> > which wraps a String.
> >
> > PropertyModel<String> propertyModel = new PropertyModel<String>(rowModel,
> > getPropertyExpression());
> > System.out.println("propertyModel value = " + propertyModel.getObject());
> > AjaxDropDownChoicePanel cp = new AjaxDropDownChoicePanel(componentId,
> > propertyModel, selectionOptionsModel);
> >
> > The AjaxDropDownChoicePanel is simply a panel that wraps the DropDown in
> a
> > some select tags.  It instantiates a DropDownChoice with the passed in
> > parameters.  The DropDownChoice is instantiated is of type String, that
> > is, DropDownChoice<String>.
> >
> > NOTE: The syso is printing the expected value.
> >
> >
> >
> > On Sat, Oct 23, 2010 at 10:18 PM, James Carman
> > <ja...@carmanconsulting.com>wrote:
> >
> > > Use a fragment.  Search this list for my FragmentColumn.  I think I've
> > > posted it before
> > > On Oct 23, 2010 4:04 PM, "Mark Doyle" <ma...@googlemail.com>
> > > wrote:
> > > > Ok, I've nearly got this finished.
> > > >
> > > > Does anybody know how to add a link in populateItem() that doesn't
> > render
> > > as
> > > > "[cell]"? I could create a customised Panel I suppose but it seems
> like
> > > > overkill.
> > > >
> > > > Maybe a fragment...hmmm
> > > >
> > > >
> > > > On Fri, Oct 22, 2010 at 11:56 AM, Mark Doyle
> > > > <ma...@googlemail.com>wrote:
> > > >
> > > >> Oh and the table isn't the parent:
> > > >>
> > > >> // get the table to rerender
> > > >> target.addComponent(this.getParent());
> > > >>
> > > >> I had to do a six step "parental grab"; I'm sure there is a better
> > way!
> > > :D
> > > >>
> > > >>
> > > >>
> > > >> On Fri, Oct 22, 2010 at 11:54 AM, Mark Doyle <
> > > markjohndoyle@googlemail.com
> > > >> > wrote:
> > > >>
> > > >>> Thanks Mike, this was definitely a great pointer in the right
> > > direction;
> > > >>> I'm beginning to grasp the column system now.
> > > >>>
> > > >>> I do have some issues though as detailed below.
> > > >>>
> > > >>> Firstly, my business model is out of my control so I had to wrap
> that
> > > in
> > > a
> > > >>> class that contains the editable state. I don't like doing that it
> > but
> > > it's
> > > >>> useful to see if I can get it to work and it shouldn't effect the
> > > process on
> > > >>> the whole.
> > > >>>
> > > >>> The main difference is I'm attempting to do this using different
> > > columns,
> > > >>> that is, not having a custom column that takes a type and switches.
> > The
> > > >>> problem is that the models for each column seem to wrap different
> > > instances
> > > >>> of the business object.
> > > >>>
> > > >>> The code below shows how I'm creating the columns. The link in the
> > > >>> AbstractColumn grabs the business object and toggles editable.
> > > >>> The EditablePropertyColumn's populateItem method then get's it's
> > > rowModel
> > > >>> object (the business object) and checks the editable state. This is
> > > where
> > > >>> it goes wrong as each column seems to have it's own copy of the
> rows
> > > >>> business model object. I guess this is how the columns with with
> > > datagrid.
> > > >>>
> > > >>> /**
> > > >>> * Creates the columns for the synonym data table
> > > >>> *
> > > >>> * @return
> > > >>> */
> > > >>> @SuppressWarnings("serial")
> > > >>> private List<IColumn<EditStateSynonymWrapper>> createColumns() {
> > > >>> List<IColumn<EditStateSynonymWrapper>> columns = new
> > > >>> ArrayList<IColumn<EditStateSynonymWrapper>>();
> > > >>>
> > > >>> columns.add(new AbstractColumn<EditStateSynonymWrapper>(new
> > > >>> Model<String>("Edit")) {
> > > >>> public void
> > populateItem(Item<ICellPopulator<EditStateSynonymWrapper>>
> > > >>> cellItem, String componentId, IModel<EditStateSynonymWrapper>
> model)
> > {
> > > >>> AjaxFallbackLink<EditStateSynonymWrapper> editLink = new
> > > >>> AjaxFallbackLink<EditStateSynonymWrapper>(componentId, model) {
> > > >>> @Override
> > > >>> public void onClick(AjaxRequestTarget target) {
> > > >>> EditStateSynonymWrapper selected = (EditStateSynonymWrapper)
> > > >>> getDefaultModelObject();
> > > >>> System.out.println("selected value = " +
> > > selected.wrappedSynonym.value);
> > > >>> selected.setEditing(!selected.isEditing());
> > > >>>
> > > >>> // FIXME WHAT!? There must be a better way than this to get the
> > parent
> > > >>> table. :D
> > > >>> MarkupContainer dataTable =
> > > >>>
> > >
> getParent().getParent().getParent().getParent().getParent().getParent();
> > > >>> target.addComponent(dataTable);
> > > >>> }
> > > >>> };
> > > >>> cellItem.add(editLink);
> > > >>> // cellItem.add(new EditLinkFragment(componentId,
> > > SynonymAdminPanel.this,
> > > >>> model));
> > > >>> }
> > > >>> });
> > > >>>
> > > >>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
> > > >>> Model<String>("Category"), "wrappedSynonym.category"));
> > > >>> // columns.add(new
> > EditablePropertyColumn<EditStateSynonymWrapper>(new
> > > >>> Model<String>("State"),
> > > >>> // "wrappedSynonym.state", new PropertyModel<Synonym>(this,
> > > "selected")));
> > > >>> columns.add(new EditablePropertyColumn<EditStateSynonymWrapper>(new
> > > >>> Model<String>("State"), "wrappedSynonym.state"));
> > > >>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
> > > >>> Model<String>("Root"), "wrappedSynonym.root"));
> > > >>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
> > > >>> Model<String>("Value"), "wrappedSynonym.value"));
> > > >>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
> > > >>> Model<String>("Rational"), "wrappedSynonym.rational"));
> > > >>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
> > > >>> Model<String>("Taxonomy parent"),
> "wrappedSynonym.taxonomyParent"));
> > > >>>
> > > >>> return columns;
> > > >>> }
> > > >>>
> > > >>>
> > > >>>
> > > >>> On Thu, Oct 21, 2010 at 3:50 PM, Michael O'Cleirigh <
> > > >>> michael.ocleirigh@rivulet.ca> wrote:
> > > >>>
> > > >>>> Hi Mark,
> > > >>>>
> > > >>>> The cell's of a datatable are created by the IColumn. So you need
> to
> > > >>>> create a wrapping object or additional IModel that contains the
> > > edit-ability
> > > >>>> of each row and then use that inside the populateItem(...) method
> of
> > > the
> > > >>>> column to figure out which case to show (i.e. the label or the
> > > textfield).
> > > >>>>
> > > >>>> One way to persist the change immediately is to use an
> > > >>>> AjaxFormComponentUpdatingBehavior on the onblur event of the
> > textfield
> > > to
> > > >>>> push the changes through.
> > > >>>>
> > > >>>> Do something like this:
> > > >>>>
> > > >>>> class MyColumn extends AbstractColumn<BusinessObject> {
> > > >>>>
> > > >>>> public static enum ColumnType { LINK, COL1, COL2 };
> > > >>>>
> > > >>>> private ColumnType type;
> > > >>>>
> > > >>>> public MyColumn (IModel<String>header, ColumnType type) {
> > > >>>> super (header);
> > > >>>> this.type = type;
> > > >>>> }
> > > >>>> @Override
> > > >>>> public void populateItem(Item<ICellPopulator<BusinessObject>>
> > > >>>> cellItem,
> > > >>>> String componentId, IModel<BusinessObject> rowModel) {
> > > >>>>
> > > >>>>
> > > >>>> switch (this.type) {
> > > >>>>
> > > >>>> case LINK :
> > > >>>> // add in the ajax link to the cell item
> > > >>>> // inside the onclick do:
> > > >>>> // get the row model object and then set its editable
> > > >>>> field.
> > > >>>> cellItem.add(new AjaxLink(componentId) {
> > > >>>> public void onClick(AjaxRequestTarget target) {
> > > >>>> BusinessObject bo =
> > > >>>> rowModel.getObject();
> > > >>>>
> > > >>>>
> > > >>>> bo.setEditable(true);
> > > >>>> // get the table to rerender
> > > >>>> target.addComponent(this.getParent());
> > > >>>> }
> > > >>>> });
> > > >>>>
> > > >>>> break;
> > > >>>>
> > > >>>> case COL1:
> > > >>>> case COL2:
> > > >>>>
> > > >>>> BusinessObject bo = rowModel.getObject();
> > > >>>>
> > > >>>>
> > > >>>> if (bo.isEditable()) {
> > > >>>> // this might not work as textfield wants an input
> > > >>>> tag but you can put the field on a panel and then add in the panel
> > > here.
> > > >>>> cellItem.add (new TextField(componentId, )
> > > >>>> }
> > > >>>> else {
> > > >>>> cellItem.add(new Label(componentId, ...)
> > > >>>> }
> > > >>>>
> > > >>>> }
> > > >>>>
> > > >>>> }
> > > >>>> };
> > > >>>>
> > > >>>> Regards,
> > > >>>>
> > > >>>> Mike
> > > >>>>
> > > >>>> Hi all,
> > > >>>>>
> > > >>>>> I'm having a bit of trouble wrapping my head around the DataTable
> > > with
> > > >>>>> regards to what I need to do.
> > > >>>>>
> > > >>>>> The perfect example of my goal is in Wicket Examples, namely, the
> > > Ajax
> > > >>>>> Editable Tree Table:
> > > >>>>> http://wicketstuff.org/wicket14/ajax/tree/table/editable.0
> > > >>>>>
> > > >>>>> <http://wicketstuff.org/wicket14/ajax/tree/table/editable.0
> >Rather
> > > than
> > > >>>>> use
> > > >>>>> the Tree table I must alter an existing DataTable. I was thinking
> > > that
> > > >>>>> I could create an editable textfield for the cells which I could
> > > enable
> > > >>>>> or
> > > >>>>> disable using an edit link in the first column.
> > > >>>>>
> > > >>>>> A bit like this:
> > > >>>>>
> > > >>>>> Edit | col1 | col2
> > > >>>>> ============
> > > >>>>> edit | text | ksfuh
> > > >>>>> -------------------------
> > > >>>>> edit | text | fsdkl
> > > >>>>>
> > > >>>>> Using the edit link I can get the model object of the row but I'm
> > not
> > > >>>>> sure
> > > >>>>> how I can get the row that represents this and set it's cells to
> > > >>>>> editable.
> > > >>>>>
> > > >>>>> The Editable text field is much like the one in the example and
> > with
> > > the
> > > >>>>> entire table wrapped in a form. This means I can deal with the
> > > >>>>> submission
> > > >>>>> of the changes easy enough.
> > > >>>>>
> > > >>>>>
> > > >>>>> Perhaps this is the wrong way to go about it....hmmm, thoughts?
> > > >>>>>
> > > >>>>>
> > > >>>>
> > > >>>>
> > ---------------------------------------------------------------------
> > > >>>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> > > >>>> For additional commands, e-mail: users-help@wicket.apache.org
> > > >>>>
> > > >>>>
> > > >>>
> > > >>
> > >
> >
>
>
>
> --
> Jeremy Thomerson
> http://wickettraining.com
> *Need a CMS for Wicket?  Use Brix! http://brixcms.org*
>

Re: Accessing the cells in a row of a DataTable

Posted by Jeremy Thomerson <je...@wickettraining.com>.
Show the code for the dropdownchoice creation (in your panel)

On Tue, Oct 26, 2010 at 6:14 PM, Mark Doyle <ma...@googlemail.com>wrote:

> I suppose this is related so I'll keep the thread going.
>
> As part of the above use case I have created a custom PropertyColumn that
> uses a DropDownChoice.
>
> Everything seems to be working except for the initial display, this is
> always set to "Choose One".
>
> The code that builds the dropdown is in the populateItem method of the
> custom Property Column.  As you can see it has a model set (propertyModel)
> which wraps a String.
>
> PropertyModel<String> propertyModel = new PropertyModel<String>(rowModel,
> getPropertyExpression());
> System.out.println("propertyModel value = " + propertyModel.getObject());
> AjaxDropDownChoicePanel cp = new AjaxDropDownChoicePanel(componentId,
> propertyModel, selectionOptionsModel);
>
> The AjaxDropDownChoicePanel is simply a panel that wraps the DropDown in a
> some select tags.  It instantiates a DropDownChoice with the passed in
> parameters.  The DropDownChoice is instantiated is of type String, that
> is, DropDownChoice<String>.
>
> NOTE: The syso is printing the expected value.
>
>
>
> On Sat, Oct 23, 2010 at 10:18 PM, James Carman
> <ja...@carmanconsulting.com>wrote:
>
> > Use a fragment.  Search this list for my FragmentColumn.  I think I've
> > posted it before
> > On Oct 23, 2010 4:04 PM, "Mark Doyle" <ma...@googlemail.com>
> > wrote:
> > > Ok, I've nearly got this finished.
> > >
> > > Does anybody know how to add a link in populateItem() that doesn't
> render
> > as
> > > "[cell]"? I could create a customised Panel I suppose but it seems like
> > > overkill.
> > >
> > > Maybe a fragment...hmmm
> > >
> > >
> > > On Fri, Oct 22, 2010 at 11:56 AM, Mark Doyle
> > > <ma...@googlemail.com>wrote:
> > >
> > >> Oh and the table isn't the parent:
> > >>
> > >> // get the table to rerender
> > >> target.addComponent(this.getParent());
> > >>
> > >> I had to do a six step "parental grab"; I'm sure there is a better
> way!
> > :D
> > >>
> > >>
> > >>
> > >> On Fri, Oct 22, 2010 at 11:54 AM, Mark Doyle <
> > markjohndoyle@googlemail.com
> > >> > wrote:
> > >>
> > >>> Thanks Mike, this was definitely a great pointer in the right
> > direction;
> > >>> I'm beginning to grasp the column system now.
> > >>>
> > >>> I do have some issues though as detailed below.
> > >>>
> > >>> Firstly, my business model is out of my control so I had to wrap that
> > in
> > a
> > >>> class that contains the editable state. I don't like doing that it
> but
> > it's
> > >>> useful to see if I can get it to work and it shouldn't effect the
> > process on
> > >>> the whole.
> > >>>
> > >>> The main difference is I'm attempting to do this using different
> > columns,
> > >>> that is, not having a custom column that takes a type and switches.
> The
> > >>> problem is that the models for each column seem to wrap different
> > instances
> > >>> of the business object.
> > >>>
> > >>> The code below shows how I'm creating the columns. The link in the
> > >>> AbstractColumn grabs the business object and toggles editable.
> > >>> The EditablePropertyColumn's populateItem method then get's it's
> > rowModel
> > >>> object (the business object) and checks the editable state. This is
> > where
> > >>> it goes wrong as each column seems to have it's own copy of the rows
> > >>> business model object. I guess this is how the columns with with
> > datagrid.
> > >>>
> > >>> /**
> > >>> * Creates the columns for the synonym data table
> > >>> *
> > >>> * @return
> > >>> */
> > >>> @SuppressWarnings("serial")
> > >>> private List<IColumn<EditStateSynonymWrapper>> createColumns() {
> > >>> List<IColumn<EditStateSynonymWrapper>> columns = new
> > >>> ArrayList<IColumn<EditStateSynonymWrapper>>();
> > >>>
> > >>> columns.add(new AbstractColumn<EditStateSynonymWrapper>(new
> > >>> Model<String>("Edit")) {
> > >>> public void
> populateItem(Item<ICellPopulator<EditStateSynonymWrapper>>
> > >>> cellItem, String componentId, IModel<EditStateSynonymWrapper> model)
> {
> > >>> AjaxFallbackLink<EditStateSynonymWrapper> editLink = new
> > >>> AjaxFallbackLink<EditStateSynonymWrapper>(componentId, model) {
> > >>> @Override
> > >>> public void onClick(AjaxRequestTarget target) {
> > >>> EditStateSynonymWrapper selected = (EditStateSynonymWrapper)
> > >>> getDefaultModelObject();
> > >>> System.out.println("selected value = " +
> > selected.wrappedSynonym.value);
> > >>> selected.setEditing(!selected.isEditing());
> > >>>
> > >>> // FIXME WHAT!? There must be a better way than this to get the
> parent
> > >>> table. :D
> > >>> MarkupContainer dataTable =
> > >>>
> > getParent().getParent().getParent().getParent().getParent().getParent();
> > >>> target.addComponent(dataTable);
> > >>> }
> > >>> };
> > >>> cellItem.add(editLink);
> > >>> // cellItem.add(new EditLinkFragment(componentId,
> > SynonymAdminPanel.this,
> > >>> model));
> > >>> }
> > >>> });
> > >>>
> > >>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
> > >>> Model<String>("Category"), "wrappedSynonym.category"));
> > >>> // columns.add(new
> EditablePropertyColumn<EditStateSynonymWrapper>(new
> > >>> Model<String>("State"),
> > >>> // "wrappedSynonym.state", new PropertyModel<Synonym>(this,
> > "selected")));
> > >>> columns.add(new EditablePropertyColumn<EditStateSynonymWrapper>(new
> > >>> Model<String>("State"), "wrappedSynonym.state"));
> > >>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
> > >>> Model<String>("Root"), "wrappedSynonym.root"));
> > >>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
> > >>> Model<String>("Value"), "wrappedSynonym.value"));
> > >>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
> > >>> Model<String>("Rational"), "wrappedSynonym.rational"));
> > >>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
> > >>> Model<String>("Taxonomy parent"), "wrappedSynonym.taxonomyParent"));
> > >>>
> > >>> return columns;
> > >>> }
> > >>>
> > >>>
> > >>>
> > >>> On Thu, Oct 21, 2010 at 3:50 PM, Michael O'Cleirigh <
> > >>> michael.ocleirigh@rivulet.ca> wrote:
> > >>>
> > >>>> Hi Mark,
> > >>>>
> > >>>> The cell's of a datatable are created by the IColumn. So you need to
> > >>>> create a wrapping object or additional IModel that contains the
> > edit-ability
> > >>>> of each row and then use that inside the populateItem(...) method of
> > the
> > >>>> column to figure out which case to show (i.e. the label or the
> > textfield).
> > >>>>
> > >>>> One way to persist the change immediately is to use an
> > >>>> AjaxFormComponentUpdatingBehavior on the onblur event of the
> textfield
> > to
> > >>>> push the changes through.
> > >>>>
> > >>>> Do something like this:
> > >>>>
> > >>>> class MyColumn extends AbstractColumn<BusinessObject> {
> > >>>>
> > >>>> public static enum ColumnType { LINK, COL1, COL2 };
> > >>>>
> > >>>> private ColumnType type;
> > >>>>
> > >>>> public MyColumn (IModel<String>header, ColumnType type) {
> > >>>> super (header);
> > >>>> this.type = type;
> > >>>> }
> > >>>> @Override
> > >>>> public void populateItem(Item<ICellPopulator<BusinessObject>>
> > >>>> cellItem,
> > >>>> String componentId, IModel<BusinessObject> rowModel) {
> > >>>>
> > >>>>
> > >>>> switch (this.type) {
> > >>>>
> > >>>> case LINK :
> > >>>> // add in the ajax link to the cell item
> > >>>> // inside the onclick do:
> > >>>> // get the row model object and then set its editable
> > >>>> field.
> > >>>> cellItem.add(new AjaxLink(componentId) {
> > >>>> public void onClick(AjaxRequestTarget target) {
> > >>>> BusinessObject bo =
> > >>>> rowModel.getObject();
> > >>>>
> > >>>>
> > >>>> bo.setEditable(true);
> > >>>> // get the table to rerender
> > >>>> target.addComponent(this.getParent());
> > >>>> }
> > >>>> });
> > >>>>
> > >>>> break;
> > >>>>
> > >>>> case COL1:
> > >>>> case COL2:
> > >>>>
> > >>>> BusinessObject bo = rowModel.getObject();
> > >>>>
> > >>>>
> > >>>> if (bo.isEditable()) {
> > >>>> // this might not work as textfield wants an input
> > >>>> tag but you can put the field on a panel and then add in the panel
> > here.
> > >>>> cellItem.add (new TextField(componentId, )
> > >>>> }
> > >>>> else {
> > >>>> cellItem.add(new Label(componentId, ...)
> > >>>> }
> > >>>>
> > >>>> }
> > >>>>
> > >>>> }
> > >>>> };
> > >>>>
> > >>>> Regards,
> > >>>>
> > >>>> Mike
> > >>>>
> > >>>> Hi all,
> > >>>>>
> > >>>>> I'm having a bit of trouble wrapping my head around the DataTable
> > with
> > >>>>> regards to what I need to do.
> > >>>>>
> > >>>>> The perfect example of my goal is in Wicket Examples, namely, the
> > Ajax
> > >>>>> Editable Tree Table:
> > >>>>> http://wicketstuff.org/wicket14/ajax/tree/table/editable.0
> > >>>>>
> > >>>>> <http://wicketstuff.org/wicket14/ajax/tree/table/editable.0>Rather
> > than
> > >>>>> use
> > >>>>> the Tree table I must alter an existing DataTable. I was thinking
> > that
> > >>>>> I could create an editable textfield for the cells which I could
> > enable
> > >>>>> or
> > >>>>> disable using an edit link in the first column.
> > >>>>>
> > >>>>> A bit like this:
> > >>>>>
> > >>>>> Edit | col1 | col2
> > >>>>> ============
> > >>>>> edit | text | ksfuh
> > >>>>> -------------------------
> > >>>>> edit | text | fsdkl
> > >>>>>
> > >>>>> Using the edit link I can get the model object of the row but I'm
> not
> > >>>>> sure
> > >>>>> how I can get the row that represents this and set it's cells to
> > >>>>> editable.
> > >>>>>
> > >>>>> The Editable text field is much like the one in the example and
> with
> > the
> > >>>>> entire table wrapped in a form. This means I can deal with the
> > >>>>> submission
> > >>>>> of the changes easy enough.
> > >>>>>
> > >>>>>
> > >>>>> Perhaps this is the wrong way to go about it....hmmm, thoughts?
> > >>>>>
> > >>>>>
> > >>>>
> > >>>>
> ---------------------------------------------------------------------
> > >>>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> > >>>> For additional commands, e-mail: users-help@wicket.apache.org
> > >>>>
> > >>>>
> > >>>
> > >>
> >
>



-- 
Jeremy Thomerson
http://wickettraining.com
*Need a CMS for Wicket?  Use Brix! http://brixcms.org*

Re: Accessing the cells in a row of a DataTable

Posted by Mark Doyle <ma...@googlemail.com>.
I suppose this is related so I'll keep the thread going.

As part of the above use case I have created a custom PropertyColumn that
uses a DropDownChoice.

Everything seems to be working except for the initial display, this is
always set to "Choose One".

The code that builds the dropdown is in the populateItem method of the
custom Property Column.  As you can see it has a model set (propertyModel)
which wraps a String.

PropertyModel<String> propertyModel = new PropertyModel<String>(rowModel,
getPropertyExpression());
System.out.println("propertyModel value = " + propertyModel.getObject());
AjaxDropDownChoicePanel cp = new AjaxDropDownChoicePanel(componentId,
propertyModel, selectionOptionsModel);

The AjaxDropDownChoicePanel is simply a panel that wraps the DropDown in a
some select tags.  It instantiates a DropDownChoice with the passed in
parameters.  The DropDownChoice is instantiated is of type String, that
is, DropDownChoice<String>.

NOTE: The syso is printing the expected value.



On Sat, Oct 23, 2010 at 10:18 PM, James Carman
<ja...@carmanconsulting.com>wrote:

> Use a fragment.  Search this list for my FragmentColumn.  I think I've
> posted it before
> On Oct 23, 2010 4:04 PM, "Mark Doyle" <ma...@googlemail.com>
> wrote:
> > Ok, I've nearly got this finished.
> >
> > Does anybody know how to add a link in populateItem() that doesn't render
> as
> > "[cell]"? I could create a customised Panel I suppose but it seems like
> > overkill.
> >
> > Maybe a fragment...hmmm
> >
> >
> > On Fri, Oct 22, 2010 at 11:56 AM, Mark Doyle
> > <ma...@googlemail.com>wrote:
> >
> >> Oh and the table isn't the parent:
> >>
> >> // get the table to rerender
> >> target.addComponent(this.getParent());
> >>
> >> I had to do a six step "parental grab"; I'm sure there is a better way!
> :D
> >>
> >>
> >>
> >> On Fri, Oct 22, 2010 at 11:54 AM, Mark Doyle <
> markjohndoyle@googlemail.com
> >> > wrote:
> >>
> >>> Thanks Mike, this was definitely a great pointer in the right
> direction;
> >>> I'm beginning to grasp the column system now.
> >>>
> >>> I do have some issues though as detailed below.
> >>>
> >>> Firstly, my business model is out of my control so I had to wrap that
> in
> a
> >>> class that contains the editable state. I don't like doing that it but
> it's
> >>> useful to see if I can get it to work and it shouldn't effect the
> process on
> >>> the whole.
> >>>
> >>> The main difference is I'm attempting to do this using different
> columns,
> >>> that is, not having a custom column that takes a type and switches. The
> >>> problem is that the models for each column seem to wrap different
> instances
> >>> of the business object.
> >>>
> >>> The code below shows how I'm creating the columns. The link in the
> >>> AbstractColumn grabs the business object and toggles editable.
> >>> The EditablePropertyColumn's populateItem method then get's it's
> rowModel
> >>> object (the business object) and checks the editable state. This is
> where
> >>> it goes wrong as each column seems to have it's own copy of the rows
> >>> business model object. I guess this is how the columns with with
> datagrid.
> >>>
> >>> /**
> >>> * Creates the columns for the synonym data table
> >>> *
> >>> * @return
> >>> */
> >>> @SuppressWarnings("serial")
> >>> private List<IColumn<EditStateSynonymWrapper>> createColumns() {
> >>> List<IColumn<EditStateSynonymWrapper>> columns = new
> >>> ArrayList<IColumn<EditStateSynonymWrapper>>();
> >>>
> >>> columns.add(new AbstractColumn<EditStateSynonymWrapper>(new
> >>> Model<String>("Edit")) {
> >>> public void populateItem(Item<ICellPopulator<EditStateSynonymWrapper>>
> >>> cellItem, String componentId, IModel<EditStateSynonymWrapper> model) {
> >>> AjaxFallbackLink<EditStateSynonymWrapper> editLink = new
> >>> AjaxFallbackLink<EditStateSynonymWrapper>(componentId, model) {
> >>> @Override
> >>> public void onClick(AjaxRequestTarget target) {
> >>> EditStateSynonymWrapper selected = (EditStateSynonymWrapper)
> >>> getDefaultModelObject();
> >>> System.out.println("selected value = " +
> selected.wrappedSynonym.value);
> >>> selected.setEditing(!selected.isEditing());
> >>>
> >>> // FIXME WHAT!? There must be a better way than this to get the parent
> >>> table. :D
> >>> MarkupContainer dataTable =
> >>>
> getParent().getParent().getParent().getParent().getParent().getParent();
> >>> target.addComponent(dataTable);
> >>> }
> >>> };
> >>> cellItem.add(editLink);
> >>> // cellItem.add(new EditLinkFragment(componentId,
> SynonymAdminPanel.this,
> >>> model));
> >>> }
> >>> });
> >>>
> >>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
> >>> Model<String>("Category"), "wrappedSynonym.category"));
> >>> // columns.add(new EditablePropertyColumn<EditStateSynonymWrapper>(new
> >>> Model<String>("State"),
> >>> // "wrappedSynonym.state", new PropertyModel<Synonym>(this,
> "selected")));
> >>> columns.add(new EditablePropertyColumn<EditStateSynonymWrapper>(new
> >>> Model<String>("State"), "wrappedSynonym.state"));
> >>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
> >>> Model<String>("Root"), "wrappedSynonym.root"));
> >>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
> >>> Model<String>("Value"), "wrappedSynonym.value"));
> >>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
> >>> Model<String>("Rational"), "wrappedSynonym.rational"));
> >>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
> >>> Model<String>("Taxonomy parent"), "wrappedSynonym.taxonomyParent"));
> >>>
> >>> return columns;
> >>> }
> >>>
> >>>
> >>>
> >>> On Thu, Oct 21, 2010 at 3:50 PM, Michael O'Cleirigh <
> >>> michael.ocleirigh@rivulet.ca> wrote:
> >>>
> >>>> Hi Mark,
> >>>>
> >>>> The cell's of a datatable are created by the IColumn. So you need to
> >>>> create a wrapping object or additional IModel that contains the
> edit-ability
> >>>> of each row and then use that inside the populateItem(...) method of
> the
> >>>> column to figure out which case to show (i.e. the label or the
> textfield).
> >>>>
> >>>> One way to persist the change immediately is to use an
> >>>> AjaxFormComponentUpdatingBehavior on the onblur event of the textfield
> to
> >>>> push the changes through.
> >>>>
> >>>> Do something like this:
> >>>>
> >>>> class MyColumn extends AbstractColumn<BusinessObject> {
> >>>>
> >>>> public static enum ColumnType { LINK, COL1, COL2 };
> >>>>
> >>>> private ColumnType type;
> >>>>
> >>>> public MyColumn (IModel<String>header, ColumnType type) {
> >>>> super (header);
> >>>> this.type = type;
> >>>> }
> >>>> @Override
> >>>> public void populateItem(Item<ICellPopulator<BusinessObject>>
> >>>> cellItem,
> >>>> String componentId, IModel<BusinessObject> rowModel) {
> >>>>
> >>>>
> >>>> switch (this.type) {
> >>>>
> >>>> case LINK :
> >>>> // add in the ajax link to the cell item
> >>>> // inside the onclick do:
> >>>> // get the row model object and then set its editable
> >>>> field.
> >>>> cellItem.add(new AjaxLink(componentId) {
> >>>> public void onClick(AjaxRequestTarget target) {
> >>>> BusinessObject bo =
> >>>> rowModel.getObject();
> >>>>
> >>>>
> >>>> bo.setEditable(true);
> >>>> // get the table to rerender
> >>>> target.addComponent(this.getParent());
> >>>> }
> >>>> });
> >>>>
> >>>> break;
> >>>>
> >>>> case COL1:
> >>>> case COL2:
> >>>>
> >>>> BusinessObject bo = rowModel.getObject();
> >>>>
> >>>>
> >>>> if (bo.isEditable()) {
> >>>> // this might not work as textfield wants an input
> >>>> tag but you can put the field on a panel and then add in the panel
> here.
> >>>> cellItem.add (new TextField(componentId, )
> >>>> }
> >>>> else {
> >>>> cellItem.add(new Label(componentId, ...)
> >>>> }
> >>>>
> >>>> }
> >>>>
> >>>> }
> >>>> };
> >>>>
> >>>> Regards,
> >>>>
> >>>> Mike
> >>>>
> >>>> Hi all,
> >>>>>
> >>>>> I'm having a bit of trouble wrapping my head around the DataTable
> with
> >>>>> regards to what I need to do.
> >>>>>
> >>>>> The perfect example of my goal is in Wicket Examples, namely, the
> Ajax
> >>>>> Editable Tree Table:
> >>>>> http://wicketstuff.org/wicket14/ajax/tree/table/editable.0
> >>>>>
> >>>>> <http://wicketstuff.org/wicket14/ajax/tree/table/editable.0>Rather
> than
> >>>>> use
> >>>>> the Tree table I must alter an existing DataTable. I was thinking
> that
> >>>>> I could create an editable textfield for the cells which I could
> enable
> >>>>> or
> >>>>> disable using an edit link in the first column.
> >>>>>
> >>>>> A bit like this:
> >>>>>
> >>>>> Edit | col1 | col2
> >>>>> ============
> >>>>> edit | text | ksfuh
> >>>>> -------------------------
> >>>>> edit | text | fsdkl
> >>>>>
> >>>>> Using the edit link I can get the model object of the row but I'm not
> >>>>> sure
> >>>>> how I can get the row that represents this and set it's cells to
> >>>>> editable.
> >>>>>
> >>>>> The Editable text field is much like the one in the example and with
> the
> >>>>> entire table wrapped in a form. This means I can deal with the
> >>>>> submission
> >>>>> of the changes easy enough.
> >>>>>
> >>>>>
> >>>>> Perhaps this is the wrong way to go about it....hmmm, thoughts?
> >>>>>
> >>>>>
> >>>>
> >>>> ---------------------------------------------------------------------
> >>>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> >>>> For additional commands, e-mail: users-help@wicket.apache.org
> >>>>
> >>>>
> >>>
> >>
>

Re: Accessing the cells in a row of a DataTable

Posted by James Carman <ja...@carmanconsulting.com>.
Use a fragment.  Search this list for my FragmentColumn.  I think I've
posted it before
On Oct 23, 2010 4:04 PM, "Mark Doyle" <ma...@googlemail.com> wrote:
> Ok, I've nearly got this finished.
>
> Does anybody know how to add a link in populateItem() that doesn't render
as
> "[cell]"? I could create a customised Panel I suppose but it seems like
> overkill.
>
> Maybe a fragment...hmmm
>
>
> On Fri, Oct 22, 2010 at 11:56 AM, Mark Doyle
> <ma...@googlemail.com>wrote:
>
>> Oh and the table isn't the parent:
>>
>> // get the table to rerender
>> target.addComponent(this.getParent());
>>
>> I had to do a six step "parental grab"; I'm sure there is a better way!
:D
>>
>>
>>
>> On Fri, Oct 22, 2010 at 11:54 AM, Mark Doyle <
markjohndoyle@googlemail.com
>> > wrote:
>>
>>> Thanks Mike, this was definitely a great pointer in the right direction;
>>> I'm beginning to grasp the column system now.
>>>
>>> I do have some issues though as detailed below.
>>>
>>> Firstly, my business model is out of my control so I had to wrap that in
a
>>> class that contains the editable state. I don't like doing that it but
it's
>>> useful to see if I can get it to work and it shouldn't effect the
process on
>>> the whole.
>>>
>>> The main difference is I'm attempting to do this using different
columns,
>>> that is, not having a custom column that takes a type and switches. The
>>> problem is that the models for each column seem to wrap different
instances
>>> of the business object.
>>>
>>> The code below shows how I'm creating the columns. The link in the
>>> AbstractColumn grabs the business object and toggles editable.
>>> The EditablePropertyColumn's populateItem method then get's it's
rowModel
>>> object (the business object) and checks the editable state. This is
where
>>> it goes wrong as each column seems to have it's own copy of the rows
>>> business model object. I guess this is how the columns with with
datagrid.
>>>
>>> /**
>>> * Creates the columns for the synonym data table
>>> *
>>> * @return
>>> */
>>> @SuppressWarnings("serial")
>>> private List<IColumn<EditStateSynonymWrapper>> createColumns() {
>>> List<IColumn<EditStateSynonymWrapper>> columns = new
>>> ArrayList<IColumn<EditStateSynonymWrapper>>();
>>>
>>> columns.add(new AbstractColumn<EditStateSynonymWrapper>(new
>>> Model<String>("Edit")) {
>>> public void populateItem(Item<ICellPopulator<EditStateSynonymWrapper>>
>>> cellItem, String componentId, IModel<EditStateSynonymWrapper> model) {
>>> AjaxFallbackLink<EditStateSynonymWrapper> editLink = new
>>> AjaxFallbackLink<EditStateSynonymWrapper>(componentId, model) {
>>> @Override
>>> public void onClick(AjaxRequestTarget target) {
>>> EditStateSynonymWrapper selected = (EditStateSynonymWrapper)
>>> getDefaultModelObject();
>>> System.out.println("selected value = " + selected.wrappedSynonym.value);
>>> selected.setEditing(!selected.isEditing());
>>>
>>> // FIXME WHAT!? There must be a better way than this to get the parent
>>> table. :D
>>> MarkupContainer dataTable =
>>> getParent().getParent().getParent().getParent().getParent().getParent();
>>> target.addComponent(dataTable);
>>> }
>>> };
>>> cellItem.add(editLink);
>>> // cellItem.add(new EditLinkFragment(componentId,
SynonymAdminPanel.this,
>>> model));
>>> }
>>> });
>>>
>>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
>>> Model<String>("Category"), "wrappedSynonym.category"));
>>> // columns.add(new EditablePropertyColumn<EditStateSynonymWrapper>(new
>>> Model<String>("State"),
>>> // "wrappedSynonym.state", new PropertyModel<Synonym>(this,
"selected")));
>>> columns.add(new EditablePropertyColumn<EditStateSynonymWrapper>(new
>>> Model<String>("State"), "wrappedSynonym.state"));
>>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
>>> Model<String>("Root"), "wrappedSynonym.root"));
>>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
>>> Model<String>("Value"), "wrappedSynonym.value"));
>>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
>>> Model<String>("Rational"), "wrappedSynonym.rational"));
>>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
>>> Model<String>("Taxonomy parent"), "wrappedSynonym.taxonomyParent"));
>>>
>>> return columns;
>>> }
>>>
>>>
>>>
>>> On Thu, Oct 21, 2010 at 3:50 PM, Michael O'Cleirigh <
>>> michael.ocleirigh@rivulet.ca> wrote:
>>>
>>>> Hi Mark,
>>>>
>>>> The cell's of a datatable are created by the IColumn. So you need to
>>>> create a wrapping object or additional IModel that contains the
edit-ability
>>>> of each row and then use that inside the populateItem(...) method of
the
>>>> column to figure out which case to show (i.e. the label or the
textfield).
>>>>
>>>> One way to persist the change immediately is to use an
>>>> AjaxFormComponentUpdatingBehavior on the onblur event of the textfield
to
>>>> push the changes through.
>>>>
>>>> Do something like this:
>>>>
>>>> class MyColumn extends AbstractColumn<BusinessObject> {
>>>>
>>>> public static enum ColumnType { LINK, COL1, COL2 };
>>>>
>>>> private ColumnType type;
>>>>
>>>> public MyColumn (IModel<String>header, ColumnType type) {
>>>> super (header);
>>>> this.type = type;
>>>> }
>>>> @Override
>>>> public void populateItem(Item<ICellPopulator<BusinessObject>>
>>>> cellItem,
>>>> String componentId, IModel<BusinessObject> rowModel) {
>>>>
>>>>
>>>> switch (this.type) {
>>>>
>>>> case LINK :
>>>> // add in the ajax link to the cell item
>>>> // inside the onclick do:
>>>> // get the row model object and then set its editable
>>>> field.
>>>> cellItem.add(new AjaxLink(componentId) {
>>>> public void onClick(AjaxRequestTarget target) {
>>>> BusinessObject bo =
>>>> rowModel.getObject();
>>>>
>>>>
>>>> bo.setEditable(true);
>>>> // get the table to rerender
>>>> target.addComponent(this.getParent());
>>>> }
>>>> });
>>>>
>>>> break;
>>>>
>>>> case COL1:
>>>> case COL2:
>>>>
>>>> BusinessObject bo = rowModel.getObject();
>>>>
>>>>
>>>> if (bo.isEditable()) {
>>>> // this might not work as textfield wants an input
>>>> tag but you can put the field on a panel and then add in the panel
here.
>>>> cellItem.add (new TextField(componentId, )
>>>> }
>>>> else {
>>>> cellItem.add(new Label(componentId, ...)
>>>> }
>>>>
>>>> }
>>>>
>>>> }
>>>> };
>>>>
>>>> Regards,
>>>>
>>>> Mike
>>>>
>>>> Hi all,
>>>>>
>>>>> I'm having a bit of trouble wrapping my head around the DataTable with
>>>>> regards to what I need to do.
>>>>>
>>>>> The perfect example of my goal is in Wicket Examples, namely, the Ajax
>>>>> Editable Tree Table:
>>>>> http://wicketstuff.org/wicket14/ajax/tree/table/editable.0
>>>>>
>>>>> <http://wicketstuff.org/wicket14/ajax/tree/table/editable.0>Rather
than
>>>>> use
>>>>> the Tree table I must alter an existing DataTable. I was thinking that
>>>>> I could create an editable textfield for the cells which I could
enable
>>>>> or
>>>>> disable using an edit link in the first column.
>>>>>
>>>>> A bit like this:
>>>>>
>>>>> Edit | col1 | col2
>>>>> ============
>>>>> edit | text | ksfuh
>>>>> -------------------------
>>>>> edit | text | fsdkl
>>>>>
>>>>> Using the edit link I can get the model object of the row but I'm not
>>>>> sure
>>>>> how I can get the row that represents this and set it's cells to
>>>>> editable.
>>>>>
>>>>> The Editable text field is much like the one in the example and with
the
>>>>> entire table wrapped in a form. This means I can deal with the
>>>>> submission
>>>>> of the changes easy enough.
>>>>>
>>>>>
>>>>> Perhaps this is the wrong way to go about it....hmmm, thoughts?
>>>>>
>>>>>
>>>>
>>>> ---------------------------------------------------------------------
>>>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>>>> For additional commands, e-mail: users-help@wicket.apache.org
>>>>
>>>>
>>>
>>

Re: Accessing the cells in a row of a DataTable

Posted by Mark Doyle <ma...@googlemail.com>.
Ok, I've nearly got this finished.

Does anybody know how to add a link in populateItem() that doesn't render as
"[cell]"?  I could create a customised Panel I suppose but it seems like
overkill.

Maybe a fragment...hmmm


On Fri, Oct 22, 2010 at 11:56 AM, Mark Doyle
<ma...@googlemail.com>wrote:

> Oh and the table isn't the parent:
>
> // get the table to rerender
>  target.addComponent(this.getParent());
>
> I had to do a six step "parental grab"; I'm sure there is a better way! :D
>
>
>
> On Fri, Oct 22, 2010 at 11:54 AM, Mark Doyle <markjohndoyle@googlemail.com
> > wrote:
>
>> Thanks Mike, this was definitely a great pointer in the right direction;
>> I'm beginning to grasp the column system now.
>>
>> I do have some issues though as detailed below.
>>
>> Firstly, my business model is out of my control so I had to wrap that in a
>> class that contains the editable state.  I don't like doing that it but it's
>> useful to see if I can get it to work and it shouldn't effect the process on
>> the whole.
>>
>> The main difference is I'm attempting to do this using different columns,
>> that is, not having a custom column that takes a type and switches.  The
>> problem is that the models for each column seem to wrap different instances
>> of the business object.
>>
>> The code below shows how I'm creating the columns.  The link in the
>> AbstractColumn grabs the business object and toggles editable.
>>  The EditablePropertyColumn's populateItem method then get's it's rowModel
>> object (the business object) and checks the editable state.  This is where
>> it goes wrong as each column seems to have it's own copy of the rows
>> business model object.  I guess this is how the columns with with datagrid.
>>
>> /**
>>  * Creates the columns for the synonym data table
>>  *
>>  * @return
>>  */
>> @SuppressWarnings("serial")
>>  private List<IColumn<EditStateSynonymWrapper>> createColumns() {
>> List<IColumn<EditStateSynonymWrapper>> columns = new
>> ArrayList<IColumn<EditStateSynonymWrapper>>();
>>
>> columns.add(new AbstractColumn<EditStateSynonymWrapper>(new
>> Model<String>("Edit")) {
>>  public void populateItem(Item<ICellPopulator<EditStateSynonymWrapper>>
>> cellItem, String componentId, IModel<EditStateSynonymWrapper> model) {
>>  AjaxFallbackLink<EditStateSynonymWrapper> editLink = new
>> AjaxFallbackLink<EditStateSynonymWrapper>(componentId, model) {
>> @Override
>>  public void onClick(AjaxRequestTarget target) {
>> EditStateSynonymWrapper selected = (EditStateSynonymWrapper)
>> getDefaultModelObject();
>>  System.out.println("selected value = " + selected.wrappedSynonym.value);
>> selected.setEditing(!selected.isEditing());
>>
>> // FIXME WHAT!? There must be a better way than this to get the parent
>> table. :D
>> MarkupContainer dataTable =
>> getParent().getParent().getParent().getParent().getParent().getParent();
>>  target.addComponent(dataTable);
>> }
>> };
>>  cellItem.add(editLink);
>> // cellItem.add(new EditLinkFragment(componentId, SynonymAdminPanel.this,
>> model));
>>  }
>> });
>>
>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
>> Model<String>("Category"), "wrappedSynonym.category"));
>>  // columns.add(new EditablePropertyColumn<EditStateSynonymWrapper>(new
>> Model<String>("State"),
>> // "wrappedSynonym.state", new PropertyModel<Synonym>(this, "selected")));
>>  columns.add(new EditablePropertyColumn<EditStateSynonymWrapper>(new
>> Model<String>("State"), "wrappedSynonym.state"));
>>  columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
>> Model<String>("Root"), "wrappedSynonym.root"));
>> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
>> Model<String>("Value"), "wrappedSynonym.value"));
>>  columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
>> Model<String>("Rational"), "wrappedSynonym.rational"));
>>  columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
>> Model<String>("Taxonomy parent"), "wrappedSynonym.taxonomyParent"));
>>
>> return columns;
>> }
>>
>>
>>
>> On Thu, Oct 21, 2010 at 3:50 PM, Michael O'Cleirigh <
>> michael.ocleirigh@rivulet.ca> wrote:
>>
>>>  Hi Mark,
>>>
>>> The cell's of a datatable are created by the IColumn.  So you need to
>>> create a wrapping object or additional IModel that contains the edit-ability
>>> of each row and then use that inside the populateItem(...) method of the
>>> column to figure out which case to show (i.e. the label or the textfield).
>>>
>>> One way to persist the change immediately is to use an
>>> AjaxFormComponentUpdatingBehavior on the onblur event of the textfield to
>>> push the changes through.
>>>
>>> Do something like this:
>>>
>>> class MyColumn extends AbstractColumn<BusinessObject> {
>>>
>>>    public static enum ColumnType { LINK, COL1, COL2 };
>>>
>>>    private ColumnType type;
>>>
>>>    public MyColumn (IModel<String>header, ColumnType type) {
>>>        super (header);
>>>        this.type = type;
>>>    }
>>>    @Override
>>>    public void populateItem(Item<ICellPopulator<BusinessObject>>
>>> cellItem,
>>>            String componentId, IModel<BusinessObject> rowModel) {
>>>
>>>
>>>            switch (this.type) {
>>>
>>>                case LINK :
>>>                // add in the ajax link to the cell item
>>>                // inside the onclick do:
>>>                // get the row model object and then set its editable
>>> field.
>>>                cellItem.add(new AjaxLink(componentId) {
>>>                        public void onClick(AjaxRequestTarget target) {
>>>                                  BusinessObject bo =
>>> rowModel.getObject();
>>>
>>>
>>>                                   bo.setEditable(true);
>>>                                    // get the table to rerender
>>>                                    target.addComponent(this.getParent());
>>>                        }
>>>                });
>>>
>>>                break;
>>>
>>>                case COL1:
>>>                case COL2:
>>>
>>>                        BusinessObject bo = rowModel.getObject();
>>>
>>>
>>>                    if (bo.isEditable()) {
>>>                        // this might not work as textfield wants an input
>>> tag but you can put the field on a panel and then add in the panel here.
>>>                        cellItem.add (new TextField(componentId, )
>>>                    }
>>>                    else {
>>>                        cellItem.add(new Label(componentId, ...)
>>>                    }
>>>
>>>            }
>>>
>>>    }
>>> };
>>>
>>> Regards,
>>>
>>> Mike
>>>
>>>  Hi all,
>>>>
>>>> I'm having a bit of trouble wrapping my head around the DataTable with
>>>> regards to what I need to do.
>>>>
>>>> The perfect example of my goal is in Wicket Examples, namely, the Ajax
>>>> Editable Tree Table:
>>>> http://wicketstuff.org/wicket14/ajax/tree/table/editable.0
>>>>
>>>> <http://wicketstuff.org/wicket14/ajax/tree/table/editable.0>Rather than
>>>> use
>>>> the Tree table I must alter an existing DataTable.  I was thinking that
>>>> I could create an editable textfield for the cells which I could enable
>>>> or
>>>> disable using an edit link in the first column.
>>>>
>>>> A bit like this:
>>>>
>>>> Edit | col1 | col2
>>>> ============
>>>> edit | text  | ksfuh
>>>> -------------------------
>>>> edit | text  | fsdkl
>>>>
>>>> Using the edit link I can get the model object of the row but I'm not
>>>> sure
>>>> how I can get the row that represents this and set it's cells to
>>>> editable.
>>>>
>>>> The Editable text field is much like the one in the example and with the
>>>> entire table wrapped in a form.  This means I can deal with the
>>>> submission
>>>> of the changes easy enough.
>>>>
>>>>
>>>> Perhaps this is the wrong way to go about it....hmmm, thoughts?
>>>>
>>>>
>>>
>>> ---------------------------------------------------------------------
>>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>>> For additional commands, e-mail: users-help@wicket.apache.org
>>>
>>>
>>
>

Re: Accessing the cells in a row of a DataTable

Posted by Mark Doyle <ma...@googlemail.com>.
Oh and the table isn't the parent:
// get the table to rerender
 target.addComponent(this.getParent());

I had to do a six step "parental grab"; I'm sure there is a better way! :D



On Fri, Oct 22, 2010 at 11:54 AM, Mark Doyle
<ma...@googlemail.com>wrote:

> Thanks Mike, this was definitely a great pointer in the right direction;
> I'm beginning to grasp the column system now.
>
> I do have some issues though as detailed below.
>
> Firstly, my business model is out of my control so I had to wrap that in a
> class that contains the editable state.  I don't like doing that it but it's
> useful to see if I can get it to work and it shouldn't effect the process on
> the whole.
>
> The main difference is I'm attempting to do this using different columns,
> that is, not having a custom column that takes a type and switches.  The
> problem is that the models for each column seem to wrap different instances
> of the business object.
>
> The code below shows how I'm creating the columns.  The link in the
> AbstractColumn grabs the business object and toggles editable.
>  The EditablePropertyColumn's populateItem method then get's it's rowModel
> object (the business object) and checks the editable state.  This is where
> it goes wrong as each column seems to have it's own copy of the rows
> business model object.  I guess this is how the columns with with datagrid.
>
> /**
>  * Creates the columns for the synonym data table
>  *
>  * @return
>  */
> @SuppressWarnings("serial")
>  private List<IColumn<EditStateSynonymWrapper>> createColumns() {
> List<IColumn<EditStateSynonymWrapper>> columns = new
> ArrayList<IColumn<EditStateSynonymWrapper>>();
>
> columns.add(new AbstractColumn<EditStateSynonymWrapper>(new
> Model<String>("Edit")) {
>  public void populateItem(Item<ICellPopulator<EditStateSynonymWrapper>>
> cellItem, String componentId, IModel<EditStateSynonymWrapper> model) {
>  AjaxFallbackLink<EditStateSynonymWrapper> editLink = new
> AjaxFallbackLink<EditStateSynonymWrapper>(componentId, model) {
> @Override
>  public void onClick(AjaxRequestTarget target) {
> EditStateSynonymWrapper selected = (EditStateSynonymWrapper)
> getDefaultModelObject();
>  System.out.println("selected value = " + selected.wrappedSynonym.value);
> selected.setEditing(!selected.isEditing());
>
> // FIXME WHAT!? There must be a better way than this to get the parent
> table. :D
> MarkupContainer dataTable =
> getParent().getParent().getParent().getParent().getParent().getParent();
>  target.addComponent(dataTable);
> }
> };
>  cellItem.add(editLink);
> // cellItem.add(new EditLinkFragment(componentId, SynonymAdminPanel.this,
> model));
>  }
> });
>
> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
> Model<String>("Category"), "wrappedSynonym.category"));
>  // columns.add(new EditablePropertyColumn<EditStateSynonymWrapper>(new
> Model<String>("State"),
> // "wrappedSynonym.state", new PropertyModel<Synonym>(this, "selected")));
>  columns.add(new EditablePropertyColumn<EditStateSynonymWrapper>(new
> Model<String>("State"), "wrappedSynonym.state"));
>  columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
> Model<String>("Root"), "wrappedSynonym.root"));
> columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
> Model<String>("Value"), "wrappedSynonym.value"));
>  columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
> Model<String>("Rational"), "wrappedSynonym.rational"));
>  columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
> Model<String>("Taxonomy parent"), "wrappedSynonym.taxonomyParent"));
>
> return columns;
> }
>
>
>
> On Thu, Oct 21, 2010 at 3:50 PM, Michael O'Cleirigh <
> michael.ocleirigh@rivulet.ca> wrote:
>
>>  Hi Mark,
>>
>> The cell's of a datatable are created by the IColumn.  So you need to
>> create a wrapping object or additional IModel that contains the edit-ability
>> of each row and then use that inside the populateItem(...) method of the
>> column to figure out which case to show (i.e. the label or the textfield).
>>
>> One way to persist the change immediately is to use an
>> AjaxFormComponentUpdatingBehavior on the onblur event of the textfield to
>> push the changes through.
>>
>> Do something like this:
>>
>> class MyColumn extends AbstractColumn<BusinessObject> {
>>
>>    public static enum ColumnType { LINK, COL1, COL2 };
>>
>>    private ColumnType type;
>>
>>    public MyColumn (IModel<String>header, ColumnType type) {
>>        super (header);
>>        this.type = type;
>>    }
>>    @Override
>>    public void populateItem(Item<ICellPopulator<BusinessObject>> cellItem,
>>            String componentId, IModel<BusinessObject> rowModel) {
>>
>>
>>            switch (this.type) {
>>
>>                case LINK :
>>                // add in the ajax link to the cell item
>>                // inside the onclick do:
>>                // get the row model object and then set its editable
>> field.
>>                cellItem.add(new AjaxLink(componentId) {
>>                        public void onClick(AjaxRequestTarget target) {
>>                                  BusinessObject bo = rowModel.getObject();
>>
>>
>>                                   bo.setEditable(true);
>>                                    // get the table to rerender
>>                                    target.addComponent(this.getParent());
>>                        }
>>                });
>>
>>                break;
>>
>>                case COL1:
>>                case COL2:
>>
>>                        BusinessObject bo = rowModel.getObject();
>>
>>
>>                    if (bo.isEditable()) {
>>                        // this might not work as textfield wants an input
>> tag but you can put the field on a panel and then add in the panel here.
>>                        cellItem.add (new TextField(componentId, )
>>                    }
>>                    else {
>>                        cellItem.add(new Label(componentId, ...)
>>                    }
>>
>>            }
>>
>>    }
>> };
>>
>> Regards,
>>
>> Mike
>>
>>  Hi all,
>>>
>>> I'm having a bit of trouble wrapping my head around the DataTable with
>>> regards to what I need to do.
>>>
>>> The perfect example of my goal is in Wicket Examples, namely, the Ajax
>>> Editable Tree Table:
>>> http://wicketstuff.org/wicket14/ajax/tree/table/editable.0
>>>
>>> <http://wicketstuff.org/wicket14/ajax/tree/table/editable.0>Rather than
>>> use
>>> the Tree table I must alter an existing DataTable.  I was thinking that
>>> I could create an editable textfield for the cells which I could enable
>>> or
>>> disable using an edit link in the first column.
>>>
>>> A bit like this:
>>>
>>> Edit | col1 | col2
>>> ============
>>> edit | text  | ksfuh
>>> -------------------------
>>> edit | text  | fsdkl
>>>
>>> Using the edit link I can get the model object of the row but I'm not
>>> sure
>>> how I can get the row that represents this and set it's cells to
>>> editable.
>>>
>>> The Editable text field is much like the one in the example and with the
>>> entire table wrapped in a form.  This means I can deal with the
>>> submission
>>> of the changes easy enough.
>>>
>>>
>>> Perhaps this is the wrong way to go about it....hmmm, thoughts?
>>>
>>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>> For additional commands, e-mail: users-help@wicket.apache.org
>>
>>
>

Re: Accessing the cells in a row of a DataTable

Posted by Mark Doyle <ma...@googlemail.com>.
Thanks Mike, this was definitely a great pointer in the right direction; I'm
beginning to grasp the column system now.

I do have some issues though as detailed below.

Firstly, my business model is out of my control so I had to wrap that in a
class that contains the editable state.  I don't like doing that it but it's
useful to see if I can get it to work and it shouldn't effect the process on
the whole.

The main difference is I'm attempting to do this using different columns,
that is, not having a custom column that takes a type and switches.  The
problem is that the models for each column seem to wrap different instances
of the business object.

The code below shows how I'm creating the columns.  The link in the
AbstractColumn grabs the business object and toggles editable.
 The EditablePropertyColumn's populateItem method then get's it's rowModel
object (the business object) and checks the editable state.  This is where
it goes wrong as each column seems to have it's own copy of the rows
business model object.  I guess this is how the columns with with datagrid.

/**
 * Creates the columns for the synonym data table
 *
 * @return
 */
@SuppressWarnings("serial")
private List<IColumn<EditStateSynonymWrapper>> createColumns() {
List<IColumn<EditStateSynonymWrapper>> columns = new
ArrayList<IColumn<EditStateSynonymWrapper>>();

columns.add(new AbstractColumn<EditStateSynonymWrapper>(new
Model<String>("Edit")) {
 public void populateItem(Item<ICellPopulator<EditStateSynonymWrapper>>
cellItem, String componentId, IModel<EditStateSynonymWrapper> model) {
AjaxFallbackLink<EditStateSynonymWrapper> editLink = new
AjaxFallbackLink<EditStateSynonymWrapper>(componentId, model) {
@Override
public void onClick(AjaxRequestTarget target) {
EditStateSynonymWrapper selected = (EditStateSynonymWrapper)
getDefaultModelObject();
System.out.println("selected value = " + selected.wrappedSynonym.value);
selected.setEditing(!selected.isEditing());

// FIXME WHAT!? There must be a better way than this to get the parent
table. :D
MarkupContainer dataTable =
getParent().getParent().getParent().getParent().getParent().getParent();
target.addComponent(dataTable);
}
};
cellItem.add(editLink);
// cellItem.add(new EditLinkFragment(componentId, SynonymAdminPanel.this,
model));
}
});

columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
Model<String>("Category"), "wrappedSynonym.category"));
// columns.add(new EditablePropertyColumn<EditStateSynonymWrapper>(new
Model<String>("State"),
// "wrappedSynonym.state", new PropertyModel<Synonym>(this, "selected")));
columns.add(new EditablePropertyColumn<EditStateSynonymWrapper>(new
Model<String>("State"), "wrappedSynonym.state"));
columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
Model<String>("Root"), "wrappedSynonym.root"));
columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
Model<String>("Value"), "wrappedSynonym.value"));
columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
Model<String>("Rational"), "wrappedSynonym.rational"));
columns.add(new PropertyColumn<EditStateSynonymWrapper>(new
Model<String>("Taxonomy parent"), "wrappedSynonym.taxonomyParent"));

return columns;
}



On Thu, Oct 21, 2010 at 3:50 PM, Michael O'Cleirigh <
michael.ocleirigh@rivulet.ca> wrote:

>  Hi Mark,
>
> The cell's of a datatable are created by the IColumn.  So you need to
> create a wrapping object or additional IModel that contains the edit-ability
> of each row and then use that inside the populateItem(...) method of the
> column to figure out which case to show (i.e. the label or the textfield).
>
> One way to persist the change immediately is to use an
> AjaxFormComponentUpdatingBehavior on the onblur event of the textfield to
> push the changes through.
>
> Do something like this:
>
> class MyColumn extends AbstractColumn<BusinessObject> {
>
>    public static enum ColumnType { LINK, COL1, COL2 };
>
>    private ColumnType type;
>
>    public MyColumn (IModel<String>header, ColumnType type) {
>        super (header);
>        this.type = type;
>    }
>    @Override
>    public void populateItem(Item<ICellPopulator<BusinessObject>> cellItem,
>            String componentId, IModel<BusinessObject> rowModel) {
>
>
>            switch (this.type) {
>
>                case LINK :
>                // add in the ajax link to the cell item
>                // inside the onclick do:
>                // get the row model object and then set its editable field.
>                cellItem.add(new AjaxLink(componentId) {
>                        public void onClick(AjaxRequestTarget target) {
>                                  BusinessObject bo = rowModel.getObject();
>
>
>                                   bo.setEditable(true);
>                                    // get the table to rerender
>                                    target.addComponent(this.getParent());
>                        }
>                });
>
>                break;
>
>                case COL1:
>                case COL2:
>
>                        BusinessObject bo = rowModel.getObject();
>
>
>                    if (bo.isEditable()) {
>                        // this might not work as textfield wants an input
> tag but you can put the field on a panel and then add in the panel here.
>                        cellItem.add (new TextField(componentId, )
>                    }
>                    else {
>                        cellItem.add(new Label(componentId, ...)
>                    }
>
>            }
>
>    }
> };
>
> Regards,
>
> Mike
>
>  Hi all,
>>
>> I'm having a bit of trouble wrapping my head around the DataTable with
>> regards to what I need to do.
>>
>> The perfect example of my goal is in Wicket Examples, namely, the Ajax
>> Editable Tree Table:
>> http://wicketstuff.org/wicket14/ajax/tree/table/editable.0
>>
>> <http://wicketstuff.org/wicket14/ajax/tree/table/editable.0>Rather than
>> use
>> the Tree table I must alter an existing DataTable.  I was thinking that
>> I could create an editable textfield for the cells which I could enable or
>> disable using an edit link in the first column.
>>
>> A bit like this:
>>
>> Edit | col1 | col2
>> ============
>> edit | text  | ksfuh
>> -------------------------
>> edit | text  | fsdkl
>>
>> Using the edit link I can get the model object of the row but I'm not sure
>> how I can get the row that represents this and set it's cells to editable.
>>
>> The Editable text field is much like the one in the example and with the
>> entire table wrapped in a form.  This means I can deal with the submission
>> of the changes easy enough.
>>
>>
>> Perhaps this is the wrong way to go about it....hmmm, thoughts?
>>
>>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>

Re: Accessing the cells in a row of a DataTable

Posted by Michael O'Cleirigh <mi...@rivulet.ca>.
  Hi Mark,

The cell's of a datatable are created by the IColumn.  So you need to 
create a wrapping object or additional IModel that contains the 
edit-ability of each row and then use that inside the populateItem(...) 
method of the column to figure out which case to show (i.e. the label or 
the textfield).

One way to persist the change immediately is to use an 
AjaxFormComponentUpdatingBehavior on the onblur event of the textfield 
to push the changes through.

Do something like this:

class MyColumn extends AbstractColumn<BusinessObject> {

     public static enum ColumnType { LINK, COL1, COL2 };

     private ColumnType type;

     public MyColumn (IModel<String>header, ColumnType type) {
         super (header);
         this.type = type;
     }
     @Override
     public void populateItem(Item<ICellPopulator<BusinessObject>> cellItem,
             String componentId, IModel<BusinessObject> rowModel) {


             switch (this.type) {

                 case LINK :
                 // add in the ajax link to the cell item
                 // inside the onclick do:
                 // get the row model object and then set its editable 
field.
                 cellItem.add(new AjaxLink(componentId) {
                         public void onClick(AjaxRequestTarget target) {
                                   BusinessObject bo = 
rowModel.getObject();


                                    bo.setEditable(true);
                                     // get the table to rerender
                                     target.addComponent(this.getParent());
                         }
                 });

                 break;

                 case COL1:
                 case COL2:

                         BusinessObject bo = rowModel.getObject();


                     if (bo.isEditable()) {
                         // this might not work as textfield wants an 
input tag but you can put the field on a panel and then add in the panel 
here.
                         cellItem.add (new TextField(componentId, )
                     }
                     else {
                         cellItem.add(new Label(componentId, ...)
                     }

             }

     }
};

Regards,

Mike
> Hi all,
>
> I'm having a bit of trouble wrapping my head around the DataTable with
> regards to what I need to do.
>
> The perfect example of my goal is in Wicket Examples, namely, the Ajax
> Editable Tree Table:
> http://wicketstuff.org/wicket14/ajax/tree/table/editable.0
>
> <http://wicketstuff.org/wicket14/ajax/tree/table/editable.0>Rather than use
> the Tree table I must alter an existing DataTable.  I was thinking that
> I could create an editable textfield for the cells which I could enable or
> disable using an edit link in the first column.
>
> A bit like this:
>
> Edit | col1 | col2
> ============
> edit | text  | ksfuh
> -------------------------
> edit | text  | fsdkl
>
> Using the edit link I can get the model object of the row but I'm not sure
> how I can get the row that represents this and set it's cells to editable.
>
> The Editable text field is much like the one in the example and with the
> entire table wrapped in a form.  This means I can deal with the submission
> of the changes easy enough.
>
>
> Perhaps this is the wrong way to go about it....hmmm, thoughts?
>


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