How to display always the first tab item?

[j]

The tab is inside the EjsDialog, and I want to make the tab item index 0 to be selected always when the dialog is showed.

Or maybe I can do it programmatically in OnInitialized() (because the EjsTab is inside a component). Is it possible?

[Nevitha Ravi]

Dear Customer, 

Greetings from Syncfusion Support. 

You can maintain the tab item programmatically using Select public method. We have maintained the selected tab item on dialog OnOpen event for your reference in the following sample. 

https://www.syncfusion.com/downloads/support/forum/149395/ze/TabControl1143977928  

  <EjsDialog @ref="DialogObj" Target="#target" Height="500px" Width="275x" ShowCloseIcon="true"> 

        <DialogEvents OnOpen="OnDialogOpen"></DialogEvents> 

        <DialogTemplates> 

            <Header> Tab </Header> 

            <Content> 

                <EjsTab @ref="TabObj"> 

                    <TabItems> 

                        <TabItem Content="@Content1"> 

                            <ChildContent> 

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

                            </ChildContent> 

                        </TabItem> 

                        <TabItem Content="@Content2"> 

                            <ChildContent> 

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

                            </ChildContent> 

                        </TabItem> 

                        <TabItem Content="@Content3"> 

                            <ChildContent> 

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

                            </ChildContent> 

                        </TabItem> 

                    </TabItems> 

                </EjsTab> 

            </Content> 

        </DialogTemplates> 

    </EjsDialog> 

@code { 

EjsTab TabObj; 

    public void OnDialogOpen() 

    { 

        if (TabObj != null) 

        { 

        TabObj.Select(0); 

        } 

    } 

… 

} 

Please try out the sample and let us know if you need any further assistance. 

Regards, 

Nevitha. 

 

[j]

Hello Syncfusion Support Team,

   What version is the Select() method can be found? I'm using, 17.3.0.18-beta. Error found:

   'EjsDialog' does not contain a definition for 'Select' and the best extension overload 'Queryable.Select(IQueryable, string)' requires a receiver of type 'IQueryable'

Thanks,

[Nevitha Ravi]

Dear Customer, 

Sorry for the confusion. 

In the provided solution, the Select method is applicable to Tabs control and OnOpen event for ‘Dialog’ control. 

Dialog’s OnOpen Event – called every time on open the dialog 

Tab’s Select method – used to select a particular tab 

So, we have used “Select” method to select the first tab item using Tab instance When dialog is opened. Please refer to our sample and code snippet and get back to us if you need any further assistance. 

Regards, 

Nevitha. 

[j]

Sorry for not getting back to you right after you shared a sample code.
Anyway, your sample maybe okay if the <EjsDialog>,  <DialogEvents>, and <EjsTab> are in one component.
However my scenario, the 3 named tags are located in different component.

1. public void OnDialogOpen() is located inside a component where <EjsTab> is located.

public void OnDialogOpen()

    { 

        if (TabObj != null)

        { 

            TabObj.Select(0);

        } 

    }

2.

private void onDialogOpen()

    {

        DetailsComponent.OnDialogOpen();

    }

Issue is: The TabObj.Select(0) isn't being called because the if (TabObj != null) is always false;

[Alagumeena Kalaiselvan]

  

Dear Customer, 

Thanks for your patience!... 

We have validated your query with shared code snippet. We suspect that you are trying to access tab instance in incorrect “razor” page. So, we have prepared the sample based on your requirement. In that sample, EjsDialog and EjsTab components placed in “index ” and “DetailsComponent” pages respectively which can be downloaded from the following link. 

https://www.syncfusion.com/downloads/support/forum/149395/ze/TabControl-1445570368  

Please try out this sample and get back to us, If this issue may still persist. 

Regards 

Alagumeena.K 

[j]

Thank you very much. Although it's not the exact thing I'm looking for but the idea of how it should be done was taken from your sample code.

Thanks and more powers!

[Alagumeena Kalaiselvan]

Dear customer, 

You are most welcome . Please keep in touch with us, If you need further assistance. 

Regards 

Alagumeena.K