Datatable rowStyleClass

Locked
ClaudioC
Posts: 114
Joined: 26 Sep 2013, 10:40

24 Sep 2015, 13:44

Dear friends I have a datatable with this rowstyleclass :

Code: Select all

rowStyleClass="#{item.statoIncarico eq 'in trattativa' ? 'trattativa' : null}">
I want to change row background color when row item has a particular state ( in my case if a item field == "in trattativa I want a red background ).

So in core-layout.css i've added this code :

Code: Select all

.trattativa{
    background-color: tomato;
    background-image: none;
}
But it doesn't work and row background color remain white . I've tested this rule in a project without a primefaces layout and it works.
Where is my fault ?
Netbeans 8.1, PrimeFaces 5.3.10 + PrimeFaces Extensions 4.0, Glassfish ver4.1, Chrome with NetbeansPlugin

aragorn
Posts: 3765
Joined: 29 Jun 2013, 12:38

28 Sep 2015, 10:08

Please try with;

Code: Select all

.trattativa{
    background-color: tomato !important;
    background-image: none;
}
OR

Code: Select all

.ui-datatable .trattativa{
    background-color: tomato;
    background-image: none;
}

ClaudioC
Posts: 114
Joined: 26 Sep 2013, 10:40

28 Sep 2015, 18:38

I've added both code suggested in my core-layout.css but it not works.
My datatable declaration is the follow :

Code: Select all

<p:dataTable id="datalist" value="#{incarichiController.items}" var="item" widgetVar="incarichi"
                                         selectionMode="single" selection="#{incarichiController.selected}"
                                         paginator="true"
                                         paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
                                         currentPageReportTemplate="(Incarichi: totale {totalRecords} elementi, Pagina: {currentPage}/{totalPages})"
                                         rowKey="#{item.idIncarichi}"
                                         rows="10"
                                         reflow="true"
                                         tableStyle="table-layout:auto"
                                         rowsPerPageTemplate="5,10,20,30,40,50"
                                         filteredValue="#{incarichiController.filteredIncarichi}"
                                         rowStyleClass="#{item.statoIncarico eq 'in trattativa' ? 'trattativa' : null}">
-------several columns ------- etc etc
Netbeans 8.1, PrimeFaces 5.3.10 + PrimeFaces Extensions 4.0, Glassfish ver4.1, Chrome with NetbeansPlugin

aragorn
Posts: 3765
Joined: 29 Jun 2013, 12:38

29 Sep 2015, 08:47

I couldn't replicate the issue. I tested with your sample code and my CSS code. Can you please attach a screenshot with DOM structure? I think "trattativa" class is not added into rows.
Also, can you try to add my css codes in your page.xhtml?

ClaudioC
Posts: 114
Joined: 26 Sep 2013, 10:40

30 Sep 2015, 09:49

If I added your code directly into XHTML page it works. Thanks. But the question now is : Why it not work if I added it into core-layout.css ?
Netbeans 8.1, PrimeFaces 5.3.10 + PrimeFaces Extensions 4.0, Glassfish ver4.1, Chrome with NetbeansPlugin

aragorn
Posts: 3765
Joined: 29 Jun 2013, 12:38

30 Sep 2015, 13:48

I added my css code into core-layout.css. it worked fine. Could you try to add theme.less instead of core-layout.css?

Locked

Return to “Modena”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest