Row Edit

This is purely experimental and unsupported.

In the table above editing has been enabled both at the cell level and row level. Any cell can be clicked to pop up the cell editor. Clicking the right-most cell allows for row editing.

The row editor uses the same content editors the cell editor uses, in fact, it moves the DOM elements from the cell editor to the row editor and back. There is no need to set a separate definition on how to build the form. It will put all the fields that have a cell editor defined. It will also follow the column header nesting and group the entry fields in the same way.

The format of the row editor panel is given by several templates:

rowEditorHead:                'Edit Row'

rowEditorFieldTemplate:       '<label for="{id}">{label}</label><div class="'
                              + YAHOO.widget.DataTable.ROW_EDITOR_FIELD_CLASS
                              + '" id="{id}"></div>'

rowEditorGroupStartTemplate': '<fieldset class="'
                              + YAHOO.widget.DataTable.ROW_EDITOR_GROUP_CLASS
                              + '"><legend>{label}</legend>'

rowEditorGroupEndTemplate:    '</fieldset>'

The identifiers enclosed in curly braces are placeholders handled with YAHOO.lang.substitute. Values for label and key, along an id made of the prefix YAHOO.widget.DataTable.ROW_EDITOR_ID ('yui-dt-re-') and the column key. The field and group templates, along with the global constants defining the classNames and the corresponding style definitions give plenty of flexibility. Element ids are also generated so they can be further used to tailor any particular section.