Index.cshtml

@using DropDownBox.Models

@(Html.DevExtreme().DropDownBox()
    .DataSource(d => d.Mvc()
        .Controller("SampleData")
        .LoadAction("Get")
        .LoadMode(DataSourceLoadMode.Raw)
        .Key("Task_ID")
    )
    .ID("dropDownBox")
    .ShowClearButton(true)
    .AcceptCustomValue(true)
    .OpenOnFieldClick(false)
    .ValueChangeEvent("input")
    .HoverStateEnabled(true)
    .ValueExpr("Task_ID")
    .DisplayExpr("Task_Subject")
    .OnInput("dropDownBoxOnInput")
    .OnOpened("onOpened")
    .OnKeyDown("onKeyDown")
    .OnValueChanged("dropDownBoxValueChanged")
    .ContentTemplate(@<text>
        @(Html.DevExtreme().TreeList()
        .DataSource(d => d.Mvc()
            .Controller("SampleData")
            .LoadAction("Get")
            .Key("Task_ID")
        )
        .Height(500)
        .WordWrapEnabled(true)
        .ShowBorders(true)
        .SearchPanel(sp=>sp.HighlightSearchText(false))
        .Selection(sl=>sl.Mode(SelectionMode.Multiple))
        .ParentIdExpr("Task_Parent_ID")
        .FocusedRowEnabled(true)
        .OnSelectionChanged("treeListSelectionChanged")
        .OnInitialized("treeListInitialized")
        .Columns(c =>
        {
            c.Add().DataField("Task_ID");
            c.Add().DataField("Task_Subject");

            c.Add().DataField("Task_Assigned_Employee_ID").Caption("Assigned")
                .Lookup(l=>l.DataSource(d=>d.Mvc().Controller("Employee").LoadAction("Get"))
                .DisplayExpr("Name")
                .ValueExpr("ID")
            );
            c.Add().DataField("Task_Status").Caption("Status").Lookup(l=>l.DataSource(new[] { "Not Started", "Need Assistance", "In Progress", "Deferred", "Completed"}));
            c.Add().DataField("Task_Priority").Caption("Priority").Lookup(l => l.DataSource(d => d.Mvc().Controller("Priority").LoadAction("Get")).ValueExpr("id").DisplayExpr("value"));
            c.Add().DataField("Task_Completion").Caption("% Completed").CustomizeText("customizeText");
            c.Add().DataField("Task_Start_Date").Caption("Start Date").DataType(GridColumnDataType.Date);
            c.Add().DataField("Task_Due_Date").Caption("Due Date").DataType(GridColumnDataType.Date);
        })
        )
    </text>)
)

<script>
    let treeList;

    function customizeText(cellInfo) {
        return cellInfo.valueText + "%";
    }
    function dropDownBoxValueChanged(e) {
        if (!e.value) {
            treeList.deselectAll()
            return;
        }
        if (Array.isArray(e.previousValue) && e.previousValue.length > 0 && typeof e.value === "string") {
            treeList.deselectRows(e.previousValue.pop());
            e.component.option("value", e.previousValue)
        }
    }

    function dropDownBoxOnInput(e) {
        const ddbInstance = e.component;
        if (!ddbInstance.option("opened")) ddbInstance.open();
        let text = ddbInstance.option("text");
        let value = ddbInstance.option("value");
        if (typeof value === "string") {
            treeList.option("searchPanel.text", text)
        }
    }

    function onOpened(e) {
        setTimeout(() => {
            e.component.focus();
        });
    }

    function onKeyDown(e) {
        const ddbInstance = e.component;
        if (e.event.keyCode !== 40) return;
        if (!ddbInstance.option("opened")) {
            ddbInstance.open();
        } else {
            let focusedIndex = treeList.option("focusedRowIndex");
            let visibleRows = treeList.getVisibleRows().length - 1;
            if (focusedIndex === -1 || visibleRows < focusedIndex) focusedIndex = 0;
            treeList.focus(treeList.getRowElement(focusedIndex));
        }
    }

    function treeListSelectionChanged(e) {
        const keys = e.selectedRowKeys,
        hasSelection = keys.length;

        $("#dropDownBox").dxDropDownBox("instance").option("value", hasSelection ? keys : null);
    }

    function treeListInitialized(e) {
        treeList = e.component;
    }
</script>