We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to display always the first tab item?

Thread ID:

Created:

Updated:

Platform:

Replies:

149395 Nov 25,2019 10:05 AM UTC Feb 27,2020 07:27 AM UTC Blazor 7
loading
Tags: Tabs
j
Asked On November 25, 2019 10:05 AM UTC

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 [Syncfusion]
Replied On November 26, 2019 08:52 AM UTC

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. 

  <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
Replied On November 29, 2019 06:43 AM UTC

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 [Syncfusion]
Replied On November 29, 2019 11:11 AM UTC

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
Replied On January 9, 2020 10:59 AM UTC

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 [Syncfusion]
Replied On January 13, 2020 11:59 AM UTC

  
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. 


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

Regards 
Alagumeena.K 


j
Replied On February 26, 2020 10:46 AM UTC

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 [Syncfusion]
Replied On February 27, 2020 07:27 AM UTC

Dear customer, 
You are most welcome . Please keep in touch with us, If you need further assistance. 
Regards 
Alagumeena.K 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon