# MenuColumn
Maps from value
to label
and display it.
To make it editable, please use InlineMenuEditor.
# Constructor Properties
Property | Description |
---|---|
options | Define mapping options. |
# Style Properties
Property | Description | Default |
---|---|---|
appearance | Defines whether to display a dropdown arrow. (you can set 'menulist-button' or 'none' ) | 'menulist-button' |
In addition to this, Standard styles is available.
<div class="sample1 demo-grid small"></div>
1
const options = [
{value: '', label: 'Empty'},
{value: '1', label: 'Option 1'},
{value: '2', label: 'Option 2'},
{value: '3', label: 'Option 3'},
{value: '4', label: 'Option 4'},
{value: '5', label: 'Option 5'},
{value: '6', label: 'Option 6'},
{value: '7', label: 'Option 7'},
];
const grid = new cheetahGrid.ListGrid({
parentElement: document.querySelector('.sample1'),
header: [
{
field: 'sel',
caption: 'MenuColumn',
width: 260,
columnType: new cheetahGrid.columns.type.MenuColumn({options}),
},
{
field: 'sel2',
caption: 'style',
width: 260,
columnType: new cheetahGrid.columns.type.MenuColumn({options}),
style: {appearance: 'none'},
},
{
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 = [
{sel: '', sel2: ''},
{sel: '1', sel2: '1'},
{sel: '2', sel2: '2'},
{sel: '3', sel2: '3'},
{sel: '', sel2: ''},
{sel: '1', sel2: '1'},
{sel: '2', sel2: '2'},
{sel: '3', sel2: '3'},
{sel: '', sel2: ''},
{sel: '1', sel2: '1'},
{sel: '2', sel2: '2'},
{sel: '3', sel2: '3'},
];
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
51
52
53
54
55
56
57
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
51
52
53
54
55
56
57