Disable the edit mode specifically

17 Feb 20222 minutes to read

The edit mode of In-place Editor can be disabled by setting the Disabled property value to true. In the following sample, when check or uncheck the checkbox, In-place Editor control will disable or enable the edit mode.

@using Syncfusion.EJ2.InPlaceEditor;

<div id='container'>
    <table class="table-section">
        <tr>
            <td> Disabled: </td>
            <td>
                @Html.EJS().CheckBox("enable").Change("onChange").Label("Disable").Checked(false).Render()
            </td>
        </tr>
        <tr>
            <td class="sample-td"> Enter your name: </td>
            <td class="sample-td">
                @Html.EJS().InPlaceEditor("element").Mode(RenderMode.Inline).Value(ViewBag.value).Model(ViewBag.model).Render()
            </td>
        </tr>
    </table>
</div>

<style>
 
#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

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

disable-edit