Adding header above of column titles in GWT datagrid - gwt

Question

How can I add something like this in GWT datagird using CellTableBuilder?

Answer 1

This should work as a simply solution for provided case. Please replace "YourPage" to your real page, "YourClass" to your class and "yourColumn1", "yourColumn2" to your real columns, and "object.getYourColumnValue" to your real get value method. Please also don't forget to bind your data to the table (using: "ContactDatabase.get().addDataDisplay(dataGrid1);" as provided in showcase, or by "dataGrid1.setRowData(0, yourData);"
public class YourPage extends Composite {
...
// attributes
private Column<YourClass, String> yourColumn1;
private Column<YourClass, String> yourColumn2;
...
public DataGrid<YourClass> buildGrid() {
dataGrid1 = new DataGrid<YourClass>();
dataGrid1.setWidth("100%");
dataGrid1.setHeight("100%");
dataGrid1.setAutoHeaderRefreshDisabled(true);
// Generating columns
yourColumn1 = new Column<YourClass, String>(new TextCell()) {
#Override
public String getValue(YourClass object) {
return object.getYourColumnValue();
}
};
dataGrid1.addColumn(yourColumn1, "Column 1");
dataGrid1.setColumnWidth(0, 50, Unit.PCT);
yourColumn2 = new Column<YourClass, String>(new TextCell()) {
#Override
public String getValue(YourClass object) {
return object.getYourColumnValue();
}
};
dataGrid1.addColumn(yourColumn2, "Column 2");
dataGrid1.setColumnWidth(1, 50, Unit.PCT);
// setHeaderBuilder
dataGrid1.setHeaderBuilder(
new dataGrid1HeaderBuilder(
dataGrid1, false));
...
return dataGrid1;
}
// your private header builder class
private class dataGrid1HeaderBuilder extends AbstractHeaderOrFooterBuilder<YourClass> {
public tblValidatorsGroupsAnalysisResultsHeaderBuilder(
AbstractCellTable<YourClass> table, boolean isFooter) {
super(table, false);
setSortIconStartOfLine(false);
}
#Override
protected boolean buildHeaderOrFooterImpl() {
Style style = dataGrid1.getResources().style();
TableRowBuilder tr = startRow();
TableCellBuilder th = tr.startTH().colSpan(1);
th.style().trustedProperty("border-right", "10px solid yellow").cursor(Cursor.POINTER).endStyle();
th.text("Name").endTH();
// Your "Header" for 2 column
th = tr.startTH().colSpan(2);
th.text("Header").endTH();
// Add Column1 and Column2 headers
tr = startRow();
buildHeader(tr, new TextHeader("Column1"), yourColumn1, null, false, false, false);
buildHeader(tr, new TextHeader("Column2"), yourColumn2, null, false, false, false);
tr.endTR();
return true;
}
private void buildHeader(TableRowBuilder out, Header<?> header, Column<YourClass, ?> column,
Column<?, ?> sortedColumn, boolean isSortAscending, boolean isFirst, boolean isLast) {
Style style = dataGrid1.getResources().style();
boolean isSorted = (sortedColumn == column);
StringBuilder classesBuilder = new StringBuilder(style.header());
// Create the table cell.
TableCellBuilder th = out.startTH().className(classesBuilder.toString());
// Render the header.
Context context = new Context(0, 0, header.getKey());
renderSortableHeader(th, context, header, isSorted, isSortAscending);
// End the table cell.
th.endTH();
}
}
}