Grid: Column Renderer / Custom Renderer: dynamic content

Hi,

Based on this site instructions, I have created a custom column renderer which shows two checkboxes (https://vaadin.com/book/-/page/clientsidewidgets.grid.html#clientsidewidgets.grid.renderers)

I compiled it and checkboxes are shown correctly on grid cell.

Now I have situation that the amount of checkboxes on cell should be changed based on the grid row data: one cell could contain two checkboxes and another could contain four checkboxes. It is not known beforehand how many checkboxes are needed, so the cell layout on renderer should be constructed on runtime. Is this possible to do? How I can deliver the information of needed amount of checkboxes to client-side renderer?

Thank you for your answers!

Tapio

Hello Tapio,
sorry i have a question instead of an answer.
How did you made the custom renderer? Were have i to put the three classes?
The short description (https://vaadin.com/book/-/page/clientsidewidgets.grid.html#clientsidewidgets.grid.renderers) didn’t help.
I asked here in the forum → https://vaadin.com/forum#!/thread/9757447

Greetings Maik

Hello Maik,

If I remember correctly, your widgetset.gwt.xml file must be located on package structure which contain package ‘widgetset’ (e.g. com.mycompany.widgetset). Then you can compile your custom renderer. Classes can be packages like instructed here:

https://vaadin.com/wiki/-/wiki/Main/Creating%20a%20simple%20component

Hope this helps.

Tapio

Hello Tapio,

yes, it helps a lot. Now i understood, that
the “custom cell renderer” for a Grid is a real custom component.
Thanks!

Greetings Mail

Often the easiest way to pass the information is to have some custom format in a String property value, which is parsed in the renderer. There’s
an example of using a string value with simple custom format here
.

Oh, the example doesn’t show the client-side code… It’s here:

[code]
public class MyButtonRenderer extends ButtonRenderer {
@Override
public void render(RendererCellReference cell, String text, Button button) {
boolean enabled = true;
if (text.startsWith(“Disabled:”)) {
text = text.substring(“Disabled:”.length());
enabled = false;
}
button.setText(text);
button.setEnabled(enabled);
}
}

@Connect(com.vaadin.book.examples.component.grid.MyButtonRenderer.class)
public class MyButtonRendererConnector extends ButtonRendererConnector {
@Override
public MyButtonRenderer getRenderer() {
return (MyButtonRenderer) super.getRenderer();
}

@Override
protected HandlerRegistration addClickHandler(
        RendererClickHandler<JsonObject> handler) {
    return getRenderer().addClickHandler(handler);
}

}
[/code]The more proper way would be to use a custom property value type, but it would propably get more complicated, and in the button example much more complicated, as we’re reusing ClickableRenderer functionality there.

Hi,

I have a problem with this code in this link : http://demo.vaadin.com/book-examples-vaadin7/book/#component.grid.renderer.custom

I tried to do excute the code in the link (book of vaadin) but it doesn’t work. Indeed, I have an error when I use
grid.getColumn(“delete”).setRenderer(new MyButtonRenderer(e → // Java 8
grid.getContainerDataSource().removeItem(e.getItemId())
));
The error is : The constructor MyButtonRenderer(( e) → {}) is undefined.

In my class MyButtonRenderer, I put this code :

public class MyButtonRenderer extends ButtonRenderer {
@Override
public void render(RendererCellReference cell, String text, Button button) {
boolean enabled = true;
if (text.startsWith(“Disabled:”)) {
text = text.substring(“Disabled:”.length());
enabled = false;
}
button.setText(text);
button.setEnabled(enabled);
}
}

and in the class MyButtonRendererConnector, I put this code :@Connect(com.vaadin.book.examples.component.grid.MyButtonRenderer.class)public class MyButtonRendererConnector extends ButtonRendererConnector { @Override public MyButtonRenderer getRenderer() { return (MyButtonRenderer) super.getRenderer(); } @Override protected HandlerRegistration addClickHandler( RendererClickHandler handler) { return getRenderer().addClickHandler(handler); }}


So, I want to know why the code from the link

http://demo.vaadin.com/book-examples-vaadin7/book/#component.grid.renderer.custom doesn’t work because I can’t continue my development.

The constructor you are trying to invoke is not defined in your MyButtonRenderer class.
Have a look at https://github.com/vaadin/book-examples/blob/master/src/com/vaadin/book/examples/component/grid/MyButtonRenderer.java

HTH
Marco

I added the constructor but I have an another mistake :

grid.getColumn(“delete”).setRenderer(new MyButtonRenderer(e → // Java 8
grid.getContainerDataSource().removeItem(e.getItemId())
));

The method setRenderer(Renderer<?>) in the type Grid.Column is not applicable for the arguments (MyButtonRenderer).

I would like to disable a button on a Button Renderer in a grid.

You have that error because in your server side renderer you have extended the client side ButtonRenderer.
Check that the ButtonRenderer you are extending is in package
com.vaadin.ui.renderers and not in com.vaadin.client.renderers.

I think you are missing a piece of the puzzle. You should have

  1. a client side renderer: MyButtonRenderer (https://github.com/vaadin/book-examples/blob/master/src/com/vaadin/book/examples/client/widgetset/client/renderer/MyButtonRenderer.java)
  2. a server side renderer: MyButtonRendere (https://github.com/vaadin/book-examples/blob/master/src/com/vaadin/book/examples/component/grid/MyButtonRenderer.java)
  3. a client side connector with @Connect annotation pointing the server side renderer: MyButtonRendererConnector (https://github.com/vaadin/book-examples/blob/master/src/com/vaadin/book/examples/client/widgetset/client/renderer/MyButtonRendererConnector.java)

Then in you server side code you should use the server side renderer.

HTH
Marco

Ok, I create the different files but when I compile the widget, there are no change. The button in button renderer is not disable.
I develop with eclipse and I don’t know where must I put the different files.

28613.png

I suppose you have created your application as a maven project. If so you should have something similar to

src/main/java/com/yourpackage/client/MyButtonRenderer
src/main/java/com/yourpackage/client/MyButtonRendererConnector
src/main/java/com/yourpackage/MyButtonRenderer
src/main/resources/com/yourpackage/YourWidgetset.gwt.xml

In the widgetset xml file you should have something like this

[code]

[/code]Then you can compile the widgetset and run you application

HTH
Marco

I use Ivy, so how can I modify the file YourWidgetset.gwt.xml and what do you add on this.

I don’t arrive to modify the widgetset in ivy. I don’t use maven.

From the screenshot you posted you have your widgetset file located in
vaadin.widgets
package.
You an fill the AtalantevaadinWidgetset.gwt.xml with the content i provided in my last post.
Then create a subpackage
vaadin.widgets.client
and move there the client side classes
MyButtonRenderer
and
MyButtonRendererConnector
.
After that compile the widgetset.

I hope this helps.
I don’t use eclipse but if you have further troubles and you can share the whole project I can try to check what’s wrong.

Best regards
Marco

I create a new project test and I incorporate all files and it doesn’t work.

I send you the project test. You can check.
28624.zip (904 KB)

I didn’t yet run the project but in MyButtonRendererConnector the @Connect annotation value is wrong

@Connect(com.example.test.client.MyButtonRendererConnector.class) public class MyButtonRendererConnector extends ButtonRendererConnector { ... } You should connect your server side component

@Connect(com.example.test.MyButtonRenderer.class)
public class MyButtonRendererConnector extends ButtonRendererConnector {
...
}

With the above modificaton I got the project working correctly.
See attached screenshot
28625.png

Yes it works, thank a lot.

I’m glad I could help :slight_smile:

Best regards
Marco

I have an another question.

I must when I click in a button, disable this button because user cannot reclick on this.

I use a grid and i have a colonne renderer. Can I use the content that i provided in my last posts.

Best regard.