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

EjsTab did not work in the samples neither on my development machine

Thread ID:

Created:

Updated:

Platform:

Replies:

144390 May 3,2019 07:22 PM UTC Jun 3,2019 11:07 AM UTC Blazor 3
loading
Tags: Tabs
Islam yahia
Asked On May 3, 2019 07:22 PM UTC

Hi,

I'm trying to use the EjsTab control inside my Blazor project but it's not working neither in that project nor in the online sample demonstrated in the link below:


I've tried this both on Google Chrome 74 and Microsoft Edge.

Below is the code I've tried to run on my machine:

@page "/"
@using Syncfusion.EJ2.RazorComponents.Navigations
@using BlazorPreview.Shared
<h1>Hello, world!</h1>

<SurveyPrompt Title="How is Blazor working for you?" />

<style>
    .e-content .e-item {
        font-size: 12px;
        padding: 10px;
        text-align: justify;
    }
    #defaultTab .e-tab-icon {
        font-family: 'Socialicons' !important;
    }

    #defaultTab .e-icons.e-tab-icon {
        position: relative;
        top: 1px;
    }

    .e-twitter:before {
        content: '\a701';
    }

    .e-facebook:before {
        content: '\a705';
    }

    .e-whatsapp:before {
        content: '\a700';
    }
</style>

<EjsTab ID="defaultTab" ref="d">
    <TabTabItems>
        <TabTabItem Header="@header1" Content="@content1"></TabTabItem>
        <TabTabItem Header="@header2" Content="@content2"></TabTabItem>
        <TabTabItem Header="@header3" Content="@content3"></TabTabItem>
    </TabTabItems>
</EjsTab>

@functions{
        EjsTab d;
    public object header1 = new { text = "Twitter", iconCss = "e-twitter" };
    public object header2 = new { text = "Facebook", iconCss = "e-facebook" };
    public object header3 = new { text = "Whatsapp", iconCss = "e-whatsapp" };

    public string content1 = "witter is an online social networking service that enables users to send and read short 140-character";
    public string content2 = "Facebook is an online social networking service headquartered in Menlo Park, California. Its website was";
    public string content3 = "WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that operates";

    private List<Object>
    TabItems
    { get; set; } = new List<Object>
    {
        new { header = new { text = "Twitter", iconCss = "e-twitter" }, content = "Twitter is an online social networking service that enables users to send and read short 140-character " },
        new { header = new { text = "Facebook", iconCss = "e-facebook" }, content = "Facebook is an online social networking service headquartered in Menlo Park, California. Its website was " } ,
        new { header = new { text = "WhatsApp", iconCss = "e-whatsapp" }, content = "WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that operates " } ,
        };
    protected override async Task OnInitAsync()
    {
        d.DataBind();
    }
}


Vairamuthu Ramamoorthi [Syncfusion]
Replied On May 6, 2019 01:22 PM UTC

Hi Islam 

Greetings from Syncfusion support.  

We able to reproduce the reported issues , please refer the below code snippet for to resolve the issue . We will correct the our getting start document and refresh online on or before May 15, 2019.  
  
  <EjsTab ID="defaultTab">  
            <TabItems>  
                <TabItem Header="@header1" Content="@content1"></TabItem>  
                <TabItem Header="@header2" Content="@content2"></TabItem>  
                <TabItem Header="@header3" Content="@content3"></TabItem>  
            </TabItems>  
        </EjsTab>  
  

Regards, 
Vairamuthu R 


Hamza Babahammou
Replied On June 1, 2019 08:50 AM UTC

Hello,

How about placing child content within a tab item, 


<EjsTab ID="defaultTab" ref="d">
    <TabTabItems>
        <TabTabItem Header="@header1"  >
               <SomeComponent/>
       </TabTabItem>
        <TabTabItem Header="@header2" Content="@content2"></TabTabItem>
        <TabTabItem Header="@header3" Content="@content3"></TabTabItem>
    </TabTabItems>
</EjsTab>

If I do that, the whole Tab control disapears and only SomeComponent shows up.

Do you know if this is fixed on the new release?

Karthigeyan Krishnamurthi [Syncfusion]
Replied On June 3, 2019 11:07 AM UTC

  
Hi Hamza, 
 
As we have not provided the Template support for our Blazor components yet, you cannot add subcomponent as you tried. However, as a workaround it is possible to add sub components into the tab as mentioned in the code snippet below.  
 
 
<div id="booking" style="display: none"> 
    <EjsCalendar id="calendar"></EjsCalendar> 
</div> 
    <EjsTab ID="defaultTab"> 
        <TabItems> 
            <TabItem Header="@header1" Content="@content1"></TabItem> 
            <TabItem Header="@header2" Content="@content2"></TabItem> 
            <TabItem Header="@header3" Content="@content3"></TabItem> 
        </TabItems> 
    </EjsTab> 
public string content1 = "#booking"; 
 
We have prepared the below sample to render the Syncfusion Calendar component within one of the Tab items for your reference. Please check out the sample and let me know if you have any queries. 
 
Regards, 
Karthi 
 


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