I`m trying to add addValueChangeHandler function to a TextBox inside a flexTable.
But when I add this code:
int rowIndex = tableImages.getCellForEvent(event).getRowIndex();
I use this method to know the current row in case of a ClickEvent.
the method is not acceptable for ValueChangeEvent,
so how can I know what is the row Index for the changed cell?
Thank you.
Well yes, because it needs a Cell itself, not a TextBox or event value.
What you can do, is:
Get the event Source via event.getSource()
Cast it to Widget at least (though it's safe to assume it's a textBox) Widget sourceWidget = (Widget)event.getSource();
Get the source widget's element's parent sourceWidget.getElement().getParent();
This way you'll acquire the actual <td> cell your textBox nested in.
Then you can getCellFormatter of your table and find the index of the cell in a loop, comparing the <td> element you got with the cells of your table.
Please tell me if it solved your problem
Related
We have a requirement to move the cursor from one editable cell to another automatically in sap.m.table .
I tried all the previously answered blogs but none of the code works.
Has anyone tried similar requirement before ?
Thanks
Tisha
I had this requirement before. I had to automatically focus from input field in column A to the next input field in column C in my sap.m.Table.
How I solved it was like this:
I detected the change of my input A by defining an event handler on the view XML. Then I get by id the input C and use jQuery method to put focus on its HTML inner element.
Lets say I have a layout panel having multiple textboxes.
Now I want to get a particular textbox in that panel by its name. How can I do that?
Thanks in advance.
One way to do it is to keep references of the textboxes in a hashMap while you create them.
You need to be careful about memory leaks though.
Another way is to use GWtQuery. You could access then by name any element in the DOM.
To get it without without GWTQuery you can do that:
Element element = Document.get().getElementById("myTextboxID");
TextBox box = new TextBox();
box.wrap(element);
Since gwt has not a css-selector implementation, I would use gwtquery aka gquery whose selector implementation performs really well.
Apart from many other features, it is able to return the widget asociated with any element:
import static com.google.gwt.query.client.GQuery.*;
[...]
// if the textbox is already a widget
TextBox b = $("input[name=first_name]").widget();
//Or it its an element
TextBox b = TextBox.wrap($("input[name=search]").get(0));
b.setValue("Foo");
I want to add a special selection model to the celltable. Basically the function i want to have is to select a row on the table which is located on left side, a corresponding form will pop up on the right side.
I know so many people will use the singleSelectionModel with SelectionChangeHandler.
But there is problem with this method.
For example, if I select row 1 on the table. the form pop up. I close the form by clicking the close-button. Later then, I select the row 1 again, the event is not fired, because it is SelectionChangeHandler. I have to select other row before doing this. This is no good.
So I think there are a few ways to do this:
Make the row deselected right after I select the row.
Use click handler to fire the event ( to pop up the form)
Use other selection model with other selection handler to do this. (I have no ideas about this though)
So my questions are,
Does anyone know what kind of other selection handler I can use for this.
If I use the click handler on celltable, will there be any problem?
I just want to learn more about this. So any ideas will be welcome.
Thanks a lot.
Best Regards.
Use NoSelectionModel. It won't update the table view after the row is selected. That is, even if the same row is selected, the change event is fired.
//Here 'Contact' is the datatype of the record
final NoSelectionModel<Contact> selModel = new NoSelectionModel<Contact>();
selModel.addSelectionChangeHandler(new Handler() {
#Override
public void onSelectionChange(SelectionChangeEvent event) {
Contact clickedObject = selModel.getLastSelectedObject();
GWT.log("Selected " + clickedObject.name);
}
});
table.setSelectionModel(selModel);
I have using cell table in my each project. The better way to just deselect row manually as u mention. and make change css such as selected cell table's row look not changed after selection.
I am using GWT 2.4's new DataGrid in a project. I configured the DataGrid with a pagesize of 50.
The available screen is not big enough to display all items and thus a vertical scrollbar is shown (this is actually the main purpose for using a DataGrid in the first place).
I attached a SingleSelectionModel to the DataGrid in order to be able to select items.
This works fine so far.
However I also have another widget with which the user can interact. Based on that user action a item from the DataGrid should be selected.
Sometimes the selected item is not in the visible screen region and the user has to scroll down in the DataGrid to see it.
Is there any way to automatically or manually scroll down, so that the selected item is visible?
I checked the JavaDocs of the DataGrid and found no appropriate method or function for doing that.
Don't know if this works, but you could try to get the row element for the selection and use the scrollIntoView Method.
Example Code:
dataGrid.getRowElement(INDEX_OF_SELECTED_ITEM).scrollIntoView();
The answer above works pretty well, though if the grid is wider than your window and has a horizontal scroll bar, it also scrolls all the way to the right which is pretty annoying. I was able to get it to scroll down and stay scrolled left by getting the first cell in the selected row and then having it scroll that into view.
dataGrid.getRowElement(dataGrid.getVisibleItems().indexOf(object)).getCells().getItem(0).scrollIntoView();
Don't have time to try it out, but DataGrid implements the interface HasRows, and HasRows has, among other things, a method called setVisibleRange. You just need to figure out the row number of the item that you want to focus on, and then set the visible range from that number n to n+50. That way the DataGrid will reset to put that item at the top (or near the top if it is in the last 50 elements of the list backing the DataGrid). Don't forget to redraw your DataGrid.
Have you already looked at this? If so, I'd be surprised that it didn't work.
Oh, and since this is one widget talking to another, you probably have some messaging set up and some message handlers so that when the user interacts with that second widget and "selects" the item, the message fires on the EventBus and a handler for that message fixes up the DataGrid along the lines I've described. I think you'll have to do this wiring yourself.
My solution, a little better:
dataGrid.getRow(model).scrollIntoView();
I got a Out of bounds exception doing the above.
I solved it getting the ScrollPanel in the DataGrid and used .scrollToTop() and so on on the ScrollPanel. However, to access the ScrollPanel in the DataGrid I had to use this comment:
http://code.google.com/p/google-web-toolkit/issues/detail?id=6865
As Kem pointed out, it's annoying the "scrollToRight" effect after the scrollIntoView. After me, Kem's solution gives a better behaviour than the base one as usually the first columns in a table are the more meaningful.
I improved a bit his approach, which scrolls horizontally to the first column of the row we want to be visible, by calculating the first visible column on the left before applying the scroll and then scrolling to it.
A final note: Columns absolute left is tested against "51". This is a value I found "experimentally" by looking the JS values in the browser's developer tool, I think it depends on the table's style, you may need to change/calculate it.
Below the code:
public void scrollIntoView(T next) {
int index = datagrid.getVisibleItems().indexOf(next);
NodeList<TableCellElement> cells = datagrid.getRowElement(index).getCells();
int firstVisibleIndex = -1;
for(int i=0; i<cells.getLength() && firstVisibleIndex<0;i++)
if(UIObject.isVisible(cells.getItem(i)) && (cells.getItem(i).getAbsoluteLeft() > 51) && (cells.getItem(i).getAbsoluteTop() > 0))
firstVisibleIndex = i;
cells.getItem(firstVisibleIndex>=0? firstVisibleIndex : 0).scrollIntoView();
}
I have a well populated Object which has properties like color,size,weight etc.
I need to get these object properties and place them in a TextBox.
So i want to do something like
`textBox.getLine1.setText(Object.getColor());
textBox.getLine2.setText(Object.getWeight());`
That is i need a textBox in which i can edit individual lines.
I am planning to have a widget which has a FlexTable inside the TextBox but i am not sure how to work on it.
Can someone please help me on this?
Thanks
Probably you're looking for the RichTextArea widget
You can check the documentation here: RichTextArea
And an old, but nice tutorial here: Tutorial
I did something similar: I needed to let user select one or several text rows and let each row be clickable to perform an action.
So I used a VerticalPanel with Labels.
VerticalPanel labelPanel = new VerticalPanel();
For a given index Label:
Label selectedLabel = (Label) labelPanel.getWidget(index);
DOM.setElementAttribute(selectedLabel.getElement(), "id", "label-selected");
CSS code as you wish!
If you must use a TextArea, which is a standard <input type="text"> element, you would have to find line breaks and create a Selection, and then replace it with whatever you want. You could also read the entire text, change it, and then update the entire TextArea value again.
I would recommend splitting your widget into multiple single line TextBoxes.