List Item Selected Class Name Problem

[Pizzadude]

In a List control, I am using List Properties > Client-side computation to conditionally change the font color and background color of a row, based on a value of a field in the row. It works great.

The problem I am having is that when a row is selected where the font and background have been changed by the Client-side computation, it appears that the List Item Selected Class is only applied to part of the selected row.

There are some specific settings here that I need to explain.

I am using MobBlueTreeNodeSelected in List Item Selected Class Name in the Layout of the List control.

I am using a freeform layout. Here is the html:

<div style="display: table; width: 100%;">
	<div style="display: table-cell;">
		<div class="[theme:listBox.base.item.parts.mainClassName|{dialog.style}ListItemLabelMain]"><strong>{FreightBillNum}</strong>&nbsp;&nbsp;&nbsp;&nbsp;{ShipFrom}&nbsp; to&nbsp; {DeliverTo}</div>
		<div class="[theme:listBox.base.item.parts.subClassName|{dialog.style}ListItemLabelSub]">{CarrActiveName}</div>
		</div>
	</div>
</div>

When no conditional settings have been applied, it looks like this:

Untitled1.png

When conditional setting have been applied, it looks like this:

Untitled2.png

MobBlueTreeNodeSelected appears to be applied to the first div, but not the second. It keeps the conditional font color is black, whereas MobBlueTreeNodeSelected sets the color to white.

I need it to apply everything in the row when the row is selected. I only need the conditional settings applied when the row is not selected.

Build 5581-5237

[Davidk]

Re: List Item Selected Class Name Problem

I'm not seeing the issue reported. I'm assuming the style used for the UX is MobBlue... is that right? Also, I'm my List does not look like yours when first rendered. ListItemLabelMain is a bold class. You're setting strong for the FreightBillNum, but all my first line is bold.

Could you create and post a quick UX, using static data, and include the Condition your using... you've not posted that. I know it's fairly straight forward, but there are so many settings in Alpha that could affect this.

Here's what I'm seeing... one of the rows for my data, South Bend Auto, is selected.

ListCond.PNG

Finally, there's one item you should be aware of. {dialog.style} is a feature Alpha added to allow you to change styles and not have to hard code the style name with a class name. This is great... but Alpha broke this feature when the Alpha style was created. If you were using {dialog.style}ListItemSelected... and you decided to change your style to Alpha you would not get anything because there is no "AlphaListItemSelected" class... it is simply "listItemSelected". Also note the lower case "l"... which goes further to mess things up. So... just be cautious when using {dialog.style} because it may come back to bite you. You'd have to go through your project and remove all {dialog.style} entries. Since Alpha does the substitution, they should have coded to check for "Alpha"... but there you go.

[Pizzadude]

Re: List Item Selected Class Name Problem

Here is a simple UX that re-creates the issue.

I don't think I have ever used {dialog.style}.

I removed the <strong> tags and, interestingly, the first line is not bold.

Untitled3.png

TestListSelectedRow.zip

[Davidk]

Re: List Item Selected Class Name Problem

{dialog.style} is being used by Alpha in the layout template chosen. I was just pointing out that it will cause issues if the UX style is changed to Alpha.

The problem with the List row is that MobBlueTreeNodeSelected and MobBlueListItemSelected classes both include a background-image url. This is what is messing things up. When you don't use MobBlueTreeNodeSelected then, by default, MobBlueListItemSelected is used.

An easy fix is to adjust your conditional row styles. Add background-image:none; to each conditional style. This will override what Alpha puts in.

[Pizzadude]

Re: List Item Selected Class Name Problem

Adding background-image:none; is a better situation than having MobBlueTreeNodeSelected applied to only the top part of the row.

The fact that the style applied by the condition overrides the style when the row is selected is really the root cause of the problem. Ideally, in this case it would be the other way round. Or the selected style could be changed conditionally.

Is there are way to have the selected style override the conditional style? It seems to override the default style, i.e. when no conditional style is applied.

[Davidk]

Re: List Item Selected Class Name Problem

I'm not sure I follow. What is the effect you're after?

[Pizzadude]

Re: List Item Selected Class Name Problem

When any row is selected, the List Item Selected Class should be applied to the entire row. It should override any conditional style.

[Davidk]

Re: List Item Selected Class Name Problem

I believe the conditional style gets evaluated last and so it takes precedence... and that kinda makes sense. So, whatever you want a selected row to look like, and if there are conditions for that row, the conditional style is where you need to be.

[Pizzadude]

Re: List Item Selected Class Name Problem

I believe the conditional style gets evaluated last and so it takes precedence...

This does not explain the situation where the selected class only applies to the first div and not the second.

[Davidk]

Re: List Item Selected Class Name Problem

It does if you look at what all the css is doing... and what that class is doing. That class uses a url base64 image for the background image... with properties of repeat-x and top

This is the rendered css. The conditional style css background-color gets applied and then the class background image gets applied. They both cover the full height of the row, but the class overwrites the condition but only for the background image height... and top. It's all a bit of a mess.

background.PNG

[Pizzadude]

Re: List Item Selected Class Name Problem

I'm getting closer to solving this.

Following the example in this video https://www.youtube.com/watch?v=GazE2oSMTzY

I can apply a change to the scale, and then remove it when the row is selected.

I have not been able to figure out how to pass in a background color. That's where I am stuck right now. Maybe a syntax issue?

This is in the onItemDraw event of the list:

var fn = data.Firstname;
if(fn == 'Amanda')  {
var trans = 'scale(.9,.7)'; 
//var trans = 'backgroundColor(#feddff)';
ele.firstChild.style[A5.u.css.properties.transformDOM] = trans;

This is in the onSelect event:

var ele = false;
if(this.selection.length >0)   {
ele = $(this.contId+'.'+this.selection[0]);
ele.firstChild.style[A5.u.css.properties.transformDOM] = '';
}

[Davidk]

Re: List Item Selected Class Name Problem

Doesn't adding background-image:none; solve the issue? What you're attempting to do seems far more complicated.

[Pizzadude]

Re: List Item Selected Class Name Problem

background-image:none; overrides the background that should be applied when a row is selected. I need the selected class to apply to the row, including the selected class background. So no, it does not solve the issue.

[Davidk]

Re: List Item Selected Class Name Problem

I may have mis-understood what you wanted. For example, if the Firstname is "Allison" you want the un-selected row to be pink. If the Firstname is "Nancy" you want the un-selected row to be grey.

But, when that row is selected, you want the background color of the class MobBlueTreeNodeSelected to be used... you want the selected row to turn blue. Is this right?

If so, add in the background-image:none; to your conditions... which will fix the 2 color issue... and then in your Local CSS Definitions add this...

.MobBlueTreeNodeSelected {
 background-color: #2576e7 !important;
}

When the row is selected, the class will be applied, and !important will override the background-image: none;.

This way you get pink and grey when not selected, and blue when selected.

[Pizzadude]

Re: List Item Selected Class Name Problem

This is the solution....

TestListSelectedRowSolved.zip