DefaultFunctionalities.cshtml

@{
    ViewBag.Title = "DefaultFunctionalities";
}

@using Syncfusion.EJ2;
@using Syncfusion.EJ2.InPlaceEditor;

@section ControlsSection{
    <div class="col-lg-8 control-section inplace-control-section default_layout">
        <div class="control_wrapper">
            <table>
                <tr>
                    <td>
                        <label class="control-label" style="text-align: left;font-size: 14px;font-weight: 400">
                            TextBox
                        </label>
                    </td>
                    <td>
                        <ejs-inplaceeditor id="inplace_editor" mode="Inline" type="Text" value="ViewBag.textValue" submitOnEnter="true" created="editorCreated" model="ViewBag.textModel" popupSettings="ViewBag.textPopupSettings">
                        </ejs-inplaceeditor>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label class="control-label" style="text-align: left;font-size: 14px;font-weight: 400">
                            NumericTextBox
                        </label>
                    </td>
                    <td>
                        <ejs-inplaceeditor id="numericTextBoxEle" mode="Inline" type="Numeric" value="ViewBag.numericValue" created="numericCreated" model="ViewBag.numericModel">
                        </ejs-inplaceeditor>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label class="control-label" style="text-align: left;font-size: 14px;font-weight: 400">
                            MaskedTextBox
                        </label>
                    </td>
                    <td>
                        <ejs-inplaceeditor id="maskedTextBoxEle" mode="Inline" type="Mask" value="ViewBag.maskValue" created="maskCreated" model="ViewBag.maskedModel">
                        </ejs-inplaceeditor>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="col-lg-4 property-section">
        <table id="property" title="Properties">
            <tr>
                <td>
                    <div> Mode</div>
                </td>
                <td>
                    <div>
                        <ejs-dropdownlist id="editorMode" class="form-control" width="90%" dataSource="ViewBag.modeData" change="changeEditorMode" index="0"></ejs-dropdownlist>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>Editable On</div>
                </td>
                <td>
                    <div>
                        <ejs-dropdownlist id="editableon" class="form-control" width="90%" dataSource="ViewBag.editableData" change="onEditableOn" index="0"></ejs-dropdownlist>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>Show Buttons</div>
                </td>
                <td>
                    <div>
                        <ejs-checkbox id="showbuttons" checked="true" change="onChange" labelPosition="Before"></ejs-checkbox>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>Disable</div>
                </td>
                <td>
                    <div>
                        <ejs-checkbox id="editorEnable" change="onChangeEnable" labelPosition="Before"></ejs-checkbox>
                    </div>
                </td>
            </tr>
        </table>
    </div>
}

@section ActionDescription{
    <p>
        This sample demonstrates the default functionalities of the In-place Editor component. Click on the dotted input
        element to
        switch to the editable state and save or cancel it by clicking the actions buttons.
    </p>
}

@section Description{
    <p>
        The <code>In-place Editor</code> component is used to edit values in place and update them to the server.
    </p>
    <p>
        <code>In-place Editor</code> modes can be switched by selecting the appropriate values provided in a drop-down.
        The applicable editor positions are as follows:
    </p>
    <p>
        <ul>
            <li>
                <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/inplace-editor/#mode">
                    Inline
                </a>
            </li>
            <li>
                <a target="_blank" href="https://ej2.syncfusion.com/documentation/api/inplace-editor/#mode">
                    Pop-up
                </a>
            </li>
        </ul>
    </p>
    <p>
        The edit on modes of In-place editor can be switched by selecting the appropriate values provided in a
        drop-down. The applicable modes are as follows:
        <ul>
            <li>Click - Editor opens the edit input with single click of textbox.</li>
            <li>DblClick - Editor opens the edit input with double click of textbox.</li>
            <li>EditIconClick - Edit mode can be open with the use of edit icon only which is visible on hover of textbox.</li>
        </ul>
    </p>
    <p>
        The Save and Cancel buttons of the <code>In-place Editor</code> component can be shown or hidden by switching the Show Button check box
        state. If the
        action buttons are hidden, then you can save the data by clicking outside the target or by pressing the Enter
        key.
        You can cancel the edit request by pressing the Esc key.
    </p>
    <p>
        More information on the <code>In-place Editor</code> instantiation can be found in the <a target="_blank" href="https://ej2.syncfusion.com/aspnetcore/documentation/inplace-editor/getting-started-asp-core/">
            documentation section
        </a>.
    </p>
}

