# Define Header Actions

# Advanced Header Action

Define header action by using headerAction property.
Please select suitable Action class for headerType of same header.

`headerType`	Specified `headerAction` by string	Description
`check`	`'check'`	Define the behavior when checkbox is clicked.
`sort`	`'sort'`	Define the behavior on clicked. the default behavior is to sort the data.

<div class="sample1 demo-grid small"></div>

const grid = new cheetahGrid.ListGrid({
  parentElement: document.querySelector(".sample1"),
  header: [
    { field: "no", caption: "no", width: 50 },
    {
      field: "check",
      width: 100,
      columnType: "check",
      action: "check",
      headerType: "check",
      headerAction: "check",
    },
    {
      field: "text",
      caption: "sort",
      width: 120,
      action: "input",
      headerType: "sort",
      headerAction: "sort",
    },
  ],
});
grid.records = [
  { no: 1, check: true, text: "abc" },
  { no: 2, check: false, text: "def" },
  { no: 3, check: true, text: "ghi" },
];

const { CHANGED_HEADER_VALUE, CHANGED_VALUE } = cheetahGrid.ListGrid.EVENT_TYPE;
grid.listen(CHANGED_HEADER_VALUE, ({ value, field }) => {
  if (field !== "check") {
    return;
  }
  // header check value on change

  for (const rec of grid.records) {
    rec[field] = value;
  }
  grid.invalidate();
});
grid.listen(CHANGED_VALUE, ({ value, field }) => {
  if (field !== "check") {
    return;
  }
  // check value on change

  grid.headerValues.set(field, false);

  grid.invalidate();
});

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

# Using Vue.js

In vue-cheetah-grid, define the header-action, header-type property.

<div class="demo-grid small">
  <c-grid
    ref="grid"
    :data="records">
    <c-grid-column
      field="no"
      width= "50"
    >
      no
    </c-grid-column>
    <c-grid-check-column
      field="check"
      width="100"
      header-type="check"
      header-action="check"
      @changed-header-value="onChangeHeaderValue"
      @changed-value="onChangeValue" />
    <c-grid-column
      field="text"
      width= "120"
      header-type="sort"
      header-action="sort" 
    >
      sort
    </c-grid-column>
  </c-grid>
</div>

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

export default {
  data() {
    return {
      records: [
        { no: 1, check: true, text: "abc" },
        { no: 2, check: false, text: "def" },
        { no: 3, check: true, text: "ghi" },
      ],
    };
  },
  methods: {
    onChangeHeaderValue({ value }) {
      // header check value on change
      const { grid } = this.$refs;

      for (const rec of this.records) {
        rec.check = value;
      }
      grid.invalidate();
    },
    onChangeValue() {
      // check value on change
      const { grid } = this.$refs;

      grid.headerValues.set("check", false);

      grid.invalidate();
    },
  },
};

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

# Using Header Action Class

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

← Define Header Styles Advanced Layout →