# SmallDialogInputEditor

Enables data editing by input.

You can dynamically control the readOnly and disabled property by defining an instance of the SmallDialogInputEditor class to the action column.
But if you define 'input', as string, to action of the column, you can't control these properties.
You can also disable or read-only each record by specifying a function for the disabled and readOnly properties.

<div class="sample1 demo-grid small"></div>

<label>change action properties : </label>
<select class="sample1mode">
  <option value="" selected="true">both false</option>
  <option value="readOnly">readOnly = true</option>
  <option value="disabled">disabled = true</option>
</select>
<span class="sample1modememo"></span>

1
2
3
4
5
6
7
8
9

const inputEditor = new cheetahGrid.columns.action.SmallDialogInputEditor();
const grid = new cheetahGrid.ListGrid({
  parentElement: document.querySelector(".sample1"),
  header: [
    {
      field: "text1",
      caption: "defined by string",
      width: 220,
      action: "input",
    },

    //
    {
      field: "text2",
      caption: "defined by class instance",
      width: 220,
      action: inputEditor,
    },

    {
      caption: "show",
      width: 100,
      columnType: new cheetahGrid.columns.type.ButtonColumn({
        caption: "SHOW",
      }),
      action: new cheetahGrid.columns.action.ButtonAction({
        action(rec) {
          alert(JSON.stringify(rec, null, "  "));
        },
      }),
    },
  ],
});
grid.records = [
  { text1: "text", text2: "text" },
  { text1: "text", text2: "text" },
  { text1: "text", text2: "text" },
  { text1: "text", text2: "text" },
  { text1: "text", text2: "text" },
  { text1: "text", text2: "text" },
  { text1: "text", text2: "text" },
  { text1: "text", text2: "text" },
  { text1: "text", text2: "text" },
  { text1: "text", text2: "text" },
];

document.querySelector(".sample1mode").onchange = function () {
  //change action properties
  if (this.value === "readOnly") {
    inputEditor.readOnly = true;
    inputEditor.disabled = false;
    document.querySelector(".sample1modememo").textContent =
      "It will not toggle";
  } else if (this.value === "disabled") {
    inputEditor.readOnly = false;
    inputEditor.disabled = true;
    document.querySelector(".sample1modememo").textContent =
      "It will not toggle and does not respond when hovering the mouse";
  } else {
    inputEditor.readOnly = false;
    inputEditor.disabled = false;
    document.querySelector(".sample1modememo").textContent = "both false";
  }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

# Properties

The following properties can be set with the constructor argument of SmallDialogInputEditor.

Property	Description
`type`	Specify the `type` attribute of the `<input>` element.
`classList`	Specify `class` of the dialog element.
`helperText`	Specify helper text. You can also specify a function.
`validator`	Specify the validation function to be call before confirming the input value. If there is an error, please use the function to return the message.
`inputValidator`	Specify the validation function of the value of `<input>`. If there is an error, please use the function to return the message.

<div class="sample2 demo-grid small"></div>

const grid = new cheetahGrid.ListGrid({
  parentElement: document.querySelector(".sample2"),
  header: [
    {
      field: "number",
      caption: "type & classList",
      width: 220,
      columnType: "number",
      action: new cheetahGrid.columns.action.SmallDialogInputEditor({
        type: "number",
        classList: ["al-right"],
      }),
    },
    {
      field: "text",
      caption: "validator & helperText",
      width: 220,
      action: new cheetahGrid.columns.action.SmallDialogInputEditor({
        classList: "helper-text--right-justified",
        helperText(value) {
          return `${value.length}/20`;
        },
        inputValidator(value) {
          return value.length > 20
            ? `over the max length. ${value.length}`
            : null;
        },
        validator(value) {
          return value.match(/^[a-zA-Z]*$/) ? null : "Please only alphabet.";
        },
      }),
    },
    {
      field: "code",
      caption: "async validator",
      width: 220,
      action: new cheetahGrid.columns.action.SmallDialogInputEditor({
        helperText: "enter code. /^[A-Z]\\d{3}$/",
        validator(value) {
          return new Promise((r) => {
            setTimeout(() => {
              r(value.match(/^[A-Z]\d{3}$/) ? null : "Invalid code.");
            }, 500);
          });
        },
      }),
    },
    {
      caption: "show",
      width: 100,
      columnType: new cheetahGrid.columns.type.ButtonColumn({
        caption: "SHOW",
      }),
      action: new cheetahGrid.columns.action.ButtonAction({
        action(rec) {
          alert(JSON.stringify(rec, null, "  "));
        },
      }),
    },
  ],
});
grid.records = [
  { number: 1234, text: "a", code: "A001" },
  { number: 1234.123, text: "b", code: "A002" },
  { number: -1234.123, text: "c", code: "A003" },
];

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

.al-right input {
  text-align: right;
}

1
2
3

← CheckEditor InlineInputEditor →