-
Notifications
You must be signed in to change notification settings - Fork 0
/
zdropdown-example.html
105 lines (90 loc) · 4.14 KB
/
zdropdown-example.html
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
<!DOCTYPE html>
<html>
<head>
<title>ZDropDwon Example</title>
</head>
<body>
<form>
<div id='containerDropDown'>
<input type="text" id='exampleZDD' />
</div><br/>
<div>
<button id="ClearSelected">Clear Selected</button>
</div><br/>
<div>
<button id="getSelected">get Selected</button>
<p id="selectedDataJson"></p>
</div><br/>
<div>
<label>display data: </label><input type="text" id="displayData" />
<label>value data: </label><input type="text" id="valueData" />
<button id="setSelected">set Selected</button>
</div><br/>
</form>
<!-- <form>
<div id='containerDropDown1'>
<input type="text" id='exampleZDD1' />
</div><br/>
<div>
<button id="ClearSelected1">Clear Selected1</button>
</div><br/>
<div>
<button id="getSelected1">get Selected1</button>
<p id="selectedDataJson1"></p>
</div><br/>
<div>
<label>display data: </label><input type="text" id="displayData1" />
<label>value data: </label><input type="text" id="valueData1" />
<button id="setSelected1">set Selected1</button>
</div><br/>
</form>-->
<script src='zdropdown.js'></script>
<script>
window.onload = function () {
var drp = zdropdown('exampleZDD', {
displayPropertName: 'Name',
valuePropertyName: 'Id',
remoteDataOptions: { dataUrl: '/zdd', NoOfDataPerRequest: 2, isOneTimeData: false },
// dataCollection: [{ "Id": "1", "Name": "scdef" },{ "Id": "2", "Name": "rtergdf" }, { "Id": "3", "Name": "wrfdsf" }],
onSelectedChange: function (e) {
setTimeout(function () { document.getElementById("getSelected").click(); }, 1000);
}
});
document.getElementById("ClearSelected").addEventListener("click", function (e) {
e.preventDefault();
drp.clearSelectedData();
});
document.getElementById("getSelected").addEventListener("click", function (e) {
e.preventDefault();
document.getElementById("selectedDataJson").innerHTML = JSON.stringify(drp.getSelectedData());
});
document.getElementById("setSelected").addEventListener("click", function (e) {
e.preventDefault();
drp.setSelectedData(drp.getSelectedDataObject(document.getElementById("displayData").value, document.getElementById("valueData").value));
document.getElementById("displayData").value = "";
document.getElementById("valueData").value = "";
});
// var drp1 = zdropdown('exampleZDD1', {
// dataCollection: ["sgewrt", "twertwet", "ertwert", "fsdfs", "dfsgsfs", "jkldjer", "uysauifha", "hasifb", "sdyfguw", "skdhfgeuib", "kjhfskjf"],
// onSelectedChange: function (e) {
// setTimeout(function () { document.getElementById("getSelected1").click(); }, 1000);
// }
// });
// document.getElementById("ClearSelected1").addEventListener("click", function (e) {
// e.preventDefault();
// drp1.clearSelectedData();
// });
// document.getElementById("getSelected1").addEventListener("click", function (e) {
// e.preventDefault();
// document.getElementById("selectedDataJson1").innerHTML = JSON.stringify(drp1.getSelectedData());
// });
// document.getElementById("setSelected1").addEventListener("click", function (e) {
// e.preventDefault();
// drp1.setSelectedData(drp1.getSelectedDataObject(document.getElementById("displayData1").value, document.getElementById("valueData1").value));
// document.getElementById("displayData1").value = "";
// document.getElementById("valueData1").value = "";
// });
};
</script>
</body>
</html>