For a To-Do's list, how to create each list item as a SfInPlaceEditor component dynamically and display the editable list sequentially.

[Soundarya]

To add a To-Do's list item, user would type into a textbox and click on the 'Add' button. This should dynamically create a SfInPlaceEditor and display with the typed input value. For this, how to set @bind-Value for each SfTextBox. Also, is it possible to add more than one dynamic component to the @DynamicFragment so that a list of such items can be displayed and also edited? Could y

Attachment: listitems_55794064.zip

[Vinitha Jeyakumar]

Hi Soundarya,

We have prepared a sample as per your requirement to add ToDo list items using In-Place Editor and Textbox control. please check the code and sample below,

Code snippet:

​

@using Syncfusion.Blazor.Buttons;

@using Syncfusion.Blazor.Inputs;

@using Syncfusion.Blazor.InPlaceEditor;

<SfTextBox @bind-Value="textVal" Placeholder='Enter To-Do list'></SfTextBox>

<SfButton ID="dynamic-button" Content="Add" @onclick="ChangeAttribute"></SfButton>

@foreach(var list in ToDo)

{

    @if (flag)

{

 <div id="component-container">

    <SfInPlaceEditor @bind-Value="@list.textValue" TValue="string">

                <EditorComponent>

                    <SfTextBox @bind-Value="list.textValue" Placeholder="Enter employee name"></SfTextBox>

                </EditorComponent>

    </SfInPlaceEditor>

</div>

}

else {

 <div id="component">

   

</div>

}

}

@code {

    public bool flag { get; set; }

    public string textVal {get ;set;}

    public class ValueList{

        public string textValue { get; set; }

    }

    public List<ValueList> ToDo = new List<ValueList>();

   

    private void ChangeAttribute()

    {

        flag = true;

       ToDo.Add(new ValueList { textValue = textVal });

    }

}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/IPE_server-687147422

Regards,

Vinitha

[Soundarya]

Hello,

Perfect. Thank you so much for the prompt response!
One more doubt.. Would it be possible to keep the textbox 's edit icon always visible even when not in focus?

Regards,

Soundarya.

[Vinitha Jeyakumar]

Hi Soundarya,

Yes, your requirement can be achieved by setting true to the EnableEditMode property of InPlaceEditor. please check the code snippet below,

​

<SfInPlaceEditor @bind-Value="@list.textValue" TValue="string" EnableEditMode="true">

                <EditorComponent>

                    <SfTextBox @bind-Value="list.textValue" Placeholder="Enter employee name"></SfTextBox>

                </EditorComponent>

    </SfInPlaceEditor>

API Link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InPlaceEditor.SfInPlaceEditor-1.html#Syncfusion_Blazor_InPlaceEditor_SfInPlaceEditor_1_EnableEditMode

Regards,

Vinitha

Note: If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.