The ui.grid.edit feature allows inline editing of grid data. To enable, you must include the 'ui.grid.edit' module and you must include the ui-grid-edit directive on your grid element.

Documentation for the edit feature is provided in the api documentation, in particular:

• columnDef
• gridOptions
• publicApi

You can use the enableCellEdit options in your column definitions to allow a column to be editable.

Editing is invoked via double-click, f2, or start typing any non-navigable key. Cell editing ends on tab, enter or esc (cancel) on an input editor, and tab, left or right arrows, enter or esc for a dropdown.

Editing is invoked via double-click, f2, or start typing any non-navigable key. Cell editing ends on tab, enter or esc (cancel) on an input editor, and tab, left or right arrows, enter or esc for a dropdown.

A dropdown editor is also available, through setting the editableCellTemplate on the columnDef to 'ui-grid/dropdownEditor'. When using a dropdown editor you need to provide an options array through the editDropDownOptionsArray property on the columnDef. This array by default should be an array of {id: xxx, value: xxx}, although the field tags can be changed through using the editDropdownIdLabel and editDropdownValueLabel options.

A file chooser is available, through setting the 'editableCellTemplateon thecolumnDefto'ui-grid/fileChooserEditor'`. This file chooser will open the file chosen by the user and assign the value of that file to the model element. In the example below we use the file chooser to load a file, and we display the filename in the cell. The file is stored against the row in a hidden column, which we can save to our server or otherwise process.

Custom edit templates should be used for any editor other than the default editors, but be aware that you will likely also need to provide a custom directive similar to the uiGridEditor directive so as to provide BEGIN_CELL_EDIT, CANCEL_CELL_EDIT and END_CELL_EDIT events.

ColumnDef Options:

• editModelField (default: undefined) - a bindable expression to use instead of colDef.field when binding the edit control.
• editableCellTemplate (default: 'ui-grid/cellEditor') - Valid html, templateCache Id, or url that returns html content to be compiled when edit mode is invoked.
• enableCellEdit (default: false for columns of type 'object', true for all other columns) - true will enable editing and false will disable it.
• cellEditableCondition (default: true) Can be set to a boolean or a function that will be called with the cellScope to determine if the cell should be invoked in edit mode.
• type (default: 'string') If set to 'number', 'boolean' or 'date' the default editor provided for editing will be numeric or boolean or date editor respectively. If set to 'object' the column will not be editable by default. Be aware that this type column is also used for other purposes within ui-grid, including the sorting logic.
• editDropdownOptionsArray If a dropdown, needs to be populated with an array of values, by default those values should be {id: xxx, value: xxx}, the labels can be adjusted with the next two options
• editDropdownIdLabel (default: 'id') Controls the id label in the options array - so if your array happens to contain 'code' instead you can use it without having to reprocess the array
• editDropdownValueLabel (default: 'value') Controls the value label in the options array - if your array happens to contain 'name' instead you can use it without having to reprocess the array
• editDropdownRowEntityOptionsArrayPath can be used as an alternative to editDropdownOptionsArray when the contents of the dropdown depend on the entity backing the row.
• editDropdownOptionsFunction can be used as yet another alternative to editDropdownOptionsArray when the contents can be retrieved with a function whose parameters are row entity and column definition.
• editDropdownFilter (default: '') Allows you to apply a filter to the values in the edit dropdown options, for example if you were using angular-translate you would set this to 'translate'

The following option is available only if using cellNav feature

• enableCellEditOnFocus - true to invoke editor as soon as cell has focus

Note that the edit functionality uses native html5 edit widgets - the date picker, the dropdown and the input box itself. If your browser does not implement these widgets, then you won't get them. If your browser implements these widgets in a way that isn't ideal (for example, some browsers don't allow number fields to start with '.', so you can't type in '.5'), then you need to provide a custom editor instead. On the medium term roadmap there is intent to provide a bootstrap feature, which would provide directives that were compatible with angular-bootstrap directives, allowing use of the bootstrap datepicker and input fields