Table Row Styling according to a column value.

Hello,

I am using CCv5 view with a this configuration:

Front List -> Settings -> Table

Everything works as expected but I want to finetune my view with different row colour according to the value of the column as for instance in the bootstrap link below.

http://getbootstrap.com/css/#tables-contextual-classes

How can I achieve this with CCv5?

I am puzzled what code to inser and where (Pre display processing? HTML?)

Please note that I am a newbie to CC any version.

Thank you in advance for your help.

Marco

Hello rmpaolillo,
I'm not a Chrono professional, but after checking your new post, I think that the following links may help:
How can I add a new column to a database table or change a column type?
P.S: I'm just an automated service😉

I appreciate the "automated service" help but that does not answer my question :-(

Thanks Max,

as I suspected. At least I do not spend more time to find an "impossible" solution in the "Table View".

BTW, this Chrono Connectivity Version (v5) Rocks :-).

Great stuff from you and Bob.

Marco

Hi Max,

I have found a workaround for my original question. I share with it you in case some user is as lazy as me to make a custom view in CF5 :-).

In the Form list->Settings->PHP functions box I have created <span> elements with class names as the table row colour in bootstrap, i.e.

Clienti.esito_chiamata:return (($cell == "Acquistato") ? '<span class="success"></span>' : (($cell == "Richiamo") ? '<span class="warning"></span></center>' : (($cell == "Non Interessato") ? '<span class="danger"></span></center>' : '<span class="white"></span></center>')));

then in the

Front List->List Display->Table->Header code

I have used some jquery to make the trick and it works....

<script type="text/javascript">
$(document).ready(function () {
        $('span.info').closest('tr').addClass('info');
	$('span.success').closest('tr').addClass('success');
	$('span.warning').closest('tr').addClass('warning');
	$('span.danger').closest('tr').addClass('danger');			
});
</script>

Hi Marco,

Nice one, thanks for sharing!🙂

Regards,
Max

Hello and thanks by share code.

Exactly what I need but does not work me.
I want to include it in td but does nothing for me. This is my adaptation:

In the Form list->Settings->PHP functions

<script type="text/javascript">
$(document).ready(function () {
        $('div.finalizado').closest('td').addClass('finalizado');
        $('div.enproceso').closest('td').addClass('enproceso');
        $('div.asignado').closest('td').addClass('asignado');
	});
 </script>

Front List->List Display->Table->Header code:

orders.estado_pedido:return (($cell == "Asignado") ? '<span class="asignado"></span>' : (($cell == "En proceso") ? '<span class="enproceso"></span></center>' : (($cell == "Finalizado") ? '<span class="finalizado"></span></center>')));

It is a problem of my code ?? or that is not working the jQuey ??

Thanks again

wrong: TAG -DIV- in all (bad copy/paste)

I fixed the problem. I've gotten it to work without jQuery

orders.estado_pedido:return (($cell == "Asignado") ? '<div class="asignado" title="Asignado" ><span></span></div>' : (($cell == "En proceso") ? '<div class="enproceso" title="En Proceso"><span></span></div></center>' : (($cell == "Finalizado") ? '<div class="finalizado" title="Finalizado"><span></span></div></center>' : '<div class="finalizado" title="Finalizado" ><span></span></div></center>')));

I added some tags and the title of the DIVs ... It works perfect.
Each has its class td css I assign an image to each value and hidden text span.

I again thank you for the contribution of code.
A greeting!

Hi jhaviro,

glad to know you made it in the end.

Sorry for not replying promptly.

If you use jquery, please, remember to load the library properly in the header otherwise you would not see the results.

Regarfs.

Marco