Change visibility and select

[Martin]

I have 5 tabs created (0-4), on intial page load only tab zero is visible with 2 (a & b) buttons. If the user selects button a i would like tabs 1 & 2 to become visible and tab 1 selected, if user selects button b i would like tabs 3 & 4 to be visible and tab 3 selected.

Unfortunately the tabs become visible but not selected. If i do not set visible = false they select fine.

        private void SelectCon()

        {

            ShowConInfo = true;

            Tab.EnableTab(1, true);

            Tab.Select(1);

        }

ShowConInfo is bool bound to tab visibility.

How do I make visible and selected?

Thansk, Martin

[Satheesh Kumar Balasubramanian]

Hi Martin, 

  

Thanks for using Syncfusion Products. 

  

We have validated your reported query "Change visibility and select" at our end. We suggest you to use Visible and two way binding of SelectedItem property to achieve your requirement. For the same we have prepared a sample for your reference which can be downloaded from the following link. 

Sample: https://www.syncfusion.com/downloads/support/forum/165414/ze/TwoWayBinding751533068 

  

Index.razor:  

<SfButton @onclick="VisibleOneAndTwoClick" Content="Button A"></SfButton> 

<SfButton @onclick="VisibleThreeAndFourClick" Content="Button B"></SfButton> 

<br /> 

<br /> 

  

<SfTab @bind-SelectedItem="SelectedTab"> 

    <TabItems> 

        <TabItem> 

          ................... 

        </TabItem> 

        <TabItem Visible="@VisibleOneAndTwo"> 

          ................... 

        </TabItem> 

        <TabItem Visible="@VisibleOneAndTwo"> 

          .................... 

        </TabItem> 

        <TabItem Visible="@VisibleThreeAndFour"> 

          ..................... 

        </TabItem> 

        <TabItem Visible="@VisibleThreeAndFour"> 

           ...................... 

        </TabItem> 

    </TabItems> 

</SfTab> 

  

@code{ 

    private int SelectedTab = 0; 

    private bool VisibleOneAndTwo = false; 

    private bool VisibleThreeAndFour = false; 

  

    void VisibleOneAndTwoClick() 

    { 

        VisibleOneAndTwo = true; 

        SelectedTab = 1; 

    } 

    void VisibleThreeAndFourClick() 

    { 

        VisibleThreeAndFour = true; 

        SelectedTab = 3; 

    } 

} 

  

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

  

Regards, 

Satheesh Kumar B