@*custom code start*@

@section Meta{

    <meta name="description" content="This sample demonstrates the default behavior of the In-place Editor control, which works by editing the values in inline and popup in ASP.NET Core platform." />

}

@*custom code end*@

@section PreScripts {
    <script type="text/javascript">
        var editObj;
        var numericObj;
        var maskObj;
        function editorCreated() {
            editObj = document.getElementById("inplace_editor").ej2_instances[0];
        }

        function numericCreated() {
            numericObj = document.getElementById("numericTextBoxEle").ej2_instances[0];
        }

        function maskCreated() {
            maskObj = document.getElementById("maskedTextBoxEle").ej2_instances[0];
        }

        // Change event funtion for DropDownList component
        function changeEditorMode(e) {
            editObj.mode = numericObj.mode = maskObj.mode = e.itemData.value;
            editObj.dataBind();
            numericObj.dataBind();
            maskObj.dataBind();
        }

        // Change event funtion for DropDownList component
        function onEditableOn(e) {
            var val = e.itemData.value;
            if (val === 'Double Click') {
                val = 'DblClick'
            } else if (val === 'Edit Icon Click') {
                val = 'EditIconClick'
            }
            editObj.editableOn = numericObj.editableOn = maskObj.editableOn = val;
            editObj.dataBind();
            numericObj.dataBind();
            maskObj.dataBind();
        }

        function onChange(args) {
            editObj.showButtons = numericObj.showButtons = maskObj.showButtons = args.checked;
        }

        function onChangeEnable(args) {
            editObj.disabled = numericObj.disabled = maskObj.disabled = args.checked;
        }
        document.getElementById('right-pane').onscroll = function () {
            var mode = document.getElementById("editorMode");
            var editEle1 = document.getElementById("inplace_editor");
            var editEle2 = document.getElementById("numericTextBoxEle");
            var editEle3 = document.getElementById("maskedTextBoxEle");
            if (mode.ej2_instances[0].value === 'Inline') { return; }
            if (editEle1.querySelectorAll('.e-editable-open').length > 0)
                editEle1.ej2_instances[0].enableEditMode = false;
            if (editEle2.querySelectorAll('.e-editable-open').length > 0)
                editEle2.ej2_instances[0].enableEditMode = false;
            if (editEle3.querySelectorAll('.e-editable-open').length > 0)
                editEle3.ej2_instances[0].enableEditMode = false;
        }
    </script>
}

<style>
    .inplace-control-section.default_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;
    }


   .inplace-control-section.default_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;
    }

    /* custom code start */
    .inplace-control-section.default_layout .control_wrapper {
        width: 100%;
        max-width: 400px;
        margin: auto;
    }
    .inplace-control-section.default_layout .control_wrapper table td {
        width: 200px;
        height: 100px;
    }
    /* custom code end */

    .inplace-control-section.default_layout .control_wrapper .control-center {
        text-align: center;
    }

    .inplace-control-section.default_layout .control_wrapper table td .control-label {
        margin-bottom: 0px;
    }

    .inplace-control-section.default_layout .e-inplaceeditor {
        height: auto;
    }

    .property-section table td {
        width: 50%;
    }

    @@media (max-width: 1200px) {
        .inplace-control-section.default_layout {
            width: 100%;
        }
    }

    @@media (max-width: 768px) {
        .inplace-control-section .control_wrapper table tr td:nth-child(1) {
            width: 130px;
        }

        .inplace-control-section .control_wrapper table tr td:nth-child(2) {
            width: 200px;
        }
    }
</style>