How to use different inbuilt and custom editors in javascript grid?

Different editors in different columns

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:

Width of editors

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"

Single click edit

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 parameter can be set at the source of change or during processing of data.

At source: During processing: