Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Horizontal scrollbar for treegrid inside tab and nesting layout

    Hi, I'm having difficulty kicking off the horizontal scrollbar for my treegrid. I've included bare-bones code down below, but basically I have a treegrid in a nesting layout inside of a tab layout. I have also included an expand tree button.

    First I make the window small (small enough to cut off horizontal text), then I click on the expand button, and the vertical scrollbar automatically appears, but the horizontal bar does not (for me at least).

    I've tried the commented out code right below, and I forgot the combinations, but sometimes I create a huge scrollbar vertically and/or horizontally for the whole layout. I would like the scrollbars to appear surrounding the treegrid and not include the expand button.

    Please take a look when you have a chance. Sorry for messy coding!



    Code:
    public void onModuleLoad() {
    		final TabSet menuTabs = new TabSet();
    		menuTabs.setTabBarPosition(Side.TOP);
    		menuTabs.setWidth100();
    		menuTabs.setHeight100();
    
    		// Test Tab ======================================================================
    		Tab builderTab = new Tab("Test");
    		HLayout mainLayout = new HLayout();
    		mainLayout.setWidth100();
    		mainLayout.setHeight100();
    		
    		// Left Pane-------------------------------------------------
    		// Assembling Tree
    		final Tree testTree = new Tree();
    		testTree.setRoot(treeData); 
    		
    		final TreeGrid treeGrid = new TreeGrid();
    		treeGrid.setData(testTree);
    		treeGrid.setWidth("100%");
    		treeGrid.setHeight("100%");
    		treeGrid.setFields(new TreeGridField("Name", "100%"));
    //		treeGrid.setOverflow(Overflow.AUTO);			// this doesn't appear to do anything extra
    //		treeGrid.setAutoFitData(Autofit.BOTH);			// this makes a huge scrollbar to the right and scrolls button
    //		treeGrid.setAutoFitData(Autofit.HORIZONTAL);	// this doesn't appear to do anything extra
    //		treeGrid.setAutoFitData(Autofit.VERTICAL);		// this makes a huge scrollbar to the right and scrolls button
    		
    		Label testTreePane = new Label();
    		testTreePane.setWidth("50%");
    		testTreePane.setHeight("100%");
    		
    		// expand button
    		final IButton expandButton = new IButton("Expand");
    		expandButton.addClickHandler(new ClickHandler() {
    			public void onClick(ClickEvent event) {
    				treeGrid.getTree().openAll();
    				treeGrid.redraw();
    			}
    		});
    		// End left pane ---------------------------------------------
    
    		// Right Pane ---------------------------------------------
    		// Top Pane
    		VStack verticalLayout = new VStack();
    		verticalLayout.setWidth("50%");
    
    		Label rightTopPane = new Label();
    		rightTopPane.setHeight("50%");
    		rightTopPane.setContents("other stuff goes in here");
    		rightTopPane.setBorder("1px solid #000000");
    		
    		// Bottom Pane
    		final Label rightBottomPane = new Label();
    		rightBottomPane.setHeight("50%");
    		rightBottomPane.setBorder("1px solid #000000");
    		rightBottomPane.setContents("and here");
    		
    		// End right pane ------------------------------------------
    		
    		// Assemble layout ---------------------------------------------
    		HLayout treeButtonsLayout = new HLayout();
    		treeButtonsLayout.addMember(expandButton);
    		
    		VLayout leftPaneLayout = new VLayout();
    		leftPaneLayout.setWidth("100%");
    		leftPaneLayout.setHeight("100%");
    		
    		leftPaneLayout.addMember(treeGrid);
    		leftPaneLayout.addMember(treeButtonsLayout);
    		
    		testTreePane.addChild(leftPaneLayout);
    		
    		mainLayout.addMember(testTreePane);
    		
    		verticalLayout.addMember(rightTopPane);
    		verticalLayout.addMember(rightBottomPane);
    		
    		mainLayout.addMember(verticalLayout);
    		
    		builderTab.setPane(mainLayout);
    		
    		menuTabs.addTab(builderTab);
    		menuTabs.draw();
    	}
    	
    	public static class PartsTreeNode extends TreeNode {
    		public PartsTreeNode(String name, String icon) {
    			this(name, icon, new PartsTreeNode[] {});
    		}
    
    		public PartsTreeNode(String name, PartsTreeNode... children) {
    			this(name, null, children);
    		}
    
    		public PartsTreeNode(String name, String icon, PartsTreeNode... children) {
    			setAttribute("Name", name);
    			setAttribute("children", children);
    			if (icon != null)
    				setAttribute("icon", icon);
    		}
    	}
    	
    	PartsTreeNode treeData = new PartsTreeNode("Root",
    			new PartsTreeNode("Welcome message ima cranky old yank in a clanky old tank in the streets of yokohama with mmy honolulu mama singing seato seato flat on my feato hirohito blues"),
    			new PartsTreeNode("Choice A", 
    				new PartsTreeNode("What type of sandwich would you like?", 
    					new PartsTreeNode("Are you a good witch or a bad witch? "),
    			new PartsTreeNode("Choice A", 
    				new PartsTreeNode("What type of sandwich would you like?", 
    					new PartsTreeNode("Are you a good witch or a bad witch? This is the song that never ends. Yes it goes on and on my friends. Some people started singing it not knowing what it was...")),
    			new PartsTreeNode("Choice A", 
    				new PartsTreeNode("What type of sandwich would you like?", 
    					new PartsTreeNode("Are you a good witch or a bad witch? ")),
    			new PartsTreeNode("Choice A", 
    				new PartsTreeNode("What type of sandwich would you like?", 
    					new PartsTreeNode("Are you a good witch or a bad witch? ")),
    					new PartsTreeNode("Choice A", 
    							new PartsTreeNode("What type of sandwich would you like?", 
    								new PartsTreeNode("Are you a good witch or a bad witch? ")),
    						new PartsTreeNode("Choice A", 
    							new PartsTreeNode("What type of sandwich would you like?", 
    								new PartsTreeNode("Are you a good witch or a bad witch? ")),
    								new PartsTreeNode("Choice A", 
    										new PartsTreeNode("What type of sandwich would you like?", 
    											new PartsTreeNode("Are you a good witch or a bad witch? ")),
    									new PartsTreeNode("Choice A", 
    										new PartsTreeNode("What type of sandwich would you like?", 
    											new PartsTreeNode("Are you a good witch or a bad witch? ")),
    									new PartsTreeNode("Choice A", 
    											new PartsTreeNode("What type of sandwich would you like?", 
    												new PartsTreeNode("Are you a good witch or a bad witch? ")),
    										new PartsTreeNode("Choice A", 
    											new PartsTreeNode("What type of sandwich would you like?", 
    												new PartsTreeNode("Are you a good witch or a bad witch? "))
    	))))))))))));

    #2
    Set the TreeGrid to autofitdata and put it inside it's own container (separate from the button) with overflow set to auto.

    Comment


      #3
      Thank you for the fast response! It is soooooo close!

      This is what I did:

      final TreeGrid treeGrid = new TreeGrid();
      treeGrid.setData(testTree);
      treeGrid.setWidth("100%");
      treeGrid.setHeight("100%");
      treeGrid.setFields(new TreeGridField("Name", "100%"));
      treeGrid.setAutoFitData(Autofit.BOTH);

      Layout treeLayout = new Layout();
      treeLayout.setHeight("100%");
      treeLayout.setWidth("100%");
      treeLayout.setOverflow(Overflow.AUTO);
      treeLayout.addChild(treeGrid);

      Now a horizontal scrollar bar shows up when I hit expand, but doesn't move enough to see the whole tree. Updated code included below.

      Code:
      public void onModuleLoad() {
      		final TabSet menuTabs = new TabSet();
      		menuTabs.setTabBarPosition(Side.TOP);
      		menuTabs.setWidth100();
      		menuTabs.setHeight100();
      
      		// Test Tab ======================================================================
      		Tab builderTab = new Tab("Test");
      		HLayout mainLayout = new HLayout();
      		mainLayout.setWidth100();
      		mainLayout.setHeight100();
      		
      		// Left Pane-------------------------------------------------
      		// Assembling Tree
      		final Tree testTree = new Tree();
      		testTree.setRoot(treeData); 
      		
      		final TreeGrid treeGrid = new TreeGrid();
      		treeGrid.setData(testTree);
      		treeGrid.setWidth("100%");
      		treeGrid.setHeight("100%");
      		treeGrid.setFields(new TreeGridField("Name", "100%"));
      		treeGrid.setAutoFitData(Autofit.BOTH);
      		
      		Layout treeLayout = new Layout();
      		treeLayout.setHeight("100%");
      		treeLayout.setWidth("100%");
      		treeLayout.setOverflow(Overflow.AUTO);
      		treeLayout.addChild(treeGrid);
      		
      		Label testTreePane = new Label();
      		testTreePane.setWidth("50%");
      		testTreePane.setHeight("100%");
      		
      		// expand button
      		final IButton expandButton = new IButton("Expand");
      		expandButton.addClickHandler(new ClickHandler() {
      			public void onClick(ClickEvent event) {
      				treeGrid.getTree().openAll();
      				treeGrid.redraw();
      			}
      		});
      		// End left pane ---------------------------------------------
      
      		// Right Pane ---------------------------------------------
      		// Top Pane
      		VStack verticalLayout = new VStack();
      		verticalLayout.setWidth("50%");
      
      		Label rightTopPane = new Label();
      		rightTopPane.setHeight("50%");
      		rightTopPane.setContents("other stuff goes in here");
      		rightTopPane.setBorder("1px solid #000000");
      		
      		// Bottom Pane
      		final Label rightBottomPane = new Label();
      		rightBottomPane.setHeight("50%");
      		rightBottomPane.setBorder("1px solid #000000");
      		rightBottomPane.setContents("and here");
      		
      		// End right pane ------------------------------------------
      		
      		// Assemble layout ---------------------------------------------
      		HLayout treeButtonsLayout = new HLayout();
      		treeButtonsLayout.addMember(expandButton);
      		
      		VLayout leftPaneLayout = new VLayout();
      		leftPaneLayout.setWidth("100%");
      		leftPaneLayout.setHeight("100%");
      		
      		leftPaneLayout.addMember(treeLayout);
      		leftPaneLayout.addMember(treeButtonsLayout);
      		
      		testTreePane.addChild(leftPaneLayout);
      		
      		mainLayout.addMember(testTreePane);
      		
      		verticalLayout.addMember(rightTopPane);
      		verticalLayout.addMember(rightBottomPane);
      		
      		mainLayout.addMember(verticalLayout);
      		
      		builderTab.setPane(mainLayout);
      		
      		menuTabs.addTab(builderTab);
      		menuTabs.draw();
      	}
      	
      	public static class PartsTreeNode extends TreeNode {
      		public PartsTreeNode(String name, String icon) {
      			this(name, icon, new PartsTreeNode[] {});
      		}
      
      		public PartsTreeNode(String name, PartsTreeNode... children) {
      			this(name, null, children);
      		}
      
      		public PartsTreeNode(String name, String icon, PartsTreeNode... children) {
      			setAttribute("Name", name);
      			setAttribute("children", children);
      			if (icon != null)
      				setAttribute("icon", icon);
      		}
      	}
      	
      	PartsTreeNode treeData = new PartsTreeNode("Root",
      			new PartsTreeNode("Welcome message ima cranky old yank in a clanky old tank in the streets of yokohama with mmy honolulu mama singing seato seato flat on my feato hirohito blues"),
      			new PartsTreeNode("Choice A", 
      				new PartsTreeNode("What type of sandwich would you like?", 
      					new PartsTreeNode("Are you a good witch or a bad witch? "),
      			new PartsTreeNode("Choice A", 
      				new PartsTreeNode("What type of sandwich would you like?", 
      					new PartsTreeNode("Are you a good witch or a bad witch? This is the song that never ends. Yes it goes on and on my friends. Some people started singing it not knowing what it was...")),
      			new PartsTreeNode("Choice A", 
      				new PartsTreeNode("What type of sandwich would you like?", 
      					new PartsTreeNode("Are you a good witch or a bad witch? ")),
      			new PartsTreeNode("Choice A", 
      				new PartsTreeNode("What type of sandwich would you like?", 
      					new PartsTreeNode("Are you a good witch or a bad witch? ")),
      					new PartsTreeNode("Choice A", 
      							new PartsTreeNode("What type of sandwich would you like?", 
      								new PartsTreeNode("Are you a good witch or a bad witch? ")),
      						new PartsTreeNode("Choice A", 
      							new PartsTreeNode("What type of sandwich would you like?", 
      								new PartsTreeNode("Are you a good witch or a bad witch? ")),
      								new PartsTreeNode("Choice A", 
      										new PartsTreeNode("What type of sandwich would you like?", 
      											new PartsTreeNode("Are you a good witch or a bad witch? ")),
      									new PartsTreeNode("Choice A", 
      										new PartsTreeNode("What type of sandwich would you like?", 
      											new PartsTreeNode("Are you a good witch or a bad witch? ")),
      									new PartsTreeNode("Choice A", 
      											new PartsTreeNode("What type of sandwich would you like?", 
      												new PartsTreeNode("Are you a good witch or a bad witch? ")),
      										new PartsTreeNode("Choice A", 
      											new PartsTreeNode("What type of sandwich would you like?", 
      												new PartsTreeNode("Are you a good witch or a bad witch? "))
      	))))))))))));

      Comment


        #4
        The approach is correct; simplify your code and get rid if your redundant size settings (it's not necessary to set width/height 100% in almost all of the case where you are doing so, and this has slightly different meaning from leaving it unset). Use the Watch tab to understand all the component sizes.

        Comment


          #5
          alo,

          I also had the problem that the scrollbar does not move enough to see the whole tree.

          I resolved this problem by calling TreeGrid.setFixedFieldWidths(false). This makes sure that the tree expands horizontally to show the whole content

          Comment


            #6
            I'm trying to get my tree to scroll horizontally also. Shouldn't it just be a matter of setting the overflow to AUTO? This isn't working. What other factors are in play here?

            Code:
            treeGrid.setWidth(260);
            treeGrid.setHeight(555);
            treeGrid.setOverflow(Overflow.AUTO);

            Comment


              #7
              After a more careful review of the posts in this thread, I'm able to get quite close to pulling this off.

              In my case, I implemented the following. On my TreeGrid, I specified these two settings:

              Code:
              myGrid.setAutoFitData(true);
              myGrid.setFixedFieldWidths(false);
              Then, in the layout where the tree is included, I added a new layout, set it's overflow to AUTO and then appended my TreeGrid to it.

              Code:
              Layout treeLayout = new Layout();
              treeLayout.setOverflow(Overflow.AUTO);
              treeLayout.addChild(myTreeGrid);
              Although this is functional, I'm still not aware of what setting I could use that would allow for the tree to only scroll horizontally or vertically, as needed. As it is, once the horizontal scroll bar shows up, so does the vertical one, even if it's not needed.

              Comment

              Working...
              X