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

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:

https://ej2.syncfusion.com/aspnet-core-razor-components/Tab/DefaultFunctionalities

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>

<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>

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

}

Reply | Reply with quote

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.

</TabItems>

</EjsTab>

Regards,

Vairamuthu R

Reply | Reply with quote

Hamza Babahammou

Replied On June 1, 2019 08:50 AM UTC

Hello,

How about placing child content within a tab item,

</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?

Reply | Reply with quote

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>

</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.

http://www.syncfusion.com/downloads/support/forum/144390/ze/Tab1061831533

Regards,

Karthi

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
144390	May 3,2019 07:22 PM UTC	Jun 3,2019 11:07 AM UTC	Blazor	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US