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

pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 1249
Joined: 2018-04-01 10:12

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

Post by pböttcher » 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"?

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.

pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 1249
Joined: 2018-04-01 10:12

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

Post by pböttcher » 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.

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

pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 1249
Joined: 2018-04-01 10:12

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

Post by pböttcher » 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;
	}

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

pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 1249
Joined: 2018-04-01 10:12

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

Post by pböttcher » 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?

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

pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 1249
Joined: 2018-04-01 10:12

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

Post by pböttcher » 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.

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.

pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 1249
Joined: 2018-04-01 10:12

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

Post by pböttcher » 2020-07-12 12:42

Hi,

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

User avatar
ronwill
Veteran Member
Posts: 194
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 5.95 Rev 1136 - LOVING IT!
Plugins: Mass Update + Search Page Maker + Summary Reports + Calendar
Bizzworxx: AppGiniHelper + Inline Detail View
Alejandro Landini: To-Do List + MPI + TV Field Editor
Other: Udemy Course

pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 1249
Joined: 2018-04-01 10:12

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

Post by pböttcher » 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;

User avatar
ronwill
Veteran Member
Posts: 194
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 5.95 Rev 1136 - LOVING IT!
Plugins: Mass Update + Search Page Maker + Summary Reports + Calendar
Bizzworxx: AppGiniHelper + Inline Detail View
Alejandro Landini: To-Do List + MPI + TV Field Editor
Other: Udemy Course

aduff
Posts: 14
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: 75
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 5.94, MacOS 11.2 Windows 10 on Parallels.

aduff
Posts: 14
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: 75
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 5.94, MacOS 11.2 Windows 10 on Parallels.

aduff
Posts: 14
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: 64
Joined: 2018-11-26 13:55

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: 75
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 5.94, MacOS 11.2 Windows 10 on Parallels.

Post Reply