AjaxToolKit TabControl Disabled Tab

I just finished an interesting project that involved the AjaxToolKit’s Tab control.  The first part of my assignment was to make the Tabs start about 160 pixels to the right of the left side of the container.  Nothing a little CSS along with some nice interactive work with FireBug can’t take care of.  And sure enough, I got that all running pretty quickly.  The second part of the assignment was to make the far right tab visible, but disabled.

Now, you’d think a control that had a Enabled property and a Visible property would allow Enabled = false to display but be grayed out.  But if you thought that about the Tab control, you’d be wrong.  However, with an afternoon of snooping and a little help from jQuery, I was able to achieve the effect I was looking for.

The first thing I thought of doing once I figured out that Enabled=false wasn’t going to do the trick was to use FireBug to find out how to select the tab with a jQuery selector statement.  Once I had that, I could make the text gray and maybe trap the click event.

Admittedly, I knew, trapping the click event was a long shot, but I ought to be able to make the text gray.  So I set up the code to select the span tags under the 4th tab and set the color to gray:

$(document).ready(function() {

    var forthTab;
    forthTab = $(".ajax__tab_header > span:eq(3) span");
    forthTab.css('color', 'gray');

});

pretty straightforward code.

BTW, we are using > to make the selector look for the forth span tag that is a direct descender of the .ajax__tab_header class.  Otherwise we’d end up picking one of the span tags under the first tab.  Not exactly what we had in mind.

But when I ran the code nothing happened.  I even went so far as to put an alert() in to verify that the code was running.  Still nothing.  Then I put an alert in to see what the contents of the selected item were:

alert(forthTab.html());

When I did that, it displayed “null” in the alert box.  But I noticed something else.  The tab didn’t display until after I closed the alert box.  I did a View > Source in Internet Explorer (because it shows the source as it came from the server) and found that the HTML in the source did not match the DOM model I was working with.  So the only way I was going to be able to get this to work would be to either modify the source (didn’t work) or wait for the tab control to display and modify it.

This means I need to use the javascript setTimeout() function to call the jQuery code above and I’m also going to need to have the jQuery code check to see if the tab exists prior to trying to do anything with it.

To get the text to display as Gray, my code needed to be modified to look like this:

$(document).ready(function() {

    var initializeTabs;
    initializeTabs = function() {
        var forthTab;
        forthTab = $(".ajax__tab_header > span:eq(3) span");
        if (forthTab.html() != null) {
            forthTab.css('color', 'gray');
        }
        else
            setTimeout(initializeTabs, 200);
    }
    setTimeout(initializeTabs, 200);

});

You’ll see that initializeTabs is set to point to the function that checks for the forthTab’s existence and then set the color.  If it isn’t there, I call setTimeout and have it call the function back in 2/10ths of a second.  The last line of code kicks everything off by telling javascript to call the function in 2/10ths of a second.

Great, I got that much working.  So now how to prevent the tab from being selected?  I tried several different things that didn’t work which I won’t bore you with.  I will tell you that by the time the initializeTabs code runs, the events have already been wired up to the tabs.  What we need is some way of unwiring those events without being too intrusive about it.

The best way I found, and actually it is pretty simple, is to get the HTML from the inner tab as a string, not the object.  If you get the inner objects, the events will still be wired up.  Then we replace the HTML of the tab with the HTML we retrieved.  Doing that leaves us with all the HTML code we need for rendering but does not wire the events back up:

$(document).ready(function() {

    var initializeTabs;
    initializeTabs = function() {
        var forthTab;
        forthTab = $(".ajax__tab_header > span:eq(3) span");
        if (forthTab.html() != null) {
            forthTab.css('color', 'gray');
            var outer = $(".ajax__tab_header > span:eq(3)");
            outer.html(outer.html());
        }
        else
            setTimeout(initializeTabs, 200);
    }
    setTimeout(initializeTabs, 200);

});

The final step is to change the cursor for the tab’s text to an arrow.  To do that, we add .css(‘cursor’,’default’) to the end of forthTab.css(‘color’,’gray’)

$(document).ready(function() {

    var initializeTabs;
    initializeTabs = function() {
        var forthTab;
        forthTab = $(".ajax__tab_header > span:eq(3) span");
        if (forthTab.html() != null) {
            forthTab.css('color', 'gray')
                .css('cursor','default');
            var outer = $(".ajax__tab_header > span:eq(3)");
            outer.html(outer.html());
        }
        else
            setTimeout(initializeTabs, 200);
    }
    setTimeout(initializeTabs, 200);

});

and that’s how you make a tab disabled.  And since I don’t have to worry about how to make it enabled again, I’ll leave that as an unsolved problem for now.

Related Post

  • Tab Control ActiveTabIndex Lost on PostbackTab Control ActiveTabIndex Lost on Postback I just got off the phone with a client who is using the MS-AJAX TabControl in one of his applications and any time he causes a postback, the tab resets to the first tab. If you've never seen the p...
  • WinForms – Change The Active TabWinForms – Change The Active Tab This question came in last Friday: I'm trying to code a windows form in vb.net 2005. In my form I have 2 TabControls and a command button. The button is in the first TabControl, so what I want to...
  • DotNetNuke Modules – Creating Base ModulesDotNetNuke Modules – Creating Base Modules Now that we have DotNetNuke installed into Visual Studio we can go ahead and create our first modules. Actually, creating the modules is pretty simple. But it is even easier to do it wrong, which...
  • jQuery – Date PickerjQuery – Date Picker Today we’ll start taking a look at the final control in the jQuery UI suite.  The Date Picker. This control, as with all the other controls we’ve looked at, is relatively simple as long as...
  • jQuery UI – Resizable w/ ASP.NET ThemesjQuery UI – Resizable w/ ASP.NET Themes If you've been up to the jQuery web site and looked at the documentation for resizable() you probably thought, "hey, no problem, I can do that."  Well, that's what I thought, too, until I started ...
  • Terry

    The AJAX toolkit is nice, but I have found that I can do just about everything I want with JQuery and it’s much faster then the AJAX ToolKit.

    The JQuery tabs work great and it’s much easier to disable them. Here are the tabs:

    http://docs.jquery.com/UI/Tabs

    Here is how to disable them:

    $(document).ready(function(){
    $(“#yourtabs > ul”).tabs({ fxFade: true, fxSpeed: ‘fast’ });
    if (getQueryVariable(‘id’) === undefined)
    {
    $(“#yourtabs”).tabs({ disabled: [1, 2, 3, 4, 5] });
    }
    });

  • Dave

    Yes, if I had it to do over again, I’d probably use jQuery tabs. However, this is an addition to existing code. There is something to be said for consitency within a code base that trumps switch to jQuery in mid stream.