How to implement editable grid with 2 related dropdown in wicket?

Question

I need to show the data from DB in table format with edit, save , cancel, delete button, its called editable grid in wicket.

In Table row after click on edit button data should be shown on 2 dropdown choices and select data from 1st dropdown then 2nd dropdown data model should be changed based on selection of first dropdown.

I have gone through the https://github.com/wicketstuff/core/tree/master/editable-grid-parent. But its showing only editable grid with 1 dropdown in wicket and i want 2 dropdown. Please help on this.

UPDATE : I have used this

    private List<AbstractEditablePropertyColumn<Person, String>> getColumns()
         {
    List<AbstractEditablePropertyColumn<Person, String>> columns = new ArrayList<AbstractEditablePropertyColumn<Person, String>>();
    stateDropDownPropertyColumn = new AbstractEditablePropertyColumn<Person, String>(new PropertyModel<String>(this, "selectedMake"), "state")
    {

        private static final long serialVersionUID = 1L;

        public EditableCellPanel<Person> getEditableCellPanel(String componentId)
        {

            return getStateDDCellpanel(componentId,this);               
        }
    };

    cityDropDownPropertyColumn = new AbstractEditablePropertyColumn<Person, String>(new Model<String>("CarModel"), "city"){

        private static final long serialVersionUID = 1L;

        @Override
        public EditableCellPanel<Person> getEditableCellPanel(String componentId) {
            // TODO Auto-generated method stub
            return getCityDDCellpanel(componentId,this);
        }};

    columns.add(stateDropDownPropertyColumn);
    columns.add(cityDropDownPropertyColumn);
    return columns;
}
    private EditableRequiredDropDownCellPanel<Person, String> getStateDDCellpanel(String componentId, 
                                    AbstractEditablePropertyColumn<Person, String> DropDownPropertyColumn){

    this.stateComponentID = componentId;
    this.stateDropDownPropertyColumn = DropDownPropertyColumn;
    stateDropDownCellPanel = new EditableRequiredDropDownCellPanel<Person,      String>(stateComponentID, stateDropDownPropertyColumn, stateChoices);

    return stateDropDownCellPanel;

}

private EditableRequiredDropDownCellPanel<Person, String> getCityDDCellpanel(String componentId, 
        AbstractEditablePropertyColumn<Person, String> DropDownPropertyColumn){

    this.cityComponentID = componentId;
    this.cityDropDownPropertyColumn = DropDownPropertyColumn;
    cityDropDownCellPanel = new EditableRequiredDropDownCellPanel<Person, String>(cityComponentID, cityDropDownPropertyColumn, cityChoices);
    cityDropDownCellPanel.setOutputMarkupId(true);
    cityDropDownCellPanel.setOutputMarkupPlaceholderTag(true);
    return cityDropDownCellPanel;

}

I have not any idea about this where i need to put up behaviours of dropdown cell.

Answer 1

Probably almost direct answer to question according to dynamic list (first is fixed, second id depended, dynamically computed): http://examples7x.wicket.apache.org/ajax/choice

To be with SO rules not to include pure links, excerpt from official example Apache licensed (prepared to be shorter - not compile)

Model allows You prepare changed data, and AJAX event forces refresh - this is core of idea. Event (ajax behaviour) connected to first 'makers', and behaviour forces to refresh 'models' . This is typical wicket+ajax pattern.

/**
* Linked select boxes example
* 
* @author Igor Vaynberg (ivaynberg)
*/
 public class ChoicePage extends BasePage
{
private String selectedMake;

private final Map<String, List<String>> modelsMap = new HashMap<>(); // map:company->model

/**
 * @return Currently selected make
 */
public String getSelectedMake()
{
    return selectedMake;
}

/**
 * @param selectedMake
 *            The make that is currently selected
 */
public void setSelectedMake(String selectedMake)
{
    this.selectedMake = selectedMake;
}

/**
 * Constructor.
 */
public ChoicePage()
{
    modelsMap.put("AUDI", Arrays.asList("A4", "A6", "TT"));
    modelsMap.put("CADILLAC", Arrays.asList("CTS", "DTS", "ESCALADE", "SRX", "DEVILLE"));
    modelsMap.put("FORD", Arrays.asList("CROWN", "ESCAPE", "EXPEDITION", "EXPLORER", "F-150"));

    IModel<List<String>> makeChoices = new AbstractReadOnlyModel<List<String>>()
    {
        @Override
        public List<String> getObject()
        {
            return new ArrayList<>(modelsMap.keySet());
        }

    };

    IModel<List<String>> modelChoices = new AbstractReadOnlyModel<List<String>>()
    {
        @Override
        public List<String> getObject()
        {
            List<String> models = modelsMap.get(selectedMake);
            if (models == null)
            {
                models = Collections.emptyList();
            }
            return models;
        }

    };

    Form<?> form = new Form("form");
    add(form);

    final DropDownChoice<String> makes = new DropDownChoice<>("makes",
        new PropertyModel<String>(this, "selectedMake"), makeChoices);

    final DropDownChoice<String> models = new DropDownChoice<>("models",
        new Model<String>(), modelChoices);
    models.setOutputMarkupId(true);

    form.add(makes);
    form.add(models);

    ...

    makes.add(new AjaxFormComponentUpdatingBehavior("change")
    {
        @Override
        protected void onUpdate(AjaxRequestTarget target)
        {
            target.add(models);
        }
    });
  }
}

UPDATE after comment. Lets back to previous github code, must replace fixed list by model. How??? Derive or copy, add contructor with IModel ... Wicket has very good object design. In similar way we add column types not known to (not planned) grid author.

BTW Your comment 'its not working' is very broad. Sorry, I can help if I can, but dont make full project for You. Hope You will enjoy with coding.

package org.wicketstuff.egrid.column;

import java.util.List;

import org.apache.wicket.extensions.markup.html.repeater.data.table.PropertyColumn;
import org.apache.wicket.markup.html.form.DropDownChoice;
import org.apache.wicket.markup.html.form.FormComponent;
/**
 * 
 * @author Nadeem Mohammad
 *
 */
public class EditableRequiredDropDownCellPanel<T, S> extends EditableCellPanel
{

    private static final long serialVersionUID = 1L;

    public EditableRequiredDropDownCellPanel(final String id, final PropertyColumn<T, S> column, @SuppressWarnings("rawtypes") final List choices)
    {
        super(id);

        @SuppressWarnings("unchecked")
        DropDownChoice<T> field = new DropDownChoice<T>("dropdown", choices);  <--- **** Here should be model ****
        field.setLabel(column.getDisplayModel());
        add(field); 
    }

    @Override
    public FormComponent<?> getEditableComponent()
    {
        return (FormComponent<?>) get("dropdown");
    }
}

then with changed class return here:

columns.add(new AbstractEditablePropertyColumn<Person, String>(new Model<String>("Age"), "age")
        {

            private static final long serialVersionUID = 1L;

            public EditableCellPanel getEditableCellPanel(String componentId)
            {
                return new ***** EditableRequiredDropDownCellPanel ***** <Person, String>(componentId, this, Arrays.asList("10","11","12","13","14","15"));
            }

});

add Beahviours too