1. Home
  2. Forum
  3. Blazor
  4. How to get current Tab "Header" text.

How to get current Tab "Header" text.

I have an syncfussion Tab in blazor web application.I would like to know how to get current Tab "Header" text.


13 Replies
KI KINS August 31, 2021 11:45 AM UTC

pls help...


KI KINS August 31, 2021 03:49 PM UTC

Is it possible to get answer today???


Please help it's my top most urgent requirement 


SK Satheesh Kumar Balasubramanian Syncfusion Team September 1, 2021 08:38 AM UTC

Hi KINS, 
  
Thanks for using Syncfusion Products. 
  
We have validated your reported query "How to get current Tab Header text." and prepared sample to get current tab header text on button click. 
  
  
Index.razor:   
<span>@HeaderText</span> 
<br /> 
<br /> 
  
<SfButton @onclick="GetHeaderTextClick" Content="Get Header Text"></SfButton> 
<br /> 
<br /> 
  
<SfTab @ref="Tab" @bind-SelectedItem="SelectedTab"> 
........................................ 
</SfTab> 
  
@code { 
    SfTab Tab; 
    int SelectedTab = 0; 
    public string HeaderText { get; set; } 
    void GetHeaderTextClick() 
    { 
        if (Tab.Items.Count > 0) 
        { 
            HeaderText = Tab.Items[SelectedTab].Header.Text; 
        } 
    } 
} 
  
Kindly try the above sample and let us know if this meets your requirement. 
  
Regards, 
Satheesh Kumar B 


KI KINS September 1, 2021 04:38 PM UTC

Thanks for support...

I have below clarification.

1.How to Focus Tab item by giving "Tab Header" name.

2.I have five tab item,when I close Active tab,then how to get current "Tab Header" name.






SK Satheesh Kumar Balasubramanian Syncfusion Team September 2, 2021 11:09 AM UTC

Hi KINS,

Thanks for your update.

Query 1:

We have validated your reported query "How to Focus Tab item by giving Tab Header name." and prepared sample to focus tab item based on header text name on button click.

Index.razor:   
<SfButton @onclick="GetHeaderTextClick" Content="Get Header Text"></SfButton>
<SfButton @onclick="FocusClick" Content="Focus Tab Item"></SfButton>
<br />
<br />

@code {
    SfTab Tab;
    int SelectedTab = 0;
    public string HeaderText { get; set; }
    public string FocusText { get; set; }
    void FocusClick()
    {
        FocusText = "Facebook";
        if (Tab.Items.Count > 0)
        {
            int index = Tab.Items.FindIndex(x => x.Header.Text.StartsWith(FocusText));
            SelectedTab = index;
        }
    }
    public void RemoveTab(RemoveEventArgs args)
    {
        HeaderText = Tab.Items[Tab.SelectedItem].Header.Text;
    }
}
 
Query 2:

We have validated your reported query "I have five tab item,when I close Active tab,then how to get current Tab Header name." and achieved your requirement in Tab Removed event.

Index.razor:   
<span>@HeaderText</span>
<br />
<br />

<SfTab @ref="Tab" @bind-SelectedItem="SelectedTab" ShowCloseButton="true">
    <TabEvents Removed="RemoveTab"></TabEvents>
..................................
</SfTab>

@code {
    SfTab Tab;
    int SelectedTab = 0;
    public string HeaderText { get; set; }
    public string FocusText { get; set; }
    public void RemoveTab(RemoveEventArgs args)
    {
        HeaderText = Tab.Items[Tab.SelectedItem].Header.Text;
    }
}


Kindly try the above sample and let us know if this meets your requirement.

Regards,
Satheesh Kumar B


KI KINS October 17, 2022 07:39 AM UTC

I would like to know how to Set and get UniqueID for Tab Item 


KI KINS October 18, 2022 07:42 AM UTC

awaiting for reply


RV Ravikumar Venkatesan Syncfusion Team October 18, 2022 03:49 PM UTC

Hi KINS,


We have validated your requirement “I would like to know how to Set and get UniqueID for Tab Item” at our end. We have provided support for setting up a unique ID for each Tab item from release 20.3.47. You can set up the unique ID as highlighted in the below code snippet.


Release notes: https://blazor.syncfusion.com/documentation/release-notes/20.3.47?type=all#tab


[index.razor]

