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.

• For bootstrap date editor we add these 2 files in the header

  <link rel="stylesheet" href="/bootstrap-datepicker-1.9.0/dist/css/bootstrap-datepicker.css">
  <script src="/bootstrap-datepicker-1.9.0/dist/js/bootstrap-datepicker.min.js"></script>
  

• and rename the bootstrap datepicker to avoid conflict with jqueryUI date picker.

  $.fn.bootstrapDatepicker = $.fn.datepicker.noConflict();
  

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:

• Alt - Enter key combination when Enter key alone is reserved as save key. This is default and is commonly used in Spreadsheet applications.
• Enter key when it's not reserved as save key i.e, set editModel.saveKey = '' or some other key code for a specific column or all columns

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: 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 following points of code execution:

• at source of change:

  • use editModel.allowInvalid to allow or disallow invalid values while inline editing of cells.
  • use pasteModel.allowInvalid to allow or disallow invalid values while paste of data.
  • use allowInvalid parameter of updateRows method to allow or disallow invalid values while update of data through grid API.

• during processing:

  • Change ui.allowInvalid parameter of beforeValidate event which fires irrespective of source of data change.