#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: | [email protected]…, cjolif | |
| Blocked By: | Blocking: |
Description (last modified by )
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)
Change History (22)
comment:1 Changed 14 years ago by
comment:2 Changed 14 years ago by
| Milestone: | 1.0.3 → 1.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 14 years ago by
| Summary: | Cannot disable tab buttons programatically → TabContainer: cannot disable tab buttons programatically |
|---|
comment:4 Changed 13 years ago by
| Description: | modified (diff) |
|---|---|
| Milestone: | 1.2 → future |
| Type: | defect → enhancement |
comment:5 Changed 13 years ago by
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 12 years ago by
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 12 years ago by
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 12 years ago by
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 12 years ago by
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 11 years ago by
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 11 years ago by
| Resolution: | → fixed |
|---|---|
| Status: | new → closed |
comment:12 Changed 11 years ago by
| Milestone: | future → 1.7 |
|---|
comment:13 Changed 11 years ago by
| Resolution: | fixed |
|---|---|
| Status: | closed → reopened |
comment:15 Changed 10 years ago by
| Milestone: | 1.7 → future |
|---|
comment:16 Changed 10 years ago by
I posted a simple enough patch against 1.5.
It probably needs more refining but it's a start.
comment:17 Changed 10 years ago by
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 9 years ago by
| Cc: | cjolif added |
|---|
comment:19 Changed 9 years ago by
| Milestone: | future → 1.8 |
|---|---|
| Status: | reopened → assigned |
(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.