AppGini Community Forums

Posted: **2020-01-20 20:30**

Hello everyone, please forgive me if this has already been asked but I need to know how I can change a rows colour dependent on the option I choose from a drop down menu.

I would like to have the following.

Pending - Red
Booked -Blue
Delivered - Green

I have very limited coding skills but any help would be greatly appreciated.

Raph

Posted: **2020-01-20 22:05**

Hi,

please do post questions only once

.

Just for clarification. Do you want to have a combined TV and DV, so that if you have in the detail view either an exisiting record, or a new record and you select from a dropdown a value the TV rows with that value should change color accordingly?
Or do you want to change the color in the TV rows according to the values "Pending", "Booked", "Delivered"?

Posted: **2020-01-20 22:44**

Hello sorry about that, my WiFi went down when I posted and didn't realise it posted twice.

I would like the entire row background colour changed to the colours I have listed when on a drop down menu I select one of those options. Alternatively if that cannot be achieved then possibly change the text colour of the text for that row to the colour.

It only needs to do it when viewing the table of data if you understand what I mean?

I only started using the program today and I have very limited knowledge of php etc

Thank you for your quick response.

Posted: **2020-01-20 23:10**

Hi,

ok, you can try this:

add to the "TABLENAME.php" file in the hooks directory in the tablename_header function

Code: Select all

			case 'tableview':
				$header=$header="<%%HEADER%%><script>\$j(function(){
	\$j('td.TABLENAME-FIELDNAME').each(function(){
	  switch (\$j(this).text()) {
		case 'Pending': 
			\$j(this).parent().css({'background-color': 'red'});
			break;
		case 'Booked':
			\$j(this).parent().css({'background-color': 'blue'});
			break;
		case 'Delivered':
			\$j(this).parent().css({'background-color': 'green'});
			break;
		default: 
			break;
	  }
	})
})</script>";;

You need to replace TABLENAME with your tablename and FIELDNAME with the name of the field containing the value you are looking for.

It you use a combined Tableview and Detailview add the code to the case 'tableview+detailview': section instead of the case 'tableview':

Hope that helps.

Posted: **2020-01-21 10:58**

Hello,

I have tried doing as you have asked but I still cant get it to work.

Can you just check the code i've used please?

Code: Select all

	function VIDA_header($contentType, $memberInfo, &$args) {
		$header='';

		switch($contentType) {
			case 'tableview':
				$header='';
				break;

			case 'detailview':
				$header='';
				break;

			case 'tableview+detailview':
				$header='';
				break;

			case 'print-tableview':
				$header='';
				break;

			case 'print-detailview':
				$header='';
				break;

			case 'filters':
				$header='';
				break;
				
							case 'tableview':
				$header=$header="<%%HEADER%%><script>\$j(function(){
	\$j('td.VIDA-status').each(function(){
	  switch (\$j(this).text()) {
		case 'Pending': 
			\$j(this).parent().css({'background-color': 'red'});
			break;
		case 'Booked':
			\$j(this).parent().css({'background-color': 'blue'});
			break;
		case 'Delivered':
			\$j(this).parent().css({'background-color': 'green'});
			break;
		default: 
			break;
	  }
	})
})</script>";;
		}

		

		return $header;
	}

As far as I can see I have added the code correctly into the correct section of the VIDA.php located inside the hook folder. Sorry I dont know how else to explain.

regards

Posted: **2020-01-21 18:46**

Hi,

almost, but you just added the data instead of putting in into the place with the case 'tableview'.

Your function should look like

Code: Select all

	function VIDA_header($contentType, $memberInfo, &$args) {
		$header='';

		switch($contentType) {
			case 'tableview':
				$header="<%%HEADER%%>
					<script>
					\$j(function(){
						\$j('td.VIDA-status').each(function(){
							switch (\$j(this).text()) {
								case 'Pending': 
									\$j(this).parent().css({'background-color': 'red'});
									break;
								case 'Booked':
									\$j(this).parent().css({'background-color': 'blue'});
									break;
								case 'Delivered':
									\$j(this).parent().css({'background-color': 'green'});
									break;
								default: 
									break;
							}
						})
					})
					</script>";
				break;
			case 'detailview':
				$header='';
				break;

			case 'tableview+detailview':
				$header='';
				break;

			case 'print-tableview':
				$header='';
				break;

			case 'print-detailview':
				$header='';
				break;

			case 'filters':
				$header='';
				break;
				
		}

		return $header;
	}

Posted: **2020-01-22 07:27**

Thank you very much I now have it working

I have one more question, is there a way to have the drop down list on the main table viewing screen? Basically creating a shortcut from having to go into each rows detailed section? I hope i'm explaining myself correctly.

regards

Posted: **2020-01-22 21:55**

Hi Ralph,

sorry but I do not get what you try with a dropdown box in the tableview.

What data should be in the dropdown box? What should happen if you select an item from the dropdown box?

Posted: **2020-01-23 10:00**

Hello,

If you see the attached image you will see this is the main table for one of my customers.

What I would like to know is if I could have a drop down menu selection on the "status" cell? Saving time on having to enter the detailed section and changing it in there? Currently to edit that cell I must go into the detailed view and change it there.

I hope this makes it clearer.

Once again thank you for your help

Posted: **2020-01-23 19:19**

Hi Ralph,

