GXT ComboBox unselect after selection - gwt

I have a GXT ComboBox which is bound to a ListStore and has a addSelectionHandler that is called which is working fine. I have also used the combo.setEmptyText("Select an item..").
But, when the user makes a selection I'd like to have the ComboBox return to its' "no selection" state. How can I have it return to show the "Select an item.."?
StProperties props = GWT.create(StProperties.class);
ListStore<St> sts = new ListStore<St>(combo.id());
combo = new ComboBox<St>(sts, props.name());
combo.setTypeAhead(true);
combo.setTriggerAction(TriggerAction.ALL);
addHandlersForEventObservation(combo,props.name());
...
combo.addSelectionHandler(new SelectionHandler<T>() {
public void onSelection(SelectionEvent<T> event) {
System.out.println("value selected:"+event.getSelectedItem());
// handle selection
// unselect item in combo here ---
}
});

It appears there is presently a bug in GXT 3 around this issue, as reported at http://www.sencha.com/forum/showthread.php?234736, present as of GXT 3.0.4. As reported in that bug, it seems that you can call first setValue(null), followed by redraw(true) then setText(null) on the field.
This also happens to a few other fields - based on the details of the report it seems probable that the bug is in TriggerField itself, so this workaround may be required for all subclasses.

Related

Control Wicket wizard's flow by setting setComplete(boolean)

Hey there I'm still trying to improve a customized Wicket Wizard to display the steps with following states: active, completed, pending. Therefore the information of isCompleted(); should return the right value. Refering to a previous question, isComplete(); returns true, if the wizard can go to the next step.
How can I manipulate this information to get the full advantage of my draft? E.g. in one WizardStep I have multiple input fields.
super(new ResourceModel("daten.title"), new ResourceModel("daten.summary"));
java.util.Collections.addAll(sprachen, "Deutsch","English","Français","Italiano");
add(name = new RequiredTextField<String>("name", Model.of("")));
add(vorname = new RequiredTextField<String>("vorname", Model.of("")));
add(strasse = new RequiredTextField<String>("strasse", Model.of("")));
add(ort = new RequiredTextField<String>("ort", Model.of("")));
...
I don't want the step to "be completed" until each field is filled out. To check the condition I'd have to add an AjaxListener to each component and check for it's state to setComplete(boolean);. Can I control this flow from outside the wizard form? For example with an implementation of ICondition or is there another way? Because basically I can't go to the next step, because all of my textfields are RequiredTextField and cannot be skipped.
Any suggestions are highly appreciated.
Update / Solution
Component buttonbar = getForm().get(Wizard.BUTTONS_ID);
buttonbar.setOutputMarkupId(true);
Just get(Wizard.BUTTONS_ID); won't work.
Thanks to Sven Meier for the hint!
You'll have to add an AjaxFormComponentUpdatingBehavior to all your form components.
Then override #onEvent() in your wizard:
public MyWizard(id, WizardModel model) {
super(id, model);
get(Wizard.BUTTONS_ID).setOutputMarkupId(true);
}
public void onEvent(IEvent<?> event) {
if (event.getPayload() instanceof AjaxRequestTarget) {
((AjaxRequestTarget)event.getPayload()).add(get(Wizard.BUTTONS_ID));
}
}
Let your step#isComplete() return true depending on its model values, this way the wizard buttons will always be up to date.

Unable to uncheck a checkbox within a combo box

I have a combo box which contains two List Items. Each list item consists of a checkbox and a text message.
Now, I am using a function which looks something like this to uncheck all the checkbox's within the combobox.
public ApplicationReports UnSelectAllCheckBox()
{
int i = 0;
ComboBox someVariable= Application.Library.GetFromWindow(Application.Configuration.LoginWindow.Title).OfType<ComboBox>("corresponding Automation Id");
foreach (ListItem casino in someVariable.Items)
{
someVariable.Item(i).UnCheck();
i++;
}
// someVariable.Item(0).UnCheck();
return this;
}
I am able to uncheck the second checkbox using this approach but not the first one. Unable to identify
what is the problem when it is working fine for the second list item. I am using the recently released version of
white framework. "someVariable" is not a problem. I checked its retrieving the correct combo box while
debugging.
Try this instead:
foreach (ListItem casino in someVariable.Items)
{
casino.UnCheck();
}
No need to use i and make your own loop iterator.

