Change row colour from drop down menu. Please help!

Got something cool to share with AppGini users? Feel free to post it here!
Post Reply
reg216uk
Posts: 22
Joined: 2013-09-26 18:45

Change row colour from drop down menu. Please help!

Post by reg216uk » 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

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

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

Post by pbottcher » 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"?
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

reg216uk
Posts: 22
Joined: 2013-09-26 18:45

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

Post by reg216uk » 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.

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

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

Post by pbottcher » 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.
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

reg216uk
Posts: 22
Joined: 2013-09-26 18:45

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

Post by reg216uk » 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

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

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

Post by pbottcher » 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;
	}
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

reg216uk
Posts: 22
Joined: 2013-09-26 18:45

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

Post by reg216uk » 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

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

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

Post by pbottcher » 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?
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

reg216uk
Posts: 22
Joined: 2013-09-26 18:45

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

Post by reg216uk » 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.

Image

Once again thank you for your help

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

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

Post by pbottcher » 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.
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

reg216uk
Posts: 22
Joined: 2013-09-26 18:45

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

Post by reg216uk » 2020-01-24 09:17

Ok, thank you for your response :) I will now move onto my next problem haha.

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

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

Post by pbottcher » 2020-07-12 12:42

Hi,

can you post your table + fields, so it is easier to identify if there is an error
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

User avatar
ronwill
Veteran Member
Posts: 228
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

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

Post by ronwill » 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,
Ron - Gloucestershire, UK: AppGini Pro V 23.15 Rev 1484 - LOVING IT!
Plugins: Mass Update + Search Page Maker + Summary Reports + Calendar + Messages
Bizzworxx: AppGiniHelper + Inline Detail View
Alejandro Landini: To-Do List + MPI + TV Field Editor
Other: Udemy Course

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

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

Post by pbottcher » 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;
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

User avatar
ronwill
Veteran Member
Posts: 228
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

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

Post by ronwill » 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
Ron - Gloucestershire, UK: AppGini Pro V 23.15 Rev 1484 - LOVING IT!
Plugins: Mass Update + Search Page Maker + Summary Reports + Calendar + Messages
Bizzworxx: AppGiniHelper + Inline Detail View
Alejandro Landini: To-Do List + MPI + TV Field Editor
Other: Udemy Course

aduff
Posts: 23
Joined: 2020-10-24 15:01

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

Post by aduff » 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?

User avatar
zibrahim
Veteran Member
Posts: 137
Joined: 2020-01-28 18:30
Location: Malaysia

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

Post by zibrahim » 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.
Zala.
Appgini 24.10.1579, MacOS 14.3.1 Windows 11 on Parallels.

aduff
Posts: 23
Joined: 2020-10-24 15:01

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

Post by aduff » 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;

User avatar
zibrahim
Veteran Member
Posts: 137
Joined: 2020-01-28 18:30
Location: Malaysia

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

Post by zibrahim » 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.
Zala.
Appgini 24.10.1579, MacOS 14.3.1 Windows 11 on Parallels.

aduff
Posts: 23
Joined: 2020-10-24 15:01

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

Post by aduff » 2020-11-12 13:57

Hi zibrahim.

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

rpierce
Veteran Member
Posts: 255
Joined: 2018-11-26 13:55
Location: Washington State

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

Post by rpierce » 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"??

User avatar
zibrahim
Veteran Member
Posts: 137
Joined: 2020-01-28 18:30
Location: Malaysia

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

Post by zibrahim » 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.
Zala.
Appgini 24.10.1579, MacOS 14.3.1 Windows 11 on Parallels.

Post Reply