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.
<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>
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.