Cheetah Grid

# Standard Properties

Action classes have some common properties. Here, they will be described.

# disabled property

If set to true, the action will be disabled. You can also control disabled for each record by specifying a function.

const alwaysDisabledButtonAction = new cheetahGrid.columns.action.ButtonAction({
  disabled: true,
  action(rec) {
    alert("Clicked Button!");
  },
});
const DisabledForEachRecordButtonAction =
  new cheetahGrid.columns.action.ButtonAction({
    disabled: (rec) => rec.disabled,
    action(rec) {
      alert("Clicked Button!");
    },
  });

const grid = new cheetahGrid.ListGrid({
  parentElement: document.querySelector(".sample1"),
  header: [
    {
      caption: "Always Disabled",
      width: 180,
      columnType: new cheetahGrid.columns.type.ButtonColumn({
        caption: "BUTTON",
      }),
      action: alwaysDisabledButtonAction,
    },
    {
      caption: "Disabled",
      field: "disabled",
      columnType: "check",
      action: "check",
    },
    {
      caption: "Disabled for Each Record",
      width: 180,
      columnType: new cheetahGrid.columns.type.ButtonColumn({
        caption: "BUTTON",
      }),
      action: DisabledForEachRecordButtonAction,
    },
  ],
});
grid.records = [{ disabled: false }, { disabled: false }, { disabled: 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
<div class="sample1 demo-grid small"></div>
1

# readOnly property

If set to true, the action will be read-only. As with disabled, you can also specify a function.

← Grid Data →