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.
Unfortunately, activation email could not send to your email. Please try again.

Unable to render Tab when customizing with tab icons

Thread ID:

Created:

Updated:

Platform:

Replies:

126434 Oct 14,2016 10:46 AM Oct 21,2016 08:33 AM ASP.NET MVC 6
loading
Tags: Tab
CLAUDIO RICCARDI
Asked On October 14, 2016 10:46 AM

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 [Syncfusion]
Replied On October 17, 2016 08:17 AM

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. 

 
Please find the references below: 

 
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
Replied On October 19, 2016 10:34 AM

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
Replied On October 20, 2016 05:30 AM

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 [Syncfusion]
Replied On October 20, 2016 06:55 AM

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().  
  
  
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
Replied On October 20, 2016 09:51 AM

Hi,

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

I provide you a sample.

Thanks in advance.

Claudio

Attachment: SlimHub_a5f57890.zip

Dhivyalakshmi Thirumurugan [Syncfusion]
Replied On October 21, 2016 08:33 AM

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. 
                                                      
 
Please let us know if you have any queries.

Regards,
Dhivyalakshmi
 


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.

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.

;