Question

I have an editable coloumn in dataTable. The code is:

<p:column id="articleDescription" headerText="Article Description" filterBy="#{article.description}" filterMatchMode="startsWith">
  <p:inputText id="description" value="#{article.description}"style="border:none; box-shadow:none;" />
</p:column>

1. I want to change the background color of the inputText – description on the event – valueChange. How can I change that ?
2. Also, the default background color of it should be the same as of its parent row? Is it possible? How can it be done?

Thanks,
Shikha

Answer 1

The background color of the cell was set as of the parents row’s color as :

.inputTextStyle {
    background-color: transparent !important;
}

<h:inputText id="vendorDiscountPerInputTxt"
    value="#{articlePromo.descPromoPorcentaje}"
    styleClass="inputTextStyle">
</h:inputText>

Also, changed the background color of the cell on value change event as:

$(document.getElementById(str)).css("background-color", "pink !important");

Marking it as important is required because primefaces mark it as important. So, to override it.