Inline add/edit/delete data in views in Drupal 7

Question

I am trying to create a content type (say Meter). Each Meter consists of a "Meter Reading". This meter reading content contains three fields, say title, date range and usage. I have a Panel page where I display all the Meter Readings related to a parent Meter. I have displayed the Meter Readings in a tabular format.

I want the user to be able to add new Meter Readings without going to the default Meter Readings creation page. Rather than the default form kind of page, the user should be able to enter the data in the table view provided and it should be automatically saved into the project itself.

So, I want the functionality to be like:-

1. Display all the meter readings with two links, i.e., Edit and Delete,
2. When the user clicks on Edit link, the meter reading row should become editable and the user should be able to make the changes inline in the same table,
3. In the footer there should be a link for adding a new meter reading and when the user clicks on it, a new blank row should be added dynamically to the table and the user should be able to make a new entry into it.

Is there a module in Drupal 7 for doing so?? I have already tried out several modules for this such as SlickGrid, jQGrid and jEditable

Any help would be great. Thanks in advance.

Answer 1

Am afraid am not aware about a module that does all that out of the box. But in case you carry on with custom coding you can have a look at the following:

1. Edit and Delete options per row in views

Use Views Megarow. For working example you can have a look at how its used in commerce backoffice. Please note that you need to write the form structure ( FORM api ) for the quick edit form in a custom module. The Views Megarow takes care of ajax populating the edit form, its submission in client side, and refreshing the original row after the response from server.

1. When the user clicks on Edit link, the meter reading row should become editable and the user should be able to make the changes inline in the same table.

Views Megarow doesn't support inline editing. But another module as suggested by @nmc does it. Its editablefields. But it doesn't have any edit/delete button. You click on the text directly ( provided user has appropriate permission to edit the field data ) in view.

In case you are going to use editablefields, then you would have to add another delete button in view, which one confirmation would redirect to the page that triggered delete action.

Since delete button would redirect to a default confirmation page, you may want to code a custom delete action which may override this.

1. In the footer there should be a link for adding a new meter reading and when the user clicks on it, a new blank row should be added dynamically to the table and the user should be able to make a new entry into it.

I suggest creating a small ajax form. Create a "Add Meter Reading" button in it, which on submission would create a meter reading node in the server. The ajax form should have parent information in a hidden field ( i.e. the Meter id). The ajax response for this form could be another script to load/refresh the view on client side.

Client side code to refresh the view can be found in Views Autorefresh submodule in Views Hacks.

If using views megarow you would have to add another jquery function on ajax response after view is refreshed - Trigger edit button. Otherwise you may have to add some classes or theme to newly created rows in view to bring them to focus.

It is important that the entire views refreshes, so that drupal behaviours are attached to the newly created entry in table.