GWT CellTable keep focus on selected row

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.

What would be a good way of filtering a GWT CellList using multiple CheckBoxes?

Working in Google Web Toolkit (GWT) I am using a CellList to render the details of a list of Tariffs (using a CompositeCell to show a CheckBoxCell next to a custom cell of my own).
I want to filter the list by tariff length (12, 18, 24, 36 months etc). I would like to render a checkbox for each tariff length at the top of the list, and update the dataProvider as necessary when users uncheck and recheck a box.
I do not know in advance the set of tariff lengths, they will be extracted from the result set when the page is rendered. There could just be two (requiring two checkboxes), but possibly there could be 10 (requiring 10 checkboxes) - I only want to render a checkbox for each as needed.
So somehow I need to associate an int value with each checkbox, and then pass that int to a function that updates the list by removing all tariffs that match. I'm just not sure how to add the handler for the checkboxes and how to get the value for that particular box.
This is what I'm thinking:
// panel to hold boxes
private Panel contractLengthPanel = new HorizontalPanel();
textPanel2.add(contractLengthPanel);
// create a set of the terms, by looping the result set
Set<String> contractTerms = new HashSet<String>();
for(ElecTariff tariff : tariffs)
{
contractTerms.add(Integer.toString(tariff.getContractLength()));
}
// loop that set, creating a CheckBox for each value
for(String term : contractTerms)
{
CheckBox box = new CheckBox(term + " Months");
// set all boxes with the same name, and a unique id
box.getElement().setAttribute("name", "termBoxes");
box.getElement().setAttribute("id", "termBox" + term);
contractLengthPanel.add(box);
}
Now I'm not sure if I'm along the right lines here, but now I have each box as part of the same group (they have the same name) I would like to use that to add a handler that is called when a box is checked or unchecked, passing the box id (which contains the tariff length) to that function.
I hope this wasn't too confusingly written. Help appreciated.
There really is nothing like a "group of checkboxes" in HTML, and neither there is in GWT. There are kind of "groups of radiobuttons" though, but it's only about having their checked state mutually exclusive, it doesn't change anything to the way you work with them from code.
You have to listen to changes on each and every checkbox.
What you can do though is to use the same event handler for all your checkboxes; something like:
ValueChangeHandler<Boolean> handler = new ValueChangeHandler<Boolean>() {
#Override
public void onValueChange(ValueChangeEvent<Boolean> event) {
CheckBox box = (CheckBox) event.getSource();
String id = box.getFormValue();
boolean checked = box.getValue();
…
}
};
(note: I used getFormValue() rather than getElement().getId(); I believe it's a better choice: it's specifically made to associate a value with the checkbox)

GWT ListBox detect when value is re-selected

I'm having a problem using a GWT listbox. I have a case where the user selects a value from a listBox, but it can become invalidated if they change data in a related field. To validate the listBox, the user has to either select a new value, or confirm their old selection by selecting the same value again. I can't figure out how to determine if they have selected the same value so that I can restyle the listBox to look validated.
The valueChanged handler only detects if a new value is selected. The clickHandler and focusHandler fire too often because they fire when the user isn't selecting a value. Any ideas?
You can improve the clickHandler with something like this :
ignoreClick = true;
lastSelection = -1 ;
....
listBox.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
if (!ignoreClick) {
lastSelection = listBox.getSelectedIndex();
}
ignoreClick = !ignoreClick;
}
});
I tried it and the event was only fired if you selected an item. But you should rethink your user interface , like said above.