CODEWITHSUNDEEP
jsfjsf-2primefaces
user517491
user517491

Reputation:

Primefaces SelectOneButton : Change individual button styles

I am using primefaces selectOneButton. I want to make some buttons in that selectOneButton differently styled from others depending upon some backing bean value. Forexample text of 3 buttons in selectOneButton needs to be bold and that of remaining needs to be normal.

Is it possible?

Primefaces 3.2

Upvotes: 5

Views: 7513

Answers (4)

Harold Da Costa
Harold Da Costa

Reputation: 1

You can try it with Jquery!!

<p:selectOneButton value="#{selectOneView.productViewOption}" styleClass="product-view">
    <f:selectItem itemLabel="" itemValue="Xbox One" />
    <f:selectItem itemLabel="" itemValue="PS4" />
    <f:selectItem itemLabel="" itemValue="Wii U" />
</p:selectOneButton>
<script type="text/javascript">
    $('.product-view div:nth-child(1) span').addClass('fa fa-list fa-2x');
    $('.product-view div:nth-child(2) span').addClass('fa fa-star fa-2x');
    $('.product-view div:nth-child(3) span').addClass('fa fa-th fa-2x');
</script>

Upvotes: 0

user1867477
user1867477

Reputation: 156

This is how i made it:

Add a styleClass to the selectOneButton:

<p:selectOneButton styleClass="yourStyleClass" value="#{yourBean.yourValue}" > ...

And then in the stylesheet you can get ahold of the rendered buttons like following (I added an icon to each of the buttons - do whatever you like):

.yourStyleClass div:first-child span {
    background-image: url('logo.png') !important;
    background-position: left center;
    background-repeat: no-repeat;
    margin-left: 6px;
    padding-left: 23px;
}

.yourStyleClass div:nth-child(2) span {
    background-image: url('picture.png') !important;
    background-position: left center;
    background-repeat: no-repeat;
    margin-left: 6px;
    padding-left: 23px;
}

.yourStyleClass div:nth-child(3) span {
    background-image: url('video.png') !important;
    background-position: left center;
    background-repeat: no-repeat;
    margin-left: 6px;
    padding-left: 23px;
}

Upvotes: 9

jjross
jjross

Reputation: 678

Ok, I haven't tested this but I'm pretty sure you can do it with the Primefaces Request Context. See this link: RequestContext

This will let you execute client side JavaScript from your backing bean.

So, determine which buttons need to change in your backing bean and then call a JS function that uses jquery's addClass function to add a CSS class to the buttons that need to be styled.

It seems simple enough in my head but I don't have time to test it right now.

Upvotes: 2

kostja
kostja

Reputation: 61538

There is no "standard" way to do this. The common workaround is to have multiple elements - SelectItem in your case - that are styled differently - and use an expression with the rendered attribute to determine which ones are visible. This works for any component library, not only primefaces.

EDIT : have tried it right now - looks like I cannot influence the styling of the selectitems at all - at least not declaratively in the page. One could try tweaking the theme or overriding the primefaces selectors with custom styling using !important rule. But you would still not get distinct styling for the selectitems.

So please excuse my former confidence and regard this answer as a "No, you can't".

Upvotes: 3

Related Questions