1. Home
  2. Forum
  3. Blazor
  4. EjsTab did not work in the samples neither on my development machine

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

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();
    }
}


3 Replies
VR Vairamuthu Ramamoorthi Syncfusion Team 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 


HB Hamza Babahammou 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?

KK Karthigeyan Krishnamurthi Syncfusion Team 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 
 


Loader.
Up arrow icon