<SfTab @ref="Tab" @bind-SelectedItem="SelectedTab" ShowCloseButton="true">

    <TabEvents Removed="RemoveTab"></TabEvents>

    <TabItems>

        <TabItem ID="Twitter" Content="Twitter is an online social networking service that enables users to send and read short 140-charactermessages called tweets.Registered users can read and post tweets, but those who are unregistered can only readthem.Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in SanFrancisco and has more than 25 offices around the world.Twitter was created in March 2006 by Jack Dorsey,Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity,with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billionsearch queries per day.">

            <ChildContent>

                <TabHeader Text="Twitter"></TabHeader>

            </ChildContent>

        </TabItem>

        <TabItem ID="Facebook" Content="Facebook is an online social networking service headquartered in Menlo Park, California. Its website waslaunched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students EduardoSaverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.">

            <ChildContent>

                <TabHeader Text="Facebook"></TabHeader>

            </ChildContent>

        </TabItem>

        <TabItem ID="Whatsapp" Content="WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that operatesunder a subscription business model.It uses the Internet to send text messages, images, video, user location andaudio media messages to other users using standard cellular mobile numbers. As of February 2016, WhatsApp had a userbase of up to one billion,[10] making it the most globally popular messaging application.WhatsApp Inc., based inMountain View, California, was acquired by Facebook Inc.on February 19, 2014, for approximately US$19.3 billion.">

            <ChildContent>

                <TabHeader Text="Whatsapp"></TabHeader>

            </ChildContent>

        </TabItem>

        </TabItem>

    </TabItems>

</SfTab>


Kindly try the shared solution and let us know if you need any further assistance on this.


Regards,

Ravikumar Venkatesan


Attachment: syncfusionblazortabwithuniquetabitemid_ce0b0e7a.zip

KI KINS October 19, 2022 05:35 AM UTC

Thanks for reply...

I would like to know how to set and Get "ID" in runtime.



KI KINS October 21, 2022 02:23 AM UTC

Please help

I would like to set id when I add new tab in runtime

I would like to get id of tab item if tab item  already added or not


RV Ravikumar Venkatesan Syncfusion Team October 21, 2022 09:06 AM UTC

Hi KINS,


Q1: I would like to set id when I add new tab in runtime

You can set the ID to a new Tab item when you add it as highlighted in the shared code snippet.


[index.razor]

    void AddItemClick()

    {

        List<TabItem> items = new List<TabItem>();

        items.Add(new TabItem { ID = Tab.Items.Count.ToString(), Header = new TabHeader { Text = "Header " + Tab.Items.Count }, Content = "Content " + Tab.Items.Count });

        Tab.AddTab(items, Tab.Items.Count);

    }


Q2: I would like to get id of tab item if tab item  already added or not

You can get the ID of the added Tab item in the Added event of the Tab as shown in the shared snip or you get the Tab item by sending the Tab ID to the GetTabItemById method of the Tab.



Regards,

Ravikumar Venkatesan


Attachment: syncfusionblazortabitemswithuniqueid_fb5aa2e3.zip

KI KINS October 27, 2022 04:13 AM UTC

Thanks for reply...

I would like to check if Tab Item Already Exist by using "ID"


For Example :

If Tab1 is Added ,its ID is 1

If Tab2 is Added ,its ID is 2


If I again "Tab1" is Added ,then it should check "ID=1" and shows the message as "Tab Already Opened"



RV Ravikumar Venkatesan Syncfusion Team October 27, 2022 02:32 PM UTC

Hi KINS,


Thanks for the update.


Q: I would like to check if Tab Item Already Exist by using "ID"

You can check whether the Tab item already exists or not by using ID with help of the GetTabItemById method of the Tab as highlighted on the shared code snippet.


[Index.razor]

    void AddItemClick()

    {

        List<TabItem> items = new List<TabItem>();

        items.Add(new TabItem { ID = "1", Header = new TabHeader { Text = "Twitter" }, Content = "Twitter is an online social networking service that enables users to send and read short 140-charactermessages called tweets.Registered users can read and post tweets, but those who are unregistered can only readthem.Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in SanFrancisco and has more than 25 offices around the world.Twitter was created in March 2006 by Jack Dorsey,Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity,with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billionsearch queries per day." });

        TabItem Item = Tab.GetTabItemById(items[0].ID);

        if(Item != null)

        {

            Console.WriteLine("Tab Already Opened");

        } else

        {

            Tab.AddTab(items, Tab.Items.Count);

        }       

    }


Try the shared solution and let us know if you need any further assistance with this.


Regards,

Ravikumar Venkatesan

If this post is helpful, kindly consider accepting it as the solution so that other members can locate it more quickly.


Attachment: syncfusionblazortabaddtabitem_92f73c9f.zip

Loader.
Up arrow icon