how to add css to selected row in treegrid GXT 3

Question

I created a treegrid using GXT 3.now iwant to change background color of selected row and also i want to change the background of root node(leaf row i.e Parent row).

iam using GXT 3.0 and eclipse 3.7

Thanks in advance

score 6 · Accepted Answer · edited Jun 28 '12 at 19:09

I was also having the same problem, I wanted to color the background of a row depending on some condition. In the end, I found a solution:

You need to create a GridViewConfig and override the getColumnStyle method to return the color want, it took me a while to find out, but overriding the getRowStyle method doesn't do the trick, at least not for me.

grid.getView().setViewConfig(new GridViewConfig<Model>() {

    @Override
    public String getColStyle(  Model model, 
                                ValueProvider<? super Model, ?> valueProvider,
                                int rowIndex, int colIndex)
    {
        if ("Other2".equals(model.getName())){
            return "bold";
        }else if ("Other".equals(model.getName())){
            return "red-row";
        }
        return null;
    }

    @Override
    public String getRowStyle(Model model, int rowIndex) {
        return null;
    }
});

Note: Modify CSS file accordingly.

I had the same problem and tried this approach. Didn't work. I can see the specified CSS class (red-row in this example) is applied to the TR element, but the individual td elements of the rendered grid have their own classes applied which have settings overriding those in the specified class. Not sure how to handle this. — Satyan Raina, Sep 15 '15 at 15:44

score 0 · Answer 2 · answered Jun 26 '12 at 15:32

I think it is the same with GXT 2.x

Just add your own CellRenderer on your ColumnConfig :

List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
ColumnConfig levelColumnConfig = new ColumnConfig("level", "Level", 50);
levelColumnConfig.setRenderer(getGridCellRenderer());
columns.add(levelColumnConfig);
ColumnModel cm = new ColumnModel(columns);



private GridCellRenderer<BeanModel> getGridCellRenderer() {
        if (gridCellRenderer == null) {
            gridCellRenderer = new GridCellRenderer<BeanModel>() {
                @Override
                public Object render(BeanModel model, String property, ColumnData config, int rowIndex, int colIndex,
                    ListStore<BeanModel> store, Grid<BeanModel> grid) {

                    //add some logic for example

                    String color = "#000000";
                    MyBean mybean = (MyBean) model.getBean();
                    switch (mybean.getLevel()) {
                    case TRACE:
                        color = "#f0f0f0";
                        break;
                    default:
                        color = "#000000";
                    }

                    // add some background-color

                    config.style = config.style + ";background-color:" + color + ";";
                    Object value = model.get(property);
                    return value;
                }
            };
        }
        return gridCellRenderer;
    }

`GridCellRenderer` is gone from 3.x, instead, use the GWT `Cell` and `AbstractCell` classes - this allows you to not only render elements, but accept events as well. — Colin Alworth, Nov 20 '12 at 16:57

score 0 · Answer 3 · answered Oct 24 '17 at 08:02

I found out that you also can adjust CSS like this:

grid.getCellFormatter().addStyleName(0, colNo - 1, MC_GWT.MC_STYLE_VERTICAL_ICON_HOLDER);

It's a little easier i think :) Especially when you want to style the , f.e. alignment of icons inside of it. In my case i needed to display icons in a vertical row. So i needed to change the Cells display to 'block';

how to add css to selected row in treegrid GXT 3

3 Answers3

Linked