Binding values in TextBox in Tab

[Joseph Tan]

I would like to be able to bind values in a dynamically added text box that is inside a tabbed container.

But I cannot find a way to bind the value of the textbox - please help.

For example: 

    int tabindex = 1;

    SfTab TabObj;

    List<TabItem> TabData;

    List<string> mystrings;

    private RenderFragment GetFragment()

    {

        RenderFragment fgmt =

        builder =>

        {

            var i = 0;

            builder.AddContent(i++,@<SfButton CssClass="m-2 p-2" OnClick="onClickMe">Add</SfButton>);

            builder.AddContent(i++,@<SfButton CssClass="m-2 p-2" OnClick="onClickMe">Delete</SfButton>);

            builder.AddContent(i++,@<SfTextBox CssClass="m-2 p-2" Placeholder="New Value"/>);

        };

        return fgmt;

    }

    public void OnAddItem()

    {

        mystrings.Add($"value {tabindex}");

        TabData = new List<TabItem>()

        {

                new TabItem() { Header = new TabHeader() { Text = $"Tab {tabindex}" }, ContentTemplate = @GetFragment() }

        };

        tabindex++;

        TabObj.AddTab(TabData, 0);

    }

Currently, what happens is that the value in all the text boxes are bound to the same value.

For example, when I change the value of the textbox in Tab 1, the value of the text box in Tab 2 and Tab 3 are automatically changed.

Instead I would like to bind the values to the entries in a list, e.g. List<string> mystrings.

Attachment: tabtextboxes_61d6fca2.7z

[Joseph Tan]

And as a follow up question,  since I have a single event handler, onClickMe, how do I tell which button  (in which tab) generated the click event?

[Balasubramanian Sattanathan]

Hi  Joseph Tan, 

 

Greetings from Syncfusion Support. 

We have validated your requirement “Binding values in TextBox in Tab” at our side and prepared a sample based on that by using the below code snippet. In the below sample, the dynamically added content will bind successfully in the TextBox within the Tab. And we would suggest you to refer the below shared UG for more details. 

 

<SfButton OnClick="OnAddItem" Content="Add Tab"></SfButton> 

<SfTab @ref="TabObj"> 

    <TabItems> 

        <TabItem> 

            <HeaderTemplate>TextBox</HeaderTemplate> 

            <ContentTemplate> 

                <p>TextBox value is: @Name</p> 

                <SfTextBox @bind-Value="@Name"></SfTextBox> 

            </ContentTemplate> 

        </TabItem> 

    </TabItems> 

</SfTab> 

@code{ 

    SfTab TabObj; 

    List<TabItem> TabData; 

    public string Name { get; set; } = "Syncfusion"; 

    public RenderFragment CalendarContent = builder => 

    { 

    builder.AddContent(1,@<SfCalendar TValue="DateTime"></SfCalendar>); 

    }; 

    public void OnAddItem() 

    { 

    TabData = new List<TabItem>() 

    { 

        new TabItem() { Header = new TabHeader() { Text = "Calendar" }, ContentTemplate = @CalendarContent } 

    }; 

    TabObj.AddTab(TabData, 0); 

    } 

} 

 

Sample: https://www.syncfusion.com/downloads/support/forum/156678/ze/Blazor_sample_tab530637815.zip 

TextBox UG: https://blazor.syncfusion.com/documentation/textbox/data-binding/#two-way-data-binding 

Tab UG: https://blazor.syncfusion.com/documentation/tabs/how-to/load-tab-items-dynamically/ 

Kindly try the above solution and let us know the below details if the solution isn’t helpful. 

• Replicate your problem in the above shared project with replication steps or
• Share a sample (if possible) illustrating the reported scenario which would help us to proceed further.

 

Regards, 

Balasubramanian S 

[Joseph Tan]

Hey There,

That doesn't quite address the problem. In your example, every time the Add Tab button is created, it creates a new tab with a calendar control. But what I want is to create a new tab with a Text Box control , and bind that text box to something: 

    public RenderFragment CalendarContent = builder =>

    {

           builder.AddContent(1,@<SfTextBox @bind-Value="?????"></SfTextBox>);

    };

How do I do that?

[Balasubramanian Sattanathan]

Hi Joseph Tan, 

 

Thanks for the update 

We have checked your requirement and added textbox dynamically with predefined value on every new tab created. Please find the modified sample in the below link.

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_sample929529486 

 

Kindly try the above sample and let us know if you need further assistance. 

 

Regards, 

Balasubramanian S 

[Joseph Tan]

Hi There,

The problem in your solution is the same problem I stated in my original question. 

I can add many tabs dynamically, but the textboxes in each tab all refer to the same value.

If I change the value of the textbox in one tab (any one), the value of the text boxes in all the other tabs also change to the same value (please read again).

My question is : how to bind the textbox in every tab to DIFFERENT value.  So that if I have 10 tabs, I have 10 text boxes and they can have 10 different values.

[Balasubramanian Sattanathan]

Hi Joseph Tan, 

 

Thanks for the update. 

 

We could not add multiple components by using render fragment and also we raised discussion in the GitHub. Please find the GitHub link below for further reference. Meanwhile we can achieve this requirement by updating the value of textbox in the selecting event of Tab. So whenever a tab is switched, value will be updated for the textbox.

Please find the modified sample link below.

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_sample-1356864367    

GitHub Link: https://github.com/dotnet/aspnetcore/discussions/24440

 

Code snippet:  

<SfTab @ref="TabObj">  

    <TabEvents Selecting="OnSelecting"></TabEvents>  

    <TabItems>  

        <TabItem>  

            <HeaderTemplate>TextBox</HeaderTemplate>  

            <ContentTemplate>  

                <p>TextBox value is: @Value</p>  

                 <SfTextBox @bind-Value="@Value"></SfTextBox>  

            </ContentTemplate>  

        </TabItem>  

    </TabItems>  

</SfTab>  

public void OnSelecting(SelectingEventArgs args)  

{       

   this.Value = this.TempValue + args.SelectingIndex;  

}   

 

Kindly try the above snippet and let us know if you need further assistance 

Regards, 

Balasubramanian S