Column Ship Country has autocomplete editor with remote data and remote validation.
Column Books also has autocomplete editor but with local data and validation.
Column Fruits has radio button editor
Column Order Date has jQueryUI date picker custom editor.
Column Order Date2 has Bootstrap date picker custom editor.
Column ShipVia has select editor. It stores primary keys of ShipVia i.e., SE, UP, FS in a hidden column ShipViaId while displays corresponding text values itself.
Column ShipVia2 also has select editor. It stores primary keys i.e., SE, UP, FS in the same column and displays corresponding text values by implementing column.render
callback.
Column ShipVia3 also native select editor.
Column Freight is of float data type, hence filters the non numeric keys
Column Ship Address has the default contenteditable multiline text editor. Line breaks can be added either by:
By default the width of editor is set equal to width of its corresponding cell. It can be changed to "auto" as has been done for "Shipping Address" column in this example.
Width of editor changes according to its content when it's set to "auto".
editor: { style: { width: "auto" } }
Value of editModel.clicksToEdit
decides whether single or double click is required to put cell in edit mode.
Validations are defined for columns with validations
option which is an array of one or more validation objects.
validations: [ { type: 'regexp', value: '^[0-9]{2}/[0-9]{2}/[0-9]{4}$', msg: 'Not in mm/dd/yyyy format' } ]
Validations can take place in 2 alternative ways depending upon allowInvalid
parameter:
allowInvalid: false
Disallow invalid values i.e., reject the changes which don't agree with validation rules.allowInvalid: true
Accept the invalid changes but add an invalid class to highlight the invalid cell.allowInvalid
parameter can be set at the source of change or during processing of data.
editModel.allowInvalid
to set it while inline editing of cells. pasteModel.allowInvalid
to set it while paste of data. allowInvalid
parameter of updateRows
method to set it while update of data through grid API.ui.allowInvalid
parameter of beforeValidate
event which fires irrespective of source of data change.