How to: set background color for TreeItem?

[joster]

Hello-

I have a tree widget shown as follows

Fruits
Apple
Red apple
Yellow apple
Orange
Vegetable
Okra
Chili

Now, I would like to set the background color TreeItems, such that it
spans the entire length (in x-direction) of tree widget. I am using
the following method:

public void setTreeItemBackgroundColor(final TreeItem t, final String
color) {
Element table = DOM.getFirstChild(t.getElement());
Element tbody = DOM.getFirstChild(table);
Element tr = DOM.getFirstChild(tbody);
DOM.setStyleAttribute(tr, "backgroundColor", color);
}

This does set the background color, but only for the extent of
TreeItem text and not the entire x-direction of tree widget. See
picture below:

<------------------------> // This is what I want, I want
background color till full x-extent of tree
<-----> // I am getting background color
till here, only till where text is
Fruits
Apple
Red apple
Yellow apple
Orange
Vegetable
Okra
Chili

How can I achieve this? Thanks in advance.

Joster

[krispy]

.gwt-Tree .gwt-TreeItem {
background-color: blue;
}

Does that do what you want it to do?

-krispy

[joster]

Sorry, it doesn't. I tried this approach.

I want the entire row back-ground color to be set, not just the text
portion of the row. Let me know if my description is unclear.

Joster

[sunnybaek]

Do you mean this?

// BackGround
.gwt-Tree {
background-color: darkred;
}

// Text ITEM
.gwt-Tree .gwt-TreeItem {
font-size: 80%;
background-color: olivedrab;
cursor: default;
}

// Selected Text Item
.gwt-Tree .gwt-TreeItem-selected {
background-color: red;

[sunnybaek]

Or this ????

===================================================================
package com.mycompany.project.client;

import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Tree;
import com.google.gwt.user.client.ui.TreeItem;

public class test extends Composite {

public test() {

final HorizontalPanel horizontalPanel = new
HorizontalPanel();
initWidget(horizontalPanel);

final Tree tree = new Tree();
horizontalPanel.add(tree);
tree.setSize("0", "0");

final TreeItem treeItem = new TreeItem("New item");
tree.addItem(treeItem);

final TreeItem treeItem_1 = new TreeItem("New item");
treeItem.addItem(treeItem_1);

final TreeItem treeItem_4 = new TreeItem("New item");
treeItem_1.addItem(treeItem_4);

final TreeItem treeItem_2 = new TreeItem("New item");
tree.addItem(treeItem_2);

final TreeItem treeItem_3 = new TreeItem("New item");
tree.addItem(treeItem_3);
}

}

===========================================================================
public class MainEntryPoint implements EntryPoint {
private Button clickMeButton;
public void onModuleLoad() {
test tree = new test();
tree.setWidth("100%");
tree.setHeight("100%");

RootPanel.get().add(tree);
}
}

===========================================

On 9월5일, 오후1시04분, sunnybaek <sunnyb...@epozen.com> wrote:
> Or this ????
>
> ===================================================================
> package com.mycompany.project.client;
>
> import com.google.gwt.user.client.ui.Composite;
> import com.google.gwt.user.client.ui.HorizontalPanel;
> import com.google.gwt.user.client.ui.Tree;
> import com.google.gwt.user.client.ui.TreeItem;
>
> public class test extends Composite {
>
> public test() {
>
> final HorizontalPanel horizontalPanel = new HorizontalPanel();
> initWidget(horizontalPanel);
>
> final Tree tree = new Tree();
> horizontalPanel.add(tree);
> tree.setSize("0", "0");
>
> final TreeItem treeItem = new TreeItem("New item");
> tree.addItem(treeItem);
>
> final TreeItem treeItem_1 = new TreeItem("New item");
> treeItem.addItem(treeItem_1);
>
> final TreeItem treeItem_4 = new TreeItem("New item");
> treeItem_1.addItem(treeItem_4);
>
> final TreeItem treeItem_2 = new TreeItem("New item");
> tree.addItem(treeItem_2);
>
> final TreeItem treeItem_3 = new TreeItem("New item");
> tree.addItem(treeItem_3);
> }
>
> }
>
> ===================================================================

[joster]

Thanks for help. This isn't what I am looking for.

Tree widget adds indentation to child nodes (and its child ...). So, I
want the entire x-extent to be have a background color.
For example

<------------> // Background-color for TreeItem == Fruit
Fruit
Apple
Orange

Joster

[John Webster]

To demo example of what I want, I have attached a picture, hope this adds clarity to my request.

Joster

>                 tree.setSize ("0", "0");

> > > > > >   DOM.setStyleAttribute (tr, "backgroundColor", color);

[Roslan]

Have you tried putting the Tree inside a VerticalPanel and setting the
background color for the VerticalPanel?
Roslan

On Sep 5, 3:18 pm, "John Webster" <joster.j...@gmail.com> wrote:
> To demo example of what I want, I have attached a picture, hope this adds
> clarity to my request.
>
> Joster
>

> > > > > > > > DOM.setStyleAttribute(tr, "backgroundColor", color);

>
> > > > > > > > }
>
> > > > > > > > This does set the background color, but only for the extent of
> > > > > > > > TreeItem text and not the entire x-direction of tree widget.
> > See
> > > > > > > > picture below:
>
> > > > > > > > <------------------------> // This is what I want,
> > I want
> > > > > > > > background color till full x-extent of tree
> > > > > > > > <-----> // I am getting
> > background color
> > > > > > > > till here, only till where text is
> > > > > > > > Fruits
> > > > > > > > Apple
> > > > > > > > Red apple
> > > > > > > > Yellow apple
> > > > > > > > Orange
> > > > > > > > Vegetable
> > > > > > > > Okra
> > > > > > > > Chili
>
> > > > > > > > How can I achieve this? Thanks in advance.
>
> > > > > > > > Joster
>
>
>

