use as row class together with merge rows option on joined list

[lcollong]

Hi,

The "use as row class" option is a great tool to style list based on a cell value (status). But is case of joined list together with the "merge rows" option, the rendered result uses ul/li structure inside the <td> cell and the <tr> corresponding row class shows a mix of class. ie "statusopen---statusclosed---statuspending" corresponding to the displayed status <ul><li>Open</li><li>Closed</li><li>Pending</li></ul>

Is there a css "trick" to convert these mixed class to address the corresponding <li> with the right style ?

currently I have this css:

.statusopen {color: green;}
.statusclosed {color: red;}

But of course, it works only in case the master row has only one joined row.

Should I use another approach such as the Jlayouts ?

 

[lousyfool]

Hi,

No CSS "tricks", sorry.

Javascript.
Or, depending on which element type you're using, a layout override with some if{...}elseif{...}else{...} conditioning.

But... why would one record be both "open" and "closed" at the same time? (Not for me to decide, of course... just wondering )

 

[cheesegrits]

But... why would one record be both "open" and "closed" at the same time? (Not for me to decide, of course... just wondering )

Because he's using "merge" for repeat data, so rather than a separate table row for each row of repeated data where the data from the main table is the same only the joined data differs on separate rows, there is one row, with the repeated joined data merged into a single cell for each repeated element, as a UL.

So the repeated joined rows have different statuses. But the row status is being applied to the table row (as the name suggests) rather than the merged UL structure.

Not much I can do about that.

-- hugh

 

[lousyfool]

Because he's using "merge" for repeat data...

Haha, thanks Hugh, for the explanation! I know what "merge rows" does. Was only wondering about usability (user seeing a single row with eventually multiple contradicting statuses). Should've asked, "why would one want one record to be both 'open' and 'closed' at the same time", I guess...

 

[cheesegrits]

Well, it's not "one record". It's multiple records, represented as a single row.

The ultimate solution would be for the 'row class' code to recognize when the element marked for 'use as row class' is in a merged row, and apply the class to the matching LI in the ULs for the elements from that joined table. But I had a quick look at the code just now, and that would be Distinctly Non Trivial <tm>.

-- hugh

 

[lcollong]

@Hugh : thanks for looking at a possible solution. Actually I had the feeling it would not be so easy... I'll do a try with the layout. I really have to maintain the "merge rows" view for UI reasons.

@lousyfool : the use case is that the main table is dealing with dates regarding electronic equipments survey in a given site. The main table is sending mails to the site administrator regarding the state of the equipments on his site. Each equipment could have a different status. The synthetic mail (manual process with preconfiguration) depends on the kind of equipment and their states. Hence the comfort to quickly survey the site global status based on a mix of colors of the equipment's individual status.

 

[lousyfool]

Thanks for clarification!

Just my 2 cents: I'd probably still fancy doing it with JS. Something along the line "check if <li> for this element/column contains string 'Open', then set its CSS 'color:green;'", and equivalents for the other options.

 

[lcollong]

I'll see the easier way ! The problem with JS is that the css modification come "after" the list display wich, in some situation, can be very "visible"...

Thanks for your replies/interest

 

[lcollong]

As a follow up :

1. I did not succeed using jLayouts (mainly because I did not find how to override the element.list.details. It seems to not being catched).
2. Following lousyfool's suggestions, I did it using js. Hereunder is my code in case it could help someone. It's very basic as it looks to the content. If the content change : you have to change the code ! Ideally, I should have explore the DOM to find "intersection" between the line ( <tr> class given by the "use of row class feature") and the column (element name) concerned by the css style. I had to watch two events as the lists are ajaxified.

requirejs(['fab/fabrik'], function() {
    Fabrik.addEvent('fabrik.list.loaded', function(list) {
        setapcheaStyle();;
    });

    Fabrik.addEvent('fabrik.list.update', function(list, data) {
        setapcheaStyle();;
    });
});

function setapcheaStyle() {
    jQuery('li').filter(function(){
        if (jQuery(this).text() === 'Arroser') jQuery(this).addClass('apchea-gouttes');
        if (jQuery(this).text() === 'Demandé') jQuery(this).addClass('apchea-demande');       
        if (jQuery(this).text() === 'Observé') jQuery(this).addClass('apchea-observe');       
        if (jQuery(this).text() === 'vigilance') jQuery(this).addClass('apchea-vigilance');   
        if (jQuery(this).text() === 'alerte') jQuery(this).addClass('apchea-alerte');           
    });
}

And the extract of the related list template custom.css file :

li.apchea-vigilance {
    background-color: #FBC859;   
}

li.apchea-alerte {
    background-color: #EC7E5E;   
}

li.apchea-demande {
    background-color: #B5E6C7;
}

li.apchea-observe {
    background-color: #B5E6DC;
}

li.apchea-gouttes:after {
    content: " ";
    background: url(/images/apchea/icones/icones_graphes/goutte_exclamation_bleu.svg) center/contain;
    background-repeat: space;
    background-position: right;
    padding-right: 35px;
}

 

[lousyfool]

Glad you got it working!

I'm not a JS guru, and these things seemingly don't cause issues, but just for the record:

You have double semicolons in

setapcheaStyle();;

while eventually one is missing after the last ) at the end of the setapcheaStyle function.

As you said, in some other cases it could be safer to include the class of the element/column in the selector, but if these are the only <li> with this content, you're certainly getting away with it.