DevExtreme DropDownBox - Display Tags in the Input Field

IMPORTANT: The DropDownBox.fieldTemplate property was deprecated in our v25.2 release cycle. Though this example remains functional, you will see a warning message when using DevExtreme v25.2.x. If your application requires similar functionality (and if you are using DevExtreme v25.2 or higher), please submit a support ticket via the DevExpress Support Center and document your requirements. We’ll be happy to suggest alternative implementations.

This example uses the DevExtreme TagBox component to display tags in the input field of a DevExtreme DropDownBox. The DevExtreme TreeView component is used to create a hierarchical view in the drop-down window.

NOTE: If you do not need a complex UI in the drop-down window, but still want to display tags, try a standalone TagBox component. You can refer to the Getting Started with TagBox article to find out if the TagBox is the right choice for you.

To implement the UI shown above, follow these steps:

1. Synchronize the DropDownBox with the embedded TreeView
   You can find detailed instructions in the following help topic: DropDownBox - Synchronize with the Embedded Element

2. Integrate the TagBox with the DropDownBox
   Use the DropDownBox.fieldTemplate option to configure custom content for the input field. Add a TagBox and bind it to the same dataSource used by the DropDownBox and TreeView. Specify the valueExpr and displayExpr properties. Set TagBox.value to the value of the DropDownBox and implement the onValueChanged event handler to synchronize the TagBox with other components. Additional TagBox properties shown in the code below are optional.

   const dropDownBox = $("#treeBox").dxDropDownBox({
       value: ["1_1"],
       valueExpr: "ID",
       displayExpr: "name",
       dataSource: dataSource,
       fieldTemplate: function(value, fieldElement) {
           $("<div>").dxTagBox({
               dataSource: dataSource,
               valueExpr: "ID",
               displayExpr: "name",
               value: value,
               onValueChanged: function (e) {
                   dropDownBox.option("value", e.value);
                   syncTreeViewSelection(treeView, e.value)
               },
               showClearButton: true,
               placeholder: value.length ? "" : "Select a value...",
               openOnFieldClick: false,
               width: "100%"
           }).appendTo(fieldElement);
       },
       // ...
   }).dxDropDownBox("instance");
   

   Files to Review

• Angular
  • app.component.html
  • app.component.ts
• jQuery
  • index.js
• React
  • App.tsx
• Vue
  • App.vue
• ASP.Net
  • Index.cshtml

Documentation

• Getting Started with DropDownBox

• DropDownBox - API Reference

Does This Example Address Your Development Requirements/Objectives?

(you will be redirected to DevExpress.com to submit your response)