# InlineMenuEditor

Enables data editing by menu selection.

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

<label>change action properties : </label>
<select class="sample1mode">
    <option value="" selected="true">both false</option>
    <option value="readOnly">readOnly = true</option>
    <option value="disabled">disabled = true</option>
</select> <span class="sample1modememo"></span>
1
2
3
4
5
6
7
8
const menuOptions = [
  {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 displayOptions = [
  {value: '', label: 'Choose your option'},
  {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 menuEditor = new cheetahGrid.columns.action.InlineMenuEditor({options: menuOptions});
const grid = new cheetahGrid.ListGrid({
  parentElement: document.querySelector('.sample1'),
  header: [
    {
      field: 'sel',
      caption: 'InlineMenuEditor',
      width: 260,
      columnType: new cheetahGrid.columns.type.MenuColumn({options: displayOptions}),
      action: new cheetahGrid.columns.action.InlineMenuEditor({options: menuOptions}),
    },
    {
      field: 'sel2',
      caption: 'controlable properties',
      width: 260,
      columnType: new cheetahGrid.columns.type.MenuColumn({options: displayOptions}),
      action: menuEditor,
    },

    {
      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'},
];
document.querySelector('.sample1mode').onchange = function() {
  //change action properties
  if (this.value === 'readOnly') {
    menuEditor.readOnly = true;
    menuEditor.disabled = false;
    document.querySelector('.sample1modememo').textContent = 'It will not toggle';
  } else if (this.value === 'disabled') {
    menuEditor.readOnly = false;
    menuEditor.disabled = true;
    document.querySelector('.sample1modememo').textContent = 'It will not toggle and does not respond when hovering the mouse';
  } else {
    menuEditor.readOnly = false;
    menuEditor.disabled = false;
    document.querySelector('.sample1modememo').textContent = 'both false';
  }
};
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85