How to use SelectedItem and SelectedItemChanged

Question

How to use SelectedItem and SelectedItemChanged? My SelectedItem always returns 0. My goal is to trigger change event and then through SelectedItem see which tab is currently open.

Nevitha Ravi · Accepted Answer

Hi Stejpan,

Thanks for your update.

You can use Selected event along with two-way binding of SelectedItem using which you can perform your customization on tab selection, please try the below sample and get back to us if you need any further assistance.

https://www.syncfusion.com/downloads/support/forum/163618/ze/TabSelectedEvent-774600331

<SfTab @bind-SelectedItem="SelectedTab">

<TabEvents Selected="OnTabSelected"></TabEvents>

void OnTabSelected(SelectEventArgs args)

{

if (SelectedTab == 1)

{

//do your stuff

}

Regards,

Nevitha

Nevitha Ravi · Answer

Hi Stejpan, 

Greetings from Syncfusion Support. 

We have validated your reported query and let you know that when you use two-way binding for SelectedItem, the selected tab index will be updated in the variable assigned to the SelectedItem property using which you can find the currently selected tab. Please refer to the following sample and get back to us if you need any further assistance. 
https://www.syncfusion.com/downloads/support/forum/163618/ze/TabSelectedItem-twowaybinding-898904427 
 




<SfTab @bind-SelectedItem="SelectedTab"> 
 
@code { 
    private int SelectedTab = 0; 
} 
 
Regards, 
Nevitha

Stjepan · Answer

But then I can't bind on change event. This is my sample code: @code { public int currentOpenTab { get; set; } public void TabChanged() { if (currentOpenTab == 1) { //do stuff } }}

Adriana Selena Tito Ilasaca · Answer

I have a question I could not find any event when we want to change the SelectedTab value automatically for example by clicking a button. In your demo sample adding

`

<button @onclick="() => { SelectedTab = 1; } ">click here</button>`

the Event Selected is not being triggered is there any way we can handle this?

Satheesh Kumar Balasubramanian · Answer

Hi Adriana,

We let you know that tab Selected event will trigger for component interaction only, not for SelectedItem property changes. Also, if you change the SelectedItem property you will aware of which tab index you are navigating. In this case, you need to use tab Selected event. If you still want to use Selected event, please share more details about your use scenario with the Selected event.

Regards,

Satheesh Kumar B

Felipe Andrade · Answer

Hi, Syncfusion team.I have a similar problem.I'd like to have the event "Selected" trigger on @bind-SelectedItem change, but maybe you guys can offer me an easier solution.I have a big tree of components, all receiving the same ViewModel with data. There's logic on some places that will make the tab change when we get to certain ranges on the main live Chart of the page.I have other live charts inside tabs and when the tab is changed, as far as I understand, I need to call refresh on the chart inside the selected tab. If I do not call refresh, the 100% width of the chart will be wrong, because it's not able to auto-adjust when the tab is selected.My plan was to us Selected="OnTabSelected" to do just that. I guess I could bind a Func on ViewModel to do that, or pass the method through several levels of the component tree, but they don't feel like good solutions.I would appreciate any suggestions.Thanks,

Venkateshwaran Saravanakumar · Answer

Hi Felipe, Thank you for reaching out to us with your query.We want to inform you that the "Selected" event won't trigger solely through changes in the "selectedItem" property, as you requested. Instead, it will only trigger through component interaction. However, you can still achieve your requirement of refreshing the chart inside the selected tab by triggering the "selected" event manually using the "SelectAsync" method of the tab component.API: SelectAsync: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTab.html#Syncfusion_Blazor_Navigations_SfTab_SelectAsync_System_Int32_ SelectedItem : https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTab.html#Syncfusion_Blazor_Navigations_SfTab_SelectedItem [Index.razor] Click Me @code { SfChart Chart2; SfChart Chart1; SfButton btnClick; SfTab tabRef; int _index; Task OnClick() { _index = (_index == 0) ? 1 : 0; tabRef.SelectAsync(_index); return Task.CompletedTask; } public async Task OnTabSelected(SelectEventArgs args) { if (args.SelectedIndex == 0) { await Chart1.RefreshAsync(); } else if (args.SelectedIndex == 1) { await Chart2.RefreshAsync(); } } public class ChartData { public DateTime XValue { get; set; } public double YValue { get; set; } } public List ConsumerReports = new List { new ChartData { XValue = new DateTime(2005, 01, 01), YValue = 21 }, new ChartData { XValue = new DateTime(2006, 01, 01), YValue = 24 }, new ChartData { XValue = new DateTime(2007, 01, 01), YValue = 36 }, new ChartData { XValue = new DateTime(2008, 01, 01), YValue = 38 }, new ChartData { XValue = new DateTime(2009, 01, 01), YValue = 54 }, new ChartData { XValue = new DateTime(2010, 01, 01), YValue = 57 }, new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 70 }, }; } Regards, VenkateshAttachment: TabSelectedEvent_e1fb1de0.zip