Integrate HTML5 controls (Template)

17 Feb 20222 minutes to read

The In-place Editor supports adding HTML5 input controls using the Template property. The Template property can be given as either a string or a query selector.

As a string

The HTML element tag can be given as a string for the Template property. Here, the input is rendered as an HTML template.

template: "<div><input type='text' id='name'></input></div>"

As a selector

The Template property also allows getting template content through query selector. Here, the input wrapper element ‘ID’ attribute is specified in the template.

template: "#date"

Template mode, the Value property not handled by the In-place Editor control. So, before sending a value to the server, you need to modify at ActionBegin event, otherwise, an empty string will pass. In the following template sample, before submitting a data to the server, event argument and Value property content updated in the ActionBegin event handler.

CSHTML
Controller.cs
@using Syncfusion.EJ2.InPlaceEditor;

<div id='container'>
    <span class="content-title"> Select date: </span>
    @Html.EJS().InPlaceEditor("element").Mode(RenderMode.Inline).Template("#date").Value(ViewBag.dateValue).ActionBegin("actionBegin").Render()
</div>
<div id="html-template" style="display: none">
    <input id="date" value="2018-05-23" type="date">
</div>
 
<style>
    #container {
        display: flex;
        justify-content: center;
    }

    #element {
        width: 150px;
    }

    .content-title {
        font-weight: 500;
        margin-right: 20px;
        display: flex;
        align-items: center;
    }
</style>
<script>
    function actionBegin(e) {
        var editObj = document.getElementById('element').ej2_instances[0];
        var value = editObj.element.querySelector('#date').value;
        editObj.value = value;
        e.value = value;
    }
</script>
public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewBag.dateValue = "2018-05-23";
        return View();
    }
}

The output will be as follows.

html-template