Datagrid/Celltable Styling Frustration -- Overriding Row Styles

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



Leave a reply



Submit