Search results

List of components

In-place Editor renders various components based on the Type property and it have built-in and injectable components. To use injectable components, 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 example, built-in and injectable based In-place Editor components are rendered as follows.

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Inputs
@using Syncfusion.EJ2.Blazor.Calendars
@using Syncfusion.EJ2.Blazor.DropDowns
@using Syncfusion.EJ2.Blazor.InPlaceEditor
@using Syncfusion.EJ2.Blazor.RichTextEditor

<h3> Built-in Controls </h3>
<table class="table-section">
    <tr>
        <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> DatePicker </td>
        <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <EjsInPlaceEditor Mode="RenderMode.Inline" Type="InputType.Date" Value="@DateValue" Model="@DateModel">
            </EjsInPlaceEditor>
        </td>
    </tr>
    <tr>
        <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> DateTimePicker </td>
        <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <EjsInPlaceEditor Mode="RenderMode.Inline" Type="InputType.DateTime" Value="@DateTimeValue" Model="@DateTimeModel">
            </EjsInPlaceEditor>
        </td>
    </tr>
    <tr>
        <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> DropDownList </td>
        <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <EjsInPlaceEditor Mode="RenderMode.Inline" Type="InputType.DropDownList" Value="@DropValue" Model="@DropModel">
            </EjsInPlaceEditor>
        </td>
    </tr>
    <tr>
        <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> MaskedTextBox </td>
        <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <EjsInPlaceEditor Mode="RenderMode.Inline" Type="InputType.Mask" Value="@MaskValue" Model="@MaskedModel">
            </EjsInPlaceEditor>
        </td>
    </tr>
    <tr>
        <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> NumericTextBox </td>
        <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <EjsInPlaceEditor Mode="RenderMode.Inline" Type="InputType.Numeric" Value="@NumericValue" Model="@NumericModel">
            </EjsInPlaceEditor>
        </td>
    </tr>
    <tr>
        <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> TextBox </td>
        <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <EjsInPlaceEditor Mode="RenderMode.Inline" Type="InputType.Text" Value="@TextValue" SubmitOnEnter="true" Model="@TextModel">
            </EjsInPlaceEditor>
        </td>
    </tr>
</table>
<h3> Injectable Controls </h3>
<table class="table-section">
    <tr>
        <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> AutoComplete </td>
        <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <EjsInPlaceEditor Mode="RenderMode.Inline" Type="InputType.AutoComplete" Value="@AutocompValue" SubmitOnEnter="true" Model="@AutocompModel">
            </EjsInPlaceEditor>
        </td>
    </tr>
    <tr>
        <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> ColorPicker </td>
        <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <EjsInPlaceEditor Mode="RenderMode.Inline" Type="InputType.Color" Value="@ColorValue" SubmitOnEnter="true">
            </EjsInPlaceEditor>
        </td>
    </tr>
    <tr>
        <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> ComboBox </td>
        <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <EjsInPlaceEditor Mode="RenderMode.Inline" Type="InputType.ComboBox" Value="@ComboBoxValue" SubmitOnEnter="true" Model="@ComboBoxModel">
            </EjsInPlaceEditor>
        </td>
    </tr>
    <tr>
        <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> DateRangePicker </td>
        <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <EjsInPlaceEditor Mode="RenderMode.Inline" Type="InputType.DateRange" Value="@DateRangeValue" SubmitOnEnter="true" Model="@DateRangeModel">
            </EjsInPlaceEditor>
        </td>
    </tr>
    <tr>
        <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> MultiSelect </td>
        <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <EjsInPlaceEditor Mode="RenderMode.Inline" Type="InputType.MultiSelect" Value="@MultiValue" SubmitOnEnter="true" Model="@MultiModel">
            </EjsInPlaceEditor>
        </td>
    </tr>
    <tr>
        <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> RTE </td>
        <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <EjsInPlaceEditor Mode="RenderMode.Inline" Type="InputType.RTE" Value="@RteValue" SubmitOnEnter="true" Model="@RteModel">
            </EjsInPlaceEditor>
        </td>
    </tr>
    <tr>
        <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> Slider </td>
        <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <EjsInPlaceEditor Mode="RenderMode.Inline" Type="InputType.Slider" Value="@SliderValue" SubmitOnEnter="true">
            </EjsInPlaceEditor>
        </td>
    </tr>
    <tr>
        <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> TimePicker </td>
        <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <EjsInPlaceEditor Mode="RenderMode.Inline" Type="InputType.Time" Value="@TimeValue" SubmitOnEnter="true" Model="@TimeModel">
            </EjsInPlaceEditor>
        </td>
    </tr>
