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. For it,

• we have added 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 renamed the bootstrap datepicker to avoid conflict with jqueryUI date picker.

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

Column ShipVia has select editor. Primary keys for ShipVia i.e., SE, UP, FS, etc are stored in a separate hidden column ShipViaId while the corresponding text values are displayed in the column itself.
Native select editor is converted to pqSelect editor in the editor.init callback.

Column ShipVia2 also has select editor. Primary keys i.e., SE, UP, FS, etc are stored in the same column and corresponding text values are displayed by implementing column.render callback.
Native select editor is converted to pqSelect editor in the editor.init callback.

Column ShipVia3 uses 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:

• 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.

---

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 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.

At source:

• use editModel.allowInvalid to set it while inline editing of cells.
• use pasteModel.allowInvalid to set it while paste of data.
• use allowInvalid parameter of updateRows method to set it while update of data through grid API.

During processing:

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