mask editor

You can apply masks in the editor for text and date fields. (Use editFormat for numeric fields)

It does not work in dropDown, multiLine, multiCheck, number editors, etc.

Mask editor basic format

For "9", spaces are allowed. If not entered, it is excluded from the value. If there is a format that does not allow spaces, you must enter them in order to move to another cell. The default mask pattern characters are as follows, but developers can create their own if necessary.

"9": new RegExp("[0-9 ]")
"0": new RegExp("[0-9]")
"a": new RegExp("[A-Za-z]")
"*": new RegExp("[A-Za-z0-9]")

Using mask editor with TextCellEditor

The format applied to the mask in TextCellEditor is visible only in the editor. mask: If you enter "0000-0000-0000-0000", the editor displays "____-____-____-____" according to the entered format. Therefore, in the case of a text field, in order to display it in a cell, it must be processed appropriately using regular expressions or the displayCallback property.

Using mask editor with DateCellEditor

In the case of date fields, the formats of editMask and datetimeFormat must match, and even the delimiter must be passed to the cell using includedFormat:true for the date data to be processed properly.

var columns = [{
...
}, {
   "name": "OrderID",
   "fieldName": "OrderID",
   "width": "150",
   "header": {
     "text": "Card Number",
     "styleName": "orange-column"
   },
   "editor": {
     "mask": {
       "editMask": "0000-0000-0000-0000"
     }
   },
   "textFormat": "([0-9]{4})([0-9]{4})([0-9]{4})([0-9]{4});$1-$2- $3-$4"
}, {
   "name": "OrderDate",
   "fieldName": "OrderDate",
   "width": "130",
   "header": {
       "text": "Order Date",
       "styleName": "orange-column"
   },
   "editor": {
     "type": "date",
     "mask": {
         "editMask": "9999-99-99", //displayed format
         "placeHolder": "yyyy-MM-dd", //Format to be displayed in the editor
         "includedFormat": true //The contents displayed in the editor are passed as cell values.
     }
   },
   "datetimeFormat":"yyyy-MM-dd"
}, {
...
}];

Creating pattern characters using ### definitions

This is a demo of creating a time input machine using definitions.

var columns = [
   ...
   }, {
   "name": "Time",
   "fieldName": "Time",
   "width": "150",
   "header": {
     "text": "Time",
     "styleName": "orange-column"
   },
   "editor": {
     "mask": {
       "definitions": {
           "b": "[0-2]",
           "c": "[0-9]",
           "d": "[0-5]",
           "e": "[0-9]"
       },
       "editMask": "bc:de",
       "includedFormat": true,
       "overWrite": true,
       "allowEmpty": true
     }
   },
   "textFormat": "([0-9]{2})([0-9]{2});$1:$2"
}, {
   ...
];

When using the time editor, it is not possible to directly restrict the input so that it does not exceed 24 hours. You must process it so that the value is not applied after verification as shown below.

gridView.onGetEditValue = function (grid, index, editResult) {
     if(index.fieldName == "Time"){
         var time = editResult.value.substr(0,2);
         if(Number(time) >= 24){
             editResult.value = ""
         }
     }
}

Date Editor Input limit editor