Opened 11 years ago

Closed 7 years ago

Last modified 7 years ago

#5601 closed enhancement (fixed)

TabContainer: cannot disable tab buttons programatically

Reported by: ptwobrussell Owned by: bill
Priority: high Milestone: 1.8
Component: Dijit Version: 1.0
Keywords: Cc: ptwobrussell@…, cjolif
Blocked By: Blocking:

Description (last modified by bill)

As of r12021, I noticed that it was not possible to disable a tab programatically via the setDisabled(true) or setAttribute('disabled', true). To verify, I ran this code on the test page with all of the various tab containers:

dijit.registry.byClass("dijit.layout._TabButton").forEach(function(x) {x.setAttribute('disabled',true);});

wildbill noticed that in _TabButton.html, there is a connection that is not set up properly. The onclick:onClick part of the outermost dojoAttachEvent should actually be onclick:_onClick

So. With that fix in place, you can disable a tab using the original piece of code above. i.e. find the tab button by iterating over the registry and filtering it out. i.e.

var b;
dijit.registry.byClass("dijit.layout._TabButton").forEach(function(x) {if (x.label=="your tab button's label") b = x;});

//now disable it...
b.setAttribute('disabled', true);

Maybe there are cleaner ways of getting it done, but that one was the most obvious one to me.

At any rate, I think a great feature for a future release would be the ability to disable tab buttons a lot easier. It seems like something that's not an uncommon use case.

Attachments (1)

disabledTab.patch (1.2 KB) - added by Jonathan Bond-Caron 8 years ago.
Patch to prevent click on disabled tab

Download all attachments as: .zip

Change History (22)

comment:1 Changed 11 years ago by bill

(In [12049]) Call _onClick() rather than onClick() so that disabled tabs don't do anything. Still need to change CSS so disabled tabs look disabled, and have better way of disabling tabs then mucking with internal structures. Refs #5601.

comment:2 Changed 11 years ago by bill

Milestone: 1.0.31.2

We obviously need a better way to disable a tab button, as it's hard to find which button is associated with which tab panel. I guess you can just search for the label, but that's not ideal.

Also, there's a philosophical issue about whether you are disabling the button or the pane. It doesn't make a difference except for StackContainer? where there can be two StackControllers? (with the buttons), both pointing to the same StackContainer? (with the panes).

comment:3 Changed 11 years ago by bill

Summary: Cannot disable tab buttons programaticallyTabContainer: cannot disable tab buttons programatically

comment:4 Changed 11 years ago by bill

Description: modified (diff)
Milestone: 1.2future
Type: defectenhancement

comment:5 Changed 10 years ago by fl0

Can't we still apply the changeset mentioned above. It does not interfere with something else and it is the ONLY way to disable a tab today. Delivering better approaches later should not prevent enabling this functionality now. It is really cumbersome to patch each dojo release manually.

comment:6 Changed 10 years ago by dante

I have a working implementation of 'disabled tabs' here:

http://dante.dojotoolkit.org/static/xd/TabDisabled.html

works with 1.2 and 1.3. the 'disabled' function should likely be named _setDisabledAttr so that widget.attr('disabled', true) "disables" a contentpane in a tabcontainer. This complicates the process of moving a pane from one container to the other, but works just fine in simple tab cases.

comment:7 Changed 9 years ago by Enzo

I've tested your page dante, but it doesn't work on my FF 3.5 In fact, when tab2 is disabled, the tab3 contains the content of tab2 and tab3. As a result, i can read 'two oops' in tab3, but it should only print 'oops'

Any idea how to have a working code ?

The possibility to disable a tab is so useful...

Would be very nice to have this feature, like add disabled="true" in the contentpane markup...

Any idea is welcome !

comment:8 Changed 9 years ago by Enzo

Another thing, I've seen bill has made a modification in _TabButton.html at 12049 changeset (on 16/01/08)

However, on following changeset on this file (12099 on 20/01/08 by dante), a small template change has been made (just adding a new div)

AND, in the latter, the modification made by bill just before (onclick:onClick => onclick:_onClick) has been reverted... Maybe it's an error ?

Would be so nice, to have this change put again, as it seems to be the only way to disable tab...

PS: would be nice to put dante in Cc...

Thanks

