Change the color of Empty text on an In place editor

[Martin Sohn Marcussen]

Been searching around and also tried using Co-pilot, but i came up with nothing this way.

I have an Syncfusion In place editor with a syncfusion textbox inside it, with the In place editors emptytext set to a string. I want this empty text to have a grey color, and then if you type something in the textbox it should show as normal black color. Can someone help answer how i can achieve this ?

[Yohapuja Selvakumaran]

Hi Martin,

Thank you for reaching out to us.

To display the empty text in a different color, you can achieve this using JSInterop. By checking if the innerText contains "Empty Text", you can apply a custom color dynamically. Please find the implementation details below:

[Layout.cshtml]

        function applyGreyColor() {
            setTimeout(function () {
            document.querySelectorAll('.e-editable-value').forEach(element => {
                if (element.innerText.trim() === "Empty Text") {
                    element.style.color = "grey";
                }
            });
            }, 500);
        }

[Index.razor]

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JsRuntime.InvokeAsync<string>("applyGreyColor");
        }
    }

This solution ensures that the empty text is styled appropriately while maintaining the default behavior of your component.

Please try this approach and let us know if you need further assistance.

Regards,

Yohapuja S

Attachment: Inplaceeditor_color_57a6189c.zip

[Martin Sohn Marcussen]

Hi  Yohapuja Selvakumaran

Thank you for the answer. i have 5 InPlaceEditors on my page, and each of them have different default EmptyText, so the innerText will never have "Empty Text" there. Is there anything else i can do here ?

each EmptyText value is unique for each component on my page.

[Yohapuja Selvakumaran]

Hi Martin,

Instead of using JavaScript interop, you can dynamically apply different CSS classes to the SfInPlaceEditor component based on whether it contains a value or is empty. This can be achieved using the Created and ActionSuccess events to check the editor’s value and update the CssClass accordingly.

Here’s an example implementation:

@page "/"

@using Syncfusion.Blazor.InPlaceEditor

@using Syncfusion.Blazor.Inputs

<SfInPlaceEditor @ref="inplaceEditor" TValue="string" Mode="Syncfusion.Blazor.InPlaceEditor.RenderMode.Inline"

                 EditableOn="EditableType.Click" Type="Syncfusion.Blazor.InPlaceEditor.InputType.Text"

                 SubmitOnEnter="true" CssClass="@CssClass">

    <EditorComponent>

        <SfTextBox Placeholder="Enter employee name"></SfTextBox>

    </EditorComponent>

    <InPlaceEditorEvents TValue="string" Created="OnCreated" OnActionSuccess="OnActionSuccess"></InPlaceEditorEvents>

    <InPlaceEditorPopupSettings Title="Enter Employee Name"></InPlaceEditorPopupSettings>

</SfInPlaceEditor>

@code {

    private SfInPlaceEditor<string> inplaceEditor;

    private string CssClass = "empty-editor"; // Default class if value is empty

    private void OnCreated()

    {

        UpdateCssClass();

    }

    private void OnActionSuccess()

    {

        UpdateCssClass();

    }

    private void UpdateCssClass()

    {

        CssClass = string.IsNullOrEmpty(inplaceEditor.Value) ? "empty-editor" : "filled-editor";

        StateHasChanged(); // Ensure UI updates

    }

}

<style>

    .e-inplaceeditor.empty-editor .e-editable-value-container .e-editable-value {

        color:grey;

    }

</style>

The CssClass is initially set to "empty-editor". The Created event applies the class when the component initializes. The OnActionSuccess event ensures that changes reflect dynamically when a value is entered or cleared. The UpdateCssClass method updates the CSS class based on whether the editor contains a value.

With this approach, the SfInPlaceEditor will dynamically update its styling depending on its content.

You can try out the working sample here:

Sample: https://blazorplayground.syncfusion.com/VDVIDVsmxXEephqP

For more information, you can refer to the below documentation,

Documentation: 

https://blazor.syncfusion.com/documentation/in-place-editor/events#created

https://blazor.syncfusion.com/documentation/in-place-editor/events#onactionsuccess

Regards,

Yohapuja S