DropdownEdit adalah satu control yang disediakan
DevExpress agar kita dapat meng-
Customize isi
dropdownnya, seperti mengisinya dengan
checkbox, jadi bisa kita gunakan untuk multipe choice.
langkah yang harus di lakukan adalah memasukan
contol ke
UI kita dan menambahkan
dropdown template didalam
ASPxDropDownEdit kita.
1
2
3
4
5
6
7
8
9
10
11
12
13
| <body>
<form id="form1" runat="server">
<!--berikan instance name agar dapat dikenali di javascript-->
<dx:ASPxDropDownEdit ID="ASPxDropDownEdit1" runat="server" ClientInstanceName="checkComboBox">
<DropDownWindowTemplate>
<dx:ASPxListBox Width="100%" ID="listBox" ClientInstanceName="checkListBox" SelectionMode="CheckColumn" runat="server">
<!--berikan perintah apabila selected indexnya berubah-->
<ClientSideEvents SelectedIndexChanged="OnListBoxSelectionChanged" />
</dx:ASPxListBox>
</DropDownWindowTemplate>
</dx:ASPxDropDownEdit>
</form>
</body>
|
selanjutnya adalah mengisi
listbox nya dengan data yang kita mau, hal itu kita lakukan pada
code behind form yang sedang dikerjakan
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
| public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// membuat wadah listdata
List<ItemData> data = new List<ItemData>();
for (int i = 0; i < 100; i++)
{
// membuat isi data dengan object itemdata
data.Add(new ItemData(i.ToString()));
}
//mencari listbox, yang ada di dalam dropdown template dari aspxdropdownedit1
ASPxListBox lstbx = (ASPxListBox)ASPxDropDownEdit1.FindControl("listbox");
lstbx.DataSource = data;
lstbx.TextField = "RegionName";
lstbx.ValueField = "RegionName";
lstbx.DataBind();
}
}
//object data
public class ItemData
{
string regionName;
public ItemData(string regionName)
{
this.regionName = regionName;
}
public string RegionName
{
get { return regionName; }
}
}
|
sampai disini sudah dapat terlihat bahwa
dropdown akan terisi
checkbox sebanyak 100 buah, langkah selanjutnya adalah
memasukan pilihan ke dalam kolom terpilih dari
aspxdropdownedit tersebut dengan bantuan javascript.
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
| <script type="text/javascript">
// <![CDATA[
var textSeparator = ", ";
function OnListBoxSelectionChanged(listBox, args) {
if (args.index == 0)
args.isSelected ? listBox.SelectAll() : listBox.UnselectAll();
UpdateSelectAllItemState();
UpdateText();
}
function UpdateSelectAllItemState() {
IsAllSelected() ? checkListBox.SelectIndices([0]) : checkListBox.UnselectIndices([0]);
}
function IsAllSelected() {
var selectedDataItemCount = checkListBox.GetItemCount() - (checkListBox.GetItem(0).selected ? 0 : 1);
return checkListBox.GetSelectedItems().length == selectedDataItemCount;
}
function UpdateText() {
var selectedItems = checkListBox.GetSelectedItems();
checkComboBox.SetText(GetSelectedItemsText(selectedItems));
}
function SynchronizeListBoxValues(dropDown, args) {
checkListBox.UnselectAll();
var texts = dropDown.GetText().split(textSeparator);
var values = GetValuesByTexts(texts);
checkListBox.SelectValues(values);
UpdateSelectAllItemState();
UpdateText(); // for remove non-existing texts
}
function GetSelectedItemsText(items) {
var texts = [];
for (var i = 0; i < items.length; i++)
if (items[i].index != 0)
texts.push(items[i].text);
return texts.join(textSeparator);
}
function GetValuesByTexts(texts) {
var actualValues = [];
var item;
for (var i = 0; i < texts.length; i++) {
item = checkListBox.FindItemByText(texts[i]);
if (item != null)
actualValues.push(item.value);
}
return actualValues;
}
</script>
|
