Remove ui-state-error cellEditor primefaces

Question

I want to put an inputText inside a cellEditor using validateLongRange on primefaces like that:

<p:contextMenu for="dataTableAvaliacao" widgetVar="cMenu">
    <p:menuitem value="Edit Cell" icon="ui-icon-search"
        onclick="PF('cellNota').showCellEditor();return false;" />     
    <p:menuitem value="Hide Menu" icon="ui-icon-close"
        onclick="PF('cMenu').hide()" />    
</p:contextMenu>  
<p:dataTable 
    id="dataTableAvaliacao" var="aluno"
    value="#{alunoAvaliacaoMB.alunos}"
    editable="true" editMode="cell" 
    widgetVar="cellNota">   
        <p:columns id="coluna-nota"
            value="#{alunoAvaliacaoMB.colunasAvaliacoes}" var="avaliacao"
            columnIndexVar="colIndex" > 
                <p:cellEditor>
                    <f:facet name="output">
                        <h:outputText
                            value="#{aluno.getNota(avaliacao.property).vlNotaString}" /> 
                    </f:facet>
                    <f:facet name="input">    
                        <p:inputText id="inputNota"
                            value="#{aluno.getNota(avaliacao.property).vlNotaString}">
                            <f:validateLongRange maximum="10" minimum="-10" />                                     
                        </p:inputText>
                    </f:facet>  
                </p:cellEditor> 
        </p:columns>
</p:dataTable>

The problem is when validation error occurs, primefaces is painting the inputText and the cellEditor, the appearance looks like that:

How to remove ui-state-error from gridcell? I have tried using jQuery: $('.ui-state-error').removeClass('ui-state-error') but I don't know where to put it.

I'm using sentinel-layout. http://primefaces.org/layouts/sentinel

Sorry for Portuguese words in pictures and code.

UPDATE

I can't change the CSS (apparently) because both inputText and cellgrid uses the same style generated by primefaces.

Below two images showing that.

First the style of inputText

Second the style of gridcell

How can I change CSS without affect both components? I'm still looking for a way to remove a class with jQuery. I can remove the style using jQuery.

@Tiny doesn't work because that style is added dinamically (on blur event, i believe), it's not loaded on begin of the page. — Johnny Willer, Aug 11 '15 at 19:13
http://stackoverflow.com/questions/8768317/how-do-i-override-default-primefaces-css-with-custom-styles/ — BalusC, Aug 13 '15 at 15:00

dognose · Answer 1 · 2015-08-11T20:04:12.860

3

A simple way would be to just override the style for that particular case with anything default. Then Primefaces can change the styleclass - nobody will notice:

td.ui-editable-column.ui-state-error{
   border: 1px solid #dadada !important; // Or whatever is the default color.
                                         // Figure out using inspect element 
                                         // on a non error cell.
}

In a nutshell, this style will only be applied, if the style classes ui-editable-column AND ui-state-error are available on the same td-tag. Therefore it would not affect the input, because

Input is no td-tag
Input does not have the ui-editable-column class.

See the fiddle: The "double" selector should work perfectly fine for your usecase:

Note, that the one td beeing class="ui-editable-column ui-state-error" has no red border, even if it should have due to ui-state-error.

https://jsfiddle.net/2607kt05/1/

edited Aug 11 '15 at 20:04

answered Aug 11 '15 at 19:21

dognose

20,360
9
61
107

It's not the way I was expecting, but I will try. Thanks! – Johnny Willer Aug 11 '15 at 19:24
1

@Johnny, I think the statement in your update is wrong. Try making your selector more specific and it will work I think – Kukeltje Aug 11 '15 at 19:48
@JohnnyWiller Updated my answer. You can use the double class selector as described. You can add more classes to narrow it down. – dognose Aug 11 '15 at 19:59

score 0 · Accepted Answer · answered Aug 13 '15 at 14:37

First of all, thanks for all of your help.

I have solved my problem adding some attributes on style property, like:

<p:columns id="coluna-nota" style="height: 25px;width:25px; border: solid 1px #E5EBF0 !important;"
            value="#{alunoAvaliacaoMB.colunasAvaliacoes}" var="avaliacao"
            columnIndexVar="colIndex" >

It's not the best way that I would like to do, but was the only that I could solve the problem, probably due to my inexperience in web development :)

Remove ui-state-error cellEditor primefaces

2 Answers2