that is a feature that a lot of people would love to have but it is not available.
To be implemented it would cost a lot of effort and coding.

Posted: **2020-01-24 09:17**

Ok, thank you for your response

I will now move onto my next problem haha.

Posted: **2020-07-12 12:42**

Hi,

can you post your table + fields, so it is easier to identify if there is an error

Posted: **2020-07-15 13:17**

I've used your excellent solution for a number of cases and have recently tried to apply it to when the case is for when a checkbox is selected (not a text value) is there any chance you can show an example of this scenario - if it is possible to do with a checkbox, many thanks,
Cheers,

Posted: **2020-07-15 20:27**

Hi,

try

Code: Select all

			case 'tableview':
				$header="<%%HEADER%%><script>\$j(function(){
					\$j('td.TABLENAME-FIELDNAME').each(function(){
					  switch (\$j(this).find('i').attr('class').indexOf('-check')) {
						case -1:  // unchecked
							\$j(this).parent().css({'background-color': 'red'});
							break;
						default:    // checked
							\$j(this).parent().css({'background-color': 'green'});
				}})})</script>";
				break;

Posted: **2020-07-15 21:03**

pböttcher wrote: ↑

2020-07-15 20:27

Hi,

try

Code: Select all

			case 'tableview':
				$header="<%%HEADER%%><script>\$j(function(){
					\$j('td.TABLENAME-FIELDNAME').each(function(){
					  switch (\$j(this).find('i').attr('class').indexOf('-check')) {
						case -1:  // unchecked
							\$j(this).parent().css({'background-color': 'red'});
							break;
						default:    // checked
							\$j(this).parent().css({'background-color': 'green'});
				}})})</script>";
				break;

Excellent, works perfectly, I can see from the solution I was going completely down the wrong track and would never have got there!
Many thanks

Posted: **2020-11-11 21:34**

Hi.
I'm looking for something similar to this code, what do I need to change to use for checked and radio button fields?

Posted: **2020-11-12 00:54**

Hi aduff,
I am using this code for checkbox.
I place this code in hooks/footer-extras.php

Code: Select all

<script>
  $j(function() {
    $j('.tablename-fieldname').find('.glyphicon-check').parents('tr').addClass('warning')
  })
</script>

Replace tablename and fieldname in the above code with the name of the table and the checkbox field, respectively.
The 'warning' here is one of the variations in bootstrap (success, warning, danger, info etc.,)

Stay Safe & Have a nice day.

Posted: **2020-11-12 08:59**

Hi zibrahim.

Thank you for sharing your code.

I have applied the code to the <tablename>.php file as in the code but receive an error elsewhere in the php, please could you check the code I have please?

Code: Select all

	function table_a_header($contentType, $memberInfo, &$args) {
		$header='';

		switch($contentType) {
//			case 'tableview':
//				$header='';
//				break;
			case 'tableview':
				$header=$header="<%%HEADER%%>
						<script>
						$j(function(){
							$j('.table_a-Accepted').find('.Accepted-check').parents('tr').addClass('success')
						})
					break;

Posted: **2020-11-12 11:09**

Hi Aduff,
I think you have put the code at the wrong file.
It should be in hooks/footer-extras.php
as mentioned in my posting.
not the <tablename>.php

Good luck.

Posted: **2020-11-12 13:57**

Hi zibrahim.

I've corrected my mistake and placed in the correct file and works perfectly, thank you!

Posted: **2021-03-05 19:54**

Is there a way to change the color of an entire row in table view based on the condition of a radio button. Red if "unsafe" Green if "Safe"??

Posted: **2021-03-07 00:22**

Hi rpierce,
You can try this code in your hooks/TABLENAME-tv.js file (create one if not exist).

Code: Select all

// The following script is for changing the row color if condition matched
$j(function () {
    $j(".TABLENAME-FIELDNAME").each(function () {
        var value = $j(this).text();
        if (value == "Safe") {
            $j(this).parents("tr").addClass("success");
        }
        if (value == "Unsafe") {
            $j(this).parents('tr').addClass('danger');
        }
    });
});

Change the TABLENAME and FIELDNAME accordingly.
I hope this will help.
Stay safe.

AppGini Community Forums

Change row colour from drop down menu. Please help!

Change row colour from drop down menu. Please help!

Re: Change row colour from drop down menu. Please help!

Re: Change row colour from drop down menu. Please help!

Re: Change row colour from drop down menu. Please help!

Re: Change row colour from drop down menu. Please help!

Re: Change row colour from drop down menu. Please help!

Re: Change row colour from drop down menu. Please help!

Re: Change row colour from drop down menu. Please help!

Re: Change row colour from drop down menu. Please help!

Re: Change row colour from drop down menu. Please help!

Re: Change row colour from drop down menu. Please help!

Re: Change row colour from drop down menu. Please help!

Re: Change row colour from drop down menu. Please help!

Re: Change row colour from drop down menu. Please help!

Re: Change row colour from drop down menu. Please help!

Re: Change row colour from drop down menu. Please help!

Re: Change row colour from drop down menu. Please help!

Re: Change row colour from drop down menu. Please help!

Re: Change row colour from drop down menu. Please help!

Re: Change row colour from drop down menu. Please help!

Re: Change row colour from drop down menu. Please help!

Re: Change row colour from drop down menu. Please help!