TabLayoutPanel disable a Tab GWT

Question

How can i disable a tab (i.e the user cannot open the tab when he clicks on it) in the TabLayoutPanel?I searched online but was not able to find a solution

Thanks

Jason Terk · Accepted Answer · 2014-10-15T21:43:21.073

10

Use a BeforeSelectionHandler:

TabLayoutPanel myPanel = new TabLayoutPanel();
// Add children...

myPanel.addBeforeSelectionHandler(new BeforeSelectionHandler<Integer>() {
  @Override
  public void onBeforeSelection(BeforeSelectionEvent<Integer> event) {
    // Simple if statement - your test for whether the tab should be disabled
    // will probably be more complicated
    if (event.getItem() == 1) {
      // Canceling the event prevents the tab from being selected.
      event.cancel();
    }
  }
});

If you want to style the disabled tab differently than enabled tabs, you can use TabLayoutPanel#getTabWidget to get the tab widget and add a style name to it.

edited Oct 15 '14 at 21:43

answered Feb 25 '11 at 22:12

Jason Terk

6,005
1
27
31

how do i enable it back again? – Barry Feb 28 '11 at 20:56
Only call event.cancel() in the BeforeSelectionHandler when you want the tab to be disabled. – Jason Terk Feb 28 '11 at 21:07
the requirement i have is that i need the tab to disable when the page which has the tab loads first time.But when something happens, i need to enable the tab again.How can i achieve this? – Barry Feb 28 '11 at 21:16
In the if statement in onBeforeSelection() test whether the tab should be disabled or not based on your application state. – Jason Terk Feb 28 '11 at 21:25
Yes,i have an if statement which disables the tab when the application loads.But after the application loads i need to enable the tab ,so i definitely need to change its state from disabled to enabled. – Barry Feb 28 '11 at 21:39
I got the solution.I just need to remove the handler in order to enable the Tab back .Thanks – Barry Mar 01 '11 at 16:19

Adam Nellis · Answer 2 · 2012-02-07T15:50:09.377

3

For anyone who comes across this later:

As of GWT version 1.6, disabling/enabling tabs is built into GWT. The TabBar class has a method setTabEnabled(int index, boolean enabled) that enables/disables the tab at a given index.

For example, to disable all the tabs in a TabPanel:

TabPanel myTabPanel = new TabPanel();
// Add children

TabBar tabBar = myTabPanel.getTabBar();
for(int i=0; i<tabBar.getTabCount(); i++) {
    tabBar.setTabEnabled(i, false);
}

See the GWT javadoc for more info.

To style disabled tabs differently (which GWT does automatically, but if you wanted to change the style): disabled tabBarItem divs are given another CSS class: gwt-TabBarItem-disabled.

edited Feb 07 '12 at 15:50

answered Feb 01 '12 at 15:00

Adam Nellis

1,500
1
16
23

1

The question was about the `TabLayoutPanel` type, not `TabBar`. – Jason Terk Feb 03 '12 at 19:04
@JasonTerk The `TabLayoutPanel` contains a `TabBar`! That is the part at the top of the `TabLayoutPanel` that holds the tabs. You can access the `TabBar` of a `TabLayoutPanel` by using `myTabLayoutPanel.getTabBar()` (see my answer). I've updated my answer to make this more clear. – Adam Nellis Feb 04 '12 at 17:22
There is no `getTabBar` method on the [`TabLayoutPanel`](http://google-web-toolkit.googlecode.com/svn/javadoc/2.4/com/google/gwt/user/client/ui/TabLayoutPanel.html) type. Perhaps you mean [`TabPanel`](http://google-web-toolkit.googlecode.com/svn/javadoc/2.4/com/google/gwt/user/client/ui/TabPanel.html)? – Jason Terk Feb 05 '12 at 02:58
@JasonTerk Oh yeah - oops, sorry! You're right - I do mean `TabPanel`. I've corrected my code. – Adam Nellis Feb 07 '12 at 15:51

score 0 · Answer 3 · edited Sep 23 '12 at 07:40

0

You can access tab style by casting class Tab to Widget

TabPanel tabPanel = new TabPanel();
((Widget)tabPanel().getTabBar().getTab(tabsToDisable.iterator().next())).addStyleName("disabled");

edited Sep 23 '12 at 07:40

biegleux

13,179
11
45
52

answered Sep 18 '12 at 09:08

Marko Mišković

51
1
5

TabLayoutPanel disable a Tab GWT

3 Answers3