We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

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

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

SnippetSnippet
Attachment: listitems_55794064.zip

3 Replies

VJ Vinitha Jeyakumar Syncfusion Team October 31, 2022 10:04 AM

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 });
    }
}



Regards,
Vinitha


SO Soundarya replied to Vinitha Jeyakumar November 3, 2022 02:36 AM

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.



VJ Vinitha Jeyakumar Syncfusion Team November 7, 2022 05:08 AM

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>


Regards,
Vinitha

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

Loader.
Live Chat Icon For mobile
Up arrow icon