Color Record Row in Table View Based on Field Value

[federico]

hi
in footer-extras.php the following code Highlight the entire coloum

$j('.Listini-Costo').each(function(){
var Costo = $j(this).text();
if(Costo => 0){
$j(this).addClass('danger');
}
})

I would like to change only the colour of the text. How?

thanks

[SkayyHH]

Hi,

customize the CSS class "danger" or take a new CSS class for it with your style

I.E. in header-extras.php

<style>
.myclass {
background: red !Important;
color: green !Important;
}
</style>

[federico]

Hi
thanks for replay
I wrote your code in header-extras.php. Than? Should I change my code? I'm a little bit noobie

[SkayyHH]

Use "myclass" as the class name for your style. You can call it what you want. You have to use the same class name in your code. So instead of addClass ('danger'); > addClass ('myclass');

[federico]

thanks! step by step i understand, but only the background change. the text remains the same

[rpierce]

Once again I ask of our magnanimous coders:

I have been working on this issue for my app also. I have managed to get code from this thread or another thread along the same lines working to a certain degree but wonder if anyone can help with a bit more.... I can get the rows in my table to turn Red and Green based on the criteria in a field; Safe / Unsafe are the two conditions based on input from a radio button. Obviously red for unsafe......

This works in table view, but if I am in Details view for the parent table and have child tables sowing the colored rows don't show up.

projects-detail.JPG

audit1.JPG

Here is the code I'm using in hooks/audit.php --- function audit_header.....

Code: Select all

			case 'tableview+detailview':
				$header="<%%HEADER%%><script>\$j(function(){
	\$j('td.audit-saf_un').each(function(){
	  if(\$j(this).text() == 'Unsafe'){
		\$j(this).parent().addClass('danger');
	  if(\$j(this).text() == 'Safe'){
		\$j(this).parent().addClass('success');
	   }  
	  }
	})
})</script>";
				break;

Thank you for any suggestions,
Ray

[SkayyHH]

You could try it this way in audit-saf_un.js :

Code: Select all

$j(function(){
		$j('.audit-saf_un').each(function(){
			var status = $j(this).text();
        		
			if(status == 'Safe'){
		            $j(this).addClass('success');
            }
		
			if(status == 'Unsafe'){
		            $j(this).addClass('danger');
			}			
		})
})

But i think it works not in detail view, too...

[federico]

I had the same problem and thanks to the other guys the final script is this one. As you can see there's a function of "delay during load the page".
I hope it helps

<script>
$j(function() {
function wait_for(data,callback,time=100) {
if($j(data).length != 0) {
callback();
return;
}
else {
setTimeout(function() {
wait_for(data,callback, time);
}, time);
}
}
wait_for('.table-striped',function() {
$j('.Agenda-Stato').each(function(){
var Stato = $j(this).text();
if(Stato == 'Attesa Azione Cliente'){
$j(this).parents('tr').addClass('warning');
}
if(Stato == 'Attesa Azione Tecnoplastic'){
$j(this).parents('tr').addClass('danger');
}
if(Stato == 'Attesa Azione Commerciale'){
$j(this).parents('tr').addClass('success');
}
})

})
})
</script>


[federico]

fixed!!!
$j('.Listini-Costo').each(function(){
var Costo = $j(this).text();
if(Costo => 0){
$j(this).children('a').css('color',"#ff3a3a")
}
})

[rpierce]

I have the code working as it is written in my app. the screen shots I meant to show everyone didn't come through so here they are again. As oyu can see, the color code works in table view as I have it now. I just need to figure out how to make it appear in the combination detail and table view.

audit1.JPG (60.31 KiB) Viewed 4573 times

projects-detail.JPG (121.04 KiB) Viewed 4573 times

[federico]

Try to use this in the footer-extras:

<script>
$j(function() {
function wait_for(data,callback,time=100) {
if($j(data).length != 0) {
callback();
return;
}
else {
setTimeout(function() {
wait_for(data,callback, time);
}, time);
}
}
wait_for('.table-striped',function() {
$j('.audit-saf_un').each(function(){
var status = $j(this).text();
if(status == 'Safe'){
$j(this).parents('tr').addClass('success');
}
if(status == 'Unsafe'){
$j(this).parents('tr').addClass('danger');
}
})
})
})
</script>

I hope it helps

[rpierce]

federico,

I put your script into footer-extras and still have the correct row color in table view but not in detail+table view.

Ray

[zibrahim]

Hi federico,
I managed to get the child table row change color accordingly. Thank you!
However, if I have more than 10 child records (my limit display is 10 rows) and if I click the next set (< > button below the child table) the row color is not functioning anymore. Even if I go back to the previous set, the row colors are gone.
Any idea how we can improve the script?

Thanks.

[rpierce]

zibrahim,

