List of controls

17 Feb 202212 minutes to read

In-place Editor renders various controls based on the Type property and it have built-in and injectable controls. To use injectable controls, inject the required modules into InPlaceEditor. By default, the type property set to Text and render the TextBox.

The following table explains Injectable components module name and built-in components and their types.

Injectable Components Built in Components
AutoComplete (AutoComplete) TextBox (Text)
ComboBox (ComboBox) DatePicker (Date)
MultiSelect (MultiSelect) DateTimePicker (DateTime)
TimePicker (Time) DropDownList (DropDownList)
DateRangePicker (DateRange) MaskedTextBox (Mask)
Slider (Slider) NumericTextBox (Numeric)
Rte (RTE)  
ColorPicker (Color)  

In the following sample, built-in and injectable based In-place Editor controls are rendered.

@using Syncfusion.EJ2.InPlaceEditor

<div id='container'>
    <h3> Built-in Controls </h3>
    <table class="table-section">
        <tr>
            <td class="col-lg-6 control-title"> DatePicker </td>
            <td class="col-lg-6">
                @Html.EJS().InPlaceEditor("date").Mode(RenderMode.Inline).Type(Syncfusion.EJ2.InPlaceEditor.InputType.Date).Value(ViewBag.dateValue).Model(ViewBag.dateModelData).Render()
            </td>
        </tr>
        <tr>
            <td class="col-lg-6 control-title"> DateTimePicker </td>
            <td class="col-lg-6">
                @Html.EJS().InPlaceEditor("dateTime").Mode(RenderMode.Inline).Type(Syncfusion.EJ2.InPlaceEditor.InputType.DateTime).Value(ViewBag.dateTimeValue).Model(ViewBag.dateModelData).Render()
            </td>
        </tr>
        <tr>
            <td class="col-lg-6 control-title"> DropDownList </td>
            <td class="col-lg-6">
                @Html.EJS().InPlaceEditor("dropDowns").Mode(RenderMode.Inline).Type(Syncfusion.EJ2.InPlaceEditor.InputType.DropDownList).Value(ViewBag.dropDownValue).Model(ViewBag.dropModelData).Render()
            </td>
        </tr>
        <tr>
            <td class="col-lg-6 control-title"> MaskedTextBox </td>
            <td class="col-lg-6">
                @Html.EJS().InPlaceEditor("masked").Mode(RenderMode.Inline).Type(Syncfusion.EJ2.InPlaceEditor.InputType.Mask).Value(ViewBag.maskValue).Model(ViewBag.maskModelData).Render()
            </td>
        </tr>
        <tr>
            <td class="col-lg-6 control-title"> NumericTextBox </td>
            <td class="col-lg-6">
                @Html.EJS().InPlaceEditor("numeric").Mode(RenderMode.Inline).Type(Syncfusion.EJ2.InPlaceEditor.InputType.Numeric).Value(10).Model(ViewBag.numericModelData).Render()
            </td>
        </tr>
        <tr>
            <td class="col-lg-6 control-title"> TextBox </td>
            <td class="col-lg-6">
                @Html.EJS().InPlaceEditor("textbox").Mode(RenderMode.Inline).Type(Syncfusion.EJ2.InPlaceEditor.InputType.Text).Value(ViewBag.textValue).Model(ViewBag.textModelData).Render()
            </td>
        </tr>
    </table>
    <h3> Injectable Controls </h3>
    <table class="table-section">
        <tr>
            <td class="col-lg-6 control-title"> AutoComplete </td>
            <td class="col-lg-6">
                @Html.EJS().InPlaceEditor("autoComplete").Mode(RenderMode.Inline).Type(Syncfusion.EJ2.InPlaceEditor.InputType.AutoComplete).Value(ViewBag.dropDownValue).Model(ViewBag.dropModelData).Render()
            </td>
        </tr>
        <tr>
            <td class="col-lg-6 control-title"> ColorPicker </td>
            <td class="col-lg-6">
                @Html.EJS().InPlaceEditor("color").Mode(RenderMode.Inline).Type(Syncfusion.EJ2.InPlaceEditor.InputType.Color).Value(ViewBag.colorValue).Render()
            </td>
        </tr>
        <tr>
            <td class="col-lg-6 control-title"> ComboBox </td>
            <td class="col-lg-6">
                @Html.EJS().InPlaceEditor("comboBox").Mode(RenderMode.Inline).Type(Syncfusion.EJ2.InPlaceEditor.InputType.ComboBox).Value(ViewBag.dropDownValue).Model(ViewBag.dropModelData).Render()
            </td>
        </tr>
        <tr>
            <td class="col-lg-6 control-title"> DateRangePicker </td>
            <td class="col-lg-6">
                @Html.EJS().InPlaceEditor("dateRange").Mode(RenderMode.Inline).Type(Syncfusion.EJ2.InPlaceEditor.InputType.DateRange).Value(ViewBag.dateRangeValue).Model(ViewBag.dateModelData).Render()
            </td>
        </tr>
        <tr>
            <td class="col-lg-6 control-title"> MultiSelect </td>
            <td class="col-lg-6">
                @Html.EJS().InPlaceEditor("multiSelect").Mode(RenderMode.Inline).Type(Syncfusion.EJ2.InPlaceEditor.InputType.MultiSelect).Value(ViewBag.dropDownValue).Model(ViewBag.dropModelData).Render()
            </td>
        </tr>
        <tr>
            <td class="col-lg-6 control-title"> RTE </td>
            <td class="col-lg-6">
                @Html.EJS().InPlaceEditor("rte").Mode(RenderMode.Inline).Type(Syncfusion.EJ2.InPlaceEditor.InputType.RTE).Value("Enter your content here").Model(ViewBag.rteModelData).Render()
            </td>
        </tr>
        <tr>
            <td class="col-lg-6 control-title"> Slider </td>
            <td class="col-lg-6">
                <div id="slider"></div>
                @Html.EJS().InPlaceEditor("slider").Mode(RenderMode.Inline).Type(Syncfusion.EJ2.InPlaceEditor.InputType.Slider).Value(20).Render()
            </td>
        </tr>
        <tr>
            <td class="col-lg-6 control-title"> TimePicker </td>
            <td class="col-lg-6">
                @Html.EJS().InPlaceEditor("time").Mode(RenderMode.Inline).Type(Syncfusion.EJ2.InPlaceEditor.InputType.Time).Value(ViewBag.dateValue).Model(ViewBag.dateModelData).Render()
            </td>
        </tr>
    </table>
