# SmallDialogInputEditor
Enables data editing by input.
You can dynamically control the readOnly
and disabled
property by defining an instance of the SmallDialogInputEditor
class to the action
column.
But if you define 'input'
, as string, to action
of the column, you can't control these properties.
You can also disable or read-only each record by specifying a function for the disabled
and readOnly
properties.
<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
9
2
3
4
5
6
7
8
9
const inputEditor = new cheetahGrid.columns.action.SmallDialogInputEditor();
const grid = new cheetahGrid.ListGrid({
parentElement: document.querySelector(".sample1"),
header: [
{
field: "text1",
caption: "defined by string",
width: 220,
action: "input",
},
//
{
field: "text2",
caption: "defined by class instance",
width: 220,
action: inputEditor,
},
{
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 = [
{ text1: "text", text2: "text" },
{ text1: "text", text2: "text" },
{ text1: "text", text2: "text" },
{ text1: "text", text2: "text" },
{ text1: "text", text2: "text" },
{ text1: "text", text2: "text" },
{ text1: "text", text2: "text" },
{ text1: "text", text2: "text" },
{ text1: "text", text2: "text" },
{ text1: "text", text2: "text" },
];
document.querySelector(".sample1mode").onchange = function () {
//change action properties
if (this.value === "readOnly") {
inputEditor.readOnly = true;
inputEditor.disabled = false;
document.querySelector(".sample1modememo").textContent =
"It will not toggle";
} else if (this.value === "disabled") {
inputEditor.readOnly = false;
inputEditor.disabled = true;
document.querySelector(".sample1modememo").textContent =
"It will not toggle and does not respond when hovering the mouse";
} else {
inputEditor.readOnly = false;
inputEditor.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
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
# Constructor Properties
Property | Description |
---|---|
disabled | Define a boolean or predicate to control disable. See also the standard properties |
readOnly | Define a boolean or predicate to control readonly. See also the standard properties |
type | Specify the type attribute of the <input> element. |
classList | Specify class of the dialog element. |
helperText | Specify helper text. You can also specify a function. |
validator | Specify the validation function to be call before confirming the input value. If there is an error, please use the function to return the message. |
inputValidator | Specify the validation function of the value of <input> . If there is an error, please use the function to return the message. |
# Properties
Property | Description |
---|---|
disabled | Define a boolean or predicate to control disable. See also the standard properties |
readOnly | Define a boolean or predicate to control readonly. See also the standard properties |
type | Specify the type attribute of the <input> element. |
classList | Specify class of the dialog element. |
helperText | Specify helper text. You can also specify a function. |
validator | Specify the validation function to be call before confirming the input value. If there is an error, please use the function to return the message. |
inputValidator | Specify the validation function of the value of <input> . If there is an error, please use the function to return the message. |
<div class="sample2 demo-grid small"></div>
1
const grid = new cheetahGrid.ListGrid({
parentElement: document.querySelector(".sample2"),
header: [
{
field: "number",
caption: "type & classList",
width: 220,
columnType: "number",
action: new cheetahGrid.columns.action.SmallDialogInputEditor({
type: "number",
classList: ["al-right"],
}),
},
{
field: "text",
caption: "validator & helperText",
width: 220,
action: new cheetahGrid.columns.action.SmallDialogInputEditor({
classList: "helper-text--right-justified",
helperText(value) {
return `${value.length}/20`;
},
inputValidator(value) {
return value.length > 20
? `over the max length. ${value.length}`
: null;
},
validator(value) {
return value.match(/^[a-zA-Z]*$/) ? null : "Please only alphabet.";
},
}),
},
{
field: "code",
caption: "async validator",
width: 220,
action: new cheetahGrid.columns.action.SmallDialogInputEditor({
helperText: "enter code. /^[A-Z]\\d{3}$/",
validator(value) {
return new Promise((r) => {
setTimeout(() => {
r(value.match(/^[A-Z]\d{3}$/) ? null : "Invalid code.");
}, 500);
});
},
}),
},
{
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 = [
{ number: 1234, text: "a", code: "A001" },
{ number: 1234.123, text: "b", code: "A002" },
{ number: -1234.123, text: "c", code: "A003" },
];
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
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
.al-right input {
text-align: right;
}
1
2
3
2
3