In place editing and advanced editing?

Question

I am wondering what is the best way to support both in place editing at a datagrid and advanced for properties that cannot fit into a row. My first idea is to have a pencil at the left for in row editing,and double click for advanced. But this may not be obvious.Having an another button with text like Edit at right visible on hover is it a good idea for advanced edit. Any other idea?

Answer 1

Depending on the expected amount of full detailed editing vs. simple in-line editing should give you an answer how to solve editing.

80:20 in favour of simple editing

In this case I'd use a pencil (when visually not overwhelming or distracting) or clickable item name/row (when click can't be associated with anything else) which would display the in-place editor. Withing this editor there would be a link/button/icon that would say: edit all details.

Something similar is done on Google Calendar when creating an event. You can easily create an even in place but that bubble also has a link Edit event.

80:20 in favour of full editing

In this case in-place editor doesn't make sense at all and only detailed editor should be provided.

In-place editor notes

In-place editors only make sense when:

1. multi-item listing control (be it grid or anything else) displays all item properties that can easily be edited using in-place editor (some properties may be too complex to display in a simple in-place editor.
2. when users will more likely edit just a subset of the item's properties displayed in the multi-item listing control as opposed to all properties or those that are omitted from listing.

When none of these is met then there's no need (or better sense) in having an in-place editor in the first place and would be considered bad UX.

Answer 2

I think having many rows with pencil icons might get visually repetitive, though it entirely depends on how many rows in the table all together, and how many of those rows are editable.

Another option is to make data cells become editable by row on-click, and showing that cells are editable by using a text field with a slightly different colored cell background for contrast.

Answer 3

You can make an edit link close to the row when the user either hovers the row or he is editing some of the in-place fields. In the later case, you can use a different text such as "edit more" to indicate you can access to additional fields in a separate view.

Answer 4

I think having a pencil icon on each row to open a dialog for advanced editing is better than requiring the user to select the row they want to edit and then click an 'edit' button outside the grid. I think the efficiency of this approach (1 click instead of 2 clicks) and its simplicity outweighs the aesthetic cost of repetitive, row-by-row icons.

Note, however, that these options are not mutually exclusive. The second option (row selection then out-of-grid advanced edit icon) can be used alongside the row-by-row edit icon approach, especially if you're offering the ability to delete rows. The 'in-grid selection and out-of-grid action button' layout is suited for row deletion because multiple rows can selected then deleted. This layout can also accommodate row editing by allowing the user to select a row (e.g. with a checkbox to the left of the row data) then click an out-of-grid edit icon.

The jQuery Grid Plugin (jqgrid) allows this flexible type of layout, and offers a pretty complete solution for datagrid UI's. An official grid super-widget from the jQuery UI team is another thing to keep on your radar. It's currently under active development, but I think it will make a big splash in the pool of in-browser data grids when it's released. You can find the repository for that at https://github.com/jquery/jquery-ui/commits/grid.