CODEWITHSUNDEEP
gwt
user1165474
user1165474

Reputation: 175

GWT - Datagrid Selection Color

is there a way to change global the selection color of gwt datagrid? I added following css-format in the main-app-css file:

.dataGridSelectedRow {
  background: #1EDA17;
  color: white;
  height: auto;
  overflow: auto;
}

I have seen also following link: http://code.google.com/intl/de-DE/webtoolkit/doc/latest/DevGuideUiCss.html

Sadly my change had no effect. Do I miss any setStyleName() call?

Upvotes: 0

Views: 2558

Answers (2)

dimas
dimas

Reputation: 6073

There is also another way of setting custom css formatting for selected row in DataGrid. You need to create your custom interface that extends DataGrid.Resources. In this interface you should ovveride method dataGridStyle() and in @Source annotaion put path to your custom css file. For example:

import com.google.gwt.user.cellview.client.DataGrid;
import com.google.gwt.user.cellview.client.DataGrid.Resources;

public interface CustomDataGridResources extends Resources {

public interface CustomDataGridResources extends Resources {
    @Source({DataGrid.Style.DEFAULT_CSS, "resources/CustomDataGridStyles.css"})
    CustomStyle dataGridStyle();

    interface CustomStyle extends DataGrid.Style {
    }
}

If you want just to change style for selected row then your css file will contain only:

.dataGridSelectedRow {
  background: #1EDA17;
  color: white;
  height: auto;
  overflow: auto;
}

But I also prefer to change cursor for howered row:

.dataGridHoveredRow {
  cursor: pointer;
  cursor: hand; 
}

Look also at similar discussion.

For applying custom style to your DataGrid you can use grid's constructor 

public DataGrid(int pageSize, Resources resources, ProvidesKey<T> keyProvider)

where Resource is an instance that implements your custom interface (in my case CustomDataGridResources).

DataGrid.Resources customDataGridResources = GWT.create(CustomDataGridResources.class)

Upvotes: 1

Abhijith Nagaraja
Abhijith Nagaraja

Reputation: 3380

The custom css will not work since GWT overrides it with clean.css. If you use FIREBUG or any other tool you might recognize it. The solution is simple. Add !important to each line which has not affected with your custom css

.dataGridSelectedRow {
  background: #1EDA17 !important;
  color: white !important;
  height: auto !important;
  overflow: auto !important;
}

Upvotes: 0

Related Questions