Wicket Editable Grid

NOTE : Editable Grid is now part of Wicket Stuff

Editable Grid, can be downloaded from M2 Repo and Sonatype Repo

Wicket users desperately need a grid with add/edit/delete functionality at once,  Here are the couple of forums :

Wicket Stuff does provide a component, however it does not have the ‘add’ functionality. Hence i have decided to write my own ;-).

Sample Screen Shot

How to Use this Component

It is very simple, Editable grid needs the following:

  • Columns, there are lots of predefined columns, however you can sub class existing classes to provide your own customized one.
  • List of Row Objects, it may be empty.
  • Backing object for the footer, Which lets you add new objects
 add(new EditableGrid("grid", getColumns(), getPersons(), new Person()) {

			private static final long serialVersionUID = 1L;

			@Override
			protected void onError(AjaxRequestTarget target) {
				target.addComponent(feedbackPanel);
			}
		});

 private List> getColumns() {
		List> columns = new ArrayList>();
		columns.add(new RequiredEditableTextFieldColumn(new Model("Name"), "name", false));
		columns.add(new RequiredEditableTextFieldColumn(new Model("Address"), "address"));
		columns.add(new AbstractEditablePropertyColumn(new Model("Age"), "age") {

			private static final long serialVersionUID = 1L;

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

		});
		return columns;
	}

How It Works

TODO : Explain..

Features

  • Feature 1
  • Feature 2
  • Feature 3

TODO : Update….

Grid in Action

Get the source code from Github and do mvn jetty:run in the command prompt.

Advertisements

31 thoughts on “Wicket Editable Grid

  1. This editable grid is what I’m looking for.
    I have a question.
    How do I get the rowdata when I click save if I want to save it into database?

    • You can override the onAdded()/onSave() method to do whatever you want. However it is recommended no to persist the changes to database immediately after edit/delete/add, instead use this component together with a form and a confirmation button, let the user do what ever they want to do however persist the changes to database on confirmation, this way things would be pretty faster 🙂

  2. I m new to wicket stuff.Have little basic idea of using few of the existing components of wicket.
    I am looking for the similar kind of implementation . Can u please provide me the backgroud behind the EditableGrid class..and also the approach to acheive this similar kind of functionality .
    Waiting for a kindly support .Thanks in advance.

    • If you wanna learn any framework, explore the source code, and sample apps, look into google code, git hub, source forge and so on, and even you can explore editable grid source code.

  3. In an editable grid I have 2 EditableRequiredDropDownCellPanels. When I select a different value in the first DropDownCellPanel, I want to use an Ajax call to change the values shown in the second DropDownCellPanel. How do I implement that in an editable grid?

  4. Thanks for component!
    I found some bugs with using wicket 1.4.19.
    When you delete value from table:
    EditableGrid displays correct info, but in database NEXT record deleted. If you try to delete last row – exception occured. For me this fix working:
    RemoveItemLink.java:
    public void onClick(AjaxRequestTarget target) {
    List list = getListView().getList();
    int index = rowItem.getIndex();
    if (index != -1) {
    onRemove(target); # I swap this
    list.remove(index); # lines
    }
    }

  5. Hi nadeeem thanks for the info…but am using this component in wicket 6.0.0 when am using the same am getting lot of errors can u please provide the appropiate sol

  6. Hi,

    really nice Component! Appreciate your work!

    Sadly i have a little issue with validation. I got the latest code from wicketstuff repo at github and ran your “persons” example.
    In this example the address field is a required field. Everything with validation works fine, if you make only one row editable. But lets say you make row1 and row2 editable, you do not enter a value into row1’s adress field and click on the save button of row2 (where all required fields are set). As a result row2 is not saved, even if everything is ok with row2.
    I think the problem is, that every save button submits the whole form, which validates all of its components (Form#validateComponents) (even those of row1).
    Whitin EditableGridSubmitLink you go down to every form component of the according row which should be ok, but you dont even get there.

    Is there a way to get around this problem (maybe override Form#validateComponents to do nothing, and let the validation be done by your code in EditableGridSubmitLink)?

    Thanks in advance.

  7. Hi nadeem,

    do you have a sample project which makes use of this editable grid? I will use it for reference. I can’t seem to make it work in my project. I’m new to wicket.

    Can you send it here: chrisnabiong@gmail.com.

    THanks,
    Chris

  8. PLease help. I am using ListView to display tabular data. Each row has an edit link which when i click i would like the whole to change from view to edit mode. AjaxEditableLabel does not work well for me since i would like all fields in the row to change to enditable mode when i click edit link and change to view link when i click save link. Thanks in advance

  9. When you look at the code and this page, Documentation (like the howto) is severely missing. I dont mind writing it, but I do wonder why in the the S is used. It seemed it is only used for the ISortState?

  10. In an editable grid I have 2 EditableRequiredDropDownCellPanels. When I select a different value in the first DropDownCellPanel, I want to use an Ajax call to change the values shown in the second DropDownCellPanel. How do I implement that in an editable grid?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s