Dynamically replace ListView table cell with textField wicket - ajax

Question

I have a listView which has a single column which needs to be editable only in certain cases. If the user needs to change the column, I want them to click a edit button for the row, then replace the label in the cell with a textField. When I call replace I can see the TextField is now in the place of the label, although it is never rendered. I have a AjaxLink to handle the event. I am using a container to repaint the listView. Here is my listview:
parent = new WebMarkupContainer("emp-table-parent");
parent.add(new AjaxLink<Object>(FIRST_NAME_HEADER_LINK) {
/**
*
*/
private static final long serialVersionUID = -1937727929649333407L;
#Override
public void onClick(AjaxRequestTarget target) {
changeGlyphUpdateList(target, parent.get(FIRST_NAME_HEADER_LINK).get(FIRST_NAME_HEADER_ICON),
parent.get(LAST_NAME_HEADER_LINK).get(LAST_NAME_HEADER_ICON),
parent.get(EMAIL_HEADER_LINK).get(EMAIL_HEADER_ICON), parent.get(ELIGIBILITY_CLASS_HEADER_LINK).get(ELIGIBILITY_CLASS_HEADER_ICON),
parent.get(EMPLOYER_HEADER_LINK).get(EMPLOYER_HEADER_ICON));
}
}.add(new Label("first-name-header-label", Model.of("First Name")), new WebComponent(FIRST_NAME_HEADER_ICON)),
new AjaxLink<Object>(LAST_NAME_HEADER_LINK) {
/**
*
*/
private static final long serialVersionUID = -3438649095509412910L;
#Override
public void onClick(AjaxRequestTarget target) {
changeGlyphUpdateList(target, parent.get(LAST_NAME_HEADER_LINK).get(LAST_NAME_HEADER_ICON),
parent.get(FIRST_NAME_HEADER_LINK).get(FIRST_NAME_HEADER_ICON),
parent.get(EMAIL_HEADER_LINK).get(EMAIL_HEADER_ICON),
parent.get(ELIGIBILITY_CLASS_HEADER_LINK).get(ELIGIBILITY_CLASS_HEADER_ICON),
parent.get(EMPLOYER_HEADER_LINK).get(EMPLOYER_HEADER_ICON));
}
}.add(new Label("last-name-header-label", Model.of("Last Name")), new WebComponent(LAST_NAME_HEADER_ICON)),
new AjaxLink<Object>(EMAIL_HEADER_LINK) {
/**
*
*/
private static final long serialVersionUID = 2890934302751793454L;
#Override
public void onClick(AjaxRequestTarget target) {
changeGlyphUpdateList(target, parent.get(EMAIL_HEADER_LINK).get(EMAIL_HEADER_ICON),
parent.get(LAST_NAME_HEADER_LINK).get(LAST_NAME_HEADER_ICON),
parent.get(FIRST_NAME_HEADER_LINK).get(FIRST_NAME_HEADER_ICON),
parent.get(ELIGIBILITY_CLASS_HEADER_LINK).get(ELIGIBILITY_CLASS_HEADER_ICON),
parent.get(EMPLOYER_HEADER_LINK).get(EMPLOYER_HEADER_ICON));
}
}.add(new Label("email-header-label", Model.of("Email")), new WebComponent(EMAIL_HEADER_ICON)),
new AjaxLink<Object>(ELIGIBILITY_CLASS_HEADER_LINK) {
/**
*
*/
private static final long serialVersionUID = -4022209586109961448L;
#Override
public void onClick(AjaxRequestTarget target) {
changeGlyphUpdateList(target, parent.get(ELIGIBILITY_CLASS_HEADER_LINK).get(ELIGIBILITY_CLASS_HEADER_ICON),
parent.get(EMAIL_HEADER_LINK).get(EMAIL_HEADER_ICON),
parent.get(LAST_NAME_HEADER_LINK).get(LAST_NAME_HEADER_ICON),
parent.get(FIRST_NAME_HEADER_LINK).get(FIRST_NAME_HEADER_ICON),
parent.get(EMPLOYER_HEADER_LINK).get(EMPLOYER_HEADER_ICON));
}
}.add(new Label("eligibility-class-header-label", Model.of("Elig. Class")), new WebComponent(ELIGIBILITY_CLASS_HEADER_ICON)),
new AjaxLink<Object>(EMPLOYER_HEADER_LINK) {
/**
*
*/
private static final long serialVersionUID = -738777257301408437L;
#Override
public void onClick(AjaxRequestTarget target) {
changeGlyphUpdateList(target, parent.get(EMPLOYER_HEADER_LINK).get(EMPLOYER_HEADER_ICON),
parent.get(ELIGIBILITY_CLASS_HEADER_LINK).get(ELIGIBILITY_CLASS_HEADER_ICON),
parent.get(EMAIL_HEADER_LINK).get(EMAIL_HEADER_ICON),
parent.get(LAST_NAME_HEADER_LINK).get(LAST_NAME_HEADER_ICON),
parent.get(FIRST_NAME_HEADER_LINK).get(FIRST_NAME_HEADER_ICON));
}
}.add(new Label("employer-header-label", Model.of("Employer")), new WebComponent(EMPLOYER_HEADER_ICON)),
new PageableListView<EmployeeSummaryPkt>("data", employeeSummaryModel.getObject(), 25) {
/**
*
*/
private static final long serialVersionUID = -1697070076764699904L;
#Override
protected void populateItem(final ListItem<EmployeeSummaryPkt> item) {
item.setDefaultModel(new CompoundPropertyModel<EmployeeSummaryPkt>(item.getModelObject()));
item.add(new Label("firstName"),
new Label("lastName"),
new Label("employeeEmail"),
new Link<Object>("eligibility-class-data-link") {
/**
*
*/
private static final long serialVersionUID = -3842291392813313171L;
#Override
public void onClick() {
//LINK TO ELIGIBILITY CLASS OR MAYBE THE SECTION WITHIN THE EMP?
}
}.add(new Label("employeeEligibilityClassSummaryPkt.name")),
new Link<Object>("employer-data-link") {
/**
*
*/
private static final long serialVersionUID = 6809571267919974106L;
#Override
public void onClick() {
getIndex().getHomePanel().setNewContent(new EmployerDetailPanel("panel-content", item.getModelObject().getEmployerSummaryPkt().getId()));
}
}.add(new Label("employerSummaryPkt.name")),
new Label("employeeDateOfBirth"),
new Label("employee-code", Model.of(item.getModelObject().getEmployeeName())).setOutputMarkupId(true),
new AjaxLink<Object>("edit-employee-link") {
/**
*
*/
private static final long serialVersionUID = 6061544430700059358L;
#Override
public void onClick(AjaxRequestTarget target) {
logr.log(Level.FINER, "onClick for edit employee");
logr.log(Level.FINER, "employee code pre: " + item.get("employee-code").getClass().getSimpleName());
item.get("employee-code").replaceWith(new TextField<String>("employee-code", new Model<String>(item.getModelObject().getEmployeeName())).setOutputMarkupId(true));
logr.log(Level.FINER, "employee code post: " + item.get("employee-code").getClass().getSimpleName());
target.addChildren(parent, TextField.class);
target.add(parent);
}
});
}
As you can see, the label with the id "employee-code" is the label I wish to replace. Inside the AjaxLink onClick, you can see where I am getting the label and replacing it. Nothing is changing. Any direction or help is greatly appreciated.

Answer 1

A ListView recreates each if its items on each render, thus the altered listItem is thrown away immediately.
ListView#setReuseItems(true) should help.

Answer 2

An alternative to svenmeier's answer could also be to add only the specific item that has been changed to the AjaxRequestTarget. That is, replace
target.addChildren(parent, TextField.class);
target.add(parent);
With
target.add(item.get("employee-code"))
Which would cause only the piece of markup that concerns the change to be re-rendered, as opposed to the entire table. If your table is big and contains a lot of elements, whose models involve complicated retrieval mechanisms rendering the entire table would be a much more laborious process, and hence re-rendering only the item would be a better solution.
Having said that, in your particular case svenmeier's solution is better, as otherwise if you implement my solution and later on re-render the entire table, the changes would be lost.