Change TreeNode colors

I have a treeGrid where I want the nodes text to change color depending on the content of the model. I've tried doing this with a TreeView:

Code:

---

        TreeGridView view = new TreeGridView();
        view.setViewConfig(new GridViewConfig<TreeNode>(){

            @Override
            public String getColStyle(TreeNode model,
                    ValueProvider<? super TreeNode, ?> valueProvider,
                    int rowIndex, int colIndex) {
                   
                if(model.getOrsStatus() == 2)
                    return "GreenGridStyle";
                if(model.getOrsStatus() == 5)
                    return "BlueGridStyle";
                return null;
            }

            @Override
            public String getRowStyle(TreeNode model, int rowIndex)
            {
                if(model.getOrsStatus() == 2)
                    return "GreenGridStyle";
                if(model.getOrsStatus() == 5)
                    return "BlueGridStyle";
                return null;
            }});

---

And while the style does become applied it is later overriden by a style called:

GP34Q33HOB-com-sencha-gxt-theme-base-client-tree-TreeBaseAppearance-TreeBaseStyle-text
I tested it in Firebug and discovered if I disable
GP34Q33HOB-com-sencha-gxt-theme-base-client-tree-TreeBaseAppearance-TreeBaseStyle-text's
reference to color being black, it works correctly and inherits my class color.

What's the best way to override this style? Do I need to create a new Appearance or is there a simpler approach?
Thanks

Are you familiar with how css style rules can override one another? The basic idea is that each rule has a different 'weight', based on how specific it is, or how early it is in the document. What is probably happening is that your CSS is less specific or is declared earlier than the TreeBaseStyle.text() css.

One fix for this would be to just cheat, and append !important to the end of your style property:

Code:

---

.BlueGridStyle {
  color: blue !important;
}

---

This can be difficult to maintain, for example if you have a error style that should override the blue style, you now have to be even more important.

Another fix is to make your rule more specific, based on giving it a tag name or another parent class to base the rule's selector on (like "div.BlueGridStyle" or ".ThemedGrid .BlueGridStyle").

And finally, yes, you could override the appearance and remove the color:black to allow your code to more easily take over this property - but as you are building new functionality rather than re-theming existing, I'm not sure this is the best answer.

Ok, I'm 100% sure I made this far more difficult than it needed to be but when the Important tag didn't work for me I started getting creative. If anyone else has this issue then this code sippet DOES solve it but is probably needlessly complex.

Code:

---


public class ScaleBaseTreeAppearance extends TreeBaseAppearance
{
    public interface TreeGridStyles extends TreeResources, ClientBundle {
   
    @Source({"treegrid.css"})
    TreeGridCss style();
     
     
    }
   
      public ScaleBaseTreeAppearance() {
            super((TreeResources) GWT.create(TreeGridStyles.class));
          }
}



public interface TreeGridCss extends TreeBaseStyle
{
   
    /*
    * Added for compilation requirements
    */



    String drop();


    String over();

    String selected();

    String text();

   
   
   
    String RedGridStyle();
    String BlueGridStyle();
    String GreenGridStyle();
}

---

Long story short when I couldn't override the GXT styles for the text (for whatever reaosn) i replicated them and removed the line I didn't want from the text style in the replication.