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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

An example of using ejTab in the unobtrusive directive mode

Thread ID:

Created:

Updated:

Platform:

Replies:

121851 Feb 1,2016 05:33 AM UTC May 18,2016 06:46 AM UTC JavaScript 7
loading
Tags: ejTab
Daniel haanpaa
Asked On February 1, 2016 05:33 AM UTC

Hello,

I like your products. I am using your products on a javascript page. 

I was wondering how to use the ejTab control using the unobtrusive mode that you guys introduced. Do you have any examples on how to use the ejTab in unobtrusive directive mode? I looked through the documentation and I did not see any examples.

Manikandan Mariappan [Syncfusion]
Replied On February 2, 2016 12:42 PM UTC

Hi Daniel,
Thanks for contacting Syncfusion support.

We have analyzed your query, it can be achieved by referring the required script file "ej.unobtrusive.min.js" in your layout.cshtml page. And also by enabling the UnobtrusiveJavascriptEnabled in web.configthis UnobtrusiveJavascriptEnabled settings can be found in appSettings of web.config file.


[web.config]


<appSettings>   

        ..

        <add key="UnobtrusiveJavaScriptEnabled" value="true" />

        ..

</appSettings>



We have prepared the sample based on your requirement, Please find the sample from the below link.
Location: Sample
Query: I looked through the documentation and I did not see any examples.
In sample side there is no difference between an unobtrusive and non - unobtrusive mode (like syntax and property declaration). So, samples are not showcased in our sample browser and online documentation.
To know more about this configuration please refer to the following link.
http://help.syncfusion.com/aspnetmvc/getting-started#to-enable-unobtrusive-option-in-your-application
If you have face any difficulties or need further details about our controls in unobtrusive mode, please let us know we will happy to assist you.
Regards,
M.Manikandan

Alicia Serrano
Replied On May 11, 2016 01:33 PM UTC

Hello,

I'am trying to use a Header Customization in a tab control, but it's not working with unobtrusive mode. I have the required script file "ej.unobtrusive.min.js" in my layout.cshtml page. I am using Syncfusion ASP.NET mvc control, but I have the same problem with javascript controls.

Debugging the code, we solve the problem adding data-role='ejtab' in <div> element.

Ex.:
<div id="dishtab" style="width:550px" data-role="ejtab">

     <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>
I suppose this is a bug, or... is something missing in the documentation?

Thanks 

Keerthana Rajendran [Syncfusion]
Replied On May 12, 2016 09:54 AM UTC

Hi Alicia,   
 We are sorry for the inconvenience.   
 Yes, we missed to add the details under the Appearance and Styling section of MVC document. We will modify and refresh the document from our side shortly.    
 We referred the shared code and suspect that the issue occurs because you have used JS rendering in MVC. As unobtrusive mode is working based on “data “attributes and the sample works fine when datarole=”ejtab” is added.    
 We suggest you to use the following code in your sample.   

 
















Regards, 
Keerthana. 


Keerthana Rajendran [Syncfusion]
Replied On May 12, 2016 10:37 AM UTC

Hi Alicia,   
  
Please ignore our previous update 
 
We are sorry for the inconvenience.   
  
Yes, we missed to add the details under the Appearance and Styling section of MVC document. We will modify and refresh the document from our side shortly.    
  
We referred the shared code and suspect that the issue occurs because you have used JS rendering in MVC. As unobtrusive mode is working based on “data “attributes and the sample works fine when datarole=”ejtab” is added.    
  
We suggest you to use the following code in your sample.   

<div style="width: 500px"> 
        @{Html.EJ().Tab("defaultTabs").ShowCloseButton(true).EnablePersistence(true).HeaderPosition(HeaderPosition.Top).Items(data => 
           { 
               data.Add().ID("pizza").Text("Pizza").ContentTemplate(@<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>); 
               data.Add().ID("sandwichtype").Text("Sandwich").ContentTemplate(@<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>); 
               
           }).Render();} 
    </div> 

Regards, 
Keerthana. 


Alicia Serrano
Replied On May 12, 2016 11:33 AM UTC

Hi Keerthana

Thanks for your answer.

However, I have to insist about this issue because when you want to customize the header in the tab control, you have problems with unobtrusive mode. I mean, if you want some elements inside the tab headers, not only a text. I can solve that if I add data-role="ejtab" in my div, but.... I am still having problem with some issues. For example, I have:

@{Html.EJ().Tab("containertabs").SelectedItemIndex(1).Render(); }

But, "SelectedItemIndex(1)" it doesn't work if I have unobtrusive mode enabled. How could I solve it?

Thank you very much

Keerthana Rajendran [Syncfusion]
Replied On May 13, 2016 01:05 PM UTC

  
Hi Alicia, 
 
Thanks for the update.  
 
For your clarification, data-role is different way to render our syncfusion controls. So we suggest you to follow either MVC HTML Helper or data-role way to render our Syncfusion components.  
 
In MVC HTML helper:  
 
We can prepared a simple sample with customized header template, content template, selectedItemIndex property as you required. Please find the sample in below link  
 
 
In data-role:  
 
We have prepared a sample in JS playground sample to expose the behavior of data-role and how to give the properties in this kind of rendering. 
 Kindly have a look on below JS playground link:  
 
 
 
 
Please let us know if any concerns.  
 
Regards, 
Keerthana. 
 
 


Alicia Serrano
Replied On May 18, 2016 06:46 AM UTC

Hi Keerthana,

Thank you very much for your projects. Those samples help me to solve my problem. Although, the headers in my case are more complex, I can handle it with your idea.

Thanks again

Regards,
Alicia Serrano

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.

Warning Icon 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.Close Icon

;