Having trouble getting help?
Contact Support
Contact Support
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.