3

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

Shikha Dhawan
  • 1,414
  • 8
  • 27
  • 44

2 Answers2

3

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.

Shikha Dhawan
  • 1,414
  • 8
  • 27
  • 44
0

I want to change the background color of the inputText - description on the event - valueChange. How can I change that?

Just execute some JavaScript/jQuery during the change event of the input element (PrimeFaces ships with jQuery bundled, you don't need to install it yourself).

Also, the default background color of it should be the same as of its parent row? Is it possible? How can it be done?

With jQuery it's easy to grab the parent row and get its CSS background-color property.

Assuming that you're going the jQuery direction, it would look something like this

<p:inputText styleClass="changeable" />

with

$(document).delegate("tr :input.changeable", "change", function() {
    var $this = $(this);
    $this.css('background-color', $this.closest('tr').css('background-color'));
});
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • the style class is not getting picked. ` ' and I defined the same in css as `.ui-inputfieldStyle { border:none; box-shadow:none; }` What's missing or incorrect in this ? – Shikha Dhawan Feb 21 '12 at 05:11
  • You gave them different names. – BalusC Feb 21 '12 at 05:17
  • A typing mistake here. "inputfieldStyle" is being used at both the places. Both the names are same. Still its not getting applied. – Shikha Dhawan Feb 21 '12 at 05:29
  • That class doesn't have any background color. – BalusC Feb 21 '12 at 05:45
  • Here I'm just using border & box-shadow. Its works fine if I set it using "style". But not working if I use "styleClass" – Shikha Dhawan Feb 21 '12 at 06:03
  • `box-shadow` don't work on `tr` without setting it to `display: block;` first (which would defeat the whole purpose of table). Not sure about border though. It may fail in some collapsed scenarios. By the way, it doesn't matter if it's declared by an inline style or a CSS class. The `jQuery.css()` uses `getComputedStyle()`. See also api doc: http://api.jquery.com/css/ – BalusC Feb 21 '12 at 06:07