I have a question concerning the grid widget. This widget is also available in vanilla GWT through the "GWT-Widgets 7.4.3" download.
But my question is how do you enable sorting in this widget in GWT ?
I started from the example provided by Vaadin : https://github.com/Artur-/grid-gwt
But when you do a "setSortable(true)" on a Column the only thing that happens is that an arrow of sort direction is drawn in the table header when clicking it. The table itself isn't re-sorted.
Also executing a sort method on the grid with a column and a direction has no effect.
In the book of vaadin https://vaadin.com/book/-/page/components.grid.html I noted the following : "The container data source must support sorting. At least, it must implement Container.Sortable.".
So I suppose that ListDataSource is not suited for sorting.
But what else can I use in GWT so that it sorts ? In the book of Vaadin I see that a
BeanItemContainer is used, but this is not available in "GWT-Widgets 7.4.3" as this seems to be a server component.
So it comes down to this question: How do I enable sorting on the Vaadin grid in a vanilla GWT project ?
thanks
Frank
I have no experience with Vaadin, but in plain GWT you would do something like this (where T is your object):
ListDataProvider<T> dataProvider = new ListDataProvider<T>();
List<T> displayItems = dataProvider.getList();
ListHandler<T> sortHandler = new ListHandler<T>(displayItems);
Then, to make a column sortable, you need to tell the sortHandler how to sort these objects:
dateColumn.setSortable(true);
dateColumn.setDefaultSortAscending(false);
sortHandler.setComparator(dateColumn, new Comparator<Item>() {
#Override
public int compare(Item o1, Item o2) {
if (o1.getDate() != null) {
return (o2.getDate() != null) ?
o1.getDate().compareTo(o2.getDate()) : 1;
}
return -1;
}
});
Related
I have an cell table and the column data are the check boxes i want align these check boxes to center of that column
i tried withcolumn.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
and using text-align:middle in css. but it doesn't seem to work .Please help
Column<Person, Boolean> checkColumn = new Column<Person, Boolean>(
new CheckboxCell(true, false)) {
#Override
public Boolean getValue(Person object) {
// check box function
}
};
checkColumn.setHorizontalAlignment(HasAlignment.ALIGN_CENTER);
Works fine for me.
Since you didn't provide much code I can only make several assumptions:
Check that your cell table CSS [if your using custom ones] isn't over writing the alignment
Double check your aligning the right column [happens]
If you are using UiBinder, check to make sure you only set alignment in either your java class or the xml
I have a cell Table in GWT with columns , there are 3 rows in each column, I want the first row to get selected by default when the application starts
some thing like this
mycelltable.setselectedrow(index);
is it possible ?
Thanks
her is the code
display.getShortListedCVsBasedOnJob().getResumeDescriptionColumn().setFieldUpdater(
new FieldUpdater<CandidateSummary, String>() {
public void update(int index, CandidateSummary object,
String value) {
fetchResume(cvSelected, shortListedFlag);
}
});
This fetchResume() method calls but only when i select cell of this column , I want to call this fetchResume() method as my application starts, i.e i want to make the 1st cell of the column to be selected byDefault.
Selection is handled by a SelectionModel, based on objects (not indices); so you have to select the first object from your data in the SelectionModel used by the CellTable (have a look at the Using a key provider to track objects as they change sample code in the Celltable javadoc for an example (last sample before nested classes summary).
This could work?
setSelected(Element elem, boolean selected)
see GWT Documentation
CellTable Google Web Toolkit
Hmm I dont see what´s the Celltable is there. I would set the initial Value like this:
int INITAL_SET_ROW = 0;
TableRowElement initalSetElement = yourCellTable.getRowElement(INITAL_SET_ROW);
yourCellTable.setSelected(initialSetElement, true);
You can try to implement it in you´re main Method. Haven´t tested it tho, hope it helps.
Simply;
List<RowType> source = new LinkedList<RowType>();
//put some data to this list
//populate the table
table.setRowCount(source.size(), true);
table.setRowData(0, source);
//for example, you can select the first row
RowType firstRow = source.get(0);
selectionModel.setSelected(firstRow, true);
So i have a GWT cellTable with various inputs, including selectboxes, EditTextCells and some links. I would like TAB to go along each cell.
However, currently i can only get the TAB switching to go between the selectboxes(when KeyboardSelectionPolicy.DISABLED). (ie from here). But it doesnt tab to the EditTextCells or other cells.
(potentially relatedly, EditText <input>s seem like they cannot have their tabindex!=-1, or else i see the cellTable throwing errors. (and it seems to warn in EditText that you shouldnt do this).
is there another tabIndex for EditText or other generic cells that I'm missing maybe? One guy here seemed like he couldnt get it to work and opt'd out.
But according to this issue at googleCode, other people are doing this successfully.
ok so adding the tabIndex does work. for editTextCell I added a new Template for the (normally just safehtml-rendered) text like this:
interface TemplateBasic extends SafeHtmlTemplates {
#Template("<Label tabindex=\"{1}\">{0}</Label>")
SafeHtml input(String value, String index);
}
and then later in render when it sets
...
else if (value != null) {
SafeHtml html = renderer.render(value);
sb.append(html) );
}
instead i used
else if (value != null) {
SafeHtml html = renderer.render(value);
sb.append(templatebasic.input(html.asString(), Integer.toString( context.getIndex() )) );
}
this should work for the checkboxcell too; overriding the renderer not to use the static defined INPUT_CHECKED/UNCHECKED with the tabIndex=-1
but im still thinking/hoping there might be a better way....
You can create a new Cell. Or, you can add some script to the CellTable to handle TABs and SHIFT+TABs.
Extend CellTable to achieve this by adding a tab handler would work for your needs. See this link.
I'm trying to use the new GWT CellTable widget but my table needs to support one row expansion, i.e. there is a zippy on the left of a row and when it's clicked, the row should expand to provide more detail information and this row should span across all columns. Is it possible to achieve this with the CellTable? How do I add a row that spans all columns between other rows dynamically?
Any help will be appreciated!
GWT 2.5 will add a CellTableBuilder with the exact goal of allowing this kind of things.
You can find a live example at http://showcase2.jlabanca-testing.appspot.com/#!CwCustomDataGrid (click on the "show friends" cells)
Can you not make the additional row invisible using getRowElement(int row) and using DOM methods to set display 'none' when rendered and as blank when the button, to show it, is hit.
I am working on the solution too and my plan for now is to use CSS classes + manual styles manipulation to make it look as I need. Not sure if I be able to merry it with GWT though: http://jsfiddle.net/7WFcF/
I took a different approach to solve this same problem.
The basic concept is using dom elements to add and remove rows based on an event. The following code is an abstract extension of CellTable. You'll want to call this method from your event that gets fired from the click to expand a row.
import com.google.gwt.dom.client.Document;
import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.NodeList;
public abstract class ActionCellTable<T> extends CellTable<T> {
protected abstract void addActionsColumn();
Integer previousSelectedRow = null;
public void displayRowDetail(int selectedRow, Element e){
//Get the tbody of the Cell Table
//Assumption that we want the first (only?) tbody.
Element tbody = this.getElement().getElementsByTagName("tbody").getItem(0);
//Get all the trs in the body
NodeList<Element> trs = tbody.getElementsByTagName("tr");
//remove previously selected view, if there was one
if(previousSelectedRow!=null){
trs.getItem(previousSelectedRow+1).removeFromParent();
//If the current is further down the list then the current your index will be one off.
if(selectedRow>previousSelectedRow)selectedRow--;
}
if(previousSelectedRow==null || selectedRow != previousSelectedRow){// if the are equal we don't want to do anything else
Element td = Document.get().createTDElement();
td.setAttribute("colspan", Integer.toString(trs.getItem(selectedRow).getChildNodes().getLength()));
td.appendChild(e);
Element tr = Document.get().createTRElement();
tr.appendChild(td);
tbody.insertAfter(tr, trs.getItem(selectedRow));
previousSelectedRow=selectedRow;
} else {
previousSelectedRow=null;
}
}
}
previousSelectedRow is used to track which item is "expanded", this could probably be achieved using classes or IDs. If needed I can elaborate more on the CellTable, events, views, and activities.
Following both the example from the GWT Showcase and the example found at GWT, I implemented a CellTable. The CellTable displays the first 15 results but subsequent pages only displays the loading bar. Attempting to return to the first 15 results shows only the loading bar as well. No errors in the JavaScript console or within the GWT developer console are raised.
Any help or insight that anyone can give would be greatly appreciated.
Further, I tried the following and it too suffered from the same thing happening:
List<String> stringsList = new ArrayList<String>();
for( int i = 0; i < 60; i++){
stringsList.add("" + i);
}
CellTable<String> cellTable = new CellTable();
TextColumn<String> nameColumn = new TextColumn<String>(){
#Override
public String getValue(String string){
return string;
}
};
SimplePager.Resources pagerResources = GWT.create(SimplePager.Resources.class);
SimplePager pager = new SimplePager(TextLocation.CENTER, pagerResources, false, 0, true);
pager.setDisplay(cellTable);
cellTable.addColumn(nameColumn, "App Name");
cellTable.setRowCount(stringsList.size(), true);
cellTable.setRowData(0, stringsList);
RootLayoutPanel.get().add(cellTable);
RootLayoutPanel.get().add(pager);
Why don't use a DataProvider and setList to fill the Table? Somewhere I read that this is the recommended approach and setRowData shouldn't be used (because it can cause some weird behaviour)
I think you need a data provider to push data into the cell table. Add the next code and it should work.
ListDataProvider dataProvider = new ListDataProvider();
dataProvider.setList(stringsList );
dataProvider.addDataDisplay(cellTable);
This happens when there's some problem with setVisibleRange or a similar method. I get this a lot when a list backing the data provider doesn't have enough values, or something. I recommend you trace your program to the point at which you're changing the visible range and check all the values that are going into your methods there.