All docs
V18.2
20.2
The page you are viewing does not exist in version 20.2. This link will take you to the root page.
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
18.1
17.2

Overview - DropDownEdit

  • 3 minutes to read

DropDownEdit represents an editor containing an edit box to display the editor value and a specific button, which opens a dropdown window whose content can be templated. The main purpose of DropDownEdit is to allow you to define its value based upon the value(s) of another control(s) integrated into the editor's dropdown window template.

To learn more about DropDownEdit and see it in action, refer to our online demos.

Implementation Details

DropDownEdit is realized by the DropDownEditExtension class. Its instance can be accessed via the ExtensionsFactory.DropDownEdit helper method, which is used to add a DropDownEdit extension to a view. This method's parameter provides access to the DropDownEdit's settings implemented by the DropDownEditSettings class, allowing you to fully customize the extension.

DropDownEdit's client counterpart is represented by the ASPxClientDropDownEdit object.

Declaration

DropDownEdit can be added to a view in the following manner.

View code (ASPX)

    <script type="text/javascript">
        var textSeparator = ";";

        function UpdateText() {
            var selectedItems = listBox1.GetSelectedItems();
            dropDownEdit1.SetText(GetSelectedItemsText(selectedItems));
        }

        function GetSelectedItemsText(items) {
            var texts = [];
            for (var i = 0; i < items.length; i++)
                texts.push(items[i].text);
            return texts.join(textSeparator);
        }

        function SynchronizeListBoxValues(dropDown, args) {
            listBox1.UnselectAll();
            var texts = dropDown.GetText().split(textSeparator);
            var values = GetValuesByTexts(texts);
            listBox1.SelectValues(values);
            UpdateText();
        }

        function GetValuesByTexts(texts) {
            var actualValues = [];
            var item;
            for (var i = 0; i < texts.length; i++) {
                item = listBox1.FindItemByText(texts[i]);
                if (item != null)
                    actualValues.push(item.value);
            }
            return actualValues;
        }
    </script>



    <% 
        Html.DevExpress().DropDownEdit(
            settings => {
                settings.Name = "dropDownEdit1";

                settings.Text = "Chrome;IE";
                settings.Width = 210;

                settings.SetDropDownWindowTemplateContent(c =>
                {%>
                    <% 
                        Html.DevExpress().ListBox(
                            listBoxSettings => {
                                listBoxSettings.Name = "listBox1";

                                listBoxSettings.Width = Unit.Percentage(100);

                                listBoxSettings.Properties.SelectionMode = ListEditSelectionMode.CheckColumn;

                                listBoxSettings.Properties.Items.Add("Chrome", "0");
                                listBoxSettings.Properties.Items.Add("Firefox", "1");
                                listBoxSettings.Properties.Items.Add("IE", "2");
                                listBoxSettings.Properties.Items.Add("Opera", "3");
                                listBoxSettings.Properties.Items.Add("Safari", "4");

                                listBoxSettings.Properties.ClientSideEvents.SelectedIndexChanged = "function(s, e){ UpdateText(); }";
                            }
                        )
                        .Render();
                    %>
                    <table style="width:100%"><tr><td align="right">
                        <% 
                            Html.DevExpress().Button(
                                buttonSettings => {
                                    buttonSettings.Name = "buttonClose";
                                    buttonSettings.Text = "Close";
                                    buttonSettings.ClientSideEvents.Click = "function(s, e){ dropDownEdit1.HideDropDown(); }";
                                }
                            )
                            .Render();
                        %>
                    </td></tr></table>
                <%});
                settings.Properties.ClientSideEvents.TextChanged="SynchronizeListBoxValues";
                settings.Properties.ClientSideEvents.DropDown = "SynchronizeListBoxValues";
            }
        )
        .Render();
    %>

View code (Razor)

<script type="text/javascript">
//<![CDATA[
    var textSeparator = ";";

    function UpdateText() {
        var selectedItems = listBox1.GetSelectedItems();
        dropDownEdit1.SetText(GetSelectedItemsText(selectedItems));
    }

    function GetSelectedItemsText(items) {
        var texts = [];
        for (var i = 0; i < items.length; i++)
            texts.push(items[i].text);
        return texts.join(textSeparator);
    }

    function SynchronizeListBoxValues(dropDown, args) {
        listBox1.UnselectAll();
        var texts = dropDown.GetText().split(textSeparator);
        var values = GetValuesByTexts(texts);
        listBox1.SelectValues(values);
        UpdateText();
    }

    function GetValuesByTexts(texts) {
        var actualValues = [];
        var item;
        for (var i = 0; i < texts.length; i++) {
            item = listBox1.FindItemByText(texts[i]);
            if (item != null)
                actualValues.push(item.value);
        }
        return actualValues;
    }
// ]]>
</script>

@Html.DevExpress().DropDownEdit(
    settings => {
        settings.Name = "dropDownEdit1";

        settings.Text = "Chrome;IE";
        settings.Width = 210;

        settings.SetDropDownWindowTemplateContent(c =>
        {
            @Html.DevExpress().ListBox(
                listBoxSettings => {
                    listBoxSettings.Name = "listBox1";

                    listBoxSettings.Width = Unit.Percentage(100);

                    listBoxSettings.Properties.SelectionMode = ListEditSelectionMode.CheckColumn;

                    listBoxSettings.Properties.Items.Add("Chrome", "0");
                    listBoxSettings.Properties.Items.Add("Firefox", "1");
                    listBoxSettings.Properties.Items.Add("IE", "2");
                    listBoxSettings.Properties.Items.Add("Opera", "3");
                    listBoxSettings.Properties.Items.Add("Safari", "4");

                    listBoxSettings.Properties.ClientSideEvents.SelectedIndexChanged = "function(s, e){ UpdateText(); }";
                })
                .Render();
            ViewContext.Writer.Write("<table style=\"width:100%\"><tr><td align=\"right\">");
            @Html.DevExpress().Button(
                buttonSettings => {
                    buttonSettings.Name = "buttonClose";
                    buttonSettings.Text = "Close";
                    buttonSettings.ClientSideEvents.Click = "function(s, e){ dropDownEdit1.HideDropDown(); }";
                })
                .Render();
            ViewContext.Writer.Write("</td></tr></table>");
        });
        settings.Properties.ClientSideEvents.TextChanged="SynchronizeListBoxValues";
        settings.Properties.ClientSideEvents.DropDown = "SynchronizeListBoxValues";
    }
).GetHtml()
NOTE

The Partial View should contain only the extension's code.

The code result is demonstrated in the image below.

dropdownedit-declaration.png

See Also