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. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET MVC
  4. Unable to render Tab when customizing with tab icons

Unable to render Tab when customizing with tab icons

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

6 Replies
DT Dhivyalakshmi Thirumurugan Syncfusion Team October 17, 2016 12:17 PM UTC

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. 
 


CR CLAUDIO RICCARDI October 19, 2016 02:34 PM UTC

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

CR CLAUDIO RICCARDI October 20, 2016 09:30 AM UTC

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

DT Dhivyalakshmi Thirumurugan Syncfusion Team October 20, 2016 10:55 AM UTC

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.   


CR CLAUDIO RICCARDI October 20, 2016 01:51 PM UTC

Hi,

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

I provide you a sample.

Thanks in advance.

Claudio

Attachment: SlimHub_a5f57890.zip

DT Dhivyalakshmi Thirumurugan Syncfusion Team October 21, 2016 12:33 PM UTC

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 


Loader.
Up arrow icon