How to add specific style to GWT DataGrid
See this previous question for the working solution. Copied for convenience:
In short extend the
DataGrid.Style
(the goal is only to have a new
type, you don't have to add anything to it) and have your
dataGridStyle
overridden method return your own subtype rather than
DataGrid.Style
(and it'll work because of return-type covariance)
GWT DataGrid specific row needs add style
There's RowStyles
for that exact purpose.
grid.setRowStyles(new RowStyles<Row>() {
@Override
public String getStyleNames(Row row, int rowIndex) {
return "error".equals(row.getType()) ? "error" : "";
}
});
How to set CSS Resource for DataGrid in UIBinder?
Question 1:
Everything you said, is correct.
Make sure you pass provided=true
to your DataGrid's UiField
:
@UiField(provided = true)
DataGrid<MyDTO> dataGrid;
Then in the constructor you would create the DataGrid
like this:
public MyView() {
CustomDataGridResource resource = GWT.create(CustomDataGridResource.class);
resource.dataGridStyle().ensureInjected();
dataGrid = new DataGrid<MyDTO>(pageSize, resource)"
binder.createAndBindUi(this);
}
Make sure you call ensureInjected()
on the style.
Also if you have an Inject
on your constructor.
You can pass the CustomDataGridresource and GWT.create()
will be automatically called:
@Inject
public MyView(CustomDataGridResource resource) {
resource.dataGridStyle().ensureInjected();
dataGrid = new DataGrid<MyDTO>(pageSize, resource)"
binder.createAndBindUi(this);
}
Question 2:
Regarding the difference between CellTable
and DataGrid
refer to this thread:
https://groups.google.com/forum/#!topic/google-web-toolkit/PBhu6RtP4G8
Basically if you use LayoutPanels
DataGrid
is a good fit as it contains fixed headers and a scrollable content area. CellTable
will also work with FlowPanel
and normal Panels
.
How to style an entire row in a Blazorise datagrid?
Yes you can use RowStyling
parameter. Example:
<DataGrid ...
RowStyling="@OnRowStyling"
private void OnRowStyling(Employee employee, DataGridRowStyling styling)
{
if (!employee.IsActive)
styling.Class = "inactive";
}
Change Employee with your own model.
GWT DataGrid : Unable to find ImageResource method value(cellTableLoading) when overriding styles
The following works. Really.
public interface Resources extends DataGrid.Resources {
interface Style extends DataGrid.Style { }
@Source(value = {DataGrid.Style.DEFAULT_CSS, "myDataGrid.css"})
public Style dataGridStyle();
}
Also you don't need to call ensureInjected()
since DataGrid
will call it for you.
Anyway there is something wrong in the error log: it looks for cellTableLoading
style which is not part of the DataGrid.Resources
interface (is part of CellTable.Resources
). Have you left some spurious CSS classes in myDataGrid.css
that are not defined in the original interface?
Maybe you have moved from CellTable
to DataGrid
by simply renaming the css, but without changing the inner class names.
AgGrid Customized (Selected) Row Styling
AgGrid exposes multiple class names of each row elements to describe its current state (ag-row
, ag-row-odd
, ag-row-selected
...). You can take advantage of that information to override the row style if it's currently selected like below:
.ag-theme-alpine .ag-row.ag-row-odd {
background-color: pink;
}
.ag-theme-alpine .ag-row.ag-row-odd.ag-row-selected {
background-color: red;
}
Live Demo
Related Topics
Dynamic Variable Names in Less CSS
Keep Width When Using Letter-Spacing on Hover
Forward Slash/In CSS Border Radius Syntax
Achieving This Hr Element with CSS Styling - Pseudo Elements
Remove Default Focus Outline and Change to Different Color
Using Undefined Number of Arguments in Mixins
Set the Width of Select2 Input (Through Angular-Ui Directive)
Nbsp Not Working in CSS Content Tag
How to Ignore Parent CSS Style
Confused by CSS Pseudo-Class :Active
How to Force a Website to Be in Landscape Mode When Viewed on a Mobile Device
How to Fade in Background Image by CSS3 Animation
Is There a CSS File Size Limit in IE9
CSS Flex, How to Display One Item on First Line and Two on the Next Line