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.

How to render the <li> tab element with a personalized ID?

Thread ID:

Created:

Updated:

Platform:

Replies:

125760 Sep 9,2016 11:56 AM Oct 21,2016 04:42 AM ASP.NET MVC 3
loading
Tags: Tab
Ayane
Asked On September 9, 2016 11:56 AM

Hello again Syncfusion team,

I am dealing with tabs and I have a big problem I need to solve please.

To begin with, I have the UnobtrusiveJavaScriptEnabled value set to true in my project, so I cannot work with JavaScript Api in order to render Tabs (I have already tried). Thus, I used ASP.NET MVC Api.
I need to build tabs with IDs inside each <li> element rendered. But this looks to be impossible.

For instance:

If I had used the JavaScript Api, I only would have written out this code

<li id="AppliedToCategories">
    <a rel='nofollow' href="#Categories">Categories</a>
</li>

But, my real code looks like this:

@(Html.EJ().Tab("discount-edit")
    .Items(data =>
        {
            data.Add()
                .ID("Info")
                .Text(@T("Admin.Promotions.Discounts.Info").Text)
                .ContentTemplate(@<div>@TabInfo()</div>);
            data.Add()
                .ID("AppliedToCategories")
                .Text(@T("Admin.Promotions.Discounts.AppliedToCategories").Text)
                .ContentTemplate(@<div>@TabAppliedToCategories()</div>);        
        })
)

The problem of using the last one is that I have not found out any way to specify the <li> ID.

If you inspect the code generated in the web browser, you will notice for example, that the .ID("Info") is not for the <li> element but for the <div> with the content rendered for that tab.

What can I do? Please, I need someone to help me to find out the way to specify the ID for tab elements because I have to use jQuery to show() or hide() some tabs depending on certain behavior.

Yours faithfully,

Ayane


Dhivyalakshmi Thirumurugan [Syncfusion]
Replied On September 12, 2016 08:30 AM

Hi Ayane, 

Thanks for contacting Syncfusion support. 

Currently we did not have any option to add the ID in li elements of Tab. If we set the ID for the tab item as per your code, it will set the ID to the anchor tag of li elements. Because it is the behavior of Tab control where the tab renders by matching the id of the tab header and also the tab content. Please find the references below. 


To hide and show the specified tab item, you can use the Tab control public method named as hideItem(index) and showItem(index) method. Please find the code below. 

@helper TabAppliedToCategories() {  
     
@(Html.EJ().Tab("discount-edit") 
    .Items(data => 
        { 
            data.Add() 
                .ID("AppliedToCategories") 
                .Text("Admin.Promotions.Discounts.AppliedToCategories") 
                .ContentTemplate(@<div>@TabAppliedToCategories()</div>); 
        }).ClientSideEvents(e=>e.Create("onCreate")) 
)         
 
<script> 
    function onCreate() { 
        var tabObj = $("#discount-edit").data("ejTab"); 
       // To hide the specified tab item, please use the below code. 
            tabObj.hideItem(0)
    } 
</script> 
 
// To show the specified tab item, please use the below code instead of above script code. 
<script> 
    function onCreate() { 
        var tabObj = $("#discount-edit").data("ejTab"); 
            tabObj.showItem(0)
    } 
</script> 
 
 
Else, If you want to select the current li element for performing jQuery operations means we need to use the below code.  

var tabObj = $("#discount-edit").data("ejTab"); 
$(tabObj.items[tabObj.selectedItemIndex()]); 
 
Otherwise If you want to select the particular li element for performing jQuery operations means we can find the li using the below code.  

$("a[rel='nofollow' href=#AppliedToCategories]").closest("li"); 
 
Please let us know if you have any queries. 

Regards, 
Dhivyalakshmi. 


Ayane
Replied On October 20, 2016 11:13 AM

Dear Dhivyalakshmi,

Thanks a lot for the answered provided. It was suitable for me.

Regards,

Ayane

Dhivyalakshmi Thirumurugan [Syncfusion]
Replied On October 21, 2016 04:42 AM

Hi Ayane, 

Thanks for the update. 

We are glad to hear that your issue has been resolved. Please get back to us if you need any further assistance.    

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.

;