Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Few problems using Grid
Hello, I'm trying to use Grid to display data and create a CRUD. I'm loading the data using a
BeanItemContainer with a Grails service and GeneratedPropertyContainer to add custom columns.
Following this example http://demo.vaadin.com/sampler/#ui/grids-and-trees/grid/features I added a filter to one of my columns but when I try to use the filter nothing happens, I checked if the event of text change occurs and they works but the filter is not doing nothing with the grid.
The other thing I'm trying is to add FontAwesome icons rendering using a HtmlRenderer, but my principal goal is to add a click listener and onHover to display a caption with the icon.
Someone can help me to aproach these two things or I have to use Table.
It is hard to answer your first question without knowing your code in detail. If you are trying to filter one of your gnerated columns, double check that you really added the filter to GeneratedPropertyContainer.
The solution for the second one could be approached ClickableRendeder. You should extend that by using HtmlRenderer to achieve ClickableHtmlRenderer. It is easier approach than otherway round.
To add to Tatu's post:
For the second question Ovil Hemeke already made a HtmlButtonRenderer that i also use in my project and it does exactly what you're after:
https://vaadin.com/forum/#!/thread/9225584/10109123
Tatu Lund: It is hard to answer your first question without knowing your code in detail. If you are trying to filter one of your gnerated columns, double check that you really added the filter to GeneratedPropertyContainer.
The solution for the second one could be approached ClickableRendeder. You should extend that by using HtmlRenderer to achieve ClickableHtmlRenderer. It is easier approach than otherway round.
Here is, I just add the GeneratedPropertyContainer for insert the FontAwesome icon and I tried to filter the username column :
class PersonView extends CssLayout implements View {
Grid grid;
Grid.HeaderRow filteringHeader;
public PersonView() {
addStyleName(ValoTheme.PANEL_BORDERLESS);
setSizeFull();
MainUIEventBus.register(this);
VerticalLayout root = new VerticalLayout();
root.setMargin(true);
addComponent(root);
Responsive.makeResponsive(root);
root.addComponent(buildHeader());
root.addComponent(createGrid());
root.setComponentAlignment(tabs, Alignment.TOP_CENTER);
}
private Grid createGrid()
{
BeanItemContainer<Person> person = new BeanItemContainer<Person>(Person.class, Grails.get(PersonService).getAllPersons());
GeneratedPropertyContainer gpc = new GeneratedPropertyContainer(person);
gpc.addGeneratedProperty("edit", new PropertyValueGenerator<String>() {
@Override
public String getValue(Item item, Object itemId, Object propertyId) {
return FontAwesome.PENCIL.getHtml();
}
@Override
public Class<String> getType() {
return String.class;
}
});
grid = new Grid(gpc);
grid.removeAllColumns();
grid.addColumn("id")
grid.addColumn("username")
grid.addColumn("name")
grid.addColumn("lastname")
grid.addColumn("phone")
grid.addColumn("edit")
grid.getColumn("edit").setRenderer(new HtmlRenderer());
grid.setFrozenColumnCount(1);
setColumnFiltering(true);
grid.setColumnReorderingAllowed(true);
grid.setSelectionMode(Grid.SelectionMode.MULTI);
grid.setSizeFull();
return Grid;
}
private Component buildHeader() {
HorizontalLayout header = new HorizontalLayout();
header.setSpacing(true);
Label titleLabel = new Label(Grails.i18n("wager.views.users.label"));
titleLabel.setSizeUndefined();
titleLabel.addStyleName(ValoTheme.LABEL_H1);
titleLabel.addStyleName(ValoTheme.TEXTFIELD_INLINE_ICON);
titleLabel.addStyleName(ValoTheme.LABEL_BOLD);
header.addComponent(titleLabel);
return header;
}
private void setColumnFiltering(boolean filtered) {
if (filtered && filteringHeader == null) {
filteringHeader = grid.appendHeaderRow();
String columnId = "username";
TextField filter = getColumnFilter(columnId);
filteringHeader.getCell(columnId).setComponent(filter);
filteringHeader.getCell(columnId).setStyleName("filter-header");
} else if (!filtered && filteringHeader != null) {
grid.removeHeaderRow(filteringHeader);
filteringHeader = null;
}
}
private TextField getColumnFilter(final Object columnId) {
TextField filterText = new TextField();
filterText.setWidth("100%");
filterText.addStyleName(ValoTheme.TEXTFIELD_TINY);
filterText.setInputPrompt("Filter");
filterText.addTextChangeListener(new FieldEvents.TextChangeListener() {
SimpleStringFilter filter = null;
@Override
public void textChange(FieldEvents.TextChangeEvent event) {
Container.Filterable f = (Container.Filterable) grid.getContainerDataSource();
if (filter != null) {
f.removeContainerFilter(filter);
}
filter = new SimpleStringFilter(columnId, event.getText(),
true, true);
f.addContainerFilter(filter);
grid.cancelEditor();
}
});
return filterText;
}
@Override
public void detach() {
super.detach();
MainUIEventBus.unregister(this);
}
@Override
public void enter(final ViewChangeListener.ViewChangeEvent event) {
}
}
Marius Reinwald: To add to Tatu's post:
For the second question Ovil Hemeke already made a HtmlButtonRenderer that i also use in my project and it does exactly what you're after:
https://vaadin.com/forum/#!/thread/9225584/10109123
I followed the steps from the link you provided but looks like the HtmlButtonRendererConnectori its not getting connected.
Pkease check It out the attached image
Did you:
A: Attach the Renderer correctly to your column?
B: created a custom Widgetset if you don't have one already?
C: Put all the Client side parts of the renderer in a "client" package below the widgetset.gwt.xml?
D: Compiled the Widgetset?
Marius Reinwald: Did you:
A: Attach the Renderer correctly to your column?
B: created a custom Widgetset if you don't have one already?
C: Put all the Client side parts of the renderer in a "client" package below the widgetset.gwt.xml?
D: Compiled the Widgetset?
A:
gpc.addGeneratedProperty("edit",
new PropertyValueGenerator<String>() {
@Override
public String getValue(Item item, Object itemId, Object propertyId) {
return FontAwesome.EDIT.getHtml();
}
@Override
public Class<String> getType() {
return String.class;
}
})
...
[b]grid.getColumn("edit").setRenderer(new HtmlButtonRenderer());[/b]
;
B: Yes
C:
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.0//EN"
"http://google-web-toolkit.googlecode.com/svn/releases/2.0/distro-source/core/src/gwt-module.dtd">
<module>
<inherits name="com.vaadin.Vaadin"/>
<inherits name="com.vaadin.DefaultWidgetSet"/>
<inherits name="dvd.wager.ui.widgetset" />
</module>
D:Yes, the widgetset was compiled using "grails vaadin-compile-widgetset"
Did you check with the Developer Console/Firebug in your browser if there are any JS Errors?
If there are you might need to debug the client side.
Marius Reinwald: Did you check with the Developer Console/Firebug in your browser if there are any JS Errors?
If there are you might need to debug the client side.
I checked the Developer console they show up INFO data only about the app. no errors.
I solved the problems related with the Filter but still I can't use Font awesome with a button inside a Grid, someone can me help to see working these feature?
David De La Hoz:
Tatu Lund: It is hard to answer your first question without knowing your code in detail. If you are trying to filter one of your gnerated columns, double check that you really added the filter to GeneratedPropertyContainer.
The solution for the second one could be approached ClickableRendeder. You should extend that by using HtmlRenderer to achieve ClickableHtmlRenderer. It is easier approach than otherway round.
Here is, I just add the GeneratedPropertyContainer for insert the FontAwesome icon and I tried to filter the username column :
class PersonView extends CssLayout implements View { Grid grid; Grid.HeaderRow filteringHeader; public PersonView() { addStyleName(ValoTheme.PANEL_BORDERLESS); setSizeFull(); MainUIEventBus.register(this); VerticalLayout root = new VerticalLayout(); root.setMargin(true); addComponent(root); Responsive.makeResponsive(root); root.addComponent(buildHeader()); root.addComponent(createGrid()); root.setComponentAlignment(tabs, Alignment.TOP_CENTER); } private Grid createGrid() { BeanItemContainer<Person> person = new BeanItemContainer<Person>(Person.class, Grails.get(PersonService).getAllPersons()); GeneratedPropertyContainer gpc = new GeneratedPropertyContainer(person); gpc.addGeneratedProperty("edit", new PropertyValueGenerator<String>() { @Override public String getValue(Item item, Object itemId, Object propertyId) { return FontAwesome.PENCIL.getHtml(); } @Override public Class<String> getType() { return String.class; } }); grid = new Grid(gpc); grid.removeAllColumns(); grid.addColumn("id") grid.addColumn("username") grid.addColumn("name") grid.addColumn("lastname") grid.addColumn("phone") grid.addColumn("edit") grid.getColumn("edit").setRenderer(new HtmlRenderer()); grid.setFrozenColumnCount(1); setColumnFiltering(true); grid.setColumnReorderingAllowed(true); grid.setSelectionMode(Grid.SelectionMode.MULTI); grid.setSizeFull(); return Grid; } private Component buildHeader() { HorizontalLayout header = new HorizontalLayout(); header.setSpacing(true); Label titleLabel = new Label(Grails.i18n("wager.views.users.label")); titleLabel.setSizeUndefined(); titleLabel.addStyleName(ValoTheme.LABEL_H1); titleLabel.addStyleName(ValoTheme.TEXTFIELD_INLINE_ICON); titleLabel.addStyleName(ValoTheme.LABEL_BOLD); header.addComponent(titleLabel); return header; } private void setColumnFiltering(boolean filtered) { if (filtered && filteringHeader == null) { filteringHeader = grid.appendHeaderRow(); String columnId = "username"; TextField filter = getColumnFilter(columnId); filteringHeader.getCell(columnId).setComponent(filter); filteringHeader.getCell(columnId).setStyleName("filter-header"); } else if (!filtered && filteringHeader != null) { grid.removeHeaderRow(filteringHeader); filteringHeader = null; } } private TextField getColumnFilter(final Object columnId) { TextField filterText = new TextField(); filterText.setWidth("100%"); filterText.addStyleName(ValoTheme.TEXTFIELD_TINY); filterText.setInputPrompt("Filter"); filterText.addTextChangeListener(new FieldEvents.TextChangeListener() { SimpleStringFilter filter = null; @Override public void textChange(FieldEvents.TextChangeEvent event) { Container.Filterable f = (Container.Filterable) grid.getContainerDataSource(); if (filter != null) { f.removeContainerFilter(filter); } filter = new SimpleStringFilter(columnId, event.getText(), true, true); f.addContainerFilter(filter); grid.cancelEditor(); } }); return filterText; } @Override public void detach() { super.detach(); MainUIEventBus.unregister(this); } @Override public void enter(final ViewChangeListener.ViewChangeEvent event) { } }
Thanks a lot, code you provided worked
I am able to get icons in my grid, earlier I was getting some excpetions
Tatu Lund: It is hard to answer your first question without knowing your code in detail. If you are trying to filter one of your gnerated columns, double check that you really added the filter to GeneratedPropertyContainer.
The solution for the second one could be approached ClickableRendeder. You should extend that by using HtmlRenderer to achieve ClickableHtmlRenderer. It is easier approach than otherway round.