Unable to render Tab when customizing with tab icons

[CLAUDIO RICCARDI]

Hi,

I have followed the instructions provided to set tab header images but the tab is not rendered.

This is the code snippet:

<style type="text/css" class="cssStyles">

    .dish {

        display: inline-block;

        vertical-align: middle;

        margin: 0px -9px 0px 9px;

    }

    .pizzaImg {

        background: url("http://js.syncfusion.com/UG/Web/Content/rsz_chicken-delite.png") no-repeat;

        height: 25px;

        width: 25px;

    }

    .sandwichImg, .pastaImg {

        height: 25px;

        width: 25px;

    }

    .sandwichImg {

        background: url("http://js.syncfusion.com/UG/Web/Content/rsz_garden-fresh.png") no-repeat;

    }

</style>

<div id="dishtab" style="width:550px">

    <ul>

        <li><span class="dish pizzaImg"></span><a rel='nofollow' href="#pizzatype">Pizza Type</a></li>

        <li><span class="dish sandwichImg"></span><a rel='nofollow' href="#sandwichtype">Sandwich Type</a></li>

    </ul>

    <div id="pizzatype" style="background-color: #F5F5F5">

        <p>Pizza cooked to perfection tossed with milk, vegetables, potatoes, poultry, 100% pure mutton, and cheese - and in creating nutritious and tasty meals to maintain good health.</p>

    </div>

    <div id="sandwichtype" style="background-color: #F5F5F5">

        <p>Sandwich cooked to perfection tossed with bread, milk, vegetables, potatoes, poultry, 100% pure mutton, and cheese - and in creating nutritious and tasty meals to maintain good health.</p>

    </div>

    @Html.EJ().Tab("dishtab")

</div> 

The image I attach shows what I see on the page.

Thank you for your support.

Attachment: tab_4a71a6dd.zip

[Dhivyalakshmi Thirumurugan]

Hi Claudio, 

Thanks for contacting Syncfusion support. 

We are unable to reproduce the reported issue at our end. The reported issue occurs when the scripts and css files had not referred properly in Layout.cshtml page. So please ensure whether all the scripts and css has been referred in the sample. If not means kindly refer ej.web.all.min.js  and ej.web.all.min.css in the sample. We have prepared the sample with the provided code. Please find the sample link below. 

Sample Link: http://www.syncfusion.com/downloads/support/forum/126434/ze/Tab1307749957.zip 

 

Please find the references below: 

UG Link: https://help.syncfusion.com/aspnetmvc/getting-started#through-nuget-packages 

 

Kindly refer the scripts and css as like listed in the above link. 

Please let us know if you have any queries. 

Regards, 

Dhivyalakshmi. 

 

[CLAUDIO RICCARDI]

Hi,

I have used the *.js and *.css provided with your sample but the problem is not solved.

Currently I use version 14.2460.0.26 of Syncfusion.EJ. Can you provide a sample that works with that version of the libraries?

Best regards.

Claudio

[CLAUDIO RICCARDI]

Hi,

after a lot of tests, I have solved the problem adding the following line of code:

<script type='text/javascript'>$(function($){$("#dishtab").ejTab({});});</script>

If I don't mistake, I guess this line should have been created automatically by the instruction     

@Html.EJ().Tab("dishtab")

but in my case it doesn't work.

I have replaced all js libraries and all css stylesheets with those provided in your sample.

The include lines at the beginning of the pages (define in the _Layout.cshtml file) are the same.

The only difference is that I use some other libraries and stylesheets, so the include lines are the following ones:

<link rel='nofollow' href="/Content/bootstrap.css" rel="stylesheet"/>

<link rel='nofollow' href="/Content/site.css" rel="stylesheet"/>

<link rel='nofollow' href="/Content/ej/web/default-theme/ej.web.all.min.css" rel="stylesheet"/>

<script src="/Scripts/jquery-2.1.4.min.js"></script>

<script src="/Scripts/bootstrap.js"></script>

<script src="/Scripts/respond.js"></script>

<script src="/Scripts/jsrender.min.js"></script>

<script src="/Scripts/ej/ej.web.all.min.js"></script>

<script src="/Scripts/modernizr-2.6.2.js"></script>

<script src="/Scripts/jquery.easing.1.3.min.js"></script>

<script src="/Scripts/jquery.globalize.min.js"></script>

<script src="/Scripts/ej/ej.culture.it-IT.min.js"></script>

<script src="/Scripts/ej/ej.unobtrusive.min.js"></script>

Maybe there are some conflicts?

Thank you.

Claudio

[Dhivyalakshmi Thirumurugan]

Hi Claudio,   

  

Thanks for the update.   

  

We are providing the MVC assemblies based on MVC Version, not based on framework versions. So kindly refer 4.5 DLL (that is 14.3450.0.49) for the DOTNET framework 4.6.   

  

If you have referred wrong DLL means, it would have thrown the configuration error but in this case control was not rendered in the page. So to overcome your reported issue, please ensure whether you have referred @Html.EJ().ScriptManager().  

  

UG Link: https://help.syncfusion.com/aspnetmvc/getting-started#through-nuget-packages   

  

Kindly check the above link in order to render the MVC controls we need to add the Script Manager in _Layout.cshtml page.    

  

Also please refer your scripts and CSS as like below order.    

   

  

<link rel='nofollow' href="/Content/bootstrap.css" rel="stylesheet"/>   

<link rel='nofollow' href="/Content/site.css" rel="stylesheet"/>   

<link rel='nofollow' href="/Content/ej/web/default-theme/ej.web.all.min.css" rel="stylesheet"/>   

<script src="/Scripts/bootstrap.js"></script>   

<script src="/Scripts/respond.js"></script>   

<script src="/Scripts/modernizr-2.6.2.js"></script>   

<script src="/Scripts/jquery-2.1.4.min.js"></script>   

<script src="/Scripts/jquery.globalize.min.js"></script>   

<script src="/Scripts/jsrender.min.js"></script>   

<script src="/Scripts/jquery.easing.1.3.min.js"></script>   

<script src="/Scripts/ej/ej.web.all.min.js"></script>   

<script src="/Scripts/ej/ej.culture.it-IT.min.js"></script>   

<script src="/Scripts/ej/ej.unobtrusive.min.js"></script>   

   

  

   

Still if you face the difficulty, then please provide your sample so that we can help you more effectively.   

   

Regards,   

Dhivyalakshmi.   

[CLAUDIO RICCARDI]

Hi,

@Html.EJ().ScriptManager() is correctly referred.

I provide you a sample.

Thanks in advance.

Claudio

Attachment: SlimHub_a5f57890.zip

[Dhivyalakshmi Thirumurugan]

Hi Claudio, 

 

Thanks for the update. 

 

Before proceeding on this, we would like to know the below details. 

 

1)      Please let us know whether you want the Tab control to be rendered either in Obtrusive mode or Unobtrusive mode. 

2)      Kindly tell us whether you need the sample for adding the images at the Tab header or like some other scenario’s. 

 

To render the control without using unobtrusive mode(that is in normal mode) means we need to set the UnobtrusiveJavaScriptEnabled property as false in Web.config file. So that sample present in your project will work as like expected. For that please check step 3 in the below link. 

                                                      

UG Link: https://help.syncfusion.com/aspnetmvc/getting-started 

 

Please let us know if you have any queries.

Regards,
Dhivyalakshmi