Row Color Child Rows PLease advice

Discussions related to customizing hooks. Hooks are documented at http://bigprof.com/appgini/help/advanced-topics/hooks/
Post Reply
pvisser
Veteran Member
Posts: 38
Joined: 2013-10-30 12:48

Row Color Child Rows PLease advice

Post by pvisser » 2021-12-26 15:51

Hello my friends.

I have a Table called "Relaties" and a table called "Takenlijst." Now in the takenlijst row view it is wordking file. Now i want te same color change in the Child rows.


Table : Ralatie is the Parent
Table : Takkenlijst is the Child

Please advice..

pvisser
Veteran Member
Posts: 38
Joined: 2013-10-30 12:48

Re: Row Color Child Rows PLease advice

Post by pvisser » 2022-01-01 19:10

Please, Anyone?

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

Re: Row Color Child Rows PLease advice

Post by zibrahim » 2022-01-02 00:16

Hi there,
In my case, I use setInterval function to achieve it.
I put the codes in hooks/PARENT_TABLENAME-tv.js like this.

Code: Select all

// highlight child cell background color according to status
$j(function () {
    setInterval(function () {
        // highlight cell background color according to status
        $j(function () {
            $j('.project_item-status').each(function () {
                var status = $j(this).text();
                if (status == 'In Progress') {
                    $j(this).addClass('warning');
                }
                if (status == 'Completed') {
                    $j(this).addClass('success');
                }
                if (status == 'Delay') {
                    $j(this).addClass('danger');
                }
            });
        });
    }, 1000);
});
Note:
project_item : child tablename
status : child table fieldname
Change them accordingly.

hope this will help. stay safe.
Zala.
Appgini 24.10.1579, MacOS 14.3.1 Windows 11 on Parallels.

pvisser
Veteran Member
Posts: 38
Joined: 2013-10-30 12:48

Re: Row Color Child Rows PLease advice

Post by pvisser » 2022-01-02 10:35

He zibrahim. Thanks my friend. I allready try this many times. I dont no what i do wrong but it wont work. Do you have any ideas?
Please advice..

Greetings.

pvisser
Veteran Member
Posts: 38
Joined: 2013-10-30 12:48

Re: Row Color Child Rows PLease advice

Post by pvisser » 2022-01-02 11:13

Hello i forgot Zibrahim,

parent table : relaties
child table : takenlijst
field is a datefield

I made a file in my hooks folder "parent_takenlijst-tv.js" and i insert this code.

Code: Select all

// highlight child cell background color according to status
$j(function () {
    setInterval(function () {
        // highlight cell background color according to status
$j(function(){
$j('.takenlijst-ta_startdatum').each(function(){
    var ds = $j(this).html();
    /* assuming date format of due_date is month/day/year */
    var dc = new Date(ds.replace(/(\d{1,2})\/(\d{1,2})\/(\d{4})/, '$2/$1/$3'));
    var today = new Date();
    var days_ahead = parseInt((dc - today) / 86400 / 1000);
	if(days_ahead >= 14){
        // 14+ days left, use None highlighting
        //$j(this).addClass('text-success').parent().addClass('stripe');
		$j(this).children().addClass('stripe');
	}else if(days_ahead >= 8){
		// 8+ days left, use green highlighting
		//$j(this).addClass('text-success').parent().addClass('success');
		$j(this).children().addClass('success');
    }else if(days_ahead >= 3){
        // 3 days left, use yellow highlighting
        //$j(this).addClass('text-warning').parent().addClass('warning');
		$j(this).children().addClass('warning');
    }else{
        // less than 3 days left, use red highlighting
        //$j(this).addClass('text-danger').parent().addClass('danger');
		$j(this).children().addClass('danger');

 }
});
});
});
    }, 1000);
});
What did i do wrong here.
I think this should work. but it is not.

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Row Color Child Rows PLease advice

Post by jsetzer » 2022-01-02 11:14

You should add console.log(status); in innermost loop to see if it gets called at all and to check the value of status.

Also remember that child table will be reloaded dynamically after certain events and therefore your code will only fire on initial page load, not on subsequent reloads.

Additionally, did you check if the cells have the class you have given to them? Maybe your code works, but some CSS rules override those bootstrap-defined styles.
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

pvisser
Veteran Member
Posts: 38
Joined: 2013-10-30 12:48

Re: Row Color Child Rows PLease advice

Post by pvisser » 2022-01-02 11:34

Thanks JS,

I about the console.log(status);, Can you give me an example? what line or where to put this please? The strange thing is that it works with this code fine in the footer-extras.php for the table takenlijst.php. see example please :

Code: Select all

<script>
$j(function(){
$j('td.takenlijst-ta_startdatum a').each(function(){
    var ds = $j(this).html();
    /* assuming date format of due_date is month/day/year */
    var dc = new Date(ds.replace(/(\d{1,2})\/(\d{1,2})\/(\d{4})/, '$2/$1/$3'));
    var today = new Date();
    var days_ahead = parseInt((dc - today) / 86400 / 1000);
	if(days_ahead >= 14){
        // 14+ days left, use None highlighting
        //$j(this).addClass('text-success').parent().addClass('stripe');
		$j(this).parents().addClass('stripe');
	}else if(days_ahead >= 8){
		// 8+ days left, use green highlighting
		//$j(this).addClass('text-success').parent().addClass('success');
		$j(this).parents().addClass('success');
    }else if(days_ahead >= 3){
        // 3 days left, use yellow highlighting
        //$j(this).addClass('text-warning').parent().addClass('warning');
		$j(this).parents().addClass('warning');
    }else{
        // less than 3 days left, use red highlighting
        //$j(this).addClass('text-danger').parent().addClass('danger');
		$j(this).parents().addClass('danger');

 }
});
});
</script>
tlcolor1.png
tlcolor1.png (81.9 KiB) Viewed 2562 times
But in the parent table "Relaties" it does not.

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Row Color Child Rows PLease advice

Post by jsetzer » 2022-01-02 11:44

My hints relate to Zibrahim's code. You said you have tried this many times. So you can see the line var status = ... and put the console.log below that line.
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

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

Re: Row Color Child Rows PLease advice

Post by zibrahim » 2022-01-03 00:04

Hi pvisser,
You said that you put the code in the file called parent_takenlijst-tv.js.
But you also mentioned that the parent table is relaties.
You should put the code in hooks/relaties-tv.js as relaties is your parent table.
Zala.
Appgini 24.10.1579, MacOS 14.3.1 Windows 11 on Parallels.

pvisser
Veteran Member
Posts: 38
Joined: 2013-10-30 12:48

Re: Row Color Child Rows PLease advice

Post by pvisser » 2022-01-03 19:16

Thank you so mutch Zibrahim? Your code works like a charm. Greetings..

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

Re: Row Color Child Rows PLease advice

Post by zibrahim » 2022-01-04 02:35

Glad to hear that.
stay safe.
Zala.
Appgini 24.10.1579, MacOS 14.3.1 Windows 11 on Parallels.

Post Reply