-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
114 lines (112 loc) · 3.36 KB
/
index.js
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
$(() => {
$('#currency1').dxNumberBox({
format: '$ 0,###.##',
width: 400,
label: 'zero-based format',
value: null,
valueChangeEvent: 'keyup',
onKeyDown(e) {
if (e.event.keyCode === 8 && e.component.option('value') === 0) {
e.component.option('format', '');
} else {
e.component.option('format', '$ #,##0.##');
}
},
});
const nonZeroFormat = '##.######';
const zeroFormat = '0#.######';
$('#currency2').dxNumberBox({
format: nonZeroFormat,
label: 'non-zero format',
width: 400,
value: null,
valueChangeEvent: 'keyup',
onContentReady(e) {
if (!e.component.isLoaded) {
e.component.isLoaded = true;
if (e.component.option('value') === 0) { e.component.option('format', zeroFormat); }
}
},
onKeyDown(e) {
const value = e.component.option('value');
if (e.event.keyCode === 48 && value === null) {
e.component.option('format', zeroFormat);
} else if (e.event.keyCode === 8 && value === 0) {
e.component.option('format', '');
} else if (value > -1 && value < 1) {
e.component.option('format', zeroFormat);
} else {
e.component.option('format', nonZeroFormat);
}
},
});
$('#gridContainer').dxDataGrid({
dataSource: payments,
keyExpr: 'PaymentId',
showBorders: true,
onEditorPreparing(e) {
if (e.parentType !== 'filterRow') return;
if (e.dataField === 'PaymentId') {
e.editorOptions.onContentReady = (args) => {
const editorInstance = args.component;
if (!editorInstance.isLoaded) {
editorInstance.isLoaded = true;
if (editorInstance.option('value') === 0) { editorInstance.option('format', zeroFormat); }
}
};
e.editorOptions.onKeyDown = (args) => {
const editorInstance = args.component;
const value = editorInstance.option('value');
if (args.event.keyCode === 48 && value === null) {
editorInstance.option('format', zeroFormat);
} else if (args.event.keyCode === 8 && value === 0) {
editorInstance.option('format', '');
} else if (value > -1 && value < 1) {
editorInstance.option('format', zeroFormat);
} else {
editorInstance.option('format', nonZeroFormat);
}
};
}
if (e.dataField === 'Amount') {
e.editorOptions.onKeyDown = (args) => {
const editorInstance = args.component;
if (args.event.keyCode === 8 && editorInstance.option('value') === 0) {
editorInstance.option('format', '');
} else {
editorInstance.option('format', '$ #,##0.##');
}
};
}
},
columns: [
{
dataField: 'PaymentId',
caption: 'Payment Id (non-zero format)',
allowEditing: false,
width: '200px',
format: nonZeroFormat,
editorOptions: {
format: nonZeroFormat,
},
},
{
dataField: 'Amount',
caption: 'Amount (zero-based format)',
dataType: 'number',
format: '$ #,##0.##',
editorOptions: {
format: '$ #,##0.##',
},
},
{
dataField: 'PaymentDate',
dataType: 'date',
},
],
filterRow: {
visible: true,
applyFilter: 'auto',
},
});
});