How to match tabitems with the index of the actual tab

[Bram van Elderen]

Hello,

So what i'm trying to do is sync a treeview component and a tab component. The tabs are dynamicly opened when clicking treeview items. Which works fine.

When clicking between tabs i also make the related treeview item active. To make this possible i have a simple dictionary which maps the index of a tab to a treeview item.

Now the problem comes when i remove tab items using the close button. I saw that when a tab is removed all the indices of the other tabs are updated, so my manual mapping is not in sync anymore. Now i want to resync this but i can't find a way to properly do this.

I was thinking if i just create a new class that inherits from the TabItem class and add those to the tab component, i can add an identifier to this class which matches to the treeview item. The problem is however that all the tab events only give the index of the tab, but not the tab item. and the .Items list in the tab component only contains the tabitems but not which index it is.

So basicly if i could somehow match a tabitem (Which is the TabItem class) to an index then i can do what i want, but i don't see a way right now

Any ideas?

[Satheesh Kumar Balasubramanian]

Hi Bram, 

  

Thanks for using Syncfusion Products. 

  

We have validated your reported query and suspect that you need to change the selected node in treeview based on tab selected item. We have achieved your requirement by changing treeview SelectedNodes in tab Selecting event. 

  

Sample: https://www.syncfusion.com/downloads/support/forum/169571/ze/TreeviewWithTab1560802923 

  

MainLayout.razor:  

                    <div> 

                        <SfTreeView CssClass="main-treeview" @ref="TreeView" ExpandOn="@Expand" TValue="TreeData" @bind-SelectedNodes="selectedNodes"> 

                            <TreeViewEvents TValue="TreeData" NodeSelecting="TreeviewNodeSelecting"></TreeViewEvents> 

                            <TreeViewFieldsSettings Id="nodeId" Text="nodeText" IconCss="iconCss" DataSource="treedata" HasChildren="hasChild" ParentID="pid"> 

                            </TreeViewFieldsSettings> 

                        </SfTreeView> 

                    </div> 

  

            <div class="sidebar-content"> 

                @if (LoadTab) 

                { 

                    <SfTab CssClass="drag-drop-tab" @ref="Tab" @bind-SelectedItem="SelectedTab"> 

                        <TabEvents Selecting="TabSelecting"></TabEvents> 

                        <TabItems> 

                        </TabItems> 

                    </SfTab> 

                } 

            </div> 

  

@code {  

    public string[] selectedNodes { get; set; } 

    public void TabSelecting(SelectingEventArgs args) 

    { 

        var nodeIndex = args.SelectingIndex; 

        if (treedata.Count > 0 && Tab.Items.Count > 0) 

        { 

            int index = treedata.FindIndex(x => x.nodeText.StartsWith(Tab.Items[args.SelectingIndex].Header.Text)); 

            selectedNodes = new string[] { treedata[index].nodeId }; 

            FromSelecting = true; 

        } 

    } 

} 

  

Kindly try the above sample and let us know if this works at your end. If you still face any problem, please replicate the issue in above sample or share issue replicating sample if possible which will help us to validate the issue further and provide prompt solution as soon as possible. 

  

Regards, 

Satheesh Kumar B