Skip to content

CGridCheckColumn

Defines checkbox column.

Vue Template Structure

vue
<template>
  <div class="demo-grid small">
    <c-grid :data="records" :frozen-col-count="1">
      <c-grid-check-column field="c1" width="100"> Check1 </c-grid-check-column>
      <c-grid-check-column field="c2" width="100"> Check2 </c-grid-check-column>
    </c-grid>
  </div>
</template>
<script>
export default {
  data() {
    return {
      records: [
        { c1: true, c2: false },
        { c1: false, c2: true },
        { c1: true, c2: false },
        { c1: false, c2: true },
        { c1: true, c2: false },
        { c1: false, c2: true },
        { c1: true, c2: false },
        { c1: false, c2: true },
        { c1: true, c2: false },
        { c1: false, c2: true },
      ],
    };
  },
};
</script>

Slots

default slot

Use this slot to set the header caption

Properties

Optional Properties

NameTypeDescriptionDefault
fieldobject|string|functionDefines a column data fieldundefined
widthnumber|stringDefines a default column widthundefined
min-widthnumber|stringDefines a column min widthundefined
max-widthnumber|stringDefines a column max widthundefined
column-styleobject|string|functionDefines a column style. Same as the style property of the JS API.undefined
captionstring|functionDefines a header caption''
disabledboolean|functionDefines disabled. You can also control each record by specifying a function.false
readonlyboolean|functionDefines readonly. You can also control each record by specifying a function.false
colspannumber|stringDefines the layout colspan.
This property can be used when defining in the layout-header and layout-body slots.
undefined
filterstring|functionDefines a vue filter nameundefined
header-actionobject|string|functionDefines a column header action. Same as the headerAction property of the JS API.undefined
header-fieldstringDefines a column header data fieldundefined
header-iconobject|stringDefines a header iconundefined
header-styleobject|string|functionDefines a column header style. Same as the headerStyle property of the JS APIundefined
header-typeobject|string|functionDefines a column header type. Same as the headerStyle property of the JS APIundefined
iconobject|string|functionDefines an icon. Same as the icon property of the JS API.undefined
messageobject|string|functionDefines a message generation method. Same as the message property of the JS API.undefined
rowspannumber|stringDefines the layout rowspan.
This property can be used when defining in the layout-header and layout-body slots.
undefined
sortboolean|string|functionDefines a sort. See "Sort by Column" for detail.undefined

Methods

NameReturn TypeDescription
invalidate---Redraws the whole grid.