Search results

List of Components in Blazor In-place Editor component

28 Jul 2021 / 6 minutes to read

In-place Editor renders various components based on the Type property and the Editor components should be rendered inside the In-place Editor. Also, need to configure the two-way binding between the In-place Editor and its EditorComponent. It is used to update the EditorComponent value into the In-place Editor component.

The following table explains Editor components name and their configurations.

| AutoComplete (AutoComplete) | TextBox (Text) | | ComboBox (ComboBox) | DatePicker (Date) | | MultiSelect (MultiSelect) | DateTimePicker (DateTime) | | TimePicker (Time) | DropDownList (DropDownList) | | DateRangePicker (DateRange) | MaskedTextBox (Mask) | | Slider (Slider) | NumericTextBox (Numeric) | | RichTextEditor (RichTextEditor) | ColorPicker (Color) |

The following example demonstrates how to render the Editor components in the In-place Editor,

Copied to clipboard
@using Syncfusion.Blazor.InPlaceEditor
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Calendars;
@using Syncfusion.Blazor.DropDowns;
@using Syncfusion.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">
            <SfInPlaceEditor Type="Syncfusion.Blazor.InPlaceEditor.InputType.Date" TValue="DateTime?" @bind-Value="@DateValue1">
                <EditorComponent>
                    <SfDatePicker TValue="DateTime?" @bind-Value="@DateValue1" Placeholder="Select a date"></SfDatePicker>
                </EditorComponent>
            </SfInPlaceEditor>
        </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">
            <SfInPlaceEditor Type="Syncfusion.Blazor.InPlaceEditor.InputType.DateTime" TValue="DateTime?" @bind-Value="@DateValue3">
                <EditorComponent>
                    <SfDateTimePicker Placeholder="Select a date and time" TValue="DateTime?" @bind-Value="@DateValue3"></SfDateTimePicker>
                </EditorComponent>
            </SfInPlaceEditor>

        </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">
            <SfInPlaceEditor @bind-Value="@DropdownValue" Type="Syncfusion.Blazor.InPlaceEditor.InputType.DropDownList" Mode="@Mode" TValue="string">
                <EditorComponent>
                    <SfDropDownList TValue="string" TItem="Countries" @bind-Value="@DropdownValue" DataSource="@Country">
                        <DropDownListFieldSettings Text="Name" Value="Code"></DropDownListFieldSettings>
                    </SfDropDownList>
                </EditorComponent>
            </SfInPlaceEditor>
        </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">
            <SfInPlaceEditor Type="Syncfusion.Blazor.InPlaceEditor.InputType.Mask" @bind-Value="@MaskValue" TValue="string">
                <EditorComponent>
                    <SfMaskedTextBox Mask="000-000-0000" @bind-Value="@MaskValue"></SfMaskedTextBox>
                </EditorComponent>
            </SfInPlaceEditor>
        </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">
            <SfInPlaceEditor Type="Syncfusion.Blazor.InPlaceEditor.InputType.Numeric" @bind-Value=@NumericValue TValue="double">
                <EditorComponent>
                    <SfNumericTextBox TValue="double" @bind-Value=@NumericValue Format="c2" Placeholder="Currency format"></SfNumericTextBox>
                </EditorComponent>
            </SfInPlaceEditor>
        </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">
            <SfInPlaceEditor @bind-Value="@TextValue" TValue="string" Type="Syncfusion.Blazor.InPlaceEditor.InputType.Text">
                <EditorComponent>
                    <SfTextBox @bind-Value="@TextValue" Placeholder="Enter employee name"></SfTextBox>
                </EditorComponent>
            </SfInPlaceEditor>
        </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">
            <SfInPlaceEditor Type="Syncfusion.Blazor.InPlaceEditor.InputType.AutoComplete" @bind-Value="@AutoValue" Mode="@Mode" TValue="string">
                <EditorComponent>
                    <SfAutoComplete TValue="string" TItem="Countries" @bind-Value="@AutoValue" DataSource="@Country" Autofill=true>
                        <AutoCompleteFieldSettings Value="Name"></AutoCompleteFieldSettings>
                    </SfAutoComplete>
                </EditorComponent>
            </SfInPlaceEditor>
        </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">
            <SfInPlaceEditor Type="Syncfusion.Blazor.InPlaceEditor.InputType.Color" @bind-Value="colorValue" TValue="string">
                <EditorComponent>
                    <SfColorPicker @bind-Value="colorValue"></SfColorPicker>
                </EditorComponent>
            </SfInPlaceEditor>
        </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">
            <SfInPlaceEditor Type="Syncfusion.Blazor.InPlaceEditor.InputType.ComboBox" @bind-Value="@ComboValue" TValue="string">
                <EditorComponent>
                    <SfComboBox TValue="string" @bind-Value="@ComboValue" TItem="Countries" DataSource="@Country">
                        <ComboBoxFieldSettings Text="Name" Value="Code"></ComboBoxFieldSettings>
                    </SfComboBox>
                </EditorComponent>
            </SfInPlaceEditor>
        </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">
            <SfInPlaceEditor Type="Syncfusion.Blazor.InPlaceEditor.InputType.DateRange" TValue="DateTime[]" @bind-Value="@DateRangeValue">
                <EditorComponent>
                    <SfDateRangePicker StartDate="@DateValue2" EndDate="@DateValue3"></SfDateRangePicker>
                </EditorComponent>
            </SfInPlaceEditor>
        </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">
            <SfInPlaceEditor Type="Syncfusion.Blazor.InPlaceEditor.InputType.MultiSelect" @bind-Value="@MultiValue" TValue="string[]">
                <EditorComponent>
                    <SfMultiSelect TValue="string[]" @bind-Value="@MultiValue" TItem="Countries" DataSource="@Country" AllowFiltering="true">
                        <MultiSelectFieldSettings Text="Name" Value="Code"></MultiSelectFieldSettings>
                    </SfMultiSelect>
                </EditorComponent>
            </SfInPlaceEditor>
        </td>
    </tr>
    <tr>
        <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> RichTextEditor </td>
        <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <SfInPlaceEditor Type="Syncfusion.Blazor.InPlaceEditor.InputType.RichTextEditor" @bind-Value="@value" TValue="string">
                <EditorComponent>
                    <SfRichTextEditor @bind-Value="@value">
                    </SfRichTextEditor>
                </EditorComponent>
            </SfInPlaceEditor>
        </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">
            <SfInPlaceEditor @bind-Value="@sliderValue" Type="Syncfusion.Blazor.InPlaceEditor.InputType.Slider" TValue="double">
                <EditorComponent>
                    <SfSlider @bind-Value="@sliderValue"></SfSlider>
                </EditorComponent>
            </SfInPlaceEditor>
        </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">
            <SfInPlaceEditor Mode="@Mode" Type="Syncfusion.Blazor.InPlaceEditor.InputType.Time" TValue="DateTime?" @bind-Value="@DateValue2">
                <EditorComponent>
                    <SfTimePicker TValue="DateTime?" @bind-Value="@DateValue2" Placeholder="Select a time"></SfTimePicker>
                </EditorComponent>
            </SfInPlaceEditor>
        </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 {
    private string value { get; set; } = "syncfusion";


    private DateTime? DateValue1 = new DateTime(2017, 05, 23);
    private DateTime? DateValue2 = new DateTime(2017, 05, 23);
    private DateTime? DateValue3 = new DateTime(2017, 05, 23);
    private DateTime[] DateRangeValue = new DateTime[2] { new DateTime(2017, 05, 23), new DateTime(2017, 07, 05) };
    private object DateData = new { placeholder = "Select a date" };
    private object TimeData = new { placeholder = "Select a time" };
    private object DateTimeData = new { placeholder = "Select a date and time" };
    private object DateRangeData = new { placeholder = "Select a date range" };

    private string TextValue = "Andrew";
    private string MaskValue = "012-345-6789";
    private double NumericValue = 100;
    private double sliderValue { get; set; } = 30;

    private string DropdownValue = "CA";
    private string AutoValue = "Australia";
    private string ComboValue = "Finland";
    private string[] MultiValue = new string[] { "AU", "BM" };
    public string DropMode { get; set; } = "Inline";
    private string colorValue { get; set; } = "#0db1e7";

    private RenderMode Mode = RenderMode.Inline;

    public class Countries
    {
        public string Name { get; set; }
        public string Code { get; set; }
    }
    private List<Countries> Country = new List<Countries>
{
        new Countries() { Name = "Australia", Code = "AU" },
        new Countries() { Name = "Bermuda", Code = "BM" },
        new Countries() { Name = "Canada", Code = "CA" },
        new Countries() { Name = "Cameroon", Code = "CM" },
        new Countries() { Name = "Denmark", Code = "DK" },
        new Countries() { Name = "France", Code = "FR" },
        new Countries() { Name = "Finland", Code = "FI" },
        new Countries() { Name = "Germany", Code = "DE" },
        new Countries() { Name = "Greenland", Code = "GL" },
        new Countries() { Name = "Hong Kong", Code = "HK" },
        new Countries() { Name = "India", Code = "IN" },
        new Countries() { Name = "Italy", Code = "IT" },
        new Countries() { Name = "Japan", Code = "JP" },
        new Countries() { Name = "Mexico", Code = "MX" },
        new Countries() { Name = "Norway", Code = "NO" },
        new Countries() { Name = "Poland", Code = "PL" },
        new Countries() { Name = "Switzerland", Code = "CH" },
        new Countries() { Name = "United Kingdom", Code = "GB" },
        new Countries() { Name = "United States", Code = "US" },
    };
}

The output will be as follows.

controls

See Also