Hawk
Posts: 0
Joined: Mon Aug 04, 2014 11:23 am

Color list Items according to DB value

I need to color (some) list items based on their status in DB. There is a column in DB table called (MSG_status). When the value is (Unread), I need to color the items in white.

I tried the following on (visible) property :

preif(value === 'Unread')
var x = '{$(this).css("background-color", "#ffffff");}';
return x;/pre

In mapping as follows:

Image

But this returns error in console (unexpected token $).
I am not sure if this the right way to add my JS.

I deeply appreciate your help!

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

Color list Items according to DB value

Hawk,

The visible property is responsible for the display of an item, i.e. can you see it or not. You should map MSG_status to the grid itself( parent ), in your case it is mobilegrid_284_325, and in js specify the following code:
pre$(element).css('background-color', 'red');/pre

Hawk
Posts: 0
Joined: Mon Aug 04, 2014 11:23 am

Color list Items according to DB value

Evgene,

I cannot map MSG_status to mobilegrid_284_325. Simply, the arrow does not link to it for some reason! When I drag the arrow and leave it, it disappears!

Thanks

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

Color list Items according to DB value

Hawk,

Please tell us the project name, we'll take a look at it.

Hawk
Posts: 0
Joined: Mon Aug 04, 2014 11:23 am

Color list Items according to DB value

It's (JTI Partner).
credentials: 1234/star1234
Navigation: NavBar: Messages - Inbox

Regards,

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

Color list Items according to DB value

Hawk,

You may do this way:
There you should add js code http://take.ms/CrbZ8
Inside it write:
preif(value. MSG_status === 'Unread') {
$(element).find('[name="mobilegrid_284_325"]').addClass('highlighted-red');
}/pre
And in your css file add style to the specific class, for example
pretable.highlighted red tbody tr td div.cell-wrapper {
background-color: blue;
}/pre
After you will see the changes you can add other desired styles

Hawk
Posts: 0
Joined: Mon Aug 04, 2014 11:23 am

Color list Items according to DB value

Hi Evgene,

Many thanks, that worked in terms of coloring the 'Unread' items. However, when I click on one of the item, the color does not change as it happens for other items ('Read'). I use the following Js onclick mobilegridcell_285_326 to change the selected item color on click:

pre
$('[name="mobilegridcell_285_326"]').css("background-color", "#c8ddd4");
$(this).css("background-color", "#ffffff");
/pre

The script above works fine for those items that have not been colored in mapping (using your script above) and remained in their original colores (their status is not 'Unread'. But it does not work for those have been colored in mapping.

I tried the following on page show to change the color back after 5 sec:

pre
setTimeout(function() {
$(".highlighted-red").css("background-color", "#c8ddd4");
}, 5000);
/pre

But it did not work.

What I am trying to achieve is
ol
liTo revert those item which have been painted (in mapping using the script you advised) to their original color after 5 sec of page show. /li

liTo change the color of the selected item to white on click regardless the current color/li
/ol

Many thanks for your help!

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

Color list Items according to DB value

Hawk,

Please delete element's class "highlighted-red", because it gives other color.

Hawk
Posts: 0
Joined: Mon Aug 04, 2014 11:23 am

Color list Items according to DB value

delete from where? It's the class that gives the item its color when it's 'Unread'. I just want to override this color with new one on page show.

Kateryna Grynko
Posts: 0
Joined: Thu Nov 15, 2012 9:13 am

Color list Items according to DB value

Hi Hawk,

[quote:]To revert those item which have been painted (in mapping using the script you advised) to their original color after 5 sec of page show.[/quote]You should delete a class added beforehand in order to return the original colour:pre$(".highlighted-red").removeClass('highlighted-red');/preIf you just need to set another colour please delete this class and add a new one. Please remember to add new styles in CSS.

Return to “Issues”