> tree.png
> 5KViewDownload

[John Webster]

Thanks.

If I put the Tree inside VerticalPanel and set its background color, the entire tree changes its background color. I only want to set background color for TreeItems (not the entire tree).

Joster

[Chad Bourque]

Joster,

 

Just put the TreeItems in the VerticalPanel (many VPs) and add the VPs to the Tree.

 

HTH,

Chad

 

--
There are two types of people in the world:
  * Those who need closure

[John Webster]

Hi Chad-

Still no luck. Here is what I did:

============================================
private Widget getItemText(final String text) {
    
      // Create a vertical panel and add the text inisde of it
      VerticalPanel vPanel = new VerticalPanel();
     
      HTMLPanel htmlPanel = new HTMLPanel(text);
      htmlPanel.setStyleName("giraffe-TreeItemText");
     
      vPanel.add(htmlPanel);

      return vPanel;
}
============================================

To use this function:
  TreeItem treeItem = new TreeItem(getItemText(name));
  setTreeItemBackgroundColor(treeItem);
  tree.add (treeItem);

To change the color:
  public void setTreeItemBackgroundColor(final TreeItem t) {    
      Widget w = t.getWidget();
      w.setStyleName("TreeItemBackground");
  }

And my CSS is:

  .TreeItemBackground {
    background-color: yellow;
  }


Am I doing something wrong?

Joster

[Roslan]

Try setting the width to 100% in your style:

.TreeItemBackground {
background-color: yellow;
width: 100%;
}

> On 9/5/07, Chad Bourque <chad...@gmail.com> wrote:
>
>
>
> > Joster,
>
> > Just put the TreeItems in the VerticalPanel (many VPs) and add the VPs to
> > the Tree.
>
> > HTH,
> > Chad
>

> > On 9/5/07, John Webster <joster.j...@gmail.com> wrote:
>
> > > Thanks.
>
> > > If I put the Tree inside VerticalPanel and set its background color, the
> > > entire tree changes its background color. I only want to set background
> > > color for TreeItems (not the entire tree).
>
> > > Joster
>

> ...
>
> read more »

[joster]

Thanks. I did that too, still no luck.

Help anyone?

Joster

> ...
>
> read more

[Peter Blazejewicz]

hi,
we could add "TABLE" selected to .gwt-Tree (yes, here, not to Item)
css but that is not what we want I think,
the problem is that Tree/TreeItem is set of DIVS/SPAN with TABLE
elements in it which not certainly works as you want,
have you considered using set of DisclosurePanel(s) to have the same
functionality but in different design solution?
regards,
Peter