Thursday 24 October 2013

Create Dynamic Item Checkbox on ASPxDropDownEdit DevExpress ASP.Net

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>
Posted by at
Labels: , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)