Styling Grid ButtonRenderers????

Vaadin 6 / 7 / 8
1

Hi,

I have a Table with a colour coded and styled button in each row. I have been trying to recreate this using the 7.4 Grid with a ButtonRenderer in the column, however I can see no way to style the Button in the ButtonRenderer.

Can somebody please tell me how I am supposed to do that?

Conrad

2

The rendered buttons have v-nativebutton style class, so you should be able to style them with a rule such as

.v-nativebutton { color: blue; } You may want to add more specificity to the rule, such as .v-grid .v-nativebutton {}.

3

Thanks, but I need to be able to add a style name to the button - just coloring all native buttons the same color won’t work.

Is there a way to change the style of ButtonRenderers on demand?

If I extend ButtonRenderer is there a method I could override to choose the styling based on the data displayed in the row?

4

Ok, I didn’t quite know what you wanted.

Well, the primary style is set in ButtonRenderer.createWidget() with setPrimaryStyleName(), but in your case you probably want to set or add additional styles in render() with setStyleName() or addStyleName() (maybe also use button.removeStyleName()), as you want to have it based on the value. You could alternatively just modify the style attribute of the button there.

5

I actually meant extending com.vaadin.ui.renderers.ButtonRenderer

I actually don’t know how to extend com.vaadin.client.renderers.ButtonRenderer and make a ui.renderer to display it.

6

You need to extend each of:

  • com.vaadin.client.renderers.ButtonRenderer - implement your style logic in the render() method here
  • com.vaadin.ui.renderers.ButtonRenderer - mostly just extend as is, nothing else is needed but the constructors
  • com.vaadin.client.connectors.ButtonRendererConnector - create your renderer instead of ButtonRenderer and have @Connect bind to your server-side renderer class
7

Thank you - I shall try my best

8

How do I get the connector picked up? I have done the work, the app compiles but the buttons do not show…

9

OK, I think I got it - I need to compile the widget set

Wish me luck - never done a new component before

10

Actually I’m at a loss. I have added the extended classes just in my normal source code - should I have created a separate module for them?

11

Yes. The package structure must be like in
regular client-server integration
. The client-side code (the client-side renderer and the connector) must be under the “client” package under the package of the widgetset descriptor. The server-side renderer class must be with your other server-side code.

You probably won’t need the shared state or other classes, only the three mentioned classes, which should be fairly simple.

There’s also
here
 some general stuff about component extensions (the Grid renderers are one kind of extensions).

12

Thank you for your help Marko.

I think this is really increasing my Vaadin knowledge in a good way.

13

So Marko,

very cool. I have my new button renderer extension compiling and applying a fixed style.

Can you suggest what the correct mechanism is for rendering the button in a different colour (i.e. styling) based on the item in the row. This item will never change and so once rendered the button does not need to change.

Would shared state be the correct way forward with this? Or is there another mechanism for dynamically styling each renderer based on the row?

Thanks

14

Its OK

worked it out

I can use the render method and pass through something other than a String :slight_smile:

Seems very powerful.

15

Yes, at least if you extend ClickableRenderer instead of ButtonRenderer, you can use other data types than the String for values, and can get the style attribute or whatever from the property value.

Or, if you extend ButtonRenderer, which was my original suggestion, you can just encode necessary stuff (such as a style) in the String value, which is usually used for the caption, and decode that in the render() method and use however you like. It’s maybe a bit hacky that way, but anyhow.

16

As my buttons always have the same lable, but different colours depending on the status, I am passing the status through as a string and using that to set the style whilst setting a constant lable. Works very well, and isn’t hacky at all :slight_smile:

Thanks for all your help

17

Good Morning,

I could not understand very well how to put ButtonRenderer style.

Could you provide me an example?

Thank you

18

I need to do this as well. Nothing complicated, just something equivalent to say doing an .addStyleName(BUTTON_LINK) to the button created by the renderer.

19

Conrad, could you please provide us with a working example on how to implement my own ButtonRenderer in order to add custom styles, such as icons, to a Button? I’ve been stuck on this for days. Thanks.

20

Felix,
Have you looked at other Renderers ?

There’s the
GridActionRenderer Add-on
 which was made by a Vaadin employee. You can see some screenshots
here
.

In principle you could also use
ClickableTextRenderer Add-on
 by making sure the content of your cell is some HTML text like the result of

FontAwesome.TRASH.getHtml()

That will give you a “delete” icon which can perform some action when clicked upon. However I’m guessing GridActionRenderer Add-on is the most appropriate for your case.

Finally there’s the
Context Menu Add-on
 by Vaadin Ltd, which isn’t a renderer at all but a feature by which you can add a right-click menu to rows in a grid. It is an alternative to ‘action buttons’ in the grid itself.