is it possible to add a listbox inside a GWT CellTable
Have to make some thing like in the attached Image
Thanks
Yes you can do it by adding SelectionCell to the CellTable.
final Category[] categories = ContactDatabase.get().queryCategories();
List<String> categoryNames = new ArrayList<String>();
for (Category category : categories) {
categoryNames.add(category.getDisplayName());
}
SelectionCell categoryCell = new SelectionCell(categoryNames);
Column<ContactInfo, String> categoryColumn = new Column<ContactInfo, String>(
categoryCell) {
#Override
public String getValue(ContactInfo object) {
return object.getCategory().getDisplayName();
}
};
cellTable.addColumn(categoryColumn, constants.cwCellTableColumnCategory());
categoryColumn.setFieldUpdater(new FieldUpdater<ContactInfo, String>() {
public void update(int index, ContactInfo object, String value) {
for (Category category : categories) {
if (category.getDisplayName().equals(value)) {
object.setCategory(category);
}
}
ContactDatabase.get().refreshDisplays();
}
});
cellTable.setColumnWidth(categoryColumn, 130, Unit.PX);
have a look at this,
http://gwt.google.com/samples/Showcase/Showcase.html#!CwCellTable
Related
I had my data in a FlexTable, but am migrating to a DataGrid so I can easily add pagination. I get the data via a REST call. I can't seem to get the data to actually display. Here are the relevant snippets:
private DataGrid<SearchResult> resultsGrid = new DataGrid<SearchResult>();
resultsGrid.setAutoHeaderRefreshDisabled(true);
TextColumn<SearchResult> titleColumn = new TextColumn<SearchResult>() {
#Override
public String getValue(SearchResult object) {
return object.getTitle();
}
};
resultsGrid.addColumn(titleColumn, "Document Title");
ButtonCell buttonCell = new ButtonCell();
Column<SearchResult, String> buttonColumn = new Column<SearchResult, String>(buttonCell){
#Override
public String getValue(SearchResult object) {
return "Show";
}
};
resultsGrid.addColumn(buttonColumn, "");
buttonColumn.setFieldUpdater(new FieldUpdater<SearchResult, String>() {
public void update(int index, SearchResult object, String value) {
doPreview(object.title);
}
});
TextColumn<SearchResult> roleColumn = new TextColumn<SearchResult>() {
#Override
public String getValue(SearchResult object) {
return object.getRoles();
}
#Override
public String getCellStyleNames(Context context, SearchResult object) {
if (object.containsCurrentRole)
return "highlight";
else
return null;
}
};
resultsGrid.addColumn(roleColumn, "Associated Roles");
final SingleSelectionModel<SearchResult> selectionModel = new SingleSelectionModel<SearchResult>();
resultsGrid.setSelectionModel(selectionModel);
selectionModel.addSelectionChangeHandler(new SelectionChangeEvent.Handler() {
public void onSelectionChange(SelectionChangeEvent event) {
SearchResult selected = selectionModel.getSelectedObject();
if (selected != null) {
clearWordCloud();
getWordCloud(selected.getTitle());
}
}
});
dataProvider.addDataDisplay(resultsGrid);
// Create a Pager to control the table.
SimplePager.Resources pagerResources = GWT.create(SimplePager.Resources.class);
pager = new SimplePager(TextLocation.CENTER, pagerResources, false, 0, true);
pager.setDisplay(resultsGrid);
resultsGrid.setVisible(true);
resultsGrid.addStyleName("results");
mainPanel.add(resultsGrid);
...
The function that gets called after a search:
private void updateTable(List<SearchResult> results) {
dataProvider.getList().addAll(results);
dataProvider.refresh();
dataProvider.flush();
resultsGrid.setVisible(true);
resultsFlexTable.setVisible(true);
}
At first I was missing the flush and refresh, but adding them had no effect. I'm kind of stumped.
The most likely problem is that your DataGrid has a height of zero. DataGrid implements RequiresResize, which means that its height either has to be set explicitly, or it will acquire its height from a parent widget if this parent widget implements ProvidesResize. FlexTable does not implement ProvidesResize interface.
NB: You don't need flush and refresh - adding data to the DataProvider refreshes the grid.
I want to put some text and severals Buttons in a CellTable. I can display the text and buttons, but when I click on a button, nothing happens.
final SafeHtmlCell detailsCell = new SafeHtmlCell();
Column<UIRow, SafeHtml> detailsColumn = new Column<UIRow, SafeHtml>(
detailsCell) {
#Override
public SafeHtml getValue(UIRow object) {
String details = "some informations xxx <br/>";
Button addButton = new Button("Add value", new ClickHandler() {
public void onClick(ClickEvent event) {
Window.alert("hello");
}
});
details += addButton;
SafeHtmlBuilder sb = new SafeHtmlBuilder();
sb.appendHtmlConstant(details);
return sb.toSafeHtml();
}
};
detailsColumn.setCellStyleNames(CSS_DETAILS_TD);
table.setColumnWidth(detailsColumn, "10%");
table.addColumn(detailsColumn, new SafeHtmlHeader(SafeHtmlUtils.fromSafeConstant("details")));
But, if I put a Button per Cell, it's working, onClick method is called:
final ButtonCell btnCell = new ButtonCell() {
#Override
public void render(
final Context context,
final SafeHtml data,
final SafeHtmlBuilder sb) {
sb.appendHtmlConstant("<button type=\"button\" style=\"height: 25px\" title=\"submit\" class=\"btn btn-success btn-small\" tabindex=\"-1\">");
if (data != null) {
sb.append(data);
}
sb.appendHtmlConstant("</button>");
}
};
Column<UIRow, String> btnColumn = new Column<UIRow, String>(btnCell) {
#Override
public String getValue(UIRow object) {
return "";
}
};
btnColumn.setCellStyleNames("td-actions");
table.addColumn(btnColumn, "");
table.setColumnWidth(btnColumn, "5%");
btnColumn.setFieldUpdater(new FieldUpdater<UIRow, String>() {
public void update(int index, UIRow object, String value) {
...
service.submit(object, false, new AsyncCallback<String>() {
#Override
public void onFailure(Throwable caught) {
Window.alert(caught.getMessage());
}
#Override
public void onSuccess(String result) {
Window.alert(result);
}
});
}
});
}
I want to display Html text and Buttons in one Col/Cell, is it possible ?
Thanks
Cell widgets (CellTable, DataGrid, etc) are not designed to embed regular GWT widgets like Button.
For buttons you can use ButtonCell
Take a look at official example:
http://samples.gwtproject.org/samples/Showcase/Showcase.html#!CwCellSampler
Update:
As for the second part of the question regarding how to combine cells, there is a few options:
Check out CompositeCell where you can combine multiple cells (eg ButtonCell and TextCell).
Another option is to use custom CellTableBuilder where you can customize all aspects of table rendering like colspans, column/row decorations, etc
am using GWT 2.4, Hibernate and MysQL
I created a cell table , when i click on a cell i want to display the data/value in that particular cell
Thanks in advance
#override
public Widget onInitialize(){
CellTable grid = new CellTable<Bean>();
grid.setWidth("100%",true);
setColumns(grid);
}
private void setColumns(CellTable grid){
Column<Bean, String> firstNameColumn = new Column<Bean, String>(
new EditTextCell()) {
#Override
public String getValue(Bean object) {
return object.getFirstName();
}
};
firstNameColumn.setSortable(true);
grid.addColumn(firstNameColumn, "First Name");
Column<Bean, String> imageColumn = new Column<Bean, String>(
new ClikableTextCell()) {
#Override
public String getValue(Bean object) {
return "clickhere";
}
};
imageColumn.setSortable(true);
grid.addColumn(imageColumn, "Add Information");
firstNameColumn.setFieldUpdater(new FieldUpdater<Bean, String>() {
public void update(int index, Bean object, String value) {
Window.alert("You clicked " + object.getFullName());
}
});
cellTable.setColumnWidth(firstNameColumn, 20, Unit.PCT);
}
Use DataProvider and SingleSelectionModel for you cellTable:
private final ListDataProvider<SomeClass> dataProvider = new ListDataProvider<SomeClass>();
private final SingleSelectionModel<SomeClass> selectionModel = new SingleSelectionModel<SomeClass>();
//then
table.setSelectionModel(selectionModel);
dataProvider.addDataDisplay(table);
Heres how u can get the selected objects info:
showDataValueOfCellBtn.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
SomeClass selected = selectionModel.getSelectedObject();
Window.alert (selected.getValue());
}
});
I have this buttoncell
It's returning a string, but can i return an actual button instead of this string "ReList", to which I can add ClickHandler, which i can disable, hide etc.
(as i want to disable/hide this cell)
ButtonCell reListCell = new ButtonCell();
reListColumn = new Column<EmployerJobs, String>(reListCell) {
#Override
public String getValue(EmployerJobs object) {
return "ReList";
}
};
You have to add a FieldUpdater to the Column. See here for details.
ButtonCell reListCell = new ButtonCell();
reListColumn = new Column<EmployerJobs, String>(reListCell) {
#Override
public String getValue(EmployerJobs object) {
return "ReList";
}
};
reListColumn.setFieldUpdater(new FieldUpdater<EmployerJobs,String>() {
#Override
public void update(int index, EmployerJobs object, String value) {
Window.alert("You clicked " + object.someField());
}
});
I am using a CellTable<Contact> in my GWT 2.4 project. Everything worked perfectly, so I decided to add paging to the table by using a SimplePager. The CellTable now displays the correct number of entries (page size), but all the pager buttons are disabled.
I am doing the following:
...
#UiField(provided=true) CellTable<Contact> contactsTable = new CellTable<Contact>();
#UiField SimplePager pager;
private TextColumn<Contact> nameColumn;
private TextColumn<Contact> surnameColumn;
public ViewContactsViewImplDesktop() {
initWidget(uiBinder.createAndBindUi(this));
initTable();
}
#Override
public final void updateContactList(final ArrayList<Contact> contacts) {
contactsTable.setRowCount(contacts.size());
final ListDataProvider<Contact> dataProvider = new ListDataProvider<Contact>();
List<Contact> list = dataProvider.getList();
for (final Contact c : contacts) {
list.add(c);
}
dataProvider.addDataDisplay(contactsTable);
pager = new SimplePager();
pager.setDisplay(contactsTable);
pager.setPageSize(3);
ListHandler<Contact> nameColumnSorter = new ListHandler<Contact>(list);
ListHandler<Contact> surnameColumnSorter = new ListHandler<Contact>(list);
nameColumnSorter.setComparator(nameColumn, new Comparator<Contact>() {
#Override
public int compare(Contact c1, Contact c2) {
return c1.getName().compareTo(c2.getName());
}
});
surnameColumnSorter.setComparator(surnameColumn, new Comparator<Contact>() {
#Override
public int compare(Contact c1, Contact c2) {
return c1.getSurname().compareTo(c2.getSurname());
}
});
contactsTable.addColumnSortHandler(nameColumnSorter);
contactsTable.addColumnSortHandler(surnameColumnSorter);
contactsTable.getColumnSortList().push(nameColumn);
}
private void initTable() {
nameColumn = new TextColumn<Contact>() {
#Override
public String getValue(Contact contact) {
return contact.getName();
}
};
surnameColumn = new TextColumn<Contact>() {
#Override
public String getValue(Contact contact) {
return contact.getSurname();
}
};
nameColumn.setSortable(true);
surnameColumn.setSortable(true);
contactsTable.addColumn(nameColumn, "Name");
contactsTable.addColumn(surnameColumn, "Surname");
}
Thanks!
Not setting the page size and/or not setting the table's row count manually could do the trick, as hinted in my comment.
I'd love to provide a concise code sample but do not have access to any code using cell widgets right now.