DropDownBox for DevExtreme - How to display tags in the input field

This example demonstrates how to use the DevExtreme TagBox component to display tags in the DevExtreme DropDownBox's input field. The DevExtreme TreeView component is used to create a hierarchical view in the drop-down field.

NOTE: If you do not need a complex UI in the drop-down field, 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 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
   Configure the TagBox in the DropDownBox's fieldTemplate. Bind the TagBox to the same dataSource used by the DropDownBox and TreeView, and specify the valueExpr and displayExpr properties. Set the TagBox's value to be the value of the DropDownBox and implement the onValueChanged event handler to synchronize the TagBox with the rest of the components. Other 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.js
• 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)