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));
Related
I'm using a GWT DataGrid with a MultiSelectionModel.
The selections of the items of the grid should be achieved by
a) a CheckboxColumn with a CheckboxCell
and additionally at the same time by
b) the standard line mode selection-model (by clicking on the rest of the line).
With the CheckboxColumn the user should be enabled to multi-select different entries. But when clicking somewhere else on the datagrid-lines, a single-line-selection-policy should be done, that means, if a multiple-selection was done before using the checkboxes, this selection should be resetted and only the the clicked line should be selected afterwards.
This is what I have. Does anyone know how to enable CheckBox-Mode and line-selection-mode at the same time?
public class JobDataGrid extends DataGrid<Job>
{
private MultiSelectionModel<Job> selectionModel;
private Column<Job, Boolean> checkboxColumn;
private TextColumn<Job> idColumn;
private TextColumn<Job> titleColumn;
private TextColumn<Job> timestampColumn;
private TexTColumn<Job> ...
public JobDataGrid ()
{
super ();
checkboxColumn = new Column<Job, Boolean> (new CheckboxCell (true, false)) {
#Override
public Boolean getValue (Job job)
{
// Get the value from the selection model.
return selectionModel.isSelected (job);
}
};
checkboxColumn.setFieldUpdater (new FieldUpdater<Job, Boolean> () {
public void update (int index, Job job, Boolean value)
{
// Called when the user clicks on a checkbox.
selectionModel.setSelected (job, value);
}
});
// [...]
// [...]
// [...]
selectionModel = new MultiSelectionModel<Job> ();
setSelectionModel (selectionModel);
// setKeyboardSelectionPolicy (KeyboardSelectionPolicy.DISABLED);
// [...]
// [...]
// [...]
}
}
I've tried out all 4 variants
new CheckboxCell (false, false);
new CheckboxCell (true, false);
new CheckboxCell (false, true);
new CheckboxCell (true, true);
but none of them showed up what I need. And I've also played with
setSelectionModel (selectionModel, DefaultSelectionEventManager.<Job> createCheckboxManager ());
Maybe
createCustomManager(DefaultSelectionEventManager.EventTranslator<T> translator)
would help?
Thanx
Thomas
You can create your own "checkbox manager" and do what you want there.
table.setSelectionModel(selectModel, DefaultSelectionEventManager.<DocumentListItemDTO> createCustomManager(
new DefaultSelectionEventManager.CheckboxEventTranslator<DocumentListItemDTO>() {
#Override
public SelectAction translateSelectionEvent(CellPreviewEvent<DocumentListItemDTO> event) {
SelectAction action = super.translateSelectionEvent(event);
if (action.equals(SelectAction.IGNORE)) {
if (!event.getNativeEvent().getCtrlKey() && !event.getNativeEvent().getShiftKey())
selectionModel.clear();
return SelectAction.TOGGLE;
}
return action;
}
}));
Lista's answer showed up the right direction!
In order to show the usage of DefaultSelectionEventManager.CheckboxEventTranslator for which on the web only hardly can be found examples, here is a fully functional solution as requested:
setSelectionModel (selectionModel, DefaultSelectionEventManager.<Job> createCustomManager (
new DefaultSelectionEventManager.CheckboxEventTranslator<Job> () {
#Override
public SelectAction translateSelectionEvent (CellPreviewEvent<Job> event)
{
NativeEvent nativeEvent = event.getNativeEvent ();
// Determine if we clicked on a checkbox.
Element target = nativeEvent.getEventTarget ().cast ();
if ("input".equals (target.getTagName ().toLowerCase (Locale.ROOT)))
{
final InputElement input = target.cast ();
if ("checkbox".equals (input.getType ().toLowerCase (Locale.ROOT)))
{
// Synchronize the checkbox with the current selection state.
input.setChecked (event.getDisplay ().getSelectionModel ().isSelected (
event.getValue ()));
return SelectAction.TOGGLE;
}
}
else
{
if (BrowserEvents.CLICK.equals (nativeEvent.getType ()))
{
selectionModel.clear ();
return SelectAction.SELECT;
}
}
return SelectAction.IGNORE;
}
}));
I have successfully created a datagrid table with two columns. A checkbox col and a string col. When I press a button I want to get the selected strings. Currently when I press the button i get an empty hash set.
Selection Model:
private MultiSelectionModel<String> selectionModel = new MultiSelectionModel<String>(KEY_PROVIDER);
Here is how I create the column
Column<String, Boolean> checkColumn =
new Column<String, Boolean>(new CheckboxCell(true, false)) {
#Override
public Boolean getValue(String object) {
// Get the value from the selection model.
return selectionModel.isSelected(object);
}
};
Here is the method that is called from the button
public Set<String> getSelectedItems(){
Set<String> s = selectionModel.getSelectedSet();
return s;
}
Two pieces are missing. You need to add a FieldUpdater to your checkColumn, and you need to link it to a checkbox manager. Replace T with your Object:
checkColumn.setFieldUpdater(new FieldUpdater<T, Boolean>() {
#Override
public void update(int index, T object, Boolean value) {
getSelectionModel().setSelected(object, value);
dataProvider.refresh();
}
});
setSelectionModel(selectionModel, DefaultSelectionEventManager.<T> createCheckboxManager(0));
I want to know urgently how to get widget from gwt VerticalPanel that was occured clickEvent.
I have a verticalPanel with on or more sub-Widgets (FlexTables). I want to use FlexTable.getCellForEvent(event).getRowIndex(); method. So , firstly I should get FlexTable widget from VerticalPanel firstly. I want to add addClickHandler or DomHandler on this VerticalPanel and when user click on it , I want to retrieve FlexTable widget that userclicked. But I don't want to iterate on verticalPanel and add ClickHandler on each FlexTable widgets. How to develop them ? Any Suggestions would be appreciated. Thanks in advance for careful of my question..
You can get it by ClickEvent event
public void onClick(final ClickEvent event) {
VerticalPanel vp = (VerticalPanel) event.getSource();
Iterator<Widget> vp = verP.iterator();
while (vPanelWidgets.hasNext()){
Widget childWidget = vPanelWidgets.next();
if (childWidget instanceof FlexTable) {
...do stuff with childWidget
}
}
}
Really my page show list of FlexTables embedded in VerticalPanel. These flexTables were inserted dynamically and there has checkbox in first columns. My trouble is , when users click on any tables and I want to set checkbox in that row to select. When the users click again in it , the checkbox in that row will unchecked. Here my codes.....
view.getResultPanel().addDomHandler(new ClickHandler() {
public void onClick(final ClickEvent event) {
VerticalPanel vpanel = (VerticalPanel) event.getSource();
for (int i = 0; i < vpanel.getWidgetCount(); i++) {
Widget childWidget = vpanel.getWidget(i);
if (childWidget instanceof FlexTable) {
FlexTable table = (FlexTable) childWidget;
if (table.getCellForEvent(event) != null) { // that will avoid invalid table (that not clicked )
int currentRowIndex = table.getCellForEvent(event).getRowIndex();
Element elem = table.getCellFormatter().getElement(currentRowIndex, 0);
if ("td".equalsIgnoreCase(elem.getTagName())) {
elem = elem.getFirstChildElement();
}
if ("center".equalsIgnoreCase(elem.getTagName())) {
elem = elem.getFirstChildElement();
}
boolean isChecked = false;
if ("".equalsIgnoreCase(elem.getAttribute("checked"))) {
elem.setAttribute("checked", "on");
isChecked = true;
}
else if ("on".equalsIgnoreCase(elem.getAttribute("checked"))) {
elem.removeAttribute("checked");
}
if (isChecked) {
// Do Something
}
}
}
}
}
}, ClickEvent.getType());
At UI view... I create this checkbox like that ..
flxResultTable.setHTML(0, 0, "<center><input type = 'checkbox'/></center>");
Hello I have a Contact class with informations which i show in a CellTable.
The CellTable has a DataListProvider, MultiSelectionModel and KeyProvider
which checks the id of the Contact.
DataListProvider and CellTable have the same KeyProvider.
if i only select/deselect the items in the CellTable and show them in a TextBox ists working fine. But the when i change the value of the Contact item in the TextBox(Contact instance) and try to deselect the item the selectionmodel says its still selected?
I tried with clear() but its still selected!
GWT 2.5 / FireFox
ProvidesKey<Contact> keyProvider = new ProvidesKey<Contact>(){
#Override
public Object getKey(Contact item) {
return item.getIdContact();
}
};
public MyCellTable(boolean canLoad, Integer pagesize, ProvidesKey<T> keyProvider) {
super(-1, resource, keyProvider);
selectionModel = new MultiSelectionModel<T>();
selectionModel .addSelectionChangeHandler(new SelectionChangeEvent.Handler() {
#Override
public void onSelectionChange(SelectionChangeEvent event) {
selectionChange();
}
});
dataProvider = new ListDataProvider<T>(keyProvider);
dataProvider.addDataDisplay(this);
}
in the selection event i call
protected void selectionChange(){
Contact c = grid.getGrid().getSelectedItem();
if(c != null){
cpForm.enable();
cpForm.clear();
form.bind(c); // Formular which updates the selected instance
cpForm.add(form);
}else{
cpForm.disable(noseletionText);
}
}
i have no ValueUpdater
when i select an item i generate a formular and if i change something i call:
#Override
public void save() {
super.save();
ContactServiceStore.get().updateContact(manager.getBean(),
new MyAsyncCallback<Void>() {
#Override
public void onSuccess(Void result) {
onchange();
}
});
}
i if call the method without changes on the contact its still working and i can deselect but when i change the name or something else i cant select other items or deselect the current item!
You're not actually using your ProvidesKeys in your MultiSelectionModel. You need to create your MultiSelectionModel like so:
MultiSelectionModel<T> selectionModel = new MultiSelectionModel<T>(keyProvider);
If you don't supply the MultiSelectionModel with a ProvidesKey it will use the actual object as a key.
Make sure you also add the MultiSelectionModel to the table:
cellTable.setSelectionModel(selectionModel);
The reason selectionModel.clear() wasn't working was because selectionModel was not set to the table.
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.