When I have a input such as a checkbox in the celltable cell, I noticed the cell actaully is clickable or focusable. If I click in the cell but outside of the checkbox, the cursor blinks there in the cell but ourside the checkbox. This behavior happens on all the cells with any inputs. or no inputs such as text only cell.
It is very anoying because, to toggle the checkbox, you have to click precisly on the little check box. Clicking anyware outside the checkbox but inside the cell will get the cell focused and cursor blinks there.
Any solutions?
below is an example of a checkbox rendered in a CellTable cell:
final CheckboxCell requiredCell = new CheckboxCell();
Column<MyInfo, Boolean> requiredCol = new Column<MyInfo, Boolean>(requiredCell) {
#Override
public Boolean getValue(MyInfo info) {
return info.isRequired();
}
};
cellTable.addColumn(requiredCol, "Required");
cellTable.setColumnWidth(requiredCol, 10, com.google.gwt.dom.client.Style.Unit.PCT);
You could add a click listener (or more precisely, a browser event listener that handles clicks) to your cell and just have it manually check the box.
Related
After setting setShowHover true, how do I create the tooltip? Right now it is a blank tooltip.
ListGridField exportField = new IconField(FIELD_EXPORT, REDO_ICON.jpg, EXPORT_CUSTOM_GROUP_HANDLER);
exportField.setShowHover(true);
Tried exportField.setPrompt("a tooltip message");, but this did not give every single icon a tooltip when i mouse over it.
This a picture showing the tooltip is blank when i hover over the blue-pointer button, the message "a tooltip message" only appear when I hover over the very top blue-pointer button. I want it to show a tooltip for every blue-pointer button.
Use exportField.setHoverCustomizer() to show a customized prompt message.
Try this one
ListGrid grid = new ListGrid();
grid.setCanHover(true);
grid.setShowHover(true);
...
exportField.setHoverCustomizer(new HoverCustomizer() {
#Override
public String hoverHTML(Object value, ListGridRecord record, int rowNum, int colNum) {
// you can customize the prompt and can get the values from current record also
return "a tooltip message";
}
});
I'm using UploadItem, RadioGroupItem and some other widgets. RadioButton is having onChangeHandler which will decide what all other components need to be displayed. I've uploaded some file using UploadItem. Then I changed the radio button selection. On changing the radio button, required widgets are getting displayed properly but whatever file I'd selected using UploadItem is going away. Fresh UploadItem widget is getting displayed. In other words page is getting refreshed.
My requirement is whenever I change radio button option, required widget should displayed along with that whatever file I had selected using UploadItem should remain same.
My Code is something like this:
UploadItem upload = new UploadItem();
RadioGroupItem radioGroup = new RadioGroupItem();
HashMap map = new HashMap();
map.put("option1","option1");
map.put("option2","option2");
radioGroup.setValueMap(map);
TextItem textbox = new TextItem();
radioGroup.addChangeHandler(new ChangeHandler(){
public void onChanged(ChangedEvent event) {
String radioValue =((String)event.getValue());
if(radioValue.equalsIgnoreCase("option2")){
textbox.show();
}else{
textbox.hide();
}
}
});
Add all created widgets to DynamicForm object using dynamicForm.setFields(all created widgets)
Changing the radio button should hide and show the textBox. But while doing that page is getting refreshed and whatever file we had selected using UploadItem is lost.
As per the documentation for hide() and show() of FormItem class, invocation of any of these methods, will cause the DynamicForm to be redrawn.
So it may cause the problem you're getting.
To overcome this issue, I would suggest you to put UploadItem in a separate DynamicForm.
fire an event on radio Selection change as
radioButton.addListener(Events.Change, new Listener<BaseEvent>() {
#Override
public void handleEvent(BaseEvent be) {
if(radioButton.getValue()){
//fire an event here for ur widget
}
}
});
When I select a row in a CellTable which contains several columns, the whole row gets colored in yellow. It does not depend on which area of the row I click (which column of the row).
What I try to do is to keep the selected row colored in yellow as long as no other row of this very table is selected. At the moment, as soon as I click somewhere else in the browser, the row gets back its original color.
I tried to use a selection model, but this changed nothing. Do you have any advise or is this simply not possible, since the focus is managed by the browser? The behavior is the same in the Google showcase for the CellTable...
The selection model actually does what you want to do: it paints a row blue and the row does not change color if you click elsewhere in the page. (Only when another row is selected)
There are 2 selection models:
One that lets you select only one row, and another one that lets you select multiple rows.
MultiSelectionModel<Row> selectionModel = new MultiSelectionModel<Row>();
table.setSelectionModel(selectionModel);
SingleSelectionModel<Row> selectionModel = new SingleSelectionModel<Row>();
table.setSelectionModel(selectionModel);
The solution of user905374 did actually work. I mentioned in my first post that I already tried the solution with a selectionModel and that it did not work. This was partially true. It does work, but only if the table does NOT contain a CheckboxCell.
Following a working and the not working example. I think this might be a bug, but I am not sure if I miss something.
final CellTable<LicenceDto> licenseTable = new CellTable<LicenceDto>();
final SingleSelectionModel<LicenceDto> selectionModel = new SingleSelectionModel<LicenceDto>();
licenseTable.setSelectionModel(selectionModel);
//--- If I add this column, the selection does work.
Column<LicenceDto, String> workingColumn = new Column<LicenceDto, String>(new TextCell()) {
#Override
public String getValue(LicenceDto object) {
return "Works";
}
};
workingColumn.setFieldUpdater(new FieldUpdater<LicenceDto, String>() {
#Override
public void update(int index, LicenceDto object, String value) {
;
}
});
licenseTable.addColumn(workingColumn);
//--- If I add this column, the selection does NOT work anymore.
Column<LicenceDto, Boolean> notWorkingColumn = new Column<LicenceDto, Boolean>(new CheckboxCell(true, true)) {
#Override
public Boolean getValue(LicenceDto object) {
return object.getEnabled();
}
};
notWorkingColumn.setFieldUpdater(new FieldUpdater<LicenceDto, Boolean>() {
#Override
public void update(int index, LicenceDto object, Boolean value) {
presenter.enableLicense(object, value);
}
});
licenseTable.addColumn(notWorkingColumn);
You can even combine multiple cells and add them to the table (e.g. LinkActionCell etc). As long as there is no CheckboxCell, the blue selection with the SingleSelectionModel does work like a charm. Does anyone see what I do wrong with this CheckboxCell or is there a bug?
UPDATE
It was simply a usage error of me. The problem was that I set handlesSelection to true (second parameter of the CheckboxCell constructor) even thought I don't handle anything. Setting it to false solves the problem.
Bottomline: Use a selection model (e.g. SingleSelectionModel) and do not set the handlesSelection parameter to true of the CheckboxCell constructor to true, if you don't handle the selection by yourself.
You should observe the Showcase demo again. This time use the checkbox on the left most column i.e the first column. On selection the row turns blue indicating the row selection is made. This is when you have SelectionModel set up. Click on the page anywhere outside the CellTable/DataGrid the selection is not changed.
Now, instead of choosing the row via checkbox from first column, you click on a row in any other column. The row turns yellow. Click on the page anywhere outside the CellTable/DataGrid the focus/yellow is lost.
"colored in yellow" indicates row is under focus and being edited and not selected.
Note - you can force row selection by using click events per cell.
Try something like this:
CellTable table;
YourDataObject object = new YourDataObject(...);
SingleSelectionModel<YourDataObject> selectionModel =
new SingleSelectionModel<YourDataObject>();
table.setSelectionModel(selectionModel);
...
table.setSelected(object, true);
Use MultiSelectionModel if you wish more than one line to be highlighted.
Store the selected row's index. When user selects row, change row's style to some "selected-style" appropriate for your case (defined in your css file) and remove selected style from the previously selected row. Also don't forget to update selected row's index.
If you provide some code from the original version I help you out with some code with pleasure.
I have a GWT 2.4 DataGrid associated with a SingleSelectionModel. One of the columns in the grid is a CheckboxCell, but it is not used for selection, but to set a boolean field value for the underlying item type of the row. My problem is that when I click on the checkbox, the row is selected first, then I have to click a second time to set/unset the checkbox. I would prefer that clicking outside of the checkbox does row selection, while clicking inside of the checkbox only sets/unsets the checkbox. Can anyone point me in the right direction on how to do this. I keep coming back to onBrowserEvent, but I'm not sure what to try.
There's a couple of approaches you can do, depending on what exactly you want to do it. Here are the two ideas that come to mind:
Use a DefaultSelectionEventManager.CheckboxEventTranslator to blacklist the column
Intercept it on a cell by cell basis with CellPreviewEvent.Handler and handle it on the DOM level by checking the EventTarget ("click".equals(event.getType())) and then use event.stopPropogation() when the EventTarget is of an input type "checkbox"
This code solved in my case a problemn very similar to yours.
Column<SomeBean, Boolean> checkboxColumn= new Column<SomeBean, Boolean>(new CheckboxCell(true,false))
{
#Override
public Boolean getValue(SomeBean object)
{
if(object == null || object.getId() == null)
return null;
return selectionModel.isSelected(object);
}
};
I have one small problem i.e. one textbox is their when click on the text box the popup is shows below the text box.The popup contains celltable
i write keypresslisner for textbox when i press Down And UP arrow the focus is set to be cellTable And also we still press down and up arrows its highlites the rows in celltable
anyone please tell me how to solve it...it's my request
When I wrote code like this:
box.addKeyPressHandler(new KeyPressHandler() {
#Override
public void onKeyPress(KeyPressEvent event) {
if (event.getNativeEvent().getKeyCode() == 38) {
celltable.setFocus(true);
} else if (event.getNativeEvent().getKeyCode() == 40) {
celltable.setFocus(true);
}
}
});
only the focus is goes to the cell table
The question is a little bit unclear, but I think you may be helped by FocusPanel:
http://google-web-toolkit.googlecode.com/svn/javadoc/2.0/com/google/gwt/user/client/ui/FocusPanel.html
Wrap your CellTable in this FocusPanel and you can do setFocus() on that instead. The FocusPanel has addKeyPressHandler(), so you can capture further keypress events there, also when your textbox has lost the focus.