comment:9 Changed 9 years ago by Paul Preston

FYI, i also ran in to the problem that enzo_4 mentioned about dante's code and content of other tabs disabling where they shouldn't. I did come up with a work around. Probably laughably inelegant, but it seems to be doing the trick.

First I did this in <head>:

dojo.extend(dijit.layout.ContentPane, {
	disabled: "false"
});

I also created two helper javascript functions:

disableTab = function(tabId) {
	if (dijit.byId(tabId)) {	
		dijit.byId(tabId).disabled = "true";
		dojo.addClass(dijit.byId(tabId).controlButton.domNode, "dijitTabDisabled");
	}
}

enableTab = function(tabId) {
	if (dijit.byId(tabId)) {
		dijit.byId(tabId).disabled = "false";
		dojo.removeClass(dijit.byId(tabId).controlButton.domNode, "dijitTabDisabled");
	}
}

and finally, I "override" selectChild on the TabContainer? like so:

<div dojoType="dijit.layout.TabContainer" id="thePanel" style="width: 715px; height: 800px">
<script type="dojo/method" event="selectChild" args="foo">
	var currentTab = this.selectedChildWidget;

	// if the selected tab is disabled, don't do anything
	if (foo.disabled == "true") {
		return;
	}	

	if (currentTab.id == foo.id) {
		// alert('same page, ignore!');
	}
	else {
		this._transition(foo, this.selectedChildWidget);
		this.selectedChildWidget = foo;
		dojo.publish(this.id+"-selectChild", [foo]);
	}
</script>
<div dojoType="dijit.layout.ContentPane"></div>
..
..
</div>

Oh, and I also have this style added, which isn't working 100% right now but is almost there:

<style type="text/css">
	.dijitTabDisabled,
	.dijitTabDisabled:hover { opacity:0.65; color:#ccc; 
		cursor: not-allowed !important}
</style>

I'm sure I'm violating many paradigms and best-practices when doing this, but it works.

Hoping this might save someone a ton of frustration. I just did a happy dance in my cube that I got this working, so I thought I'd share.

comment:10 Changed 9 years ago by Martin Vlk

Hi guys, I notice the "native" functionality for disabling individual tabs is not in place in 1.4.

Are there plans for including it in a future release? I would vote for doing so as soon as possible - if possible.

Many Thanks Martin

comment:11 Changed 8 years ago by Karl Tiedt

Resolution: fixed
Status: newclosed

(In [24421]) Fixes #5601 after being regressed 3 years ago

comment:12 Changed 8 years ago by bill

Milestone: future1.7

comment:13 Changed 8 years ago by bill

Resolution: fixed
Status: closedreopened

[24421] auses a regression, see #12762.

comment:14 Changed 8 years ago by bill

(In [24659]) Revert [24421], refs #5601, fixes #12762.

comment:15 Changed 8 years ago by bill

Milestone: 1.7future

Changed 8 years ago by Jonathan Bond-Caron

Attachment: disabledTab.patch added

Patch to prevent click on disabled tab

comment:16 Changed 8 years ago by Jonathan Bond-Caron

I posted a simple enough patch against 1.5.

It probably needs more refining but it's a start.

comment:17 Changed 8 years ago by Jonathan Bond-Caron

Small comment on "philosophical issue about whether you are disabling the button or the pane."

This patch would be about disabling the pane, so when clicking on the tab, the pane is not shown since it is disabled=true.

IMHO, as you suggest there should also be a way to disable to tab and likely add a "dijitTabDisabled" to the dijit.layout._StackButton.

Not sure about the right api here, something like: dijitTabControllerWidget.disableButton(tab, true);

comment:18 Changed 7 years ago by cjolif

Cc: cjolif added

comment:19 Changed 7 years ago by bill

Milestone: future1.8
Status: reopenedassigned

comment:20 Changed 7 years ago by bill

Resolution: fixed
Status: assignedclosed

In [28592]:

Support disabled tabs, fixes #5601 !strict.

Note that claro is the only theme that has a special grayed-out style for disabled tabs, and also for the disabled left/right arrow buttons (when the tabs are already scrolled all the way to the left/right).

comment:21 Changed 7 years ago by helloworld

We need this feature.

Note: See TracTickets for help on using tickets.