DropDowns.cshtml

@{
    ViewBag.Title = "DropDowns";
}

@using Syncfusion.EJ2;
@using Syncfusion.EJ2.InPlaceEditor;
@using Syncfusion.EJ2.DropDowns;
@section ControlsSection{
    <div class="col-lg-8 control-section inplace-control-section drop-down-layout">
        <div class="control_wrapper">
            <table>
                <tr>
                    <td>
                        <label class="control-label">
                            DropDownList
                        </label>
                    </td>
                    <td>
                        @Html.EJS().InPlaceEditor("dropdownEle").Mode(RenderMode.Inline).Type(Syncfusion.EJ2.InPlaceEditor.InputType.DropDownList).Created("dropdownCreated").Value("Canada").ActionOnBlur(ActionBlur.Submit).Model(ViewBag.DropDownData).Render()
                    </td>
                </tr>
                <tr>
                    <td>
                        <label class="control-label">
                            AutoComplete
                        </label>
                    </td>
                    <td>
                        @Html.EJS().InPlaceEditor("autoCompleteEle").Mode(RenderMode.Inline).Type(Syncfusion.EJ2.InPlaceEditor.InputType.AutoComplete).Value("Australia").Created("autocompleteCreated").ActionOnBlur(ActionBlur.Submit).Model(ViewBag.AutoCompleteData).Render()
                    </td>
                </tr>
                <tr>
                    <td>
                        <label class="control-label">
                            ComboBox
                        </label>
                    </td>
                    <td>
                        @Html.EJS().InPlaceEditor("comboBoxEle").Mode(RenderMode.Inline).Type(Syncfusion.EJ2.InPlaceEditor.InputType.ComboBox).Value("Finland").Created("comboBoxCreated").ActionOnBlur(ActionBlur.Submit).Model(ViewBag.ComboData).Render()
                    </td>
                </tr>
                <tr>
                    <td>
                        <label class="control-label">
                            MultiSelect
                        </label>
                    </td>
                    <td>
                        @Html.EJS().InPlaceEditor("multiSelectEle").Mode(RenderMode.Inline).Type(Syncfusion.EJ2.InPlaceEditor.InputType.MultiSelect).Value(new string[] { "Canada", "Bermuda" }).PopupSettings(new InPlaceEditorPopupSettings { Model = new { width = "auto" } }).Created("multiSelectCreated").Model(ViewBag.MultiSelectData).Render()
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="col-lg-4 property-section">
        <table id="property" title="Properties">
            <tr>
                <td style="width: 50%;">
                    <div>Mode</div>
                </td>
                <td style="width: 50%;">
                    @Html.EJS().DropDownList("editorMode").Width("90%").DataSource((IEnumerable<object>)ViewBag.ModeData).Value("Inline").Change("changeEditorMode").Render()
                </td>
            </tr>
        </table>
    </div>
}
<style>
    /* custom code start */
    .inplace-control-section .control_wrapper label {
        padding: 15px;
        text-align: left;
        font-weight: 400;
        font-size: 14px;
        margin-bottom: 0px;
    }

    .inplace-control-section .control_wrapper {
        margin: auto;
        max-width: 400px;
    }

        .inplace-control-section .control_wrapper table {
            margin: auto;
        }

            .inplace-control-section .control_wrapper table td {
                width: 200px;
                height: 100px;
            }
    /* custom code end */
    .inplace-control-section.drop-down-layout .e-inplaceeditor .e-editable-component .e-clear-icon-hide,
    .e-inplaceeditor-tip .e-editable-component .e-input-group .e-clear-icon.e-clear-icon-hide {
        display: block;
        visibility: hidden;
    }
</style>

@section PreScripts {
    <script>
         var dropdownObj, autocompleteObj, multiSelectObj, comboBoxObj;
        function dropdownCreated() {
            dropdownObj = this;
        }
        function autocompleteCreated() {
            autocompleteObj = this;
    }
    function comboBoxCreated() {
            comboBoxObj = this;
        }
        function multiSelectCreated() {
            multiSelectObj = this;
    }
        function changeEditorMode(e) {
            if (e.itemData.text === 'Popup') {
                dropdownObj.mode = autocompleteObj.mode = comboBoxObj.mode = multiSelectObj.mode = 'Popup';
            } else {
                dropdownObj.mode = autocompleteObj.mode = comboBoxObj.mode = multiSelectObj.mode = 'Inline';
            }
        }
        document.getElementById('right-pane').onscroll = function () {
            var mode = document.getElementById("editorMode")
            if (mode.ej2_instances[0].value === 'Inline') { return; }
            if (dropdownObj.element.querySelectorAll('.e-editable-open').length > 0)
                dropdownObj.enableEditMode = false;
            if (autocompleteObj.element.querySelectorAll('.e-editable-open').length > 0)
                autocompleteObj.enableEditMode = false;
            if (comboBoxObj.element.querySelectorAll('.e-editable-open').length > 0)
                comboBoxObj.enableEditMode = false;
            if (multiSelectObj.element.querySelectorAll('.e-editable-open').length > 0)
                multiSelectObj.enableEditMode = false;
        }
    </script>
}
@section ActionDescription{
    <p>
        This sample demonstrates the usage of drop-down components such as AutoComplete, ComboBox, DropDownList, and MultiSelect. Click on the dotted input element to switch to the editable state of the corresponding integrated component.
    </p>
}
@section Description{
    <p>
        This sample illustrates the way to integrate drop-down components with <code>In-place Editor</code>. The
        applicable types of components are:
    </p>
    <p>
    </p>
    <ul>
        <li>
            <code>DropDownList</code>
        </li>
        <li>
            <code>AutoComplete</code>
        </li>
        <li>
            <code>ComboBox</code>
        </li>
        <li>
            <code>MultiSelect</code>
        </li>
    </ul>
    <p></p>
    <p>
        The above components and their features are editable in place and can be customized with the model
        properties of the specific component.
    </p>
    <p>
        More information on the <code>In-place Editor</code> instantiation can be found in the&nbsp;<a target="_blank" href="https://ej2.syncfusion.com/aspnetmvc/documentation/in-place-editor/getting-started/">
            documentation section
        </a>.
    </p>
}

@*custom code start*@

@section Meta{
                    <meta name="description" content="This example demonstrates the DropDown Components in ASP.NET MVC In-place Editor control. Explore here for more details."/>
                }

@*custom code end*@

@section Title{
                    <title>ASP.NET MVC In-place Editor DropDown Components Example - Syncfusion Demos </title> 
                }
@section Header{
                    <h1 class='sb-sample-text'>Example of DropDown Components in ASP.NET MVC In-place Editor Control</h1>
                }