Smart.Grid - Editing

Grid Editing

Smart.Grid allows users to edit the data loaded from the Grid's data source in a variety of ways. After an edit operation is completed, the data source is updated with the new data.

Editing is configured by setting the sub-properties of the property/object editing. To enable it, editing.enabled has to be set to true.

The major features related to editing are:

• Cell Editing
• Row Editing
• Dialog Editing
• Editors
• Batch Editing
• Command Column
• Header Editing
• Editing-related Methods

Cell Editing

Cell editing allows the user to edit one Grid cell at a time. To enable cell editing, editing.mode has to be set to 'cell'.

An edit operation can be initiated according to the value of editing.action, which, by default, is 'click' (and can also be set to 'none' and 'doubleClick').

Once editing is initiated, an editor appears in the cell. These editors can be different types and can be customized as described in section Editors of this article.

Row Editing

Row editing allows the user to edit a whole Grid row at once. To enable row editing, editing.mode has to be set to 'row'.

As with cell editing, inline row editing operation can be initiated according to the value of editing.action, which, by default, is 'click'.

Once editing is initiated, editors appears in all cells of the edited row. These editors can be different types and can be customized as described in section Editors of this article.

Dialog Editing

An alternative way to edit a Grid row is by opening an edit dialog which can be configured by setting the sub-properties of the property/object editing.dialog:

• enabled - enables dialog editing option when set to true.
• header - sets the header text of the dialog.
• width, height - set the size of the dialog.
• left, top - set the position of the dialog.
• visible - sets the visibility of the dialog.

Once opened, the edit dialog acts as a modal and displays editors for every cell of the edited row. "OK" and "Cancel" buttons allow the edit operation to be confirmed or canceled.

Editors

Different cell editors can be configured in order to make cell editing more easy and intuitive. Editors are defined for each Grid column in the columns property/array by setting a column's editor property. Here is a list of editors that can be used:

• 'input' (default editor)
• 'autoComplete'
• 'checkBox'
• 'dateTimePicker'
• 'numberInput'
• 'textArea'

An editor can be further customized by setting it to a custom object with template property which defines the editor type, onInit, and onRender callback functions, as well as properties specific to the editor's base type (if applicable):

editor: {
    template: 'dateTimePicker',
    formatString: 'd',
    onInit(index, dataField, editor) {}
}

Batch Editing

Smart.Grid allows you to edit and update multiple grid rows on the client side and confirm the edit and send them with a single server request. To enable the Grid's batch editing, the editing.batch property should be set to true. The editing.commandBar setting allows you to display a toolbar or statusbar with tools for saving and reverting the edit made by the users. This is done by setting editing.commandBar.visible to true.

Cells with updated values become highlighted until the edit operation is either confirmed or discarded.

Command Column

One of the Smart.Grid editing features is the command column. The command column can be used to edit or delete a row. It can be positioned as first or last column in the Grid. The Column width is 'auto' by default, but it can be fixed as well. The 'commands' can be displayed as icons, labels, or icons and labels. All these settings are controlled by the property/object editing.commandColumn.

Once an edit operation is initiated, the commands reflect that by displaying Update and Cancel icons/labels.

The command column's commands can appear inline on row hover if editing.commandColumn.inline is set to true.

Header Editing

The labels of column and row headers of Smart.Grid can also be edited. These are enabled by setting to true editing.allowColumnHeaderEdit and editing.allowRowHeaderEdit respectively. This editing is initiated by double-clicking a column/row header.

Editing-related Methods:

• beginEdit - programmatically starts a cell, row or column editing.
• cancelEdit - cancels the editing, discarding all changes.
• endEdit - ends the editing, confirming all changes.
• getBatchEditChanges - gets the changes from the batch edit.
• revertBatchEdit - reverts the batch edit changes.
• saveBatchEdit - saves the batch edit changes.