# Define Cell Messages
Define the message to display in each cell of the column by using message
property.
<div class="sample1 demo-grid small"></div>
1
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 grid = new cheetahGrid.ListGrid({
parentElement: document.querySelector('.sample1'),
header: [
{
field: 'text1',
caption: 'message field',
width: 150,
//message field
message: 'msg'
},
{
field: 'text2',
caption: 'input',
width: 150,
//message function
message(rec) {
return rec.text2.match(/^[a-zA-Z]*$/) ? null : 'Please only alphabet.';
},
action: 'input'
},
{
field: 'text3',
caption: 'inline input',
width: 150,
message(rec) {
return rec.text3.match(/^[a-zA-Z]*$/) ? null : 'Please only alphabet.';
},
action: new cheetahGrid.columns.action.InlineInputEditor(),
},
{
field: 'val4',
caption: 'menu',
width: 200,
message(rec) {
return rec.val4 ? null : 'Please select.';
},
columnType: new cheetahGrid.columns.type.MenuColumn({options: displayOptions}),
action: new cheetahGrid.columns.action.InlineMenuEditor({options: menuOptions}),
},
{
field: 'check5',
caption: 'check',
width: 100,
message(rec) {
return rec.check5 ? null : 'Please check.';
},
columnType: 'check',
action: 'check',
},
{
field: 'text1',
caption: 'info',
width: 150,
message(rec) {
return {
//info message
type: 'info',
message: 'Info Message.'
};
},
},
{
field: 'text1',
caption: 'warning',
width: 150,
message(rec) {
return {
//warning message
type: 'warning',
message: 'Warning Message.'
};
},
},
],
});
grid.records = [
{text1: 'text', text2: '123', text3: '123', val4: '', check5: false, msg: 'message.'},
{text1: 'text', text2: '123', text3: '123', val4: '', check5: false, msg: 'message.'},
{text1: 'text', text2: '123', text3: '123', val4: '', check5: false, msg: 'message.'},
{text1: 'text', text2: '123', text3: '123', val4: '', check5: false, msg: 'message.'},
{text1: 'text', text2: '123', text3: '123', val4: '', check5: false, msg: 'message.'},
{text1: 'text', text2: '123', text3: '123', val4: '', check5: false, msg: 'message.'},
{text1: 'text', text2: '123', text3: '123', val4: '', check5: false, msg: 'message.'},
{text1: 'text', text2: '123', text3: '123', val4: '', check5: false, msg: 'message.'},
{text1: 'text', text2: '123', text3: '123', val4: '', check5: false, msg: 'message.'},
{text1: 'text', text2: '123', text3: '123', val4: '', check5: false, msg: 'message.'},
{text1: 'text', text2: '123', text3: '123', val4: '', check5: false, msg: 'message.'},
{text1: 'text', text2: '123', text3: '123', val4: '', check5: false, msg: 'message.'},
{text1: 'text', text2: '123', text3: '123', val4: '', check5: false, msg: 'message.'},
{text1: 'text', text2: '123', text3: '123', val4: '', check5: false, msg: 'message.'},
{text1: 'text', text2: '123', text3: '123', val4: '', check5: false, msg: 'message.'},
];
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115