</div>
<style>

    body {
        padding: 20px 0
    }

    .control-title {
        font-weight: 600;
        padding-right: 20px;
    }

    td {
        height: 80px;
    }

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

    tr td:last-child {
        text-align: left;
    }

    .table-section {
        margin: 0 auto;
    }

    h3 {
        text-align: center;
    }
</style>
public class HomeController : Controller
{
    public ActionResult Index()
    {
        var frameWorkList = new string[] { "Android", "JavaScript", "jQuery", "TypeScript", "Angular", "React", "Vue", "Ionic" };
        ViewBag.dateValue = new DateTime(2018, 11, 23);
        ViewBag.dateTimeValue = new DateTime(2018, 11, 23, 12, 30, 00);
        ViewBag.dateRangeValue = new DateTime[] { new DateTime(2018, 11, 12), new DateTime(2018, 11, 15) };
        ViewBag.dateModelData = new { placeholder = "Select date" };
        ViewBag.dropModelData = new { dataSource = frameWorkList, placeholder = "Select frameworks" };
        ViewBag.maskModelData = new { mask = "000-000-000" };
        ViewBag.rteModelData = new { placeholder = "Enter your content here" };
        ViewBag.numericModelData = new { placeholder = "Enter number" };
        ViewBag.textModelData = new { placeholder = "Enter some text" };
        ViewBag.dropDownValue = "Android";
        ViewBag.maskValue = "123-345-678";
        ViewBag.textValue = "Andrew";
        ViewBag.colorValue = "#81aefd";
        ViewBag.rteValue = "<p>Enter your content here</p>";
        return View();
    }
}

The output will be as follows.

controls

Model configuration

Control properties and events can be customized using the In-place Editor Model property.

In the following code, the Type defined as the Date and DatePicker properties are configured through Model property to customize the DatePicker control at In-place Editor.

<div style="margin:0 auto; width:300px;">
    @Html.EJS().InPlaceEditor("element").Type(Syncfusion.EJ2.InPlaceEditor.InputType.Date).Value(ViewBag.dateValue).Model(ViewBag.dateModelData).Render()
</div>
public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewBag.dateValue = new DateTime(2018, 12, 04);
        ViewBag.dateModelData = new { showTodayButton = true, placeholder = "Select date" };
        return View();
    }
}

See Also