I use the following code in footer-extras for table view to allow scrolling through many records and keeping the header row visible. I also have the code being discussed in this thread for changing row background colors based on criteria in teh footer-extras. When I scroll through 500 records and then switch to the next page. All the colors are still there. Maybe something in that script could help you??

Code: Select all

<?php if ($_REQUEST['Print_x'] != 1) {
echo $_REQUEST['Print_x'];
echo <<<EOT
<style>

.table-responsive { overflow: auto; width: 100%; height: 66vh; }
.table th { background:#eef; }
</style>



<script>
\$j('table').append(\$j('thead'));
// check for IE
if (navigator.userAgent.search("NET4.0") >= 0) {
\$j('div.table-responsive').on('scroll', function() {
\$j('th', this).css('transform', 'translateY('+ this.scrollTop +'px)');
});

}
else {
if (navigator.userAgent.search("Edge") >= 0) { // check for Edge
\$j('.table-responsive').find('th').each(function() {\$j(this).css({"position": "sticky", "top": "0"})});
}
\$j('div.table-responsive').on('scroll', function() {
\$j('thead', this).css('transform', 'translateY('+ this.scrollTop +'px)');
});
}
</script>;
EOT;
} ?>

It still won't give me the colored rowi nt table=detail view.....

Ray

[federico]

Ray
are you sure about the table and column name? .TABLENAME-COLUMNNAME -> .audit-saf_un

[rpierce]

federico,

Yes, the table name is 'audit' and the field name is 'saf_un'. As mentioned earlier, the code works great at changing the row color while I'm in audit table view. So the tablename and field must be correct there. the issue when I have a project detail displayed and click on the tab below (Audit Findings). there is no row color displayed.

thank you for helping me to decipher this puzzle!!

Ray

Code works good here

audit1.JPG (60.31 KiB) Viewed 4515 times

If I click the Audit findings tab I want to see colored rows.

projects-detail.JPG (121.04 KiB) Viewed 4515 times

[zibrahim]

Hi Ray,
I think I have found the solution for highlighting the cell (based on the value) for CHILD TABLE in PARENT TABLE detail view.
This is what I have done.

1. Put the following code in the PARENT_TABLENAME-dv.js

Code: Select all

// highlight child table cell according to the value
$j(function () {
    setInterval(function () {
        // The following script is for changing the cell color if condition matched
        $j(function () {
            $j(".CHILD_TABLENAME-CHILD_TABLEFIELDNAME").each(function () {
                var status = $j(this).text();
                if (status == "OK") {
                    $j(this).addClass("text-success").addClass("success");
                }
                if (status == "NG") {
                    $j(this).addClass("text-danger").addClass("danger");
                }
            });
        });
    }, 500);
});

2. Save it and refresh your browser (force to refresh browser javascript if needed)

I hope this will help.

Stay safe.

[rpierce]

That seems to be doing the trick!!! Thank you for taking the time to look into this. You're awesome....

[zkarwinkar]

This isn't working for checkbox

I have status field, if check then add class success else danger,

Please help !!

[jsetzer]

What are the values of your status field in TV? I guess the value is not `Ok` but there are icons instead.

[jsetzer]

var status = $j(this).text();

If I'm right and there are icons inside the cells, .text() will not return any relevant value.

Use .html() instead for getting the HTML value:

Code: Select all

var status = $j(this).html();

Then console.log(status) and check the actual values in console tab of your browser's development tools.

[jsetzer]

You may try this different approach:

Code: Select all

// file: hooks/TABLENAME-tv.js
function setVariationIfChecked(fieldname, variation = "success") {
  jQuery(`td.${AppGini.currentTableName()}-${fieldname} i.glyphicon.glyphicon-check`).closest("tr[data-id]").addClass(variation);
}

function setVariationIfUnchecked(fieldname, variation = "danger") {
  jQuery(`td.${AppGini.currentTableName()}-${fieldname} i.glyphicon.glyphicon-unchecked`).closest("tr[data-id]").addClass(variation);
}

jQuery(function() {

    // if field 'is_cancelled' is checked, give the row success-background
    setVariationIfChecked("is_cancelled");

    // if field 'is_cancelled' is unchecked, give the row danger-background
    setVariationIfUnchecked("is_cancelled");

});

[zkarwinkar]

thank you sir , it works

[patsd102]

Anyone want to help me highlight a row when a date field is 24 hours old?

TIA

Pat

[onoehring]

Hi,

sorry not the answer to your question, but does your request make sense?
Sooner or later all records will probably be older than 24 hours, thus everything will be colored. Maybe it is worth to switch and color all records that are younger than 24 hours?

Maybe you can find a solution yourself using zibrahim's reply ( posting.php?f=7&mode=reply&t=1322&sid=b ... db#pr16744 ): You essentially need jquery to calculate the time difference (seconds) for each row to the time the page is rendered. If this time is more (or less) then 24 hours call the function to color it e.g. add a CSS class.

Olaf