</table>

<style>
    body {
        padding: 20px 0
    }

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

    .control-title {
        width: 50%;
    }

    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>

@code {
    public DateTime DateValue { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day);
    public DateTime DateTimeValue { get; set; } = DateTime.Now;
    public DateTime[] DateRangeValue { get; set; } = new DateTime[] { DateTime.Now, DateTime.Now.AddDays(20) };
    public DateTime TimeValue { get; set; } = DateTime.Now;

    public string MaskValue = "123-345-678";
    public string NumericValue = "10";
    public string TextValue = "Andrew";
    public string DropValue = "Android";
    public string AutocompValue = "Android";
    public string ColorValue = "#81aefd";
    public string ComboBoxValue = "Android";
    public string MultiValue = "Android";
    public string RteValue = "Enter your content here";
    public double SliderValue = 20;

    public DatePickerModel DateModel = new DatePickerModel()
    {
        Placeholder = "Select date"
    };
    public DateTimePickerModel DateTimeModel = new DateTimePickerModel()
    {
        Placeholder = "Select date"
    };
    public DropDownListModel<string> DropModel = new DropDownListModel<string>()
    {
        Placeholder = "Android",
        DataSource = new string[] { "Android", "JavaScript", "jQuery", "TypeScript", "Angular", "React", "Vue", "Ionic" }
    };
    public MaskedTextBoxModel MaskedModel = new MaskedTextBoxModel()
    {
        Mask = "000-000-000"
    };
    public NumericTextBoxModel<string> NumericModel = new NumericTextBoxModel<string>()
    {
        Placeholder = "Enter number"
    };
    public TextBoxModel TextModel = new TextBoxModel()
    {
        Placeholder = "Enter some text"
    };
    public AutoCompleteModel<string> AutocompModel = new AutoCompleteModel<string>()
    {
        Placeholder = "Select frameworks",
        DataSource = new string[] { "Android", "JavaScript", "jQuery", "TypeScript", "Angular", "React", "Vue", "Ionic" }
    };
    public ComboBoxModel<string> ComboBoxModel = new ComboBoxModel<string>()
    {
        Placeholder = "Select frameworks",
        DataSource = new string[] { "Android", "JavaScript", "jQuery", "TypeScript", "Angular", "React", "Vue", "Ionic" }
    };
    public DateRangePickerModel DateRangeModel = new DateRangePickerModel()
    {
        Placeholder = "Select date"
    };
    public MultiSelectModel<string> MultiModel = new MultiSelectModel<string>()
    {
        Placeholder = "Select frameworks",
        DataSource = new string[] { "Android", "JavaScript", "jQuery", "TypeScript", "Angular", "React", "Vue", "Ionic" }
    };
    public RichTextEditorModel RteModel = new RichTextEditorModel()
    {
        Placeholder = "Enter your content here"
    };
    public TimePickerModel TimeModel = new TimePickerModel()
    {
        Placeholder = "Select date"
    };
}

The output will be as follows.

controls

Model configuration

Component 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 using the Model property to customize the DatePicker component at In-place Editor.

    public DatePickerModel DateModel = new DatePickerModel()
    {
        Placeholder = "Select date",
        ShowTodayButton = true
    };

Index.razor

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Calendars
@using Syncfusion.EJ2.Blazor.InPlaceEditor

<div>
    <EjsInPlaceEditor Mode="@RenderMode.Inline" Type="@InputType.Date" Value="@DateValue" Model="@DateModel"> </EjsInPlaceEditor>
</div>

@code {
    public DateTime DateValue { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 11);

    public DatePickerModel DateModel = new DatePickerModel()
    {
        Placeholder = "Select date",
        ShowTodayButton = true
    };
}

See Also