An example of using ejTab in the unobtrusive directive mode

[Daniel haanpaa]

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]

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.config, this 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]

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]

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]

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]

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]

  

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  

 

http://www.syncfusion.com/downloads/support/forum/121851/ze/Tab-1066967682.zip 

 

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:  

 

http://jsplayground.syncfusion.com/fw2mra0n 

 

UG link : http://help.syncfusion.com/js/unobtrusive-support#data-role 

 

 

Please let us know if any concerns.  

 

Regards, 

Keerthana. 

 

 

[Alicia Serrano]

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