CODEWITHSUNDEEP
jquerycssjsfprimefacesdatatable
Sudipta Deb
Sudipta Deb

Reputation: 1050

Button background color/text change inside datatable in PrimeFaces

I have a datable and inside that I have commandbuttons as column. I would like to change the color of the commandbutton on select and deselect. For example, RED when not-selected/deselect and GREEN when selected.

My Datatable looks like:

<p:dataTable id="interfaces"
    value="#{studentBean.studentDataModel}"
    var="studentDetails" emptyMessage="No Student found."
    selection="#{studentBean.selectedStudents}" >

    <p:column headerText="Select this Student" style="width:1%">
        <p:commandButton value="Select"
            action="#{studentBean.saveThisStudent}"
            styleClass="non-selected-button-background-color">
        </p:commandButton>
    </p:column>

</p:dataTable>

Below is what I am having inside default.css

.non-selected-button-background-color {
    background-color: blue
}

.selected-button-background-color {
    background-color: green
}

Now how can I achieve the functionality?

Updated the functionality:
1) All the commandbuttons are initially having blue color
2) Once I click a button, it's color should change to green
3) Clicking again on the same button, color should change to blue
4) Clicking on another button will work below --

Upvotes: 1

Views: 13662

Answers (3)

Isa Kalınsaz
Isa Kalınsaz

Reputation: 1

You use the default or special primafaces theme.So firstly you need to set
background-image css attribute none. Because this themes use the background image that components. Here is the simple usefull primefaces button css inherited class.

.styleFilterCommandButton-BackgroundColor,
.ui-widget-content .styleFilterCommandButton-BackgroundColor,
.ui-widget-header .styleFilterCommandButton-BackgroundColor*
{
    background-image:none;
    background-color: #ee4400;  
}

Upvotes: 0

Diganta
Diganta

Reputation: 689

Try this:

Put following two lines in <p:dataTable> tag.

<p:ajax event="rowSelect" oncomplete="abcd()" />
<p:ajax event="rowUnselect" oncomplete="abcd()" />

Define the js functions such way. Here I have change css of hole row. You can change particular column of the corresponding row.

var abcd = function() {
var row= $('div.interfaces>table>tbody>tr');
$(row).each(function(){
    if($(this).hasClass("ui-state-highlight")){
        $(this).find('button.non-selected-button-background-color').css({'font-style':'italic'});
    }
    else {
    $(this).find('button.non-selected-button-background-color').css({'font-style':'normal'});
    }
 });
});

Upvotes: 0

mephissto
mephissto

Reputation: 11

I think the problem comes from your style. You only replace the background color, but some primefaces style use image as a background in dataTable.

Replace 

background-color: green;

by

background: green;

and I think it should work.

Upvotes: 1

Related Questions