GWT - implement ClickHandler event on a row of a FlexTable - gwt

So my software is displaying a flextable (the data is grabbed and displayed from a database) with users allowing to click on a checkbox to select a data.
//users is the flextable object.
userCheck = new ClickHandler() {
public void onClick(ClickEvent event) {
CheckBox src = (CheckBox) event.getSource();
for (int i = 1, n = users.getRowCount(); i < n; i++) {
CheckBox box = (CheckBox) users.getWidget(i, 0);
if (!box.equals(src)) {
box.setValue(false, false);
}
}
removeUserButton.setEnabled(src.getValue());
editUserButton.setEnabled(src.getValue());
}
};
The code above works, but now I'm trying to implement an action where instead of the user clicking on the checkbox, I want the user to click on a row (which ever cell of the table) and make the whole row (where the user have selected) to be highlighted. So I implemented this code below but so far it doesn't work (like the mouseclick won't register, I've yet to implement the color stuff yet.. :( ). Any suggestions?
userRowCheck = new ClickHandler() {
public void onClick(ClickEvent event) {
Cell src = users.getCellForEvent(event);
int rowIndex = src.getRowIndex();
System.out.println("Cell Selected: userRowCheck Handler, rowIndex: " + rowIndex);
//This is just to check if this method is even called out. And well, it doesn't.
}
};
Thanks very much!!!!

If you added userRowCheck to the FlexTable : myFlexTable.addClickHandler(userRowCheck); it should work. Just make sure you test src for null, because if you didn't put a widget in a cell and the user clicks on that cell it returns null.

Related

Swap the type of link depending on model object

I'm at complete loss how to proceed further:
I have panel with a DropDownChoice and a submit button next to it. Depending on the selected value of the DropDownChoice (Obtained upon the firing of a OnChangeAjaxBehavior attached to it, the submit button needs to either replace the whole panel with a different one, OR become an ExternalLink.
Currently, the code looks like that:
public class ReportSelectionPanel extends Panel {
protected OptionItem selectedOption ;
public ReportSelectionPanel(String id) {
super(id);
IModel<List<OptionItem>> choices = new AbstractReadOnlyModel() {
// Create a list of options to be displayed in the DropDownChoice
} ;
final IModel<OptionItem> optionModel =
new PropertyModel<OptionItem>(this,"selectedOption") ;
final DropDownChoice<OptionItem> options =
new DropDownChoice("selectChoice",optionModel,choices) ;
// I don't know what the button should be... Plain Button? A Link?
final Component button = ???
options.add( new OnChangeAjaxBehavior() {
protected void onUpdate(AjaxRequestTarget target) {
if ( selectedOption.getChild() == null ) {
// button becomes an ExternalLink.
// A new window will popup once button is clicked
} else {
// button becomes a Something, and upon clicking,
// this ReportSelectionPanel instance gets replaced by
// an new Panel instance, the type of which is
// selectedOption.getChild()
}
} ) ;
I'm really not quite sure what the commented lines should become to achieve the result. Any suggestions?
Thanks!
Eric
IMHO it's nicer to keep just one button and just react differently depending on the selected option:
final Component button = new AjaxButton("button") {
public void onClick(AjaxRequestTarget target) {
if (selectedOption.getChild() == null) {
PopupSettings popup = new PopupSettings();
popup.setTarget("'" + externalUrl + "'");
target.appendJavascript(popup.getPopupJavaScript());
} else {
ReportSelectionPanel.this.replaceWith(new ReportResultPanel("..."));
}
}
};
// not needed if options and button are inside a form
// options.add( new OnChangeAjaxBehavior() { } ) ;

GXT3 - Editable Grid: display the row to edit in a popup

GXT3 - Grid: Adding a column with a button to modify row in Editable Grid
In the example the line is editable automatically when line is selected.
http://www.sencha.com/examples/#Exam...oweditablegrid
I want the line to be changed when I click on the edit button that would appear in a popup.
TextButtonCell button = new TextButtonCell();
button.addSelectHandler(new SelectHandler() {
#Override
public void onSelect(SelectEvent event) {
Context c = event.getContext();
Info.display("Event", "Call the popup here.");
}
});
nameColumn.setCell(button);
There is a way do get this?
Thanks in advance for your help.
First of all you have yo create a column with TextBoxCell which may you already created.
Then you have to disable default onclick editable behavior of grid.
For that as per Sencha example's file RowEditingGridExample.java you can override onClick event and prevent to fire default code.
public class RowEditingGridExample extends AbstractGridEditingExample {
#Override
protected GridEditing<Plant> createGridEditing(Grid<Plant> editableGrid) {
return new GridRowEditing<Plant>(editableGrid){
#Override
protected void onClick(ClickEvent event) {
}
};
}
}
And when you click on textBoxCell click handler you can start editing manually.
TextButtonCell button = new TextButtonCell();
button.addSelectHandler(new SelectHandler() {
#Override
public void onSelect(SelectEvent event) {
Context c = event.getContext();
//Here you can pass a new GridCell like with proper cell index and row index.
GridCell cell = new GridCell(getRowIndex(), getCellIndex());
editing.startEditng(cell);
}
});
nameColumn.setCell(button);
If you want to appear row editor in separate popup you have to design it manually.

GWT CellTable SelectionModel can not deselect item after editing

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.

GWT:how to get selected radio button's value

I am create dynamic number of radio buttons in my GWT
public void createTestList(ArrayList<Test> result){
for(int i =0 ; i<result.size();i++){
int id = result.get(i).getTestId();
RadioButton rd = new RadioButton("group", result.get(i).getTestType());
verticalPanel.add(rd);
}
where Test is my Entity class ..
I am getting 4 different types of radio buttons in my view , Now if i select any one of the radio button, first I need to get the id of the selected Radio button , how can this be possible ?
secondly How will i check that which one of the multiple radio button is selected ?
Thanks
You need to check public java.lang.Boolean getValue() on each radio button whether it is checked or not.
it is possible to add click handler and update selected radio button variable:
choiceItemKind = new VerticalPanel();
ArrayList<String> kinds = new ArrayList<String>();
kinds.add(...);
kinds.add(...);
choiceItemKind.clear();
ClickHandler choiceClickHandler = new ClickHandler()
{
#Override
public void onClick(ClickEvent event)
{
addItemKindSelectedLabel = ((RadioButton) event.getSource()).getText();
}
};
for (String label : kinds)
{
RadioButton radioButton = new RadioButton("kind", label);
//radioButton.setTitle("Tooltyp");
if (label.equals(addItemKindSelectedLabel))
radioButton.setValue(true);
radioButton.addClickHandler(choiceClickHandler);
choiceItemKind.add(radioButton);
}
...
addItemKindSelectedLabel = "";
...
if (!addItemKindSelectedLabel.isEmpty())
...;
upd: set selected radiobutton without rebuild:
for (int i = 0; i < choiceItemKind.getWidgetCount(); i++)
{
RadioButton radioButton = (RadioButton) choiceItemKind.getWidget(i);
radioButton.setValue(radioButton.getText().equals(addItemKindSelectedLabel));
}

GWT CellList; programmatical scrolling between elements options

I would like to understand the options available to scrolling to a specific element in a CellList? Currently I have a 100 elements in the list and need to "jump" through the elements at the click of a button but can't seems to locate any methods on the celllist (or in the code) that provides this feature.
Any Ideas?
Many Thanks in advance,
Ian.
**EDIT
working code example below;
public class CellListTest implements EntryPoint {
private CellList<String> cellList;
private SingleSelectionModel<String> stringSingleSelectionModel;
/**
* This is the entry point method.
*/
public void onModuleLoad() {
cellList = new CellList<String>(new TextCell());
cellList.setRowData(buildStringList(200));
cellList.setKeyboardSelectionPolicy(HasKeyboardSelectionPolicy.KeyboardSelectionPolicy.BOUND_TO_SELECTION);
Button byTen = new Button("Jump Forward 10");
stringSingleSelectionModel = new SingleSelectionModel<String>();
cellList.setSelectionModel(stringSingleSelectionModel);
byTen.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
jumpForward(10);
}
});
byTen.setHeight("30px");
HTMLPanel htmlPanel = new HTMLPanel("");
VerticalPanel verticalPanel = new VerticalPanel();
cellList.setHeight("600px");
ScrollPanel scrollPanel = new ScrollPanel(cellList);
verticalPanel.add(byTen);
verticalPanel.add(scrollPanel);
htmlPanel.add(verticalPanel);
RootLayoutPanel.get().add(htmlPanel);
}
final Random random = new Random();
private List<String> buildStringList(int numberToCreate) {
final ArrayList<String> randomValues = new ArrayList<String>();
for (int i = 0; i < numberToCreate; i++) {
randomValues.add(String.valueOf(random.nextInt()));
}
return randomValues;
}
private int currentPosition = 0;
private void jumpForward(int toJump) {
Element rowElement = cellList.getRowElement(currentPosition += toJump);
rowElement.scrollIntoView();
}
}
I do not think CellList has a direct method for your purpose.
What you can do is use Element's scrollIntoView method. This method adjusts the scrollLeft and scrollTop properties of each scrollable element to ensure that the specified element is completely in view. In order to use that method you need to get the element containing the cell you want to show. One way to achive this is by using CellList public getRowElement(int indexOnPage).
I have not tryed it, but I believe the following code should work:
//Ensures cell 22 on page is shown
Element element = myCellList.getRowElement(22);
element.scrollIntoView();
Scrolling the element into view is one thing; changing the keyboard focus to a particular element is quite another. After much exploration, I have found that the best way to achieve that is to fire native events to simulate the user pressing keys.
private void hitKeyOnList(int keyCode) {
NativeEvent keyDownEvent = Document.get().createKeyDownEvent(
false, false, false, false, keyCode);
list.getElement().dispatchEvent(keyDownEvent);
}
In the above snippet, the list variable is a reference to a CellList.
So, to move the cursor to the end of the list, do this:
hitKeyOnList(KeyCodes.KEY_END);
to move the cursor to the next item down from the one that currently has keyboard focus:
hitKeyOnList(KeyCodes.KEY_DOWN);
This approach should work for all of these keys, which are handled by AbstractHasData:
KeyCodes.KEY_DOWN
KeyCodes.KEY_UP
KeyCodes.KEY_PAGEDOWN
KeyCodes.KEY_PAGEUP
KeyCodes.KEY_HOME
KeyCodes.KEY_END