Create custom string on demand with GWT CellTableBuilder

Question

GWT 2.5 introduced the RC CellTableBuilder API, but there is no comprehensive documentation yet. Is there any tutorial \ example of implementing custom on-demand row-building using CellTableBuilder? The only example that I have found so far is http://showcase2.jlabanca-testing.appspot.com/#!CwCustomDataGrid , but for me it is rather confusing.

So, my goal is to create an extra row containing a widget that contains information about the clicked row in the table.

Answer 1

I found a suitable solution for this problem. Here is a sample code:

public class CustomCellTableBuilder extends AbstractCellTableBuilder<Object>{ //here go fields, ctor etc. //ids of elements which details we are going to show private Set elements; @Override protected void buildRowImpl(Object rowValue, int absRowIndex){ //building main rows logic if(elements.contains(absRowIndex)){ buildExtraRow(absRowIndex, rowValue); elements.add(absRowIndex); } } private void buildExtraRow(int index, Object rowValue){ TableRowBuilder row = startRow(); TableCellBuilder td = row.startTD().colSpan(getColumns().size()); DivBuilder div = td.startDiv(); Widget widget = new Widget(); //update widget state and appearance here depending on rowValue div.html(SafeHtmlUtils.fromTrustedString(widget.getElement().getInnerHTML())); div.end(); td.endTD(); row.endTR(); }} 

It should be noted that when you process an event that results in an extra row, you must call redrawRaw (rowIndex) on the CellTable, which is bound to TableBuilder. And before this call, you need to add the target row identifier to the Set elements.

Hope this was helpful.

Answer 2

I created this class to expand strings in GWT. It requires a column that you want to expand, and replaces it with a place holder, which can have 2 states.

I use it as follows:

 PlaceHolderColumn<Notification, SafeHtml> placeholder = new PlaceHolderColumn<Notification, SafeHtml>(new SafeHtmlCell()) { @Override public SafeHtml getValue(Notification object) { return SafeHtmlUtils.fromSafeConstant(getSelected() ? "<i class=\"glyphicon glyphicon-chevron-down\"></i>" : "<i class=\"glyphicon glyphicon-chevron-right\"></i>"); } }; notificationsTable.setTableBuilder(new ExpandableCellTableBuilder<Notification, SafeHtml>(notificationsTable, columnBody, placeholder)); 

I have access to the glyphicon, so I use them instead of the default placeholder column, which is +/-

<Image here ... but due to lack of reputation :(>

columnBody in the above code example is the standard column that will span the width of the table. The seat holder will be displayed in its place in any columnBody position on which it was sitting.

Hope this helps someone :)

