I am using Cell Table in GWT.In that cell table I am adding these columns.
TextColumn<Document> idColumn = new TextColumn<Document>() {
#Override
public String getValue(Document object) {
return Long.toString(object.getId());
}
};
TextColumn<Document> refColumn = new TextColumn<Document>() {
#Override
public String getValue(Document object) {
return object.getReferenceNumber();
}
};
/*
* DateCell dateCell = new DateCell(); Column<Contact, Date> dateColumn
* = new Column<Contact, Date>(dateCell) {
*
* #Override public Date getValue(Contact object) { return
* object.birthday; } };
*/
TextColumn<Document> nameColumn = new TextColumn<Document>() {
#Override
public String getValue(Document object) {
return object.getDocumentName();
}
};
table = new CellTable<T>();
table.addColumn(idColumn, "Id");
table.addColumn(refColumn, "Reference Number");
table.addColumn(nameColumn, "Name");
}
Now I have some queries:
How to hide the id column?
On click of row how can i get the from selected row?
Please help me out.
Thanks in advance.
Well you could try to use fixed layout for the CellTable and set the width of the specific column you want to hide to 0px.
I did use another approach.
In my case I have a cellTable which should display a checkbox column as soon as I press a button (which puts the celltable in edit mode).
I do this by creating a CheckBoxColumn and inserting and removing it when I press on the button. It looks seomething like that:
#Override
public void insertCheckBoxColumn(Column<Object,Boolean> column) {
if (cellTable.getColumnIndex(column) == -1) {
cellTable.addColumn(column,"");
cellTable.setColumnWidth(column,50, Unit.PX);
}
}
#Override
public void removeCheckBoxColumn(Column<Object, Boolean> column) {
int index = cellTable.getColumnIndex(column);
if (index != -1)
cellTable.removeColumn(index);
}
However note that you might run into this issue on google chrome.
Related
How to hide the columns in Cell table? I need column for grouping purpose but don't want to show in table. Is there any way to hide? Any clue? See the below Code..
TextColumn<ContactInfor> ageTxt = new TextColumn<ContactInfor>() {
#Override
public String getValue(ContactInfor object) {
return object.age;
}
};
cellTable.addColumn(ageTxt, "AGE");
TextColumn<ContactInfor> empIdTxt = new TextColumn<ContactInfor>() {
#Override
public String getValue(ContactInfor object) {
return object.empId;
}
};
cellTable.addColumn(empIdTxt, "EMPLOYEE ID");
TextColumn<ContactInfor> addressTxt = new TextColumn<ContactInfor>() {
#Override
public String getValue(ContactInfor object) {
return object.address;
}
};
cellTable.addColumn(addressTxt, "ADDRESS");
Want to hide addressTxt column from cell table?
Assuming you can't actually remove it from the table, perhaps just set the width to 0:
cellTable.setColumnWidth(addressTxt, "0px");
Javadocs: http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/cellview/client/CellTable.html#setColumnWidth(com.google.gwt.user.cellview.client.Column,java.lang.String)
I need a 'custom selection model' for GWT CellTable. One of the columns in CellTable is a Checkbox column.
Basic rquirements (both work in solution below):
- Row click (not on checkbox), selects that row and un-selects all other rows.
- Checkbox selection should select/un-select that row only.
Following is the code I am using, but its very very slow. Any guidance would be appreciated.
final SelectionModel<T> selectionModel = new MultiSelectionModel<T>();
dataTable.setSelectionModel(selectionModel,
DefaultSelectionEventManager.createCustomManager(
new DefaultSelectionEventManager.CheckboxEventTranslator<T>() {
#Override
public SelectAction translateSelectionEvent(CellPreviewEvent<T> event) {
SelectAction action = super.translateSelectionEvent(event);
if (action.equals(SelectAction.IGNORE)) {
selectionModel.clear();
return SelectAction.TOGGLE;
}
return action;
}
}
)
);
Following is the code snipped for CheckColumn callback.
Column<T, Boolean> checkColumn = new Column<T, Boolean>(
new CheckboxCell(true, false))
{
#Override
public Boolean getValue(T t)
{
// Get the value from the selection model.
return selectionModel.isSelected(t);
}
};
I have put in a KeyProvider for the CellTable and its not slow anymore. :)
ProvidesKey<T> keyProvider = new ProvidesKey<T>() {
public Object getKey(T t) {
return tip == null? null : tip.getId();
}
};
dataTable = new CellTable<T>(PAGE_SIZE, keyProvider);
You could just whitelist your checkbox
int checkboxColumn = 0;
DefaultSelectionEventManager.createCustomManager(new DefaultSelectionEventManager
.WhitelistEventTranslator(checkboxColumn));
I am using CellTable to add columns to it.
It works fine when I add rows and single data on each cell.
It has header like Name ,Age, Address with rows below it which contains the values
I now want to have a Actions cloumn in the last with two buttons (Edit and Delete Button) in single cell in on the rows below this column and to capture the button click events acordingly.
Name Age Address Actions
A 15 123 Edit Delete
B 20 578 Edit Delete
C
Could you please let me know how to do it.
Thanks
There are two ways to achieve that:
Subclass AbstractCell and implement the render method to create two buttons and handle its events (see here for more details).
Use a CompositeCell to add two ActionCells
Second approach is easier and cleaner. Here is the code for that:
public void onModuleLoad() {
CellTable<Person> table = new CellTable<Person>();
List<HasCell<Person, ?>> cells = new LinkedList<HasCell<Person, ?>>();
cells.add(new ActionHasCell("Edit", new Delegate<Person>() {
#Override
public void execute(Person object) {
// EDIT CODE
}
}));
cells.add(new ActionHasCell("Delete", new Delegate<Person>() {
#Override
public void execute(Person object) {
// DELETE CODE
}
}));
CompositeCell<Person> cell = new CompositeCell<Person>(cells);
table.addColumn(new TextColumn<Person>() {
#Override
public String getValue(Person object) {
return object.getName()
}
}, "Name");
// ADD Cells for Age and Address
table.addColumn(new Column<Person, Person>(cell) {
#Override
public Person getValue(Person object) {
return object;
}
}, "Actions");
}
private class ActionHasCell implements HasCell<Person, Person> {
private ActionCell<Person> cell;
public ActionHasCell(String text, Delegate<Person> delegate) {
cell = new ActionCell<Person>(text, delegate);
}
#Override
public Cell<Person> getCell() {
return cell;
}
#Override
public FieldUpdater<Person, Person> getFieldUpdater() {
return null;
}
#Override
public Person getValue(Person object) {
return object;
}
}
The solution above is perfect!THX.
In addition: If you liked to design the buttons in the ActionCell, then you could do this -> In the constructon of the class you can build a html input and in "class" attribute, you can add a css style, which will be used.:
public ActionHasCell(String text, Delegate<Person> delegate) {
cell = new ActionCell<Person>(text, delegate) {
public void render(Context context, Person person, SafeHtmlBuilder sb)
{
SafeHtml html = SafeHtmlUtils.fromTrustedString("<input type=\"button\" value=\"anynameyouwant\" class=\"cssstylename\" />");
sb.append(html);
}
};
}
This time you don't need the String, but you can pass parameters and use them to build the button.
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.
Here is the code I tried to make the flextable's cell editable
The flex table is loaded with db values, when user clicks on the cell of flextable, it has to become editable and the user entered value has to be stored in db, after the user clicks submit button which is present at each row.
I'm using EditTextCell(), to make the cell editable but it not becoming editable when I test it. I have included all my codes below. Please let me know , if i'm missing anything.
private List<PendingChange<?>> pendingChanges = new ArrayList<PendingChange<?>>();
private List<AbstractEditableCell<?, ?>> editableCells = new ArrayList<AbstractEditableCell<?, ?>>();
CellTable cellTable= new CellTable<MessageEvent>();
EditTextCell editCell = new EditTextCell();
protected FlexTable flextable;
//flextable creation
private final void createWorkflows(List<MessageEvent> theWorkflowMessageEvents, boolean isSelectAll) {
int row = 1;
if (theWorkflowMessageEvents != null) {
for (final MessageEvent workflowMessageEvent : theWorkflowMessageEvents) {
flextable.getRowFormatter().setStyleName(row,ACTIVE_COLLECTION);
flextable.getCellFormatter().setHorizontalAlignment(row, 0, HasHorizontalAlignment.ALIGN_LEFT);
flextable.getCellFormatter().setWordWrap(row, 0, false);
flextable.setText(row, 0, workflowMessageEvent.getTransferReceived());
flextable.getCellFormatter().setHorizontalAlignment(row, 1, HasHorizontalAlignment.ALIGN_LEFT);
flextable.getCellFormatter().setWordWrap(row, 1, false);
flextable.setText(row, 1, workflowMessageEvent.getLoadReceived());
makeFlexTableEditable() ;
Button submitButton= new Button("Submit");
flextable.getCellFormatter().setHorizontalAlignment(row, 3, HasHorizontalAlignment.ALIGN_LEFT);
flextable.getCellFormatter().setWordWrap(row, 3, false);
flextable.setWidget(row, 3,submitButton );
submitWorklow(submitButton,row, workflowMessageEvent);
flextable.getRowFormatter().setVisible(row, true);
row++;
}
}
}
//adding flextable to main panel
protected void displayPendingWorkflows(final List<MessageEvent> theWorkflowMessageEvents) {
this.createPendingWorkflows(theWorkflowMessageEvents, false);
//some code
mainPanel.add(flextable);
mainPanel.add(cellTable);
}
//code for making flex table editable for TransferReceived column
private void makeFlexTableEditable() {
addColumn(new EditTextCell(), new GetValue() {
#Override
public String getValue(MessageEvent workflowMessageEvent) {
return workflowMessageEvent.getTransferReceived();
}
}, new FieldUpdater<MessageEvent, String>() {
public void update(int index, MessageEvent workflowMessageEvent, String value) {
try { pendingChanges.add(new TransferReceived(workflowMessageEvent, value));
}catch (Exception e) {
}
}
});
}
private <C> Column<MessageEvent, String> addColumn(EditTextCell cell,
final GetValue<String> getter,FieldUpdater<MessageEvent, String> fieldUpdater) {
Column<MessageEvent, String> transColumn = new Column<MessageEvent, String>(cell){
#Override
public String getValue(MessageEvent object) {
return getter.getValue(object);
}
};
transColumn.setFieldUpdater(fieldUpdater);
if (cell instanceof AbstractEditableCell<?, ?>) {
editableCells.add((AbstractEditableCell<?, ?>) cell);
}
cellTable.addColumn(transColumn);
return transColumn;
}
/**
* A pending change to a {#link MessageEvent}. Changes aren't committed
* immediately to illustrate that cells can remember their pending changes.
*
* #param <T> the data type being changed
*/
private abstract static class PendingChange<T> {
private final MessageEvent message;
private final T value;
public PendingChange(MessageEvent message, T value) {
this.message = message;
this.value = value;
}
/**
* Commit the change to the contact.
*/
public void commit() {
doCommit(message, value);
}
/**
* Update the appropriate field in the .
*
* #param message to update
* #param value the new value
*/
protected abstract void doCommit(MessageEvent message, T value);
}
/**
* Updates the Transfered Received.
*/
private static class TransferReceived extends PendingChange<String> {
public TransferReceived(MessageEvent message, String value) {
super(message, value);
}
#Override
protected void doCommit(MessageEvent message, String value) {
message.setTransferReceived(value);
}
}
/**
* Get a cell value from a record.
*
* #param <C> the cell type
*/
private static interface GetValue<C> {
C getValue(MessageEvent message);
}
I did something like this in my app. Sorry if the syntax is a bit off but the main idea is to use a clickevent and then get this events position and exchange the widget in that position.
final FlexTable flexTable = new FlexTable();
flexTable.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
Cell cell = flexTable.getCellForClickEvent(event);
final int row = cell.getRow();
final int column = cell.getIndex();
final TextBox textBox = new TextBox();
// Get the text from the cell in some way. Maybe use flextTable.getHTML(row, column) or what ever you prefer
// textBox.setText("Something other than this");
textBox.addKeyDownHandler(new KeyDownHandler() {
public void onKeyDownEvent(KeyDownEvent event) {
int code = event.getNativeKeyCode();
if (KeyCodes.KEY_ENTER == code) {
flexTable.setWidget(row, column, new Label(textBox.getText()));
}
}
});
flexTable.setWidget(row, column, textBox);
// You may also need something like this
textBox.setFocus(true);
}
});