In celltable when I use like this,
dgrid.setKeyboardSelectionPolicy(KeyboardSelectionPolicy.ENABLED);
Edited fields space click selecting the row, so I used like this
dgrid.setKeyboardSelectionPolicy(KeyboardSelectionPolicy.BOUND_TO_SELECTION);
But in this row gets selected on single click itself..
I want only checkbox for selection, column click should not select the row, Can anyone help me in achieving this?
protected DefaultSelectionEventManager.EventTranslator<ProductProxy> eventTranslator = new DefaultSelectionEventManager.EventTranslator<ProductProxy>() {
#Override
public boolean clearCurrentSelection(CellPreviewEvent<ProductProxy> event) {
NativeEvent nativeEvent = event.getNativeEvent();
String type = nativeEvent.getType();
if (BrowserEvents.CLICK.equals(type)) {
int index = event.getContext().getColumn();
if (index == getDeleteColumnIndex())
return true;
}
return false;
}
#Override
public SelectAction translateSelectionEvent(CellPreviewEvent<ProductProxy> event) {
NativeEvent nativeEvent = event.getNativeEvent();
String type = nativeEvent.getType();
if (BrowserEvents.CLICK.equals(type)) {
if (event.getColumn() == getDeleteColumnIndex()) {
ProductTable.this.productTableManager.deleteProduct(event.getValue());
return SelectAction.IGNORE;
}
}
return SelectAction.DEFAULT;
}
};
Then use that selector in your CellTable:
I have
class MyTable extends CellTable {
void myInit() {
setSelectionModel(selectionModel, DefaultSelectionEventManager.createCustomManager(eventTranslator));
}}
So for your case, just replace getDeleteColumnIndex() by getCheckoxColumnIndex() and return your column index (if it changes), and handle the space key instead of the click
Related
I have a CellTable with a few rows for which I use MultiSelectionModel. The first column is a column of checkbox cells.
When the user checks one of the checkboxes the row becomes selected (as per the example in the site) and when the user clicks a row a function "doActionOnRow()" is called.
My problem is that when the user checks a checkbox the "doActionOnRow()" is also called. How can I make the CheckboxCell consume the click event so it wont be triggered on the celltable as well ?
EDIT:
This is my code:
table.addCellPreviewHandler(new Handler<Patient>() {
#Override
public void onCellPreview(CellPreviewEvent<Patient> event) {
boolean isClick = "click".equals(event.getNativeEvent().getType());
if (isClick) {
doSomething();
}
}});
Column<Patient, Boolean> checkColumn = new Column<Patient, Boolean>(new CheckboxCell(true, false)) {
#Override
public Boolean getValue(Patient object) {
// Get the value from the selection model.
return sm.isSelected(object);
}
#Override
public void onBrowserEvent(Context context, Element elem, Patient patient, NativeEvent event) {
if ("click".equals(event.getType()))
event.stopPropagation();
super.onBrowserEvent(context, elem, patient, event);
}
};
table.addColumn(checkColumn, SafeHtmlUtils.fromSafeConstant("<br/>"));
Even when I add event.stopPropagation(); doSomething(); is called when I click the checkbox.
Any idea why ?
You need to check where the event happens first (on the cell or on the row: I forgot that point). then you just call event.stopPropagation()
You can also decide in your column whether you want to do something with the click this way (snippet from my project)
productColumn = new Column<ProductProxy, ProductProxy>(productCoreCell) {
#Override
public ProductProxy getValue(ProductProxy productProxy) {
return productProxy;
}
#Override
public void onBrowserEvent(Context context, Element elem, ProductProxy object, NativeEvent event) {
getProductTableManager().rowSelected(object);
}
};
I have a Datagrid with a CheckboxCell column. There will be some rows that cannot be checked, and the way I would like to implement this would be to handle the "checked" event and cancel it if some criteria is met. Here is the code I have tried:
Column<Job, Boolean> selectColumn = new Column<Job, Boolean>(new CheckboxCell()) {
#Override
public Boolean getValue(Job job) {
// do I uncheck the cell here?
return JobDataGrid.this.jobSelection.isSelected(job);
}
#Override
public void onBrowserEvent(Cell.Context context, Element elem, Job object, NativeEvent event)
{
super.onBrowserEvent(context, elem, object, event);
String eventType = event.getType();
if ("change".equals(eventType)) {
// do I uncheck the cell here?
}
}
};
How do I handle the event and set the checkbox to be unchecked?
If you want to prevent the change in a checkbox, you can simply cancel the native event inside your onBrowserEvent method:
event.preventDefault();
Note that if you don't update your object when a checkbox is clicked, you can always refresh() your DataGrid and the checkbox will be displayed in its original state.
If you want to make a check box uncheckable, from the UX perspective it is better be disabled.
You can create a custom check box cell where you can control every aspect of rendering of the element including disabled state:
public class UncheckableCheckboxCell extends CheckboxCell {
interface Template extends SafeHtmlTemplates {
#Template("<input type=\"checkbox\" tabindex=\"-1\" checked/>")
SafeHtml INPUT_CHECKED();
#Template("<input type=\"checkbox\" tabindex=\"-1\"/>")
SafeHtml INPUT_UNCHECKED();
#Template("<input type=\"checkbox\" tabindex=\"-1\" disabled=\"disabled\"/>")
SafeHtml INPUT_UNCHECKED_DISABLED();
}
private static UncheckableCheckboxCell.Template template = GWT.create(UncheckableCheckboxCell.Template.class);
public UncheckableCheckboxCell(boolean dependsOnSelection, boolean handlesSelection) {
super(dependsOnSelection, handlesSelection);
}
#Override
public void render(Context context, Boolean value, SafeHtmlBuilder sb) {
// Get the view data.
Object key = context.getKey();
Boolean viewData = getViewData(key);
if (viewData != null && viewData.equals(value)) {
clearViewData(key);
viewData = null;
}
if (value != null && ((viewData != null) ? viewData : value)) {
sb.append(template.INPUT_CHECKED());
} else if (value == null) {
//use null value as an indicator of unchecked and disable state
sb.append(template.INPUT_UNCHECKED_DISABLED());
} else {
sb.append(template.INPUT_UNCHECKED());
}
}
}
Then inside your getValue() method you can return null when you want the check box to be unchecked/disabled:
#Override
public Boolean getValue(Job job) {
// is my job checkable?
if (job.checkable()) {
//return null explicitly so my custom cell knows it should be rendered as disabled
return null;
} else {
return JobDataGrid.this.jobSelection.isSelected(job);
}
}
I have a GWT DataGrid, and a CheckBox in the Header to select/deselect all rows in the grid.
The code for the CheckBox Header is as follows:
private class CheckboxHeader extends Header<Boolean> implements HasValue<Boolean> {
private boolean checked;
private HandlerManager handlerManager;
/**
* An html string representation of a checked input box.
*/
private final SafeHtml INPUT_CHECKED = SafeHtmlUtils.fromSafeConstant("<input type=\"checkbox\" tabindex=\"-1\" checked/>");
/**
* An html string representation of an unchecked input box.
*/
private final SafeHtml INPUT_UNCHECKED = SafeHtmlUtils.fromSafeConstant("<input type=\"checkbox\" tabindex=\"-1\"/>");
#Override
public void render(Context context, SafeHtmlBuilder sb) {
if (Boolean.TRUE.equals(this.getValue())) {
sb.append(INPUT_CHECKED);
} else {
sb.append(INPUT_UNCHECKED);
}
};
public CheckboxHeader() {
super(new CheckboxCell(true, false));
checked = true;
}
// This method is invoked to pass the value to the CheckboxCell's render method
#Override
public Boolean getValue() {
return checked;
}
#Override
public void onBrowserEvent(Context context, Element elem, NativeEvent nativeEvent) {
int eventType = Event.as(nativeEvent).getTypeInt();
if (eventType == Event.ONCHANGE) {
nativeEvent.preventDefault();
// use value setter to easily fire change event to handlers
setValue(!checked, true);
}
}
#Override
public HandlerRegistration addValueChangeHandler(ValueChangeHandler<Boolean> handler) {
return ensureHandlerManager().addHandler(ValueChangeEvent.getType(), handler);
}
#Override
public void fireEvent(GwtEvent<?> event) {
ensureHandlerManager().fireEvent(event);
}
#Override
public void setValue(Boolean value) {
setValue(value, true);
}
#Override
public void setValue(Boolean value, boolean fireEvents) {
checked = value;
if (fireEvents) {
ValueChangeEvent.fire(this, value);
}
}
private HandlerManager ensureHandlerManager() {
if (handlerManager == null) {
handlerManager = new HandlerManager(this);
}
return handlerManager;
}
}
So, I add the Header to the grid, and I add a ValueChangeHandler to it to do the actual selecting/deselecting of individual CheckBox cells in every row of the grid. This all works.
Every CheckBoxCell has a Field Updater, and on every update it loops through every item in the grid to see if they are all checked, and update the header check box. If at least one is unchecked, the header checkbox will be unchecked. I call setValue() on the header check box, and after that I call redrawHeaders() on the entire grid. This also works.
What doesn't work is - after changing the "state" of the header check box programatically, it takes two clicks for it to fire it's internal setValue again, and therefore trigger my handler. And what's even funnier - the first click does change the state of the check box, but it just doesn't fire the event.
Any help would be appreciated.
How are you constructing the CheckboxCells themselves? I ran into a similar issue with a column of checkboxes "eating" clicks, and the solution was to call CheckboxCell cell = new CheckboxCell(true,true) and then pass that cell into the constructor of the column.
When using TableBuilder to create rows and sub rows, selection model isn't working as expected.
When clicking on a subrow's checkbox the row isn't been selected, however, the parent row become selected instead.
I tried to overload onBrowserEvent of the CheckboxCell in order to manually handle the selection but it seems that the DataGrid itself fires the selection event when pressing the checkboxcell.
In case where rows and subrows are from the same type, how can I add selection model that supports both rows and subrows?
#Override
public void onBrowserEvent(Context context, Element elem, final T object,
NativeEvent event) {
// The provided row is always the root row, so we need to find the
// correct one when a sub row was edited
actualIndex = context.getSubIndex();
actualObject = object;
if (0 != context.getSubIndex() && object instanceof RowDTO) {
actualIndex = context.getSubIndex();
actualObject = (T) ((RowDTO) object).getChild(actualIndex - 1);
context = new Context(context.getIndex(), context.getColumn(),
actualObject, actualIndex);
}
ValueUpdater<C> valueUpdater = (getFieldUpdater() == null) ? null
: new ValueUpdater<C>() {
#Override
public void update(C value) {
getFieldUpdater().update(actualIndex, object, value);
}
};
getCell().onBrowserEvent(context, elem, getValue(actualObject), event,
valueUpdater);
}
I'm pretty new to GWT, but I've been making pretty fast progress until now.
I have a cell table, most of which is read only data returned from an RPC.
I have two columns in the cell table that the user can interact with. One is a TextInputCell, one is a ButtonCell.
When the user clicks the ButtonCell, i want to send the value in the TextInputCell for that row to an RPC.
I have all this working.
The part I cannot get to work is that when the button (ButtonCell) is clicked, I want to disable the button in that row until the RPC returns, and then re-enable it. I also want to clear the text in the input cell for that row when the RPC returns.
I cannot figure out how to get handles to the actual ButtonCell object that was clicked or the TextInputCell to monkey with them.
Any help appreciated.
bq
The problem is that there's no object for the button that was clicked. Your ButtonCell creates HTML that renders buttons - every button in the whole column was written by the same button cell, but there's no java object associated with them.
To disable the button directly, you'll have to first create a handle to it. You could do this by rendering an id in the html your ButtonCell creates, and then getting the element by id from the DOM.
What I do in a similar case is just re-render the entire table when there's a state change. It doesn't take that long, and you don't need to store any references (the whole reason you're using CellTable instead of Grid anyway). When you know your button should be disabled, you just render it disabled.
Both of these suggestions would require you to subclass your Cell objects so that you can do some custom rendering. It's not very difficult, but wrapping your head around the order of operations can be confusing. Good luck!
PS: If you just want to disable the button (and not empty the text field), I think onBrowserEvent gives you a handle to the Element that was clicked - you might be able to use that to disable it.
I have gone through this problem, but eventually I solved it.
check this code
package com.ex7.client;
import com.google.gwt.cell.client.ButtonCell;
import com.google.gwt.cell.client.ValueUpdater;
import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.NativeEvent;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
public class CWButton extends ButtonCell {
private int row = -1;
private String alternativevalue;
private String exTitle = "";
private String value;
private String title = "";
public CWButton( ) {
super();
}
#Override
public void render(com.google.gwt.cell.client.Cell.Context context,
String src, SafeHtmlBuilder sb) {
if (row == -1) {
sb.appendHtmlConstant("<button title='" + title + "' >" +value+"</button>");
return;
}
if (row != context.getIndex()) {
sb.appendHtmlConstant("<Button disabled='disabled' title='" + title + "' >"+ value+"</button>");
} else {
sb.appendHtmlConstant("<button title='" + exTitle + "' >"+ alternativevalue+"</button>");
}
}
#Override
public void onBrowserEvent(com.google.gwt.cell.client.Cell.Context context,
Element parent, String value, NativeEvent event,
ValueUpdater<String> valueUpdater) {
if (row == -1 || row == context.getIndex()) {
super.onBrowserEvent(context, parent, value, event, valueUpdater);
return;
}
}
public void setTitle(String title) {
this.title = title;
}
public int getRow() {
return row;
}
public String getExTitle() {
return exTitle;
}
public void setExTitle(String exTitle) {
this.exTitle = exTitle;
}
public void setRow(int row) {
this.row = row;
}
public String getAlternativeValue() {
return alternativevalue;
}
public void setAlternativeValue(String alternativeValue) {
this.alternativevalue = alternativeValue;
}
public String getValue() {
return value;
}
public void setValue(String value) {
this.value = value;
}
}