Cheetah Grid

# Define Column Actions

# Standard Column Action

Define column action by using action property.
Please select suitable Action class for columnType of same column.

columnType Specified action by string Description LINK
check 'check' Define the behavior when checkbox is clicked. CheckEditor
button --- Define the behavior when button is clicked. ButtonAction
input 'input' Define the behavior when cell input. SmallDialogInputEditor
MenuColumn --- Define the behavior when select a menu. InlineMenuEditor
radio 'radio' Define the behavior when radio button is clicked. RadioEditor
<div class="sample1 demo-grid small"></div>
1
const grid = new cheetahGrid.ListGrid({
  parentElement: document.querySelector(".sample1"),
  header: [
    { field: "no", caption: "no", width: 50 },
    // action: 'check'
    {
      field: "check",
      caption: "check",
      width: 60,
      columnType: "check",
      action: "check",
    },
    // action: 'input'
    { field: "text", caption: "input", width: 120, action: "input" },
    {
      caption: "button",
      width: 100,
      columnType: new cheetahGrid.columns.type.ButtonColumn({
        caption: "show rec",
      }),
      // ButtonAction
      action: new cheetahGrid.columns.action.ButtonAction({
        action(rec) {
          alert(JSON.stringify(rec));
        },
      }),
    },
  ],
});
grid.records = [
  { no: 1, check: true, text: "abc" },
  { no: 2, check: false, text: "def" },
  { no: 3, check: true, text: "ghi" },
];
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

# Advanced Column Action

By setting the property action as an Action instance, You can change the properties of the action (disable, readonly, etc.) in the when you want.

Please refer to here

← Column Action Classes →