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

[Ayane]

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]

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. 

UG Link: https://help.syncfusion.com/aspnetmvc/tab/getting-started 

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]

Dear Dhivyalakshmi,

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

Regards,

Ayane

[Dhivyalakshmi Thirumurugan]

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.