List of controls
17 Feb 202214 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.
<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">
<ejs-inplaceeditor id="date" type="Date" mode="Inline" value="ViewBag.dateValue" model="ViewBag.dateModelData">
</ejs-inplaceeditor>
</td>
</tr>
<tr>
<td class="col-lg-6 control-title"> DateTimePicker </td>
<td class="col-lg-6">
<ejs-inplaceeditor id="dateTime" type="DateTime" mode="Inline" value="ViewBag.dateTimeValue" model="ViewBag.dateModelData">
</ejs-inplaceeditor>
</td>
</tr>
<tr>
<td class="col-lg-6 control-title"> DropDownList </td>
<td class="col-lg-6">
<ejs-inplaceeditor id="dropDowns" type="DropDownList" mode="Inline" value="ViewBag.dropDownValue" model="ViewBag.dropModelData">
</ejs-inplaceeditor>
</td>
</tr>
<tr>
<td class="col-lg-6 control-title"> MaskedTextBox </td>
<td class="col-lg-6">
<ejs-inplaceeditor id="masked" type="Mask" mode="Inline" value="ViewBag.maskValue" model="ViewBag.maskModelData">
</ejs-inplaceeditor>
</td>
</tr>
<tr>
<td class="col-lg-6 control-title"> NumericTextBox </td>
<td class="col-lg-6">
<ejs-inplaceeditor id="numeric" type="Numeric" mode="Inline" value=10 model="ViewBag.numericModelData">
</ejs-inplaceeditor>
</td>
</tr>
<tr>
<td class="col-lg-6 control-title"> TextBox </td>
<td class="col-lg-6">
<ejs-inplaceeditor id="textbox" type="Text" mode="Inline" value="ViewBag.textValue" model="ViewBag.textModelData">
</ejs-inplaceeditor>
</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">
<ejs-inplaceeditor id="autoComplete" type="AutoComplete" mode="Inline" value="ViewBag.textValue" model="ViewBag.dropModelData">
</ejs-inplaceeditor>
</td>
</tr>
<tr>
<td class="col-lg-6 control-title"> ColorPicker </td>
<td class="col-lg-6">
<ejs-inplaceeditor id="color" type="Color" mode="Inline" value="ViewBag.colorValue">
</ejs-inplaceeditor>
</td>
</tr>
<tr>
<td class="col-lg-6 control-title"> ComboBox </td>
<td class="col-lg-6">
<ejs-inplaceeditor id="comboBox" type="ComboBox" mode="Inline" value="ViewBag.dropDownValue" model="ViewBag.dropModelData">
</ejs-inplaceeditor>
</td>
</tr>
<tr>
<td class="col-lg-6 control-title"> DateRangePicker </td>
<td class="col-lg-6">
<ejs-inplaceeditor id="dateRange" type="DateRange" mode="Inline" value="ViewBag.dateRangeValue" model="ViewBag.dateModelData">
</ejs-inplaceeditor>
</td>
</tr>
<tr>
<td class="col-lg-6 control-title"> MultiSelect </td>
<td class="col-lg-6">
<ejs-inplaceeditor id="multiSelect" type="MultiSelect" mode="Inline" value="ViewBag.dropDownValue" model="ViewBag.dropModelData">
</ejs-inplaceeditor>
</td>
</tr>
<tr>
<td class="col-lg-6 control-title"> RichTextEditor </td>
<td class="col-lg-6">
<ejs-inplaceeditor id="rte" type="RTE" mode="Inline" value="ViewBag.rteValue" model="ViewBag.rteModelData">
</ejs-inplaceeditor>
</td>
</tr>
<tr>
<td class="col-lg-6 control-title"> Slider </td>
<td class="col-lg-6">
<ejs-inplaceeditor id="slider" type="Slider" mode="Inline" value=20>
</ejs-inplaceeditor>
</td>
</tr>
<tr>
<td class="col-lg-6 control-title"> TimePicker </td>
<td class="col-lg-6">
<ejs-inplaceeditor id="time" type="Time" mode="Inline" value="ViewBag.dateValue" model="ViewBag.dateModelData">
</ejs-inplaceeditor>
</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.
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="width:300px;margin:0 auto;">
<ejs-inplaceeditor id="element" type="Date" value="ViewBag.dateValue" model="ViewBag.dateModelData">
</ejs-inplaceeditor>
</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();
}
}