# 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 |

<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

# 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