Skip to content

Define Column Actions ​

Standard Column Action ​

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

columnTypeSpecified action by stringDescriptionLINK
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
html
<div class="sample1 demo-grid small"></div>
js
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" },
];

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