Few problems using Grid

General
1

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.

2

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.

3

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

4

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) {
}
}
5

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
21045.png

6

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?

7

A:[code]
gpc.addGeneratedProperty(“edit”,
new PropertyValueGenerator() {

@Override
public String getValue(Item item, Object itemId, Object propertyId) {
return FontAwesome.EDIT.getHtml();
}
@Override
public Class getType() {
return String.class;
}
})
…


grid.getColumn(“edit”).setRenderer(new HtmlButtonRenderer());

;
[/code]B: Yes
C:[code]

[/code]D:Yes, the widgetset was compiled using "grails vaadin-compile-widgetset"
8

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.

9

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?

10

Thanks a lot, code you provided worked
I am able to get icons in my grid, earlier I was getting some excpetions

11