Question

I am using primefaces(v.3.0) datatable in my application.
In Datatable there are two columns , one column is inputtext and other is SelectOneMenu(dropdown).

Now I want to change inputtext color with some cases like..

1.if SelectOneMenu value get selected as “Single” input textbox color will be “green” for that particular pID only.

2.if SelectOneMenu value get selected as “Married” input textbox color will be “red” for that particular pID only.

3.if SelectOneMenu value get selected as “Divorced” input textbox color will be “yellow” for that particular pID only.

So I am trying in this way….

   <h:form id="form">
<h:panelGrid columns="2" cellpadding="10" id="h">
        <p:dataTable id="table" var="s"
                                value="#{backingBean.arrayList}"
                                widgetVar="empTable" rowKey="#{pt.pID}"
                                paginator="true" rows="15"
style="width: 100%;margin-bottom: 10px;" rowStyleClass="#{s.status}">

                                <f:facet name="header">  
           List of Patients Appointments  
        </f:facet>

                                <p:column headerText="Status" id="t">

                        <p:inputText value="#{s.status}" />

                    </p:column>


                        <p:column headerText="EmployeeAction">
                        <p:selectOneMenu id="scAction" value="#{backingBean.obj.empStatus}"
                                style="width:125px">
                                        <f:selectItem itemLabel="Select" itemValue="" />
                                        <f:selectItems value="#{schedulerBB.scheduleActionSelect}"
                                            itemLabel="#{backingBean.obj.empStatus}"
                                            itemValue="#{backingBean.obj.empStatusID}" />
                                    <p:ajax event="change" listener="#{backingBean.changeColor(s)}"  update=":form" />


                                    </p:selectOneMenu>

                                </p:column>

                        </p:dataTable>
                        </h:panelGrid>
                        </h:form>

In CSS

.Single td:nth-child(1) input {
    background-color: green;
}

.Married td:nth-child(1) input {
    background-color: red;
}

.Divorced td:nth-child(1) input {
    background-color: yellow;
}

In BackingBean:

private Employee obj;

    //Getter setter methods

    public Employee getObj() {
    if(obj==null){
    obj=new Employee();
    }
    return obj;
}

public void setObj(Employee obj) {
    this.obj = obj;
}


public void changeColor(Employee e){

  if(obj.getEmpStatus().equals("1")){  

        EmployeeDAO.updateEmpTable(e.getPID,e.getStatus);

    }

    css
    .Single td:nth-child(1) input {
    background-color: green;
}

.Married td:nth-child(1) input {
    background-color: red;
}

.Divorced td:nth-child(1) input {
    background-color: yellow;
}

I am able to change the input text value on change of selectonemenu for that particular pID,but as you can
see I have applied inputtextbox color change logic at column level ,so all columns inputtext color changes.

So how can I apply logic of changing inputtext box color at row level(i.e for particular ID only)

Answer 1

You can use a different style class for rows that match a condition.

Using this in your page a style class will be enabled depended on the status:

<p:dataTable id="table" var="s" value="#{backingBean.arryList}" widgetVar="EmployeeTable" rowKey="#{s.pID}" paginator="true" rows="15" style="width: 100%;margin-bottom: 10px;" rowStyleClass=#{s.status}>
    <p:column id="st">
        <f:facet name="header">  
            <h:outputText value="Status" />  
        </f:facet>  
        <p:inputText value="#{s.status}" style="width:90px;"/>
    </p:column>

    <p:column headerText="Employee Status">
        <p:selectOneMenu value="#{backingBean.obj.empStatus}" style="width:125px">
            <f:selectItem itemLabel="Select" itemValue="" />
            <f:selectItems value="#{BackingBean.empStatusActionSelect}"
                itemLabel="#{backingBean.obj.empStatus}"
                itemValue="#{backingBean.obj.empStatusID}" />
                <p:ajax event="change" listener="#{backingBean.changeColor}" update="table"/>
        </p:selectOneMenu>
</p:dataTable>

In your CSS you need the following:

.Single td:nth-child(1) input {
    background-color: green;
}

.Married td:nth-child(1) input {
    background-color: red;
}

.Divorced td:nth-child(1) input {
    background-color: yellow;
}

This way an input element in the first column of a table row gets a background color, green, red or yellow.

Note: the outcome of #{s.status} must be “Single”, “Married”, or “Divorced”.