# RadioColumn

Show the radio button.

To make it editable, please use RadioEditor.

# Style Properties

Property Description Default
checkColor define check mark color of radio button. resolve by the theme.
checkBgColor define background color of radio button, when it is checked. resolve by the theme.
uncheckBgColor define background color of radio button, when it is unchecked. resolve by the theme.
checkBorderColor define border color of radio button, when it is checked. resolve by the theme.
uncheckBorderColor define border color of radio button, when it is unchecked. resolve by the theme.
textAlign define horizontal position of radio button in cell. 'center'
textBaseline define vertical position of radio button in cell. --
bgColor define background color of cell. resolve by the theme.
<div class="sample1 demo-grid small"></div>
1
const grid = new cheetahGrid.ListGrid({
  parentElement: document.querySelector('.sample1'),
  header: [
    {
      field: 'c1',
      caption: 'radio',
      width: 100,
      columnType: 'radio', // or `new cheetahGrid.columns.type.RadioColumn()`
    },
    {
      field: 'c2',
      caption: 'style',
      width: 100,
      columnType: 'radio',
      style: {
        checkColor: 'rgb(255, 73, 72)',
        checkBgColor: '#FDD',
        checkBorderColor: 'red',
        uncheckBgColor: '#DDF',
        uncheckBorderColor: 'rgb(72, 73, 255)',
      },
    },
    {
      caption: 'show',
      width: 100,
      columnType: new cheetahGrid.columns.type.ButtonColumn({
        caption: 'SHOW',
      }),
      action: new cheetahGrid.columns.action.ButtonAction({
        action(rec) {
          alert(JSON.stringify(rec, null, '  '));
        },
      }),
    }


  ],
});
grid.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},
];
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