Cheetah Grid

# CheckEditor

Define the behavior and data editing when checkbox is clicked.

The record is edited after select the cell by clicking it and then push Enter or Space.

You can control the property of readOnly and disabled by setting the instance of CheckEditor class to action of the column.
But if you define 'check', 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 checkEditorAction = new cheetahGrid.columns.action.CheckEditor();
const grid = new cheetahGrid.ListGrid({
  parentElement: document.querySelector(".sample1"),
  header: [
    {
      field: "check1",
      caption: "defined by string",
      width: 220,
      columnType: "check",
      action: "check",
    },

    //
    {
      field: "check2",
      caption: "defined by class instance",
      width: 220,
      columnType: "check",
      action: checkEditorAction,
    },

    {
      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 = [
  { check1: true, check2: false },
  { check1: false, check2: true },
  { check1: true, check2: false },
];

document.querySelector(".sample1mode").onchange = function () {
  //change action properties
  if (this.value === "readOnly") {
    checkEditorAction.readOnly = true;
    checkEditorAction.disabled = false;
    document.querySelector(".sample1modememo").textContent =
      "It will not toggle";
  } else if (this.value === "disabled") {
    checkEditorAction.readOnly = false;
    checkEditorAction.disabled = true;
    document.querySelector(".sample1modememo").textContent =
      "It will not toggle and does not respond when hovering the mouse";
  } else {
    checkEditorAction.readOnly = false;
    checkEditorAction.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

# Data editing

Basic behavior is switching true and false.

Switchings shown below can be done as the special behavior.

Type Truthy Value Falsy Value
number 1 0
string 'true' 'false'
string 'on' 'off'
string '1' '0'
string '01' '00'
string '00001' '00000'

The value regarded as truthy value in JavaScript is switched to false.
The value regarded as falsy value is switched to true.

All numbers except 0 are switched to 0.
In this case, the original number will not be restored when switching again.

<div class="sample2 demo-grid small"></div>
1
const grid = new cheetahGrid.ListGrid({
  parentElement: document.querySelector(".sample2"),
  header: [
    {
      field: "boolean",
      caption: "true/false",
      width: 100,
      columnType: "check",
      action: "check",
    },
    {
      field: "num",
      caption: "1/0",
      width: 100,
      columnType: "check",
      action: "check",
    },
    {
      field: "truefalse",
      caption: "'true'/'false'",
      width: 100,
      columnType: "check",
      action: "check",
    },
    {
      field: "onoff",
      caption: "on/off",
      width: 100,
      columnType: "check",
      action: "check",
    },
    {
      field: "onezero",
      caption: "'1'/'0'",
      width: 100,
      columnType: "check",
      action: "check",
    },
    {
      field: "numstring",
      caption: "num string",
      width: 100,
      columnType: "check",
      action: "check",
    },
    {
      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 = [
  {
    boolean: true,
    num: 0,
    truefalse: "true",
    onoff: "off",
    onezero: "1",
    numstring: "00",
  },
  {
    boolean: false,
    num: 1,
    truefalse: "false",
    onoff: "on",
    onezero: "0",
    numstring: "0001",
  },
  {
    boolean: true,
    num: 0,
    truefalse: "true",
    onoff: "off",
    onezero: "1",
    numstring: "00000000000",
  },
];
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

# disabled

You can control disabled depending on the state of the record by giving disabled a function.

<div class="sample3 demo-grid small"></div>
1
const checkEditorAction = new cheetahGrid.columns.action.CheckEditor();
checkEditorAction.disabled = (record) => record.disabled;

const grid = new cheetahGrid.ListGrid({
  parentElement: document.querySelector(".sample3"),
  header: [
    {
      field: "test",
      caption: "disabled?",
      width: 220,
      columnType: "check",
      action: checkEditorAction,
    },

    //
    {
      field: "disabled",
      caption: "control",
      width: 220,
      columnType: "check",
      action: "check",
    },
  ],
});
grid.records = [
  { disabled: true, test: false },
  { disabled: false, test: true },
  { disabled: true, test: 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

← SmallDialogInputEditor →