 public class ExpandableCellTableBuilder<T, U> extends AbstractCellTableBuilder<T> { private Column<T, U> expandColumn = null; private PlaceHolderColumn<T, ?> placeholderColumn = null; private final String evenRowStyle; private final String oddRowStyle; private final String selectedRowStyle; private final String cellStyle; private final String evenCellStyle; private final String oddCellStyle; private final String firstColumnStyle; private final String lastColumnStyle; private final String selectedCellStyle; public static class ExpandMultiSelectionModel<T> extends AbstractSelectionModel<T> { Map<Object, T> selected = new HashMap<Object, T>(); /** * @param keyProvider */ public ExpandMultiSelectionModel(ProvidesKey<T> keyProvider) { super(keyProvider); } /* * (non-Javadoc) * * @see com.google.gwt.view.client.SelectionModel#isSelected(java.lang.Object) */ @Override public boolean isSelected(T object) { return isKeySelected(getKey(object)); } protected boolean isKeySelected(Object key) { return selected.get(key) != null; } /* * (non-Javadoc) * * @see com.google.gwt.view.client.SelectionModel#setSelected(java.lang.Object, boolean) */ @Override public void setSelected(T object, boolean selected) { Object key = getKey(object); if (isKeySelected(key)) { this.selected.remove(key); } else { this.selected.put(key, object); } scheduleSelectionChangeEvent(); } } public static abstract class PlaceHolderColumn<T, C> extends Column<T, C> { private boolean isSelected; /** * @param cell */ public PlaceHolderColumn(Cell<C> cell) { super(cell); } protected boolean getSelected() { return isSelected; } } private int expandColumnIndex; public ExpandableCellTableBuilder(AbstractCellTable<T> cellTable, Column<T, U> expandColumn) { this(cellTable, expandColumn, new ExpandMultiSelectionModel<T>(cellTable.getKeyProvider()), null); } public ExpandableCellTableBuilder(AbstractCellTable<T> cellTable, Column<T, U> exandColumn, SelectionModel<T> selectionModel) { this(cellTable, exandColumn, selectionModel, null); } public ExpandableCellTableBuilder(AbstractCellTable<T> cellTable, Column<T, U> exandColumn, PlaceHolderColumn<T, ?> placeHolder) { this(cellTable, exandColumn, new ExpandMultiSelectionModel<T>(cellTable.getKeyProvider()), placeHolder); } /** * @param cellTable * @param columnBody */ public ExpandableCellTableBuilder(AbstractCellTable<T> cellTable, Column<T, U> expandColumn, SelectionModel<T> selectionModel, PlaceHolderColumn<T, ?> placeHolder) { super(cellTable); this.expandColumn = expandColumn; this.cellTable.setSelectionModel(selectionModel); if (placeHolder == null) { this.placeholderColumn = new PlaceHolderColumn<T, String>(new TextCell()) { @Override public String getValue(T object) { return getSelected() ? "-" : "+"; } }; } else { this.placeholderColumn = placeHolder; } // Cache styles for faster access. Style style = cellTable.getResources().style(); evenRowStyle = style.evenRow(); oddRowStyle = style.oddRow(); selectedRowStyle = " " + style.selectedRow(); cellStyle = style.cell(); evenCellStyle = " " + style.evenRowCell(); oddCellStyle = " " + style.oddRowCell(); firstColumnStyle = " " + style.firstColumn(); lastColumnStyle = " " + style.lastColumn(); selectedCellStyle = " " + style.selectedRowCell(); } /* * (non-Javadoc) * * @see com.google.gwt.user.cellview.client.AbstractCellTableBuilder#buildRowImpl(java.lang.Object, int) */ @Override protected void buildRowImpl(T rowValue, int absRowIndex) { // Calculate the row styles. SelectionModel<? super T> selectionModel = cellTable.getSelectionModel(); final boolean isSelected = (selectionModel == null || rowValue == null) ? false : selectionModel.isSelected(rowValue); boolean isEven = absRowIndex % 2 == 0; StringBuilder trClasses = new StringBuilder(isEven ? evenRowStyle : oddRowStyle); if (isSelected) { trClasses.append(selectedRowStyle); } // Add custom row styles. RowStyles<T> rowStyles = cellTable.getRowStyles(); if (rowStyles != null) { String extraRowStyles = rowStyles.getStyleNames(rowValue, absRowIndex); if (extraRowStyles != null) { trClasses.append(" ").append(extraRowStyles); } } // Build the row. TableRowBuilder tr = startRow(); tr.className(trClasses.toString()); // Build the columns. int columnCount = cellTable.getColumnCount(); for (int curColumn = 0; curColumn < columnCount; curColumn++) { Column<T, ?> column = cellTable.getColumn(curColumn); if (column == expandColumn) { expandColumnIndex = curColumn; column = placeholderColumn; placeholderColumn.isSelected = isSelected; } // Create the cell styles. StringBuilder tdClasses = new StringBuilder(cellStyle); tdClasses.append(isEven ? evenCellStyle : oddCellStyle); if (curColumn == 0) { tdClasses.append(firstColumnStyle); } if (isSelected) { tdClasses.append(selectedCellStyle); } // The first and last column could be the same column. if (curColumn == columnCount - 1) { tdClasses.append(lastColumnStyle); } // Add class names specific to the cell. Context context = new Context(absRowIndex, curColumn, cellTable.getValueKey(rowValue)); String cellStyles = column.getCellStyleNames(context, rowValue); if (cellStyles != null) { tdClasses.append(" " + cellStyles); } // Build the cell. HorizontalAlignmentConstant hAlign = column.getHorizontalAlignment(); VerticalAlignmentConstant vAlign = column.getVerticalAlignment(); TableCellBuilder td = tr.startTD(); td.className(tdClasses.toString()); if (hAlign != null) { td.align(hAlign.getTextAlignString()); } if (vAlign != null) { td.vAlign(vAlign.getVerticalAlignString()); } // Add the inner div. DivBuilder div = td.startDiv(); div.style().outlineStyle(OutlineStyle.NONE).endStyle(); // Render the cell into the div. renderCell(div, context, column, rowValue); // End the cell. div.endDiv(); td.endTD(); } // End the row. tr.endTR(); if (isSelected) { buildExpandedRow(rowValue, absRowIndex, columnCount, trClasses, isEven, isSelected); } } /** * @param trClasses * */ private void buildExpandedRow(T rowValue, int absRowIndex, int columnCount, StringBuilder trClasses, boolean isEven, boolean isSelected) { TableRowBuilder tr = startRow(); tr.className(trClasses.toString()); Column<T, ?> column = expandColumn; // Create the cell styles. StringBuilder tdClasses = new StringBuilder(cellStyle); tdClasses.append(isEven ? evenCellStyle : oddCellStyle); tdClasses.append(firstColumnStyle); if (isSelected) { tdClasses.append(selectedCellStyle); } tdClasses.append(lastColumnStyle); // Add class names specific to the cell. Context context = new Context(absRowIndex, expandColumnIndex, cellTable.getValueKey(rowValue)); String cellStyles = column.getCellStyleNames(context, rowValue); if (cellStyles != null) { tdClasses.append(" " + cellStyles); } // Build the cell. HorizontalAlignmentConstant hAlign = column.getHorizontalAlignment(); VerticalAlignmentConstant vAlign = column.getVerticalAlignment(); TableCellBuilder td = tr.startTD(); td.colSpan(columnCount); td.className(tdClasses.toString()); if (hAlign != null) { td.align(hAlign.getTextAlignString()); } if (vAlign != null) { td.vAlign(vAlign.getVerticalAlignString()); } // Add the inner div. DivBuilder div = td.startDiv(); div.style().outlineStyle(OutlineStyle.NONE).endStyle(); // Render the cell into the div. renderCell(div, context, column, rowValue); // End the cell. div.endDiv(); td.endTD(); // End the row. tr.endTR(); }