Drop Down Box

• 3 minutes to read

DropDownBox is an advanced editor that supports in-depth customization. The component consists of a text field and a drop-down area. The drop-down area can contain custom markup, including other DevExtreme-based ASP.NET Core UI controls.

Run Demo: DropDownBox Read Tutorial

Getting Started

The DropDownBox UI Control is based on the DevExtreme DropDownBox component.

The following help topics explain how to add this control to your project:

• Add DevExtreme to a Visual Studio Project or Configure a non Visual Studio Project
• Add Controls to a Project
• Razor Syntax

Basic Syntax

DropDownBoxBasics.cshtml

@(Html.DevExtreme().DropDownBox()
    .ContentTemplate(new TemplateName("DropDownBoxContent"))
)

@using (Html.DevExtreme().NamedTemplate("DropDownBoxContent")) {
    @(Html.DevExtreme().List()
        .Items(i => {
            i.Add().Text("Item One");
            i.Add().Text("Item Two");
            i.Add().Text("Item Three");
        })
    )
}

DropDownBoxController.cs

using Microsoft.AspNetCore.Mvc;

namespace ASP_NET_Core.Controllers {
    public class DropDownBoxController : Controller {
        public IActionResult GettingStarted() {
            return View();
        }
    }
}

Built-in Capabilities and Configuration Guides

• Embed DevExtreme Components
  You can embed any DevExtreme component within the DropDownBox. To display data, we recommend the DevExtreme DataGrid, TreeView, and CardView components.

• Synchronize with Embedded Component
  To synchronize DropDownBox with its embedded component, refer to the following tutorial: Synchronize with the Embedded Element

• Selection
  You can configure DropDownBox selection to display single or multiple values.

• Validation
  DropDownBox ships with data validation capabilities. You can implement custom logic to validate the component value and display a validation status to users.

• Text Field Customization
  You can specify a text field label and placeholder, as well as configure custom or predefined buttons (clear and drop-down). To implement further customizations, you can specify text field addons.

• Accessibility and Keyboard Navigation
  DropDownBox conforms to WCAG 2.x, European Accessibility Act (EAA), and Americans with Disabilities Act (ADA) standards. The component supports keyboard navigation and custom key handlers. DropDownBox also ships with right-to-left (RTL) representation support.

API

Server-Side API

Initialization

Call the DropDownBox() method to create a DropDownBox control. This action initializes a DropDownBoxBuilder instance. Use the instance methods to specify DropDownBox options and event handlers.

Options

For a complete option list, see DropDownBoxBuilder Members. For details on how to specify control options, refer to the following help topic: Specify Options.

Events

For available events, see Events. For details on how to handle events, refer to the following help topic: Handle Events and Define Callbacks.

Client-Side API

Options

If you need to specify the DropDownBox options dynamically on the client side, use client-side API. For a complete option list, see DevExtreme DropDownBox options.

Methods

For a list of available methods, see DevExtreme DropDownBox methods. For details on how to call methods, refer to the following help topic: Call Methods.

Demos

Run Demo: DropDownBox