Few problems using Grid

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.
 

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

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.