# InlineInputEditor

Enables data editing by input.

# Constructor Properties

Property	Description
`disabled`	Define a boolean or predicate to control disable. See also the standard properties
`readOnly`	Define a boolean or predicate to control readonly. See also the standard properties
`classList`	Defines the `class` to be set on the `<input>`.
`type`	Defines the `type` to be set on the `<input>`.

# Example

<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.InlineInputEditor();
const grid = new cheetahGrid.ListGrid({
  parentElement: document.querySelector(".sample1"),
  header: [
    {
      field: "text",
      caption: "defined by InlineInputEditor",
      width: 260,
      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 = [
  { text: "text" },
  { text: "text" },
  { text: "text" },
  { text: "text" },
  { text: "text" },
  { text: "text" },
  { text: "text" },
  { text: "text" },
  { text: "text" },
  { text: "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

# Properties

Property	Description
`disabled`	Define a boolean or predicate to control disable. See also the standard properties
`readOnly`	Define a boolean or predicate to control readonly. See also the standard properties
`type`	Defines the `type` attribute of the `<input>` element.
`classList`	Defines `class` of the `<input>` element.

<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.InlineInputEditor({
        type: "number",
        classList: ["al-right"],
      }),
    },
    {
      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 }, { number: 1234.123 }, { number: -1234.123 }];

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

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

1
2
3

← SmallDialogInputEditor InlineMenuEditor →