Drop Down Edit for ASP.NET Web Forms - How to get selected values from a list box on the server

This example demonstrates how to create a template, add a list box editor to the template, get selected values on the client, and pass these values to the server.

Overview

Specify the drop-down editor's DropDownWindowTemplate property and add a list box editor to the template.

 <dx:ASPxDropDownEdit ID="ASPxDropDownEdit1" runat="server" ClientInstanceName="dd" >
    <DropDownWindowTemplate>
        <dx:ASPxListBox ID="ASPxListBox1" runat="server" ClientInstanceName="listbox" ...>
            <ClientSideEvents SelectedIndexChanged="OnSelectedIndexChanged" />
        </dx:ASPxListBox>
    </DropDownWindowTemplate>
</dx:ASPxDropDownEdit>

Handle the list box editor's client-side SelectedIndexChanged event. In the handler, do the following:

• Call the list editor's GetSelectedItems method to collect selected values.
• Pass these values to the drop-down editor's SetKeyValue method as a parameter.

function OnSelectedIndexChanged(s, e) {
    var items = listbox.GetSelectedItems();
    var text = "";
    var values = "";
    for (var i = 0; i < items.length; i++) {
        text += items[i].text + ";";
        values += items[i].value + ";";
    }
    dd.SetText(text)
    dd.SetKeyValue(values);
}

To get selected values on the server, use the drop-down editor's KeyValue property.

protected void ASPxButton1_Click(object sender, EventArgs e) {
    ASPxLabel1.Text = ASPxDropDownEdit1.KeyValue.ToString();
}

Files to Review

• Default.aspx (VB: Default.aspx)
• Default.aspx.cs (VB: Default.aspx.vb)

Documentation

• Drop-Down Editor