How to use inbuilt and custom editors in javascript grid?

Radio button editor

Column Fruits has radio button custom editor

Date editors

We define column.fmtDateEdit ( new option in v10.0.0 ) to set format of editor value and parse the input value back to date ISO format.

Even though date columns in our example have different formats, yet we check for ISO date format i.e., yyyy-mm-dd in the validations because validations always check the cell value and not the formatted values.

Column "Order Date jui" has jQueryUI date picker custom editor.

Column "Order Date bootstrap" has Bootstrap date picker custom editor.

Autocomplete editors

Column Ship Country has autocomplete editor with remote data and remote validation.

Column Books has autocomplete editor but with local data and validation.

Select Editors

Columns ShipVia and ShipVia2 have select editor. One of them is converted to pqSelect in editor.init callback.

Primary keys i.e., SE, UP, FS, etc are stored as column values and corresponding text values are displayed in cell by implementing column.render callback.

There is a difference in the editor select options array, hence a slight variation in implementation of render and validation functions.

Numeric editor

Column Order Id is of integer data type and uses HTML5 type='number' editor

Column Freight is of float data type, hence filters the non numeric keys

Multi line editor

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.

Clear text icon

Clear text icon ✖ can be added to any input editor ( with type = 'text', 'number' or 'date' ) by simply adding the attribute is='clear-text'

Validations:

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 following ways depending upon allowInvalid parameter:

allowInvalid parameter can be set at following points of code execution: