Dynamically move input to edit mode

17 Feb 20222 minutes to read

At control initial load, if you want to open editor state without interacting In-place Editor input element, it can be achieved by configuring the enableEditMode property to true.

In the following sample, editor opened at initial load and when toggling a checkbox, it will remove or open the editor.

CSHTML

<div id='container'>
    <table class="table-section">
        <tr>
            <td> EnableEditMode: </td>
            <td>
                <ejs-checkbox id="enable" change="onChange" label="Enable" checked="true"></ejs-checkbox>
            </td>
        </tr>
        <tr>
            <td class="sample-td"> Enter your name: </td>
            <td class="sample-td">
                <ejs-inplaceeditor id="element" mode="Inline" model="ViewBag.model" value="ViewBag.value" enableEditMode="true" actionOnBlur="Ignore">
                </ejs-inplaceeditor>
            </td>
        </tr>
    </table>
</div>

<style>

    .table-section {
        margin: 0 auto;
    }

    tr td:first-child {
        text-align: right;
        padding-right: 20px;
    }

    .sample-td {
        padding-top: 10px;
        min-width: 230px;
        height: 100px;
    }
</style>
<script>
    function onChange(e) {
        var editObj = document.getElementById('element').ej2_instances[0];
        editObj.enableEditMode = e.checked;
        editObj.dataBind();
    }
</script>

Controller.cs

public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewBag.model = new { placeholder = "Enter some text" };
        ViewBag.value = "Andrew";
        return View();
    }
}

The output will be as follows.