TabContainer & TabPanel - html attributes

Question

User-1466119671 posted

I'm trying to get set an html attribute in a tabpanel.

Here is the tabcontainer and the first tabpanel below.  I am trying to set an attribute on the <a> tag of the tabpanel.  I use the tpStage.Attributes.Add("aria-selected", "true") command.  This sets the attribute on a <div> tag that contains the actual content.  I get why that happens, but how do I set the attribute on the <a> tag of the tabpanel instead of the content of the tabpanel?  TIA

<actk:TabContainer ID="tcMain" runat="server"
OnActiveTabChanged="tcMain_ActiveTabChanged"
AutoPostBack="true" CssClass="MyTabStyle" role="tablist">
<actk:TabPanel HeaderText="Stage"
runat="server" ID="tpStage" AccessKey="2">

<HeaderTemplate>
Stage
</HeaderTemplate>
<ContentTemplate>

The result html is:

<div id="ContentPlaceHolder1_tcMain" class="MyTabStyle" role="tablist" style="visibility:hidden;">
	<div id="ContentPlaceHolder1_tcMain_header" class="ajax__tab_header">
	<span id="ContentPlaceHolder1_tcMain_tpStage_tab" class="ajax__tab"><span class="ajax__tab_outer"><span class="ajax__tab_inner"><a class="ajax__tab_tab" id="__tab_ContentPlaceHolder1_tcMain_tpStage" href="#" style="text-decoration:none;"><span>
	Stage
	</span></a></span></span></span><span id="ContentPlaceHolder1_tcMain_tpIssues_tab" class="ajax__tab"><span class="ajax__tab_outer"><span class="ajax__tab_inner"><a class="ajax__tab_tab" id="__tab_ContentPlaceHolder1_tcMain_tpIssues" href="#" style="text-decoration:none;"><span>
	Issues
	</span></a></span></span></span><span id="ContentPlaceHolder1_tcMain_tpMonitoring_tab" class="ajax__tab"><span class="ajax__tab_outer"><span class="ajax__tab_inner"><a class="ajax__tab_tab" id="__tab_ContentPlaceHolder1_tcMain_tpMonitoring" href="#" style="text-decoration:none;"><span>
	Monitoring
	</span></a></span></span></span><span id="ContentPlaceHolder1_tcMain_tpStatus_tab" class="ajax__tab"><span class="ajax__tab_outer"><span class="ajax__tab_inner"><a class="ajax__tab_tab" id="__tab_ContentPlaceHolder1_tcMain_tpStatus" href="#" style="text-decoration:none;"><span>
	Status
	</span></a></span></span></span><span id="ContentPlaceHolder1_tcMain_tpRecipient_tab" class="ajax__tab"><span class="ajax__tab_outer"><span class="ajax__tab_inner"><a class="ajax__tab_tab" id="__tab_ContentPlaceHolder1_tcMain_tpRecipient" href="#" style="text-decoration:none;"><span>
	Recipient
	</span></a></span></span></span><span id="ContentPlaceHolder1_tcMain_tpContacts_tab" class="ajax__tab"><span class="ajax__tab_outer"><span class="ajax__tab_inner"><a class="ajax__tab_tab" id="__tab_ContentPlaceHolder1_tcMain_tpContacts" href="#" style="text-decoration:none;"><span>
	Contacts
	</span></a></span></span></span><span id="ContentPlaceHolder1_tcMain_tpComplainant_tab" class="ajax__tab"><span class="ajax__tab_outer"><span class="ajax__tab_inner"><a class="ajax__tab_tab" id="__tab_ContentPlaceHolder1_tcMain_tpComplainant" href="#" style="text-decoration:none;"><span>
	Complainant
	</span></a></span></span></span><span id="ContentPlaceHolder1_tcMain_tpOCRStaff_tab" class="ajax__tab"><span class="ajax__tab_outer"><span class="ajax__tab_inner"><a class="ajax__tab_tab" id="__tab_ContentPlaceHolder1_tcMain_tpOCRStaff" href="#" style="text-decoration:none;"><span>
	OCR Staff
	</span></a></span></span></span>
	</div><div id="ContentPlaceHolder1_tcMain_body" class="ajax__tab_body" style="display:block;">
	<div id="ContentPlaceHolder1_tcMain_tpStage" accesskey="2" aria-selected="true" class="ajax__tab_panel">

Answer 1

User-1330468790 posted

Hi Wallym,

 

Currently I am afraid that you cannot directly change the header for the tab container. As you can see, if you access the tab, every attribute you add will be applied on the content div. It is a by-design behavior.

  

If you simply want to add the attribute on the <a> tag, one workaround is using javascript to find the target <a> tag in the active tab and assign it with the "aria_selected" attribute.

For example, since you do post back every time the user click the tab header, you could add the attribute when the page is loaded.

<script type="text/javascript">
        $(function () {
            var tabHeader = $('.ajax__tab_active');

            var tabAnchor = tabHeader.find("a[class=ajax__tab_tab]");

            tabAnchor.attr("aria-selected","true");
        });
    </script>

 

Hope this can help you.

Best regards,

Sean
 

Answer 2

User-1466119671 posted

Thank you for the info and the js code.  :-)

Wally

Answer 3

User-1330468790 posted

Hi Wallym,

  

I would be glad if it could help you.

If you still meet problems, you can post it here and people here will be happy to solve the problem.

If you find that the answer does solve your issues, I suggest you mark the answer. This will help other people who faces the same issue to find the right answer faster.

 

Thank you for understanding.

Best regards,

Sean

Answer 4

User-1466119671 posted

It worked perfectly.  Thanks.

Answer 5

User-1466119671 posted

Ok, so one add in to this, and it is important.  The underline and the attributes seem to work fine in the pageLoaded client side asp.net ajax client side javascript event, but they only seem to work right the first time.  I also had to add this code to run on the end request client side event.  The interesting thing is that the end request event didn't run on the first load of the page, which actually makes since end request only runs after an async page request.  Bottom line, I had to run this in both events.  I just created a new method and called that method from both events that I setup.  Hopefully, some of this helps.  :-)