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