I have a requirement wherein on a single click in the cell, normal editing must be possible and on double clicking in the cell a dialog should open for editing the cell. The two are possible individually. I see a method "boolean supportMultiEdit(IConfigRegistry configRegistry, List configLabels)" but there is no example to show the working. Has anyone used it or can show it's configuration.
Multi edit means it is possible to edit multiple cells at once. This is of course done in an editor, as it makes no sense to perform multi edit inline. You should rather have a look at openInline(IConfigRegistry, List<String>) or even better the EditConfigAttributes#OPEN_IN_DIALOG to solve what you are looking for.
But you are actually seeking for a way to handle opening an editor differently on different UI interactions. So you need to register the corresponding UI bindings. This is already discussed in the NatTable Forum.
And the EditorExample shows quite a lot of possible configuration options available for editing. And almost every editable example shows multi editing capabilities. You simply need to select multiple cells you want to edit and then start typing or pressing F2.
The following code would do the trick with a configuration based on a label that is added in the UI binding action:
public class OpenEditorConfiguration extends AbstractRegistryConfiguration {
#Override
public void configureRegistry(IConfigRegistry configRegistry) {
configRegistry.registerConfigAttribute(
EditConfigAttributes.OPEN_IN_DIALOG,
Boolean.TRUE,
DisplayMode.EDIT,
"open_in_dialog");
}
#Override
public void configureUiBindings(UiBindingRegistry uiBindingRegistry) {
uiBindingRegistry.registerDoubleClickBinding(
new CellEditorMouseEventMatcher(GridRegion.BODY),
new IMouseAction() {
#Override
public void run(NatTable natTable, MouseEvent event) {
int columnPosition = natTable.getColumnPositionByX(event.x);
int rowPosition = natTable.getRowPositionByY(event.y);
ILayerCell cell = natTable.getCellByPosition(columnPosition, rowPosition);
cell.getConfigLabels().add("open_in_dialog");
natTable.doCommand(new EditCellCommand(
natTable,
natTable.getConfigRegistry(),
cell));
}
});
}
}
In a GWT web app, I am using a DataGrid to manage elements from a database. I represent a list of elements as rows, the columns being editable fields of their characteristics (id, name, description). I am mostly using the EditTextCell class.
I now want to create a custom cell, for a column that has to represent a list of "tags" that can be attached to every element. From this cell, tags could be added, using a + button (that makes a drop-down menu appear or something), and deleted. Each tag should be a kind of button, or interactive widget (I later want to display pop-up with info, trigger actions, etc).
Actually, it would not be so different from the "tags" bar on the Stack Overflow website...
So I have been looking for a solution:
I thought this would be easy to do. I imagined just putting a FlowPanel in the cell, adding/removing Buttons/Widgets dynamically. But it turns out that in GWT Widgets and Cells and very different objects apparently..
I read making use of the AbstractCell class to create a custom cell allows to do anything, but its working is very low level and obscure to me.
I saw that CompositeCell allows to combine various cell widgets into one cell, but I have not found if it is possible to do it dynamically, or if the widgets are going to be the same for all lines throughout a column. I mostly saw examples about, for instance, how to put two Buttons in every cell of a single column.
What is the easiest way to implement what I need?
EDIT:
So, after some tests, I am going for Andrei's suggestion and going "low-level", creating a custom cell extending AbstractCell<>. I could create an appropriate "render" function, that generates a list of html "button", and also attaches Javascript calls to my Java functions when triggering a Javascript event (onclick, onmouseover, onmouseout...).
It is working pretty well. For instance, by clicking the "+" button at the end a tag list, it calls a MenuBar widget that presents the list of tags that can be added.
But I am struggling to find a way to update the underlying data when adding a tag.
To sum up:
I have a CustomData class that represents the data I want to display in each line of the table. It also contains the list of tags as a Set.
ModelTable (extends DataGrid) is my table.
CustomCell (extends AbstractCell) can renders the list of tags as several buttons on a line.
A click on a "+" button in a cell makes a AddTagMenu popup drop down, from which I can click on the tag to add.
How do I update the content of the cell?
I tried playing around with onBrowserEvent, onEnterKeyDown, bus events... with no success. At best I can indeed add a tag element to the underlying object, but the table is not updated.
It's not possible to meet your requirements without going really "low-level", as you call it.
It's relatively easy to create a cell that would render tags exactly as you want them. Plus icon is also easy, if this is the only action on the cell. However, it is very difficult to make every tag within a cell an interactive widget, because the DataGrid will not let you attach handlers to HTML rendered within a cell. You will need to supply your own IDs to these widgets, and then attach handlers to them in your code. The problem, however, is that when the DataGrid refreshes/re-renders, your handlers will most likely be lost. So you will have to attach them again to every tag in every cell on every change in the DataGrid.
A much simpler approach is to create a composite widget that represents a "row", and then add these "rows" to a FlowPanel. You can easily make it look like a table with CSS, and supply your own widget that looks like a table header. You will need to recreate some of the functionality of the DataGrid, e.g. sorting when clicked on "column" header - if you need this functionality, of course.
As you have already noted, using CompositeCell could be a way to get what you want.
The idea is to create a cell for every tag and then (during rendering) decide which one should be shown (rendered). Finally combine all those cells into one by creating a CompositeCell.
The main disadvantage of this solution is that you need to know all possible tags before you create a DataGrid.
So, if you have a fixed list of possible tags or can get a list of all existing tags and this list is reasonably small, here is a solution.
First, we need to know which tag is represented by a column so I extended a Column class to keep information about a tag. Please, note that TagColumn uses ButtonCell and also handles update when the button is clicked:
public class TagColumn extends Column<DataType, String> {
private TagEnum tag;
public TagColumn(TagEnum tag) {
super(new ButtonCell());
this.tag = tag;
setFieldUpdater(new FieldUpdater<DataType, String>() {
#Override
public void update(int index, DataType object, String value) {
Window.alert("Tag " + getTag().getName() + " clicked");
}
});
}
public TagEnum getTag() {
return tag;
}
#Override
public String getValue(DataType object) {
return tag.getName();
}
}
Then create a cell for each tag (I have hard-coded all tags in a TagEnum):
List<HasCell<DataType, ?>> tagColumns = new ArrayList<HasCell<DataType, ?>>();
for(TagEnum tag : TagEnum.values())
tagColumns.add(new TagColumn(tag));
Now, the most important part: decide either to show the tag or not - overwrite render method of the CompositeCell:
CompositeCell<DataType> tagsCell = new CompositeCell<DataType>(tagColumns) {
#Override
protected <X> void render(Context context, DataType value, SafeHtmlBuilder sb, HasCell<DataType, X> hasCell) {
if(value.getTagList().contains(((TagColumn) hasCell).getTag()))
super.render(context, value, sb, hasCell);
else
sb.appendHtmlConstant("<span></span>");
}
};
This is important to always render any element (for example empty span when the tag should not be shown). Otherwise the CompositeCell's implemantation will get confused when accessing sibling elements.
Finally, full, working example code:
private DataGrid<DataType> getGrid() {
DataGrid<DataType> grid = new DataGrid<DataType>();
List<HasCell<DataType, ?>> tagColumns = new ArrayList<HasCell<DataType, ?>>();
for(TagEnum tag : TagEnum.values())
tagColumns.add(new TagColumn(tag));
CompositeCell<DataType> tagsCell = new CompositeCell<DataType>(tagColumns) {
#Override
protected <X> void render(Context context, DataType value, SafeHtmlBuilder sb, HasCell<DataType, X> hasCell) {
if(value.getTagList().contains(((TagColumn) hasCell).getTag()))
super.render(context, value, sb, hasCell);
else
sb.appendHtmlConstant("<span></span>");
}
};
Column<DataType, DataType> tagsColumn = new Column<DataType, DataType>(tagsCell) {
#Override
public DataType getValue(DataType object) {
return object;
}
};
grid.addColumn(tagsColumn, "Tags");
grid.setRowData(Arrays.asList(
new DataType(Arrays.asList(TagEnum.gwt)),
new DataType(Arrays.asList(TagEnum.table, TagEnum.datagrid)),
new DataType(Arrays.asList(TagEnum.datagrid, TagEnum.widget, TagEnum.customCell)),
new DataType(Arrays.asList(TagEnum.gwt, TagEnum.table, TagEnum.widget, TagEnum.customCell)),
new DataType(Arrays.asList(TagEnum.gwt, TagEnum.customCell)),
new DataType(Arrays.asList(TagEnum.gwt, TagEnum.table, TagEnum.datagrid, TagEnum.widget, TagEnum.customCell))
)
);
return grid;
}
public class TagColumn extends Column<DataType, String> {
private TagEnum tag;
public TagColumn(TagEnum tag) {
super(new ButtonCell());
this.tag = tag;
setFieldUpdater(new FieldUpdater<DataType, String>() {
#Override
public void update(int index, DataType object, String value) {
Window.alert("Tag " + getTag().getName() + " clicked");
}
});
}
public TagEnum getTag() {
return tag;
}
#Override
public String getValue(DataType object) {
return tag.getName();
}
}
public class DataType {
List<TagEnum> tagList;
public DataType(List<TagEnum> tagList) {
this.tagList = tagList;
}
public List<TagEnum> getTagList() {
return tagList;
}
}
public enum TagEnum {
gwt ("gwt"),
table ("table"),
datagrid ("datagrid"),
widget ("widget"),
customCell ("custom-cell");
private String name;
private TagEnum(String name) {
this.name = name;
}
public String getName() {
return name;
}
}
I am new with GWT_GXT
I use MVP(model-view-Presenter)
In Presenter, i call RPC to get data From database. After that i get a List data -> I set it for view
In view, code is below
#Override
public void setDeleteAllTest(List<DeleteAllTestModel> deleteAllTests) {
final ListStore<DeleteAllTestModel> listStore = new ListStore<DeleteAllTestModel>();
listStore.add(deleteAllTests);
gridView = new PMTGridDeleteAllTest<DeleteAllTestModel>().getPMTGridDeleteAllTest(listStore);
gridView.setAutoWidth(true);
}
#Override
protected void onRender(Element parent, int pos) {
super.onRender(parent, pos);
ContentPanel cp = new ContentPanel();
cp.setBodyBorder(false);
cp.setHeading("");
cp.setButtonAlign(Style.HorizontalAlignment.CENTER.CENTER);
cp.setLayout(new FitLayout());
cp.setSize(1200, 400);
cp.add(gridView);
verticalPanel.add(cp);
verticalPanel.add(nameField);
verticalPanel.add(cancelButton);
add(verticalPanel);
cancelButton.addSelectionListener(new SelectionListener<ButtonEvent>() {
#Override
public void componentSelected(ButtonEvent buttonEvent) {
PolicyDeleteAllTestDialog.this.hide();
}
});
getButtonById("ok").hide();
}
The Problem is that Gird is not refresh and update new data_ It only displays (the first Grid in the first Call) .. It always keep the first View( I use dialog to show grid)..
Help me!
Thanks
I don't exactly remember how it works and it really is what you need. But there is something like gridView.refresh();. I remember I sometime used to use grid.getView().refresh(true); but it's been a while. Also I think there is a concept named ListLoader that might be useful. I am not sure of myself but if I were you I would have a look at listLoader. I hope this will help you one way or another, sorry if it does not.
Is it possible to reorder items that have been added to a repeating view (more precisely a ListView) in Apache Wicket?
I tried reordering them in the attached list, like shown in the following code, but this had no effect:
int indexA = itemList.indexOf(itemA);
int indexB = itemList.indexOf(itemB);
itemList.set(indexA, itemB);
itemList.set(indexB, itemA);
As this had no effect I tried resetting the list property of the ListView:
listView.setList(itemList);
Of course I remembered to trigger an according repaint for the web page, but all in all it had no effect.
In some further attempts I tried to add a new item not to the end of the list but to the beginning:
itemList.add(0, newItem);
Instead of just
itemList.add(newItem);
While the latter one works (and always worked fine), the first obviously works for the first item but throws an exception for the second item.
Last cause: Unable to find component with id 'list-component' in [ListItem [Component id = 0]]
Expected: 'list-container:list-items:0:list-component'.
Found with similar names: 'list-container:list-items:1:list-component'
Where list-container is the WebMarkupContainer surrounding the ListView, list-items is the ListView itself and list-component is the id of the item to be added.
So, is it not possible to reorder items after they have been added to a repeating view? Can new items only be added at the end of it? Or am I missing something here, probably a class different than ListView that implements such features?
My main goal is to be able to reorder items, the "add at the beginning"-approach was just a test if it would at least work to remove the items from the view and re-add them at the desired position.
The link that has 'move Up' works like this, you could use this as inspiration :)
public final Link<Void> moveUpLink(final String id, final ListItem<T> item)
{
return new Link<Void>(id)
{
private static final long serialVersionUID = 1L;
/**
* #see org.apache.wicket.markup.html.link.Link#onClick()
*/
#Override
public void onClick()
{
final int index = item.getIndex();
if (index != -1)
{
addStateChange();
// Swap items and invalidate listView
Collections.swap(getList(), index, index - 1);
ListView.this.removeAll();
}
}
#Override
public boolean isEnabled()
{
return item.getIndex() != 0;
}
};
}
I'm using a standard swt table which, as you may know, by default when an item is selected is colored blue (windows standard). When the selection is inactive, it turns light gray. I would like to override both colors... I've searched all over the web but could only find some very old code which no longer seems to work with the table widget.
Below is some sample code I was trying to overwrite the default color but it doesn't seem to be working (please excuse the dirty code, was just trying to get something to work):
table.addSelectionListener(new SelectionListener() {
#Override
public void widgetSelected(SelectionEvent event) {
Color rowSelectionColor =
new Color(Display.getCurrent(),new RGB(235, 200, 211));
TableItem item =(TableItem)event.item;
item.setBackground(0,rowSelectionColor);
item.setBackground(1,rowSelectionColor);
item.setBackground(2,rowSelectionColor);
}
#Override
public void widgetDefaultSelected(SelectionEvent event) {
Color rowSelectionColor =
new Color(Display.getCurrent(),new RGB(235, 200, 211));
TableItem item =(TableItem)event.item;
item.setBackground(0,rowSelectionColor);
item.setBackground(1,rowSelectionColor);
item.setBackground(2,rowSelectionColor);
}
});
Any ideas would be greaaatly massively appreciated :D
If you want to go with a TableViewer to manage your table, you can use a StyledCellLabelProvider to determine the colors/fonts/etc for individual cells. The TableViewer will take care of the "owner draw" aspects for you. The biggest hassle is setting up the ContentProvider, LabelProvider, and input classes